UI components

.gitignore

@@ -21,3 +21,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+#environment variable
+.env

package.json

@@ -1,17 +1,40 @@
 {
-  "name": "imagematch",
+  "name": "frontend-demo",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "react": "^16.10.1",
-    "react-dom": "^16.10.1",
-    "react-scripts": "3.1.2"
+    "@patternfly/react-core": "^3.129.3",
+    "@patternfly/react-topology": "^2.14.66",
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.3.2",
+    "@testing-library/user-event": "^7.1.2",
+    "activestorage": "^5.2.4-1",
+    "axios": "^0.19.1",
+    "bootstrap": "^4.4.1",
+    "dotenv": "^8.2.0",
+    "react": "^16.12.0",
+    "react-bootstrap": "^1.0.1",
+    "react-dom": "^16.12.0",
+    "react-hook-form": "^6.0.8",
+    "react-image": "^2.2.2",
+    "react-image-mapper": "^0.0.15",
+    "react-js-pagination": "^3.0.3",
+    "react-lazy-load-image-component": "^1.5.0-beta.0",
+    "react-lazyload": "^2.6.7",
+    "react-modal": "^3.11.2",
+    "react-multiselect-checkboxes": "^0.1.1",
+    "react-paginate": "^6.3.2",
+    "react-router": "^5.1.2",
+    "react-router-dom": "^5.1.2",
+    "react-scripts": "3.4.0"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "storybook": "start-storybook -p 9009 -s public",
+    "build-storybook": "build-storybook -s public"
   },
   "eslintConfig": {
     "extends": "react-app"
@@ -27,5 +50,13 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@storybook/addon-actions": "^5.3.8",
+    "@storybook/addon-links": "^5.3.8",
+    "@storybook/addons": "^5.3.8",
+    "@storybook/preset-create-react-app": "^1.5.2",
+    "@storybook/react": "^5.3.8",
+    "eslint-plugin-react-hooks": "^4.0.8"
   }
 }

src/API/BASE_URL.js

@@ -0,0 +1,2 @@
+const BASE_URL = process.env.REACT_APP_BASE_URL;
+export default BASE_URL;

src/App.js

@@ -1,26 +1,27 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+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 Versions from "./Screens/Versions";
 
-function App() {
+export default function PageLayoutSimpleNav() {
+  const logoProps = {
+    href: "https://github.com/lingostack",
+    target: "_blank",
+  };
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <BrowserRouter>
+      <Switch>
+        <Page
+          header={<PageHeader logo={"LingoQA Dashboard"} logoProps={logoProps} />}>
+          <Route exact path="/" component={Products} />
+          <Route
+            path="/products/:productid/screenshots"
+            component={Versions}
+          />
+        </Page>
+      </Switch>
+    </BrowserRouter>
   );
 }
-
-export default App;

src/Components/Breadcrumbs.js

@@ -0,0 +1,23 @@
+import React from "react";
+import { Link } from 'react-router-dom';
+import { AngleRightIcon } from '@patternfly/react-icons'
+
+export default function Breadcrumbs() {
+    return (
+        <nav className="pf-c-breadcrumb" aria-label="breadcrumb">
+            <ol className="pf-c-breadcrumb__list">
+                <li className="pf-c-breadcrumb__item">
+                    <Link to="/" className="pf-c-breadcrumb__link">Products</Link>
+                    <span className="pf-c-breadcrumb__item-divider">
+                        <AngleRightIcon />
+                    </span>
+                </li>
+                <li className="pf-c-breadcrumb__item">
+                    <span className="pf-c-breadcrumb__link pf-m-current" aria-current="page">
+                        Versions
+                    </span>
+                </li>
+            </ol>
+        </nav>
+    )
+}

src/Components/Paginate.js

