@nyris/nyris-webapp 0.3.13 → 0.3.14

package/public/js/settings.example.js

@@ -0,0 +1,30 @@
+var settings = {
+    "apiKey": "xxx",
+    "maxWidth": 500,
+    "maxHeight": 500,
+    "jpegQuality": 0.9,
+    "regions": true,
+    "preview": true,
+    "baseUrl": "https://api.nyris.io",
+    "xOptions": "",
+    "exampleImages": [
+      "https://img.nyris.io/demo/everybag/kissen.jpg",
+      "https://img.nyris.io/demo/everybag/aspirin.jpg",
+      "https://img.nyris.io/demo/everybag/lego.jpg",
+      "https://img.nyris.io/demo/everybag/wdr_add_2.jpg",
+      "https://img.nyris.io/demo/everybag/mb-dle-4.jpg",
+      "https://img.nyris.io/demo/everybag/1.jpg",
+      "https://img.nyris.io/demo/everybag/5.jpg",
+      "https://img.nyris.io/demo/everybag/6.jpg"
+    ],
+    "instantRedirectPatterns": [
+      '^https?://(www.)?youtube.com/',
+      '^https?://(www.)?youtu.be/',
+      '^https?://(www.)?vimeo.com/',
+      '^https?://(www.)?dailymotion.com/',
+      '^https?://(www.)?dai.ly/'
+    ]
+  };
+  settings["customSearchRequest"] = null;
+  settings["responseHook"] =  null;
+  

package/src/App.tsx

@@ -1,51 +1,44 @@
-import React, { useEffect, useState } from "react";
+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 {Box,Snackbar} from "@material-ui/core";
+import MuiAlert, { AlertProps } from '@material-ui/lab/Alert';
 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 Codes from "./components/Codes";
-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[];
@@ -70,41 +63,29 @@ export interface AppProps {
   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,
-    selectedFilters,
-  },
-  showPart,
-  settings,
-  handlers,
-  loading,
-  previewImage,
-  feedbackState,
+  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]),
-  });
+
+  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();
 
-  const acceptTypes = ["image/*"]
-    .concat(settings.cadSearch ? cadExtensions : [])
-    .join(",");
+  const dispatch = useDispatch();
 
   useEffect(() => {
     if (toastErrorMessage !== "") {
@@ -123,31 +104,17 @@ const App: React.FC<AppProps> = ({
         <Sidebar filters={filters} selectedFilters={selectedFilters} />
 
         <div className="mainContent">
-          {showPart === "camera" && (
-            <Capture
-              onCaptureComplete={handlers.onCaptureComplete}
-              onCaptureCanceled={handlers.onCaptureCanceled}
-              useAppText="Use default camera app"
-            />
-          )}
-
+        {showPart === 'camera' &&
+            <Capture onCaptureComplete={handlers.onCaptureComplete} onCaptureCanceled={handlers.onCaptureCanceled}
+                      useAppText='Use default camera app'/>}
           <SelectedFiltersSummary />
-          <div
-            className={classNames("headSection", {
-              hidden: showPart === "results",
-            })}
-            id="headSection"
-          >
+          <div className={classNames('headSection', {hidden: showPart === 'results'})} id="headSection">
             <div
               {...getRootProps({
                 onClick: (e) => {
                   e.stopPropagation();
                 },
-              })}
-              className={classNames("wrapper", "dragAndDropActionArea", {
-                fileIsHover: isDragActive,
-              })}
-            >
+              })} className={classNames('wrapper', 'dragAndDropActionArea', {'fileIsHover': isDragActive})}>
               <div className={classNames("contentWrap")}>
                 <Box
                   display="flex"
@@ -157,32 +124,15 @@ const App: React.FC<AppProps> = ({
                   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)}
+                  <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>
@@ -198,34 +148,20 @@ const App: React.FC<AppProps> = ({
                       <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 htmlFor="select_file" className="btn primary" style={{width: '22em'}}>
+                                <span>Select a file</span>
                     </label>
-                    <label
-                      htmlFor="capture"
-                      className="mobileUploadHandler onMobile"
-                    />
+                    <label htmlFor="capture" className="mobileUploadHandler onMobile"/>
                   </section>
-                  <ExampleImages
-                    images={settings.exampleImages}
-                    onExampleImageClicked={handlers.onExampleImageClick}
-                  />
+                  <ExampleImages images={settings.exampleImages} onExampleImageClicked={handlers.onExampleImageClick}/>
                 </Box>
               </div>
             </div>
 
             <div className="headerSeparatorTop" />
             <div className="headerSeparatorBack" />
-            <div
-              className={classNames("tryDifferent", {
-                hidden: showPart !== "results",
-              })}
-              onClick={handlers.onShowStart}
-            >
+            <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" }} />
@@ -233,155 +169,92 @@ const App: React.FC<AppProps> = ({
           </div>
 
           <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>
+                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>
-              </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" />
+                }
+                <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>
-              )}
-            </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="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>
+                <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>
-              )}
+                    {results.length === 0 && showPart === 'results' && !loading && (
 
-              <br style={{ clear: "both" }} />
+                        <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}
+                    {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>
-              )}
-            </div>
-          </section>
+            </section>
+
+            <Snackbar open={toastOpen} autoHideDuration={3000} onClose={() => setToastOpen(false)}>
+                <Alert onClose={() => setToastOpen(false)} severity="error">
+                    {toastErrorMessage}
+                </Alert>
+            </Snackbar>
 
-          <Snackbar
-            open={toastOpen}
-            autoHideDuration={3000}
-            onClose={() => setToastOpen(false)}
-          >
-            <Alert onClose={() => setToastOpen(false)} severity="error">
-              {toastErrorMessage}
-            </Alert>
-          </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}
-      />
+                <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>
   );
 };

