@nyris/nyris-webapp 0.3.6 → 0.3.13

package/src/App.tsx

@@ -1,256 +1,389 @@
-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 React, { useEffect, useState } from "react";
+import { useDispatch } from "react-redux";
+import { Animate, NodeGroup } from "react-move";
+import { useDropzone } from "react-dropzone";
+import { Box, Snackbar } from "@material-ui/core";
+import { Alert } from "@material-ui/lab";
+import classNames from "classnames";
+import { loadFilters } from "./actions/searchActions";
+import Result from "./components/Result";
+import Sidebar from "./components/Sidebar";
+import Header from "./components/Header";
+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';
+import PredictedCategories from "./components/PredictedCategories";
+import ExampleImages from "./components/ExampleImages";
+import {
+  makeFileHandler,
+  Capture,
+  Preview,
+} from "@nyris/nyris-react-components";
+import {
+  RectCoords,
+  cadExtensions,
+  CategoryPrediction,
+  Code,
+  Region,
+  Filter,
+} from "@nyris/nyris-api";
+import { AppSettings, CanvasWithId, MDSettings } from "./types";
+import { NyrisAppPart, NyrisFeedbackState } from "./actions/nyrisAppActions";
+import SelectedFiltersSummary from "./components/SelectedFiltersSummary";
 
 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
+  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} />;
+  search: {
+    results: any[];
+    requestId?: string;
+    duration?: number;
+    categoryPredictions: CategoryPrediction[];
+    codes: Code[];
+    filterOptions: string[];
+    errorMessage?: string;
+    regions: Region[];
+    previewSelection: RectCoords;
+    toastErrorMessage?: string;
+    filters: Filter[];
+    selectedFilters: Map<string, string[]>;
+  };
+  previewImage?: CanvasWithId;
+  settings: AppSettings;
+  loading: boolean;
+  showPart: NyrisAppPart;
+  feedbackState: NyrisFeedbackState;
+  handlers: AppHandlers;
+  mdSettings: MDSettings;
 }
 
 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();
+  search: {
+    results,
+    regions,
+    previewSelection,
+    requestId,
+    duration,
+    errorMessage,
+    filterOptions,
+    categoryPredictions,
+    codes,
+    toastErrorMessage,
+    filters,
+    selectedFilters,
+  },
+  showPart,
+  settings,
+  handlers,
+  loading,
+  previewImage,
+  feedbackState,
+}) => {
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    onDrop: (fs: File[]) => handlers.onFileDropped(fs[0]),
+  });
 
-    useEffect(() => {
-        if (toastErrorMessage !== '') {
-            setToastOpen(true);
-        }
-    }, [toastErrorMessage])
-   
-    useEffect(() =>{
+  const minPreviewHeight = 400;
+  const halfOfTheScreenHeight = Math.floor(window.innerHeight * 0.45);
+  const maxPreviewHeight = Math.max(minPreviewHeight, halfOfTheScreenHeight);
+  const [toastOpen, setToastOpen] = useState(false);
+  const dispatch = useDispatch();
+
+  const acceptTypes = ["image/*"]
+    .concat(settings.cadSearch ? cadExtensions : [])
+    .join(",");
+
+  useEffect(() => {
+    if (toastErrorMessage !== "") {
+      setToastOpen(true);
+    }
+  }, [toastErrorMessage]);
+
+  useEffect(() => {
     dispatch(loadFilters());
-    }, [])
+  }, [showPart, dispatch]);
+
+  return (
+    <React.Fragment>
+      <Header />
+      <div className="wrapperBody">
+        <Sidebar filters={filters} selectedFilters={selectedFilters} />
+
+        <div className="mainContent">
+          {showPart === "camera" && (
+            <Capture
+              onCaptureComplete={handlers.onCaptureComplete}
+              onCaptureCanceled={handlers.onCaptureCanceled}
+              useAppText="Use default camera app"
+            />
+          )}
 
-    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>
+          <SelectedFiltersSummary />
+          <div
+            className={classNames("headSection", {
+              hidden: showPart === "results",
+            })}
+            id="headSection"
+          >
+            <div
+              {...getRootProps({
+                onClick: (e) => {
+                  e.stopPropagation();
+                },
+              })}
+              className={classNames("wrapper", "dragAndDropActionArea", {
+                fileIsHover: isDragActive,
+              })}
+            >
+              <div className={classNames("contentWrap")}>
+                <Box
+                  display="flex"
+                  flexDirection="column"
+                  justifyContent="center"
+                  alignItems="center"
+                  minHeight="100vh"
+                >
+                  <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>
+                    <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: "12em" }}
+                    >
+                      <span className="onMobile">Take a picture</span>
+                    </label>
+                    <br />
+                    <label
+                      htmlFor="select_file"
+                      className="btn primary"
+                      style={{ width: "12em" }}
+                    >
+                      <span>Select a file</span>
+                    </label>
+                    <label
+                      htmlFor="capture"
+                      className="mobileUploadHandler onMobile"
+                    />
+                  </section>
+                  <ExampleImages
+                    images={settings.exampleImages}
+                    onExampleImageClicked={handlers.onExampleImageClick}
+                  />
+                </Box>
+              </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 className="headerSeparatorTop" />
+            <div className="headerSeparatorBack" />
+            <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>
+          </div>
 
-        <section
-            className={classNames('results', {resultsActive: showPart === 'results'}, (results.length === 1 ? 'singleProduct' : 'multipleProducts'))}>
-            {errorMessage &&
-            <div className="errorMsg">
+          <section
+            className={classNames(
+              { hideResults: showPart !== "results" },
+              "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
+                  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>
-                }
+              </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>
-            }
+            {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}/>
+              <PredictedCategories cs={categoryPredictions} />
             </div>
             <div className="predicted-categories">
-                <Codes codes={codes}/>
+              <Codes codes={codes} />
             </div>
-            <CategoryFilter cats={filterOptions}/>
+            <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
+              <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>
+                        style={{
+                          opacity: state.opacity,
+                          transform: `translateX(${state.translateX}%)`,
+                        }}
+                      />
+                    ))}
+                  </>
                 )}
+              </NodeGroup>
 
-                <br style={{clear: 'both'}}/>
+              {results.length === 0 && showPart === "results" && !loading && (
+                <div className="noResults">
+                  We did not find anything{" "}
+                  <span role="img" aria-label="sad face">
+                    😕
+                  </span>
+                </div>
+              )}
 
-                {duration && showPart === 'results' && (<div style={{textAlign: 'center', fontSize: '0.7em', paddingTop: '0.8em'}}>Search
-                    took {duration.toFixed(2)} seconds</div>)}
+              <br style={{ clear: "both" }} />
 
-                {requestId && showPart === 'results' && <div style={{textAlign: 'center', fontSize: '0.7em', paddingTop: '0.8em'}}>Request
-                    identifier {requestId}</div>}
+              {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>
+          </section>
 
-        <Snackbar open={toastOpen} autoHideDuration={3000} onClose={() => setToastOpen(false)}>
+          <Snackbar
+            open={toastOpen}
+            autoHideDuration={3000}
+            onClose={() => setToastOpen(false)}
+          >
             <Alert onClose={() => setToastOpen(false)} severity="error">
-                {toastErrorMessage}
+              {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>
-    );
-
+          </Snackbar>
+        </div>
+      </div>
+      <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}
+      />
+    </React.Fragment>
+  );
 };
 
-
-
 export default App;