@@ -0,0 +1,181 @@
+import React, { useState } from "react";
+import { Split, SplitItem } from "@patternfly/react-core";
+import { Pagination, PaginationVariant } from "@patternfly/react-core";
+import SimpleEmptyState from "./SimpleEmptyState";
+
+export default function Paginate(props) {
+  const [screenshotsOther, setScreenshotsOther] = useState([]);
+  const [screenshotsEN, setScreenshotsEN] = useState([]);
+  const [itemCount, setItemCount] = useState();
+  const [elementsRight, setElementRight] = useState([]);
+  const [elementsLeft, setElementLeft] = useState([]);
+  const [offset, setOffset] = useState();
+  const [page, setPage] = useState(1);
+  const [perPage, setPerPage] = useState(10);
+
+  //Set the page
+  const onSetPage = (_event, pageNumber) => {
+    setPage(pageNumber)
+  };
+
+  //Items to be displayed per page
+  const onPerPageSelect = (_event, perPage) => {
+    setPerPage(perPage)
+  };
+
+  //Next set of Items 
+  const onNextClick = (_event, page) => {
+    setPage(page)
+    setOffset((page - 1) * (perPage))
+  };
+
+  //Previous set of Items
+  const onPreviousClick = (_event, page) => {
+    setPage(page)
+    setOffset((page - 1) * (perPage));
+  };
+
+  //First set of Items
+  const onFirstClick = (_event, page) => {
+    setPage(page)
+    setOffset(0)
+  };
+
+  //Last set of items
+  const onLastClick = (_event, page) => {
+    setPage(page)
+    setOffset((page - 1) * (perPage));
+  };
+
+  React.useEffect(() => {
+    setScreenshotsOther(props.screenshotsOther);
+    setScreenshotsEN(props.screenshotsEN);
+    setItemCount(props.itemCount);
+    setOffset(0);
+  }, [props.screenshotsEN, props.screenshotsOther, props.itemCount]);
+
+  React.useEffect(() => {
+    const SetImages = () => {
+      if (props.screenshotsEN.length !== 0) {
+        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)
+      }
+    }
+    SetImages();
+  }, [offset, perPage, screenshotsEN, screenshotsOther])
+
+  const paginateEN = () => (
+    <>
+      <Pagination
+        widgetId="pagination-options-menu-bottom"
+        itemCount={itemCount}
+        perPage={perPage}
+        page={page}
+        variant={PaginationVariant.bottom}
+        onSetPage={onSetPage}
+        onPerPageSelect={onPerPageSelect}
+        onNextClick={onNextClick}
+        onPreviousClick={onPreviousClick}
+        onFirstClick={onFirstClick}
+        onLastClick={onLastClick}
+      />
+      <div className="en_screens mb-4">
+        {elementsLeft.map((image, index) => (
+          <img src={image} alt="" key={index} className="image" />
+        ))}
+      </div>
+      <Pagination
+        widgetId="pagination-options-menu-bottom"
+        itemCount={itemCount}
+        perPage={perPage}
+        page={page}
+        variant={PaginationVariant.bottom}
+        onSetPage={onSetPage}
+        onPerPageSelect={onPerPageSelect}
+        onNextClick={onNextClick}
+        onPreviousClick={onPreviousClick}
+        onFirstClick={onFirstClick}
+        onLastClick={onLastClick}
+      />
+    </>
+  )
+
+  const paginateOther = () => (
+    <>
+      <Pagination
+        widgetId="pagination-options-menu-bottom"
+        itemCount={itemCount}
+        perPage={perPage}
+        page={page}
+        variant={PaginationVariant.bottom}
+        onSetPage={onSetPage}
+        onPerPageSelect={onPerPageSelect}
+        onNextClick={onNextClick}
+        onPreviousClick={onPreviousClick}
+        onFirstClick={onFirstClick}
+        onLastClick={onLastClick}
+      />
+      {/* For screenshots display side by side */}
+      <div id="image-compare">
+        <Split gutter="md">
+          <div>
+            {elementsLeft.length &&
+              <SplitItem>
+                <div>
+                  {elementsLeft.map((image, index) => (
+                    <img src={image} alt="" key={index} className="image" />
+                  ))}
+                </div>
+              </SplitItem>
+
+            }
+          </div>
+          <div>
+            {elementsRight.length &&
+              <SplitItem>
+                <div>
+                  {elementsRight.map((image, index) => (
+                    <img src={image} alt="" key={index} className="image" />
+                  ))}
+                </div>
+              </SplitItem>
+            }
+          </div>
+        </Split>
+      </div>
+      <Pagination
+        widgetId="pagination-options-menu-bottom"
+        itemCount={itemCount}
+        perPage={perPage}
+        page={page}
+        variant={PaginationVariant.bottom}
+        onSetPage={onSetPage}
+        onPerPageSelect={onPerPageSelect}
+        onNextClick={onNextClick}
+        onPreviousClick={onPreviousClick}
+        onFirstClick={onFirstClick}
+        onLastClick={onLastClick}
+      />
+    </>
+  )
+
+  if (props.screenshotsEN.length === 0) {
+    return <SimpleEmptyState />;
+  }
+  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)) {
+    return <div className="mb-4">{paginateEN()}</div>;
+  }
+  else {
+    if (typeof itemCount !== "undefined")
+      return <div className="mb-4">{paginateOther()}</div>
+    else
+      return null
+  }
+}