@nyris/nyris-webapp 0.3.3 → 0.3.6

package/package.json

@@ -1,16 +1,13 @@
 {
   "name": "@nyris/nyris-webapp",
-  "version": "0.3.3",
+  "version": "0.3.6",
   "homepage": "./",
   "dependencies": {
-    "@babel/runtime": "^7.17.2",
     "@material-ui/core": "^4.3.3",
-    "@material-ui/data-grid": "^4.0.0-alpha.37",
     "@material-ui/icons": "^4.4.1",
     "@material-ui/lab": "^4.0.0-alpha.60",
-    "@nyris/nyris-api": "^0.3.3",
-    "@nyris/nyris-react-components": "^0.3.3",
-    "@reduxjs/toolkit": "^1.6.1",
+    "@nyris/nyris-api": "^0.3.6",
+    "@nyris/nyris-react-components": "^0.2.6",
     "@types/blueimp-load-image": "^2.23.4",
     "@types/classnames": "^2.2.9",
     "@types/history": "^4.7.3",
@@ -19,37 +16,21 @@
     "@types/react": "16.9.2",
     "@types/react-dom": "16.9.0",
     "@types/react-redux": "^7.1.2",
-    "@types/react-router-dom": "^5.1.8",
-    "algoliasearch": "^4.12.2",
-    "axios": "^0.26.1",
-    "blueimp-load-image": "^2.24.0",
+    "blueimp-load-image": "^5.16.0",
     "classnames": "^2.2.6",
     "history": "^4.10.1",
-    "js-cookie": "^3.0.1",
-    "konva": "5.0.3",
-    "lodash": "^4.17.21",
-    "qs": "^6.10.3",
-    "react": "^17.0.0",
+    "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-dropzone": "^10.1.8",
-    "react-hook-form": "^7.27.1",
-    "react-instantsearch-dom": "^6.22.0",
-    "react-instantsearch-hooks": "^6.22.0",
-    "react-konva": "16.13.0-6",
     "react-move": "^6.0.0",
     "react-redux": "^7.1.1",
-    "react-responsive-carousel": "^3.2.22",
-    "react-router-dom": "^5.3.0",
     "react-scripts": "^3.4.1",
-    "react-select": "^5.2.2",
-    "react-table": "^7.7.0",
     "redux": "^4.0.4",
     "redux-observable": "^1.1.0",
-    "redux-thunk": "^2.4.1",
     "rxjs": "^6.5.3",
     "source-map-explorer": "^2.0.1",
     "typeface-roboto": "0.0.75",
-    "typescript": "^4.1.2"
+    "typescript": "3.6.2"
   },
   "scripts": {
     "analyze": "source-map-explorer 'build/static/js/*.js'",
@@ -77,12 +58,8 @@
     ]
   },
   "devDependencies": {
-    "@types/js-cookie": "^3.0.1",
-    "@types/lodash": "^4.14.178",
-    "@types/react-instantsearch-dom": "^6.12.2",
     "mockserver": "^3.1.1",
     "react-styleguidist": "^11.0.5",
-    "redux-devtools-extension": "^2.13.8",
-    "sass": "^1.39.0"
+    "redux-devtools-extension": "^2.13.8"
   }
 }

package/src/App.css

@@ -33,33 +33,77 @@
 }
 
 .predicted-categories {
-  display: flex;
-  flex-wrap: wrap;
-  flex-direction: row;
-  justify-content: center;
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    justify-content: center;
 }
 .predicted-categories small {
-  white-space: nowrap;
-  padding-left: 0.4em;
-  padding-right: 0.4em;
-  font-size: 0.8em;
-  border-radius: 5px;
-  margin: 0.2em;
-  background-color: #fff;
+    white-space: nowrap;
+    padding-left: 0.4em;
+    padding-right: 0.4em;
+    font-size: 0.8em;
+    border-radius: 5px;
+    margin: 0.2em;
+    background-color: #fff;
 }
