diff --git a/IDs.png b/IDs.png new file mode 100644 index 0000000..3479fea Binary files /dev/null and b/IDs.png differ diff --git a/src/App.js b/src/App.js index 52ceb37..52063f4 100644 --- a/src/App.js +++ b/src/App.js @@ -2,7 +2,7 @@ import { Route, Switch, BrowserRouter } from "react-router-dom"; import "@patternfly/react-core/dist/styles/base.css"; import { PageHeader, Page } from "@patternfly/react-core"; import React from "react"; -import Products from "./Screens/Products" +import Products from "./Screens/Products"; import Versions from "./Screens/Versions"; export default function PageLayoutSimpleNav() { @@ -10,18 +10,17 @@ export default function PageLayoutSimpleNav() { href: "https://github.com/lingostack", target: "_blank", }; + const Header = ( + + ); return ( - - - }> + + + - - - - + + + + ); } diff --git a/src/Components/Paginate.js b/src/Components/Paginate.js index 54c0248..a76493a 100644 --- a/src/Components/Paginate.js +++ b/src/Components/Paginate.js @@ -1,6 +1,6 @@ import React, { useState } from "react"; import { Split, SplitItem } from "@patternfly/react-core"; -import { Pagination, PaginationVariant } from "@patternfly/react-core"; +import { Pagination, PaginationVariant, Badge } from "@patternfly/react-core"; import SimpleEmptyState from "./SimpleEmptyState"; export default function Paginate(props) { @@ -12,39 +12,49 @@ export default function Paginate(props) { const [offset, setOffset] = useState(); const [page, setPage] = useState(1); const [perPage, setPerPage] = useState(10); + let [IdL, setIdL] = useState(0); + let [IdR, setIdR] = useState(0); //Set the page const onSetPage = (_event, pageNumber) => { - setPage(pageNumber) + setPage(pageNumber); }; //Items to be displayed per page const onPerPageSelect = (_event, perPage) => { - setPerPage(perPage) + setPerPage(perPage); }; - //Next set of Items + //Next set of Items const onNextClick = (_event, page) => { - setPage(page) - setOffset((page - 1) * (perPage)) + setIdL(IdL, IdL++); + setIdR(IdR, IdR++); + setPage(page); + setOffset((page - 1) * perPage); }; //Previous set of Items const onPreviousClick = (_event, page) => { - setPage(page) - setOffset((page - 1) * (perPage)); + setIdL((page - 1) * perPage); + setIdR((page - 1) * perPage); + setPage(page); + setOffset((page - 1) * perPage); }; //First set of Items const onFirstClick = (_event, page) => { - setPage(page) - setOffset(0) + setIdL(0); + setIdR(0); + setPage(page); + setOffset(0); }; //Last set of items const onLastClick = (_event, page) => { - setPage(page) - setOffset((page - 1) * (perPage)); + setIdL((page - 1) * perPage); + setIdR((page - 1) * perPage); + setPage(page); + setOffset((page - 1) * perPage); }; React.useEffect(() => { @@ -57,16 +67,29 @@ export default function Paginate(props) { React.useEffect(() => { const SetImages = () => { if (props.screenshotsEN.length !== 0) { - const elementsLeft = props.screenshotsEN[0].images.slice(offset, (offset + perPage)); - setElementLeft(elementsLeft) + const elementsLeft = props.screenshotsEN[0].images.slice( + offset, + offset + perPage + ); + setElementLeft(elementsLeft); } if (props.screenshotsOther.length !== 0) { - const elementsRight = props.screenshotsOther[0].images.slice(offset, (offset + perPage)); - setElementRight(elementsRight) + const elementsRight = props.screenshotsOther[0].images.slice( + offset, + offset + perPage + ); + setElementRight(elementsRight); } - } + }; SetImages(); - }, [offset, perPage, screenshotsEN, screenshotsOther]) + }, [ + offset, + perPage, + screenshotsEN, + screenshotsOther, + props.screenshotsEN, + props.screenshotsOther, + ]); const paginateEN = () => ( <> @@ -85,7 +108,12 @@ export default function Paginate(props) { />
{elementsLeft.map((image, index) => ( - +
+
+ id: {IdL} +
+ +
))}
- ) + ); const paginateOther = () => ( <> @@ -123,27 +151,46 @@ export default function Paginate(props) {
- {elementsLeft.length && + {elementsLeft.length && (
{elementsLeft.map((image, index) => ( - +
+
+ id: {IdL} +
+ +
))}
- - } + )}
- {elementsRight.length && + {elementsRight.length && (
{elementsRight.map((image, index) => ( - +
+
+ id: {IdR} +
+ +
))}
- } + )}
@@ -161,21 +208,23 @@ export default function Paginate(props) { onLastClick={onLastClick} /> - ) + ); if (props.screenshotsEN.length === 0) { return ; - } - else if ((typeof itemCount !== "undefined") && (props.screenshotsOther.length === 0)) { + } else if ( + typeof itemCount !== "undefined" && + props.screenshotsOther.length === 0 + ) { return
{paginateEN()}
; - } - else if ((typeof itemCount !== "undefined") && (props.screenshotsOther[0].id === props.screenshotsEN[0].id)) { + } else if ( + typeof itemCount !== "undefined" && + props.screenshotsOther[0].id === props.screenshotsEN[0].id + ) { return
{paginateEN()}
; - } - else { + } else { if (typeof itemCount !== "undefined") - return
{paginateOther()}
- else - return null + return
{paginateOther()}
; + else return null; } } diff --git a/src/Components/PaginateForm.js b/src/Components/PaginateForm.js index 72b3ffb..1975a24 100644 --- a/src/Components/PaginateForm.js +++ b/src/Components/PaginateForm.js @@ -5,7 +5,7 @@ import { FormSelectOption, Button, DataToolbarContent, - DataToolbarItem + DataToolbarItem, } from "@patternfly/react-core"; export default function PaginateForm(props) { @@ -20,11 +20,19 @@ export default function PaginateForm(props) { (props.handleVersionChange(e, event), setSelectProductsVersion(e, event))} + value={ + selectProductsVersion + ? selectProductsVersion + : props.selectProductsVersion + } + onChange={(e, event) => { + props.handleVersionChange(e, event); + setSelectProductsVersion(e, event); + }} aria-label="Version" id="version" - name="version"> + name="version" + > {props.productsVersion.map((option, index) => ( Select a Locale - + (props.handleLocaleChange(e, event), setSelectLocales(e, event))} + onChange={(e, event) => { + props.handleLocaleChange(e, event); + setSelectLocales(e, event); + }} aria-label="Locale" id="locale" - name="locale"> + name="locale" + > {props.locales.map((option, index) => ( - + - ) + ); } diff --git a/src/Components/SimpleForm.js b/src/Components/SimpleForm.js index c5242e6..52651b0 100644 --- a/src/Components/SimpleForm.js +++ b/src/Components/SimpleForm.js @@ -1,4 +1,3 @@ - import React, { useState } from "react"; import { Form, @@ -9,7 +8,7 @@ import { Button, CardBody, Card, - Bullseye + Bullseye, } from "@patternfly/react-core"; import SimpleEmptyState from "./SimpleEmptyState"; @@ -24,11 +23,19 @@ export default function SimpleForm(props) {
(props.handleVersionChange(e, event), setSelectProductsVersion(e, event))} + value={ + selectProductsVersion + ? selectProductsVersion + : props.selectProductsVersion + } + onChange={(e, event) => { + props.handleVersionChange(e, event); + setSelectProductsVersion(e, event); + }} aria-label="Version" id="version" - name="version"> + name="version" + > {props.productsVersion.map((option, index) => ( - + (props.handleLocaleChange(e, event), setSelectLocales(e, event))} + onChange={(e, event) => { + props.handleLocaleChange(e, event); + setSelectLocales(e, event); + }} aria-label="Locale" id="locale" - name="locale"> + name="locale" + > {props.locales.map((option, index) => ( - ) + ); } diff --git a/src/Screens/Versions.js b/src/Screens/Versions.js index 8a89ff4..7f73d54 100644 --- a/src/Screens/Versions.js +++ b/src/Screens/Versions.js @@ -1,7 +1,7 @@ import React, { useState } from "react"; import axios from "axios"; import BASE_URL from "../API/BASE_URL"; -import Paginate from "../Components/Paginate" +import Paginate from "../Components/Paginate"; import Breadcrumbs from "../Components/Breadcrumbs"; import { useHistory } from "react-router"; import constant from "../Constants/EnglishScreens.json"; @@ -10,13 +10,13 @@ import PaginateForm from "../Components/PaginateForm"; import { PageSection, PageSectionVariants } from "@patternfly/react-core"; export default function Versions(props) { - const [elementsRight, setElementsRight] = useState([]); - const [elementsLeft, setElementsLeft] = useState([]); - const [elements, setElements] = useState([]); - const [offset, setOffset] = useState(0); - const [currentPage, setCurrentPage] = useState(0); - const [page, setPage] = useState(1); - const [perPage, setPerPage] = useState(10); + const [elementsRight] = useState([]); + const [elementsLeft] = useState([]); + const [elements] = useState([]); + const [offset] = useState(0); + const [currentPage] = useState(0); + const [page] = useState(1); + const [perPage] = useState(10); const [productsVersion, setProductsVersion] = useState([]); const [locales, setLocales] = useState([]); const [selectProductsVersion, setSelectProductsVersion] = useState(""); @@ -32,109 +32,119 @@ export default function Versions(props) { } function handleDropdownChangeLocale(e) { - setSelectLocales(e) + setSelectLocales(e); } //To get Versions and Locales of selected Product React.useEffect(() => { const fetchProductsVersionData = async () => { - const productsVersionData = await axios(`${BASE_URL}/products/${previousProductId}/product_versions`).catch(e => { console.error(e) }); + const productsVersionData = await axios( + `${BASE_URL}/products/${previousProductId}/product_versions` + ).catch((e) => { + console.error(e); + }); - const LocalesData = await axios(`${BASE_URL}/locales`).catch(e => { console.error(e) }); + const LocalesData = await axios(`${BASE_URL}/locales`).catch((e) => { + console.error(e); + }); //Return to Products if no version for selected Product is available if (productsVersionData.data.length !== 0) { setProductsVersion(productsVersionData.data); - setLocales(LocalesData.data) - } - else { - alert(" No Versions available for selected Product. Please select other Product"); + setLocales(LocalesData.data); + } else { + alert( + " No Versions available for selected Product. Please select other Product" + ); history.push({ - pathname: "/" - }) + pathname: "/", + }); } }; fetchProductsVersionData(); - }, [previousProductId]); + }, [previousProductId, history]); // To get selected Version and Locale to get screenshots const onFormSubmit = async (event) => { event.preventDefault(); - let error; try { const screenshotsData = await axios(`${BASE_URL}/screenshots`, { params: { product_version_id: selectProductsVersion, - locale_id: selectLocales + locale_id: selectLocales, }, - }) + }); const screenshotsENData = await axios(`${BASE_URL}/screenshots`, { params: { product_version_id: selectProductsVersion, locale_id: constant.englishLocaleId, }, - }) + }); if (!screenshotsENData.data.length) { - alert("The selected Version have no English Screenshots") - } - else { + alert("The selected Version have no English Screenshots"); + } else { setScreenshotsOther(screenshotsData.data); setScreenshotsEN(screenshotsENData.data); setItemCount(screenshotsENData.data[0].images.length); } + } catch (err) { + return err; } - catch (err) { - error = err; - } - } + }; return ( <> - {locales && productsVersion && + {locales && + productsVersion && ((screenshotsOther && screenshotsOther.length !== 0) || - (screenshotsEN && screenshotsEN.length !== 0)) && - ( + (screenshotsEN && screenshotsEN.length !== 0)) && ( handleDropdownChangeVersion(e, event)} - handleLocaleChange={(e, event) => handleDropdownChangeLocale(e, event)} + handleVersionChange={(e, event) => + handleDropdownChangeVersion(e, event) + } + handleLocaleChange={(e, event) => + handleDropdownChangeLocale(e, event) + } handleSubmit={onFormSubmit} /> )} {(screenshotsOther && screenshotsOther.length !== 0) || - (screenshotsEN && screenshotsEN.length !== 0) ? - ( - + ) : ( + locales && + productsVersion && ( + + handleDropdownChangeVersion(e, event) + } + handleLocaleChange={(e, event) => + handleDropdownChangeLocale(e, event) + } + handleSubmit={onFormSubmit} /> - ) : - ( - locales && productsVersion && - ( - handleDropdownChangeVersion(e, event)} - handleLocaleChange={(e, event) => handleDropdownChangeLocale(e, event)} - handleSubmit={onFormSubmit} - /> - )) - } + ) + )} );