package/src/actions/searchActions.ts

@@ -279,16 +279,9 @@ function ADDtoSelectedfilters(
   key: string,
   value: string
 ): Map<string, string[]> {
-  if (selectedFilters) {
-    let values = selectedFilters.get(key);
-    if (values) {
-      values.push(value);
-    } else {
-      values = new Array<string>(value);
-    }
-    selectedFilters.set(key, values);
-  }
-  console.log(selectedFilters);
+  let values = selectedFilters.get(key) || new Array<string>();
+  values.push(value);
+  selectedFilters.set(key, values);
   return selectedFilters;
 }
 
@@ -297,26 +290,19 @@ function RemoveFromSelectedFilters(
   key: string,
   value: string
 ): Map<string, string[]> {
-  if (selectedFilters) {
-    let values = selectedFilters.get(key);
+  let values = selectedFilters.get(key);
     if (values) {
       values = values.filter((x) => x !== value);
       selectedFilters.set(key, values);
     }
-  }
-  console.log(selectedFilters);
+  
   return selectedFilters;
 }
 
 function UpdateFilters(filters: Filter[], key: string, values: string[]) {
-  console.log(filters);
-  console.log(key);
-  console.log(values);
-  console.log(filters.find((x) => x.key === key));
   if (filters && filters.length > 0 && filters.find((x) => x.key === key)) {
     let idx = filters.findIndex((x) => x.key === key);
     filters[idx].values = values;
-    console.log(filters);
   }
 
   return filters;

package/src/components/CategoryFilter.tsx

@@ -1,20 +1,17 @@
-import React from "react";
+import React from 'react';
 
-const CategoryFilter = ({ cats }: { cats: string[] }) => {
-  if (cats.length === 0) {
-    return null;
-  }
-  return (
-    <div id="catlist" style={{ textAlign: "center" }}>
-      {
-        cats.map((s) => (
-          <a key={s} href="#top">
-            {s}
-          </a>
-        )) // TODO fix link
-      }
-    </div>
-  );
+
+const CategoryFilter = ({cats}: {cats: string[]}) => {
+    if (cats.length === 0) {
+        return null;
+    }
+    return (
+        <div id="catlist" style={{'textAlign': 'center'}}>
+            {
+                cats.map((s) => <a key={s} href="#top">{s}</a>) // TODO fix link
+            }
+        </div>
+    );
 };
 
 export default CategoryFilter;

package/src/components/Codes.tsx

@@ -1,24 +1,20 @@
-import React from "react";
-import { Code } from "@nyris/nyris-api";
+import React from 'react';
+import {Code} from '@nyris/nyris-api';
 
 interface Props {
-  codes: Code[];
+    codes: Code[]
 }
-const Codes = ({ codes }: Props) => (
-  <>
-    <div className="codes" style={{ textAlign: "center" }}>
-      {codes.length > 0 && (
-        <span style={{ fontSize: "0.8em" }}>
-          Codes
-          <br />{" "}
-        </span>
-      )}
-      {codes.map((c, i) => (
-        <small key={i} title={c.type}>
-          {c.value}
-        </small>
-      ))}
-    </div>
-  </>
-);
+const Codes = ({codes}: Props) =>
+    <>
+        <div className="codes" style={{textAlign: 'center'}}>
+            {codes.length > 0 && <span style={{fontSize: '0.8em'}}>Codes<br/> </span> }
+            {codes.map((c, i) =>
+                <small key={i} title={c.type}>
+                    {c.value}
+                </small>)}
+        </div>
+    </>
+;
+
+
 export default Codes;