-
-/* Css Common all page */
-.d-flex {
-  display: flex !important;
+.sidebar {
+  width: 240px;
+  color: white;
+  border: 1px solid rgba(246, 242, 242, 0.1);
+  margin: 0;
+  padding: 0;
+  width: 200px;
+  position: fixed;
+  height: 100%;
+  overflow: auto;
 }
-.justify-center {
+
+.app {
+  font-family: sans-serif;
+  font-size: 18px;
+  display: flex;
+  align-items: left;
   justify-content: center;
+  flex-direction: column;
+  gap: 20px;
+  height: 100vh;
+  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
 }
-.flex-end {
-  align-items: flex-end;
+.filterlabel ,.topFilterlabel{
+  margin-top: 30px;
+  font-size: 25px;
+  margin-bottom: 10px;
+  color: white;
 }
-.flex-center {
-  align-items: center;
+.topFilterlabel {
+  border-bottom: 4px solid white;
+}
+.list-container {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  color: white;
+  font-size: 20px;
+}
+.checked-item,
+.not-checked-item {
+  margin-left: 10px;
+}
+.checked-item {
+  text-decoration: line-through;
 }
+.rowC {
+  display:flex; flex-direction:row;
+}
+
+.colC {
+  display: flex; flex-direction: row;
+}
+.MuiDrawer-paper {
+  width: drawerWidth;
+  box-sizing: 'border-box';
+}
+
 
 

package/src/App.tsx

@@ -1,22 +1,256 @@
-import "react-app-polyfill/ie11";
-import "react-app-polyfill/stable";
-import React from "react";
-import "typeface-roboto";
-import "index.css";
-import { useAppSelector } from "Store/Store";
-import LandingPageApp from "modules/LandingPage/indexApp";
-import LandingPageAppMD from "modules/LandingPage/indexAppMD";
-import AppNewVersion from "modules/LandingPage/indexNewVersion";
-import {AppState} from "./types";
-
-function App(): JSX.Element {
-  const { settings } = useAppSelector<AppState>((state: any) => state);
-  const { themePage }: any = settings;
-  let SelectedApp = 
-    themePage.default?.active ? LandingPageApp : (
-      themePage.mdWhiteLabel?.active ? LandingPageAppMD : AppNewVersion);
-
-  return <SelectedApp />;
+import './App.css';
+import React, {useEffect, useState} from 'react';
+import Result from './components/Result';
+import ExampleImages from './components/ExampleImages';
+import Feedback from './components/Feedback';
+import CategoryFilter from "./components/CategoryFilter";
+import PredictedCategories from "./components/PredictedCategories";
+import Codes from "./components/Codes";
+import {Code, CategoryPrediction, RectCoords, Region, cadExtensions, Filter} from "@nyris/nyris-api";
+import { useDropzone} from "react-dropzone";
+import classNames from 'classnames';
+import {Animate, NodeGroup} from "react-move";
+import {AppSettings, MDSettings, CanvasWithId} from "./types";
+import {NyrisAppPart, NyrisFeedbackState} from "./actions/nyrisAppActions";
+import {makeFileHandler, Capture, Preview} from "@nyris/nyris-react-components";
+import {Drawer, Snackbar, Toolbar} from "@material-ui/core";
+import MuiAlert, { AlertProps } from '@material-ui/lab/Alert';
+import { dispatch } from 'rxjs/internal/observable/pairs';
+import { useDispatch } from 'react-redux';
+import { loadFilters } from './actions/searchActions';
+import Sidebar from './components/Sidebar';
+
+export interface AppHandlers {
+    onExampleImageClick: (url: string) => void,
+    onImageClick: (position: number, url: string) => void,
+    onLinkClick: (position: number, url: string) => void,
+    onFileDropped: (file: File) => void,
+    onCaptureComplete: (image: HTMLCanvasElement) => void,
+    onCaptureCanceled: () => void,
+    onSelectFile: (f: File) => void,
+    onCameraClick: () => void,
+    onShowStart: () => void,
+    onSelectionChange: (r: RectCoords) => void,
+    onPositiveFeedback: () => void,
+    onNegativeFeedback: () => void,
+    onCloseFeedback: () => void
+}
+
+export interface AppProps {
+    search: {
+        results: any[],
+        requestId?: string,
+        duration?: number,
+        categoryPredictions: CategoryPrediction[],
+        codes: Code[],
+        filterOptions: string[],
+        errorMessage?: string,
+        regions: Region[],
+        previewSelection: RectCoords,
+        toastErrorMessage?: string,
+        filters: Filter[]
+    },
+    previewImage?: CanvasWithId,
+    settings: AppSettings,
+    loading: boolean,
+    showPart: NyrisAppPart,
+    feedbackState: NyrisFeedbackState,
+    handlers: AppHandlers,
+    mdSettings: MDSettings
 }
 
+function Alert(props: AlertProps) {
+    return <MuiAlert elevation={6} variant="filled" {...props} />;
+}
+
+const App: React.FC<AppProps> = ({
+                                     search: {results, regions, previewSelection, requestId, duration, errorMessage, filterOptions, categoryPredictions, codes, toastErrorMessage, filters},
+                                     showPart, settings, handlers, loading, previewImage, feedbackState
+                                 }) => {
+    const {getRootProps, getInputProps, isDragActive} = useDropzone({onDrop: (fs: File[]) => handlers.onFileDropped(fs[0])});
+    const minPreviewHeight = 400;
+    const halfOfTheScreenHeight = Math.floor(window.innerHeight * 0.45);
+    const maxPreviewHeight = Math.max(minPreviewHeight, halfOfTheScreenHeight);
+    const acceptTypes =
+        [ 'image/*' ].concat(
+            settings.cadSearch ? cadExtensions : []
+        ).join(',');
+    const [toastOpen, setToastOpen] = useState(false);
+    const dispatch = useDispatch();
+
+    useEffect(() => {
+        if (toastErrorMessage !== '') {
+            setToastOpen(true);
+        }
+    }, [toastErrorMessage])
+   
+    useEffect(() =>{
+    dispatch(loadFilters());
+    }, [])
+
+    return (
+        <div>
+        {showPart === 'camera' &&
+        <Capture onCaptureComplete={handlers.onCaptureComplete} onCaptureCanceled={handlers.onCaptureCanceled}
+                  useAppText='Use default camera app'/>}
+        <div className={classNames('headSection', {hidden: showPart === 'results'})} id="headSection">
+            <div className="navWrap">
+                <div>
+                    <section id="branding" style={{paddingLeft: '50px',marginLeft: '70px'}}/>
+                    <div id="menu" className="menuWrap" role="navigation">
+                        <ul>
+                            <li><a href="https://nyris.io/imprint/#privacy" target="_blank"
+                                   rel="noopener noreferrer">Privacy Policy</a></li>
+                            <li><a href="https://nyris.io/" target="_blank" rel="noopener noreferrer">Visit our
+                                Website</a></li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+            <div   {...getRootProps({
+                onClick: e => {
+                    e.stopPropagation();
+                }
+            })} className={classNames('wrapper', 'dragAndDropActionArea', {'fileIsHover': isDragActive})}>
+                <section style={{width:'350px', height: '100%' , marginTop: '100px', borderRight:'4px solid rgba(255, 255, 255, .12)'}}>
+                   <Toolbar>
+
+                   <div> Select Filters </div>
+                   </Toolbar>
+                   { filters && filters.length > 0 ? <Sidebar filters={filters}/> : <div></div> }
+                    
+   
+                </section>
+                <div className="contentWrap" style={{marginLeft: '50px', marginTop:'50px'}}>
+                    <section className="uploadImage">
+                        <input type="button" name="file" id="capture" className="inputfile" accept="image/*"
+                               capture="environment" onClick={handlers.onCameraClick}/>
+                        <input type="file" name="file" id="capture_file" className="inputfile" accept={acceptTypes}
+                               capture="environment"/>
+                        <input {...getInputProps()} type="file" name="file" id="select_file" className="inputfile"
+                               accept={acceptTypes}
+                               onChange={makeFileHandler(handlers.onSelectFile)}
+                        />
+                        <div className="onDesktop">
+                            Drop an image
+                            <div className="smallText">or</div>
+                        </div>
+                        <div className="onMobile camIcon">
+                            <img src="./images/ic_cam_large.svg" alt="Camera"/>
+                        </div>
+                        <label htmlFor="capture" className="btn primary onMobile"
+                               style={{marginBottom: '2em', width: '22em'}}>
+                            <span className="onMobile">Take a picture</span>
+                        </label>
+                        <br/>
+                        <label htmlFor="select_file" className="btn primary" style={{width: '22em'}}>
+                            <span>Select a file</span>
+                        </label>
+                        <label htmlFor="capture" className="mobileUploadHandler onMobile"/>
+                    </section>
+                    <ExampleImages images={settings.exampleImages} onExampleImageClicked={handlers.onExampleImageClick}/>
+                </div>
+            </div>
+            <div className={classNames('tryDifferent', {hidden: showPart !== 'results'})}
+                 onClick={handlers.onShowStart}>
+                <div className="icIcon">
+                </div>
+                <div className="textDesc"> Try a different image</div>
+                <br style={{clear: 'both'}}/>
+            </div>
+            <div className="headerSeparatorTop"/>
+            <div className="headerSeparatorBack"/>
+        </div>
+
+        <section
+            className={classNames('results', {resultsActive: showPart === 'results'}, (results.length === 1 ? 'singleProduct' : 'multipleProducts'))}>
+            {errorMessage &&
+            <div className="errorMsg">
+                {errorMessage}
+                <div style={{textAlign: 'center', fontSize: '0.7em', paddingTop: '0.8em'}}><span>Make sure to include the request ID when reporting a problem: {requestId}</span>
+                </div>
+            </div>
+            }
+            <Animate show={loading} start={{opacity: 0.0}} enter={{opacity: [1.0], timing: {duration: 300}}}
+                     leave={{opacity: [0.0], timing: {duration: 300}}}>
+                {s =>
+                    <div className="loadingOverlay" style={{...s}}>
+                        <div className="loading"/>
+                    </div>
+                }
+            </Animate>
+            {settings.preview && previewImage &&
+            <div className="preview">
+                <Preview key={previewImage.id}
+                         maxWidth={document.body.clientWidth} maxHeight={maxPreviewHeight}
+                         dotColor="#4C8F9F"
+                         onSelectionChange={handlers.onSelectionChange} regions={regions}
+                         selection={previewSelection} image={previewImage.canvas}/>
+            </div>
+            }
+            <div className="predicted-categories">
+                <PredictedCategories cs={categoryPredictions}/>
+            </div>
+            <div className="predicted-categories">
+                <Codes codes={codes}/>
+            </div>
+            <CategoryFilter cats={filterOptions}/>
+
+            <div className="wrapper">
+                <NodeGroup data={results}
+                           keyAccessor={r => r.sku}
+                           start={(r, i) => ({opacity: 0, translateX: -100})}
+                           enter={(r, i) => ({
+                               opacity: [1],
+                               translateX: [0],
+                               timing: {delay: i * 100, duration: 300}
+                           })}
+                >
+                    {rs => <>{rs.map(({key, data, state}) => <Result
+                        key={key}
+                        noImageUrl={settings.noImageUrl}
+                        template={settings.resultTemplate}
+                        onImageClick={handlers.onImageClick}
+                        onLinkClick={handlers.onLinkClick}
+                        result={data}
+                        style={{opacity: state.opacity, transform: `translateX(${state.translateX}%)`}}/>)}</>}
+                </NodeGroup>
+
+                {results.length === 0 && showPart === 'results' && !loading && (
+
+                    <div className="noResults">We did not find anything <span role="img"
+                                                                              aria-label="sad face">😕</span></div>
+                )}
+
+                <br style={{clear: 'both'}}/>
+
+                {duration && showPart === 'results' && (<div style={{textAlign: 'center', fontSize: '0.7em', paddingTop: '0.8em'}}>Search
+                    took {duration.toFixed(2)} seconds</div>)}
+
+                {requestId && showPart === 'results' && <div style={{textAlign: 'center', fontSize: '0.7em', paddingTop: '0.8em'}}>Request
+                    identifier {requestId}</div>}
+            </div>
+        </section>
+
+        <Snackbar open={toastOpen} autoHideDuration={3000} onClose={() => setToastOpen(false)}>
+            <Alert onClose={() => setToastOpen(false)} severity="error">
+                {toastErrorMessage}
+            </Alert>
+        </Snackbar>
+
+        <section className="footnote">
+            <div className="wrapper">
+                © 2017 - 2019 <a href="https://nyris.io">nyris GmbH</a> - All rights reserved - <a
+                href="https://nyris.io/imprint/">Imprint</a>
+            </div>
+        </section>
+        <Feedback feedbackState={feedbackState} onPositiveFeedback={handlers.onPositiveFeedback}
+                  onNegativeFeedback={handlers.onNegativeFeedback} onClose={handlers.onCloseFeedback}/>
+    </div>
+    );
+
+};
+
+
+
 export default App;