Assign IDs to each screenshot

src/App.js

@@ -2,26 +2,25 @@ 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() {
   const logoProps = {
     href: "https://github.com/lingostack",
     target: "_blank",
   };
+  const Header = (
+    <PageHeader logo={"LingoQA Dashboard"} logoProps={logoProps} />
+  );
   return (
-    <BrowserRouter>
-      <Switch>
-        <Page
-          header={<PageHeader logo={"LingoQA Dashboard"} logoProps={logoProps} />}>
+    <Page header={Header}>
+      <BrowserRouter>
+        <Switch>
           <Route exact path="/" component={Products} />
-          <Route
-            path="/products/:productid/screenshots"
-            component={Versions}
-          />
-        </Page>
-      </Switch>
-    </BrowserRouter>
+          <Route path="/products/:productid/screenshots" component={Versions} />
+        </Switch>
+      </BrowserRouter>
+    </Page>
   );
 }

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) {
       />
       <div className="en_screens mb-4">
         {elementsLeft.map((image, index) => (
-          <img src={image} alt="" key={index} className="image" />
+          <div key={index}>
+            <div>
+              <Badge id={IdL++}>id: {IdL}</Badge>
+            </div>
+            <img src={image} alt="" key={index} className="image" />
+          </div>
         ))}
       </div>
       <Pagination
@@ -102,7 +130,7 @@ export default function Paginate(props) {
         onLastClick={onLastClick}
       />
     </>
-  )
+  );
 
   const paginateOther = () => (
     <>
@@ -123,27 +151,46 @@ export default function Paginate(props) {
       <div id="image-compare">
         <Split gutter="md">
           <div>
-            {elementsLeft.length &&
+            {elementsLeft.length && (
               <SplitItem>
                 <div>
                   {elementsLeft.map((image, index) => (
-                    <img src={image} alt="" key={index} className="image" />
+                    <div key={index + 1}>
+                      <div>
+                        <Badge id={IdL++}>id: {IdL}</Badge>
+                      </div>
+                      <img
+                        src={image}
+                        alt=""
+                        key={index + 1}
+                        className="image"
+                      />
+                    </div>
                   ))}
                 </div>
               </SplitItem>
-
-            }
+            )}
           </div>
           <div>
-            {elementsRight.length &&
+            {elementsRight.length && (
               <SplitItem>
                 <div>
                   {elementsRight.map((image, index) => (
-                    <img src={image} alt="" key={index} className="image" />
+                    <div key={index + 2}>
+                      <div>
+                        <Badge id={IdR++}>id: {IdR}</Badge>
+                      </div>
+                      <img
+                        src={image}
+                        alt=""
+                        key={index + 2}
+                        className="image"
+                      />
+                    </div>
                   ))}
                 </div>
               </SplitItem>
-            }
+            )}
           </div>
         </Split>
       </div>
@@ -161,21 +208,23 @@ export default function Paginate(props) {
         onLastClick={onLastClick}
       />
     </>
-  )
+  );
 
   if (props.screenshotsEN.length === 0) {
     return <SimpleEmptyState />;
-  }
-  else if ((typeof itemCount !== "undefined") && (props.screenshotsOther.length === 0)) {
+  } else if (
+    typeof itemCount !== "undefined" &&
+    props.screenshotsOther.length === 0
+  ) {
     return <div className="mb-4">{paginateEN()}</div>;
-  }
-  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 <div className="mb-4">{paginateEN()}</div>;
-  }
-  else {
+  } else {
     if (typeof itemCount !== "undefined")
-      return <div className="mb-4">{paginateOther()}</div>
-    else
-      return null
+      return <div className="mb-4">{paginateOther()}</div>;
+    else return null;
   }
 }

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) {
           </DataToolbarItem>
           <DataToolbarItem>
             <FormSelect
-              value={selectProductsVersion ? selectProductsVersion : props.selectProductsVersion}
-              onChange={(e, event) => (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"
+            >
               <option>Select</option>
               {props.productsVersion.map((option, index) => (
                 <FormSelectOption
@@ -37,14 +45,18 @@ export default function PaginateForm(props) {
           </DataToolbarItem>
           <DataToolbarItem variant="label" id="locale">
             Select a Locale
-                </DataToolbarItem>
+          </DataToolbarItem>
           <DataToolbarItem>
             <FormSelect
               value={selectLocales ? selectLocales : props.selectLocales}
-              onChange={(e, event) => (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"
+            >
               <option>Select</option>
               {props.locales.map((option, index) => (
                 <FormSelectOption
@@ -56,10 +68,12 @@ export default function PaginateForm(props) {
             </FormSelect>
           </DataToolbarItem>
           <DataToolbarItem>
-            <Button type="submit" value="Submit">Submit</Button>
+            <Button type="submit" value="Submit">
+              Submit
+            </Button>
           </DataToolbarItem>
         </DataToolbarContent>
       </Form>
     </>
-  )
+  );
 }

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) {
           <Form onSubmit={props.handleSubmit}>
             <FormGroup label="Select Version" fieldId="version">
               <FormSelect
-                value={selectProductsVersion ? selectProductsVersion : props.selectProductsVersion}
-                onChange={(e, event) => (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"
+              >
                 <option>Select</option>
                 {props.productsVersion.map((option, index) => (
                   <FormSelectOption
@@ -39,13 +46,17 @@ export default function SimpleForm(props) {
                 ))}
               </FormSelect>
             </FormGroup>
-            <FormGroup label="Select Locale" fieldId="locale" >
+            <FormGroup label="Select Locale" fieldId="locale">
               <FormSelect
                 value={selectLocales ? selectLocales : props.selectLocales}
-                onChange={(e, event) => (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"
+              >
                 <option>Select</option>
                 {props.locales.map((option, index) => (
                   <FormSelectOption
@@ -63,5 +74,5 @@ export default function SimpleForm(props) {
         </CardBody>
       </Card>
     </Bullseye>
-  )
+  );
 }