@nyris/nyris-webapp 0.3.3 → 0.3.4

package/src/modules/LandingPage/{indexAppMD.tsx → AppMD.tsx}

@@ -16,35 +16,12 @@ import {
 } from "@material-ui/core";
 import { PhotoCamera, ArrowBack, Image } from "@material-ui/icons";
 import Icon from "@material-ui/core/Icon";
-import React, { useCallback, useEffect, useState } from "react";
 import { NodeGroup } from "react-move";
 import classNames from "classnames";
-import { Capture } from "@nyris/nyris-react-components";
-import { useAppDispatch, useAppSelector } from "Store/Store";
-import {
-  RectCoords,
-  cadExtensions,
-  isCadFile,
-  isImageFile,
-  ImageSearchOptions,
-} from "@nyris/nyris-api";
-import NyrisAPI from "@nyris/nyris-api";
-import {
-  loadCadFileLoad,
-  loadFile,
-  loadFileSelectRegion,
-  loadingActionRegions,
-  loadingActionResults,
-  searchFileImageNonRegion,
-  // selectionChanged,
-} from "Store/Search";
-import { showCamera, showFeedback, showResults, showStart } from "Store/Nyris";
-import _, { debounce, isEmpty } from "lodash";
-import { serviceImage, serviceImageNonRegion } from "services/image";
-import { findByImage } from "services/findByImage";
-import { feedbackRegionEpic } from "services/Feedback";
-import { MDSettings } from "../../types";
-import Preview from "components/preview/preview";
+import {Capture, Preview} from "@nyris/nyris-react-components";
+import _  from "lodash";
+import {AppProps} from "./propsType";
+import React from "react";
 
 const useStyles = makeStyles((theme) => ({
   icon: {
@@ -123,106 +100,43 @@ const makeFileHandler = (action: any) => (e: any) => {
   }
 };
 
-const LandingPageAppMD: React.FC<any> = () => {
-  const dispatch = useAppDispatch();
+const LandingPageAppMD = (props: AppProps) => {
   const classes = useStyles();
-  const [rectCoords, setRectCoords] = useState<any>();
-  const searchState = useAppSelector((state) => state);
-  const { settings, search, nyris } = searchState;
-  const { showPart } = nyris;
   const {
-    requestImage,
-    regions,
-    selectedRegion,
-    fetchingRegions,
-    fetchingResults,
+    handlers,
+    showPart,
+    acceptTypes,
+    settings,
+    search,
+    loading,
+    previewImage
+  } = props;
+
+  const mdSettings = settings.themePage.materialDesign;
+
+  const {
     results,
-    requestId,
+    regions,
+    previewSelection,
   } = search;
-  const { themePage }: any = settings;
-  useEffect(() => {
-    if (isEmpty(rectCoords)) {
-      return;
-    }
-    onSearchOffersForImage(rectCoords);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [rectCoords]);
-
-  const loading = fetchingRegions || fetchingResults;
 
-  const mdSettings: any = themePage.materialDesign as MDSettings;
+  const {
+    onLinkClick,
+    onFileDropped,
+    onCaptureComplete,
+    onCaptureCanceled,
+    onSelectFile,
+    onCameraClick,
+    onShowStart,
+    onSelectionChange,
+  } = handlers;
 
   const { getRootProps, getInputProps, isDragActive } = useDropzone({
-    onDrop: (fs: File[]) => dispatch(loadFile(fs[0])),
+    onDrop: (fs: File[]) => {
+      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 isCheckImageFile = async (file: any) => {
-    dispatch(showResults(""));
-    dispatch(loadingActionResults(""));
-    dispatch(showFeedback(""));
-    if (isImageFile(file) || typeof file === "string") {
-      if (settings.regions) {
-        serviceImage(file, searchState).then((res) => {
-          dispatch(loadFile(res));
-          return dispatch(showFeedback(""));
-        });
-      } else {
-        serviceImageNonRegion(file, searchState, rectCoords).then((res) => {
-          dispatch(searchFileImageNonRegion(res));
-        });
-      }
-      // return serviceImage(file, settings).then((res) => {
-      //   return dispatch(loadFile(res));
-      // });
-    }
-    if (isCadFile(file)) {
-      return dispatch(loadCadFileLoad(file));
-    }
-  };
-
-  const feedbackClickEpic = async (position: any, _url: string) => {
-    try {
-      const api = new NyrisAPI(settings);
-      const sessionId = search.sessionId || search.requestId;
-      if (sessionId && requestId) {
-        await api.sendFeedback(sessionId, requestId, {
-          event: "click",
-          data: { positions: [position] },
-        });
-      }
-    } catch (error) {
-      console.log("err feedbackClickEpic", error);
-    }
-  };
-
-  const handlerRectCoords = debounce((value) => {
-    setRectCoords(value);
-  }, 1200);
-
-  const debounceRectCoords = useCallback(
-    (value) => handlerRectCoords(value),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
-  );
-  const onSearchOffersForImage = (r: RectCoords) => {
-    const { canvas }: any = requestImage;
-    let options: ImageSearchOptions = {
-      cropRect: r,
-    };
-    feedbackRegionEpic(searchState, r);
-    dispatch(loadingActionRegions(""));
-    return findByImage(canvas, options, settings).then((res) => {
-      dispatch(loadFileSelectRegion(res));
-      return dispatch(showFeedback(""));
-    });
-  };
 
   return (
     <React.Fragment>
@@ -235,10 +149,8 @@ const LandingPageAppMD: React.FC<any> = () => {
       <CssBaseline />
       {showPart === "camera" && (
         <Capture
-          onCaptureComplete={(image: HTMLCanvasElement) =>
-            isCheckImageFile(image)
-          }
-          onCaptureCanceled={() => dispatch(showStart)}
+          onCaptureComplete={onCaptureComplete}
+          onCaptureCanceled={onCaptureCanceled}
           useAppText="Use default camera app"
         />
       )}
@@ -259,9 +171,7 @@ const LandingPageAppMD: React.FC<any> = () => {
                   <Button
                     variant={"contained"}
                     color={"primary"}
-                    onClick={() => {
-                      return dispatch(showCamera);
-                    }}
+                    onClick={onCameraClick}
                   >
                     Take a picture
                   </Button>
@@ -274,7 +184,7 @@ const LandingPageAppMD: React.FC<any> = () => {
                     accept={acceptTypes}
                     id="raised-button-file"
                     type="file"
-                    onChange={makeFileHandler((e: any) => isCheckImageFile(e))}
+                    onChange={makeFileHandler(onSelectFile)}
                     style={{
                       width: ".1px",
                       height: ".1px",
@@ -324,9 +234,7 @@ const LandingPageAppMD: React.FC<any> = () => {
                       id="raised-button-file"
                       type="file"
                       {...getInputProps()}
-                      onChange={makeFileHandler((e: any) => {
-                        return isCheckImageFile(e);
-                      })}
+                      onChange={makeFileHandler(onSelectFile)}
                       style={{
                         width: ".1px",
                         height: ".1px",
@@ -356,22 +264,13 @@ const LandingPageAppMD: React.FC<any> = () => {
           )}
           maxWidth="md"
         >
-          {requestImage && (
+          {previewImage && (
             <Card style={{ marginBottom: "4em" }} raised={true}>
               <Preview
-                key={requestImage?.id}
-                onSelectionChange={(r: RectCoords) => {
-                  debounceRectCoords(r);
-                  return;
-                }}
-                image={requestImage?.canvas}
-                initialRegion={
-                  !selectedRegion
-                    ? regions[0]
-                      ? regions[0]
-                      : { x1: 0, x2: 1, y1: 0, y2: 1 }
-                    : selectedRegion
-                }
+                key={previewImage?.id}
+                onSelectionChange={onSelectionChange}
+                image={previewImage?.canvas}
+                selection={previewSelection}
                 regions={regions}
                 maxWidth={400}
                 maxHeight={500}
@@ -424,13 +323,13 @@ const LandingPageAppMD: React.FC<any> = () => {
                             component="h5"
                             className={classes.withElipsis}
                           >
-                            {result[mdSettings.resultFirstRowProperty]}
+                            {result[mdSettings?.resultFirstRowProperty!!]}
                           </Typography>
                           <Typography
                             variant="body2"
                             className={classes.withElipsis}
                           >
-                            {result[mdSettings.resultSecondRowProperty]}
+                            {result[mdSettings?.resultSecondRowProperty!!]}
                           </Typography>
                         </CardContent>
                         {result.l && (
@@ -442,26 +341,25 @@ const LandingPageAppMD: React.FC<any> = () => {
                               color="primary"
                               onClick={
                                 () => {
-                                  return feedbackClickEpic(
+                                  onLinkClick(
                                     result.position,
                                     result.l
                                   );
                                 }
-                                // handlers.onLinkClick(result.position, result.l)
                               }
                               onAuxClick={() => {
-                                return feedbackClickEpic(
+                                onLinkClick(
                                   result.position,
                                   result.l
                                 );
                               }}
                             >
-                              {mdSettings.resultLinkIcon && (
+                              {mdSettings?.resultLinkIcon && (
                                 <React.Fragment>
                                   <Icon>{mdSettings.resultLinkIcon}</Icon>{" "}
                                 </React.Fragment>
                               )}
-                              {mdSettings.resultLinkText}
+                              {mdSettings?.resultLinkText}
                             </Button>
                           </CardActions>
                         )}
@@ -486,7 +384,7 @@ const LandingPageAppMD: React.FC<any> = () => {
                 aria-label="back"
                 className={classes.fab}
                 color="primary"
-                onClick={() => dispatch(showStart(""))}
+                onClick={onShowStart}
               >
                 <ArrowBack />
               </Fab>

package/src/modules/LandingPage/index.tsx

@@ -0,0 +1,193 @@
+import React, { useCallback, useEffect, useState } from "react";
+import {
+    RectCoords,
+    cadExtensions,
+    isCadFile,
+    isImageFile,
+    ImageSearchOptions,
+} from "@nyris/nyris-api";
+
+import { useAppDispatch, useAppSelector } from "Store/Store";
+import {
+    loadCadFileLoad,
+    setSearchResults,
+    loadFileSelectRegion,
+    loadingActionRegions,
+    loadingActionResults,
+    searchFileImageNonRegion,
+} from "Store/Search";
+import {
+    feedbackNegative,
+    feedbackSubmitPositive,
+    hideFeedback,
+    showCamera,
+    showFeedback,
+    showResults,
+    showStart,
+} from "Store/Nyris";
+import { serviceImage, serviceImageNonRegion } from "services/image";
+import { findByImage } from "services/findByImage";
+import { debounce, isEmpty } from "lodash";
+import { feedbackClickEpic } from "services/Feedback";
+import AppMD from "./AppMD";
+import App from "./App";
+import {AppHandlers, AppProps} from "./propsType";
+import {defaultMdSettings} from "../../defaults";
+
+const LandingPageApp = () => {
+    const dispatch = useAppDispatch();
+    const searchState = useAppSelector((state) => state);
+    const [rectCoords, setRectCoords] = useState<any>();
+    const defaultSelection = {x1: 0.1, x2: 0.9, y1: 0.1, y2: 0.9};
+    const [selection, setSelection] = useState<RectCoords>(defaultSelection);
+
+    const { settings, search, nyris } = searchState;
+    const {
+        fetchingRegions,
+        fetchingResults,
+        requestImage,
+        selectedRegion,
+    } = search;
+    const { showPart } = nyris;
+
+    const isDefaultRect = (r: RectCoords) => r.x1 === 0 && r.x2 === 1 && r.y1 === 0 && r.y2 === 1;
+
+    // update selection, if it is not the default one
+    useEffect(() => {
+        if (!isDefaultRect(selectedRegion)) {
+            setSelection(selectedRegion);
+        }
+    }, [selectedRegion]);
+
+
+    useEffect(() => {
+        if (isEmpty(rectCoords)) {
+            return;
+        }
+        onSearchOffersForImage(rectCoords);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [rectCoords]);
+
+    const acceptTypes = ["image/*"]
+        .concat(settings.cadSearch ? cadExtensions : [])
+        .join(",");
+
+
+    function scrollTop() {
+        // TODO might require polyfill for ios and edge
+        window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
+    }
+
+    const onLinkClick = (_position: number, url: string) => {
+        feedbackClickEpic(searchState, _position).catch(console.warn);
+        if (url) {
+            window.open(url);
+        }
+    };
+    // TODO: search image file home page
+    const isCheckImageFile = (file: any) => {
+        dispatch(loadingActionResults());
+        dispatch(showResults());
+        dispatch(showFeedback());
+        if (isImageFile(file) || typeof file === "string") {
+            return serviceImage(file, searchState.settings).then((res) => {
+                dispatch(setSearchResults(res));
+            });
+        }
+        if (isCadFile(file)) {
+            return dispatch(loadCadFileLoad(file));
+        }
+    };
+    //
+
+    const searchByUrl = (url: string, position?: number) => {
+        dispatch(loadingActionResults());
+        dispatch(showResults());
+        if (position) {
+            feedbackClickEpic(searchState, position);
+        }
+
+        if (settings.regions) {
+            serviceImage(url, searchState.settings).then((res) => {
+                dispatch(setSearchResults(res));
+                dispatch(showFeedback());
+            });
+        } else {
+            serviceImageNonRegion(url, searchState, rectCoords).then((res) => {
+                dispatch(searchFileImageNonRegion(res));
+                dispatch(showFeedback());
+            });
+        }
+    };
+
+    const handlerRectCoords = debounce((value) => {
+        return setRectCoords(value);
+    }, 1200);
+
+    const debouncedSetRectCoords = useCallback(
+        (value) => handlerRectCoords(value),
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        []
+    );
+
+    const onSearchOffersForImage = (r: RectCoords) => {
+        const { canvas }: any = requestImage;
+        let options: ImageSearchOptions = {
+            cropRect: r,
+        };
+        dispatch(loadingActionRegions());
+        return findByImage(canvas, options, settings).then((res) => {
+            dispatch(loadFileSelectRegion(res));
+            return dispatch(showFeedback());
+        });
+    };
+
+    const handlers : AppHandlers = {
+        onExampleImageClick: url => searchByUrl(url),
+        onCameraClick: () => dispatch(showCamera),
+        onCaptureCanceled: () => dispatch(showStart),
+        onCaptureComplete: (i) => isCheckImageFile(i),
+        onCloseFeedback: () => dispatch(hideFeedback),
+        onFileDropped: (f) => isCheckImageFile(f),
+        onImageClick: (position, url) => searchByUrl(url, position),
+        onLinkClick: onLinkClick,
+        onPositiveFeedback: () => {
+            dispatch(feedbackSubmitPositive());
+            // TODO submit positive feedback to the api
+        },
+        onNegativeFeedback: () => {
+            dispatch(feedbackNegative());
+            // TODO submit negative feedback to the api
+        },
+        onSelectFile: (f) => isCheckImageFile(f),
+        onSelectionChange: r => {
+            setSelection(r);
+            debouncedSetRectCoords(r);
+        },
+        onShowStart: () => {
+            dispatch(showStart());
+            scrollTop();
+        }
+    };
+
+    let props : AppProps = {
+        search: {
+            ...search,
+            previewSelection: selection
+        },
+        settings,
+        previewImage: search.requestImage,
+        acceptTypes,
+        showPart,
+        handlers,
+        loading: fetchingRegions || fetchingResults,
+        mdSettings: settings.themePage.materialDesign || defaultMdSettings,
+        feedbackState: nyris.feedbackState,
+
+    };
+
+    return settings.themePage.materialDesign?.active? <AppMD {...props}/> : <App {...props}/>;
+
+};
+
+export default LandingPageApp;

package/src/modules/LandingPage/indexNewVersion.tsx

@@ -14,7 +14,7 @@ import {
 } from "react-instantsearch-dom";
 import algoliasearch from "algoliasearch/lite";
 import CustomSearchBox from "components/input/inputSearch";
-import NyrisAPICT from "services/findRegionsCustom";
+import {createSessionByApi} from "../../services/session";
 
 interface Props {}
 
@@ -25,25 +25,17 @@ function AppNewVersion(props: Props) {
   const { settings, search }: any = searchState;
   const [searchStateInput, setSearchStateInput] = useState<any>({});
   const [isLoading, setLoading] = useState<boolean>(false);
-  const nyrisApi = new NyrisAPICT(settings);
   const { apiKeyAlgolia, appIdAlgolia, indexNameAlgolia } = settings;
   const searchClient = algoliasearch(appIdAlgolia, apiKeyAlgolia);
   searchClient.initIndex(indexNameAlgolia);
 
   useEffect(() => {
     const createSession = async () => {
-      try {
-        await nyrisApi.createSession().then((res: any) => {
-          const payload: any = {
-            sessionId: res.data.session,
-            requestId: res.data.id,
-          };
-          dispatch(setUpdateSession(payload));
-        });
-      } catch (error) {}
+      let payload = await createSessionByApi(searchState.settings);
+      dispatch(setUpdateSession(payload));
     };
 
-    createSession();
+    createSession().catch(console.log);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -64,9 +56,10 @@ function AppNewVersion(props: Props) {
   const nonEmptyFilter: any[] = !search?.requestImage
     ? []
     : ["sku:DOES_NOT_EXIST<score=1>"];
+  // Build filter using reverse position for stable item order
   const filterSkus: any = search?.results
-    ? search?.results.map(
-        (f: any) => `sku:'${f.sku}'<score=${Math.round(100 * f.score)}>`
+    ? search?.results.slice().reverse().map(
+        (f: any, i: number) => `sku:'${f.sku}'<score=${i}>`
       )
     : "";
   const filtersString = [...nonEmptyFilter, ...filterSkus].join(" OR ");

package/src/modules/LandingPage/propsType.ts

@@ -0,0 +1,43 @@
+import {CategoryPrediction, Code, RectCoords, Region} from "@nyris/nyris-api";
+import {AppSettings, CanvasWithId, MDSettings} from "../../types";
+import {NyrisAppPart, NyrisFeedbackState} from "../../Store/Nyris";
+
+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;
+    };
+    acceptTypes: string,
+    previewImage?: CanvasWithId;
+    settings: AppSettings;
+    loading: boolean;
+    showPart: NyrisAppPart;
+    feedbackState: NyrisFeedbackState;
+    handlers: AppHandlers;
+    mdSettings: MDSettings;
+}

package/src/page/result/index.tsx

@@ -31,7 +31,7 @@ import DetailItem from "components/DetailItem";
 import FileCopyOutlinedIcon from "@material-ui/icons/FileCopyOutlined";
 import { RectCoords } from "@nyris/nyris-api";
 import {
-  loadFile,
+  setSearchResults,
   loadingActionResults,
   searchFileImageNonRegion,
   selectionChanged,
@@ -52,9 +52,9 @@ import {
   serviceImage,
   serviceImageNonRegion,
 } from "services/image";
-import Preview from "components/preview/preview";
 import NyrisAPI from "@nyris/nyris-api";
 import LoadingScreenCustom from "components/LoadingScreen";
+import { Preview } from "@nyris/nyris-react-components";
 
 interface Props {}
 
@@ -144,7 +144,7 @@ function ResultComponent(props: Props) {
         };
         dispatch(updateResultChangePosition(payload));
         setLoading(false);
-        return dispatch(showFeedback(""));
+        return dispatch(showFeedback());
       });
     } else {
       serviceImageNonRegion(canvas, StateGlobal, null).then((res: any) => {
@@ -153,7 +153,7 @@ function ResultComponent(props: Props) {
           requestImage: requestImage,
         };
         dispatch(updateResultChangePosition(payload));
-        return dispatch(showFeedback(""));
+        return dispatch(showFeedback());
       });
     }
   };
@@ -202,17 +202,18 @@ function ResultComponent(props: Props) {
 
   // Search image with url or file
   const getUrlToCanvasFile = (url: string, position?: number) => {
-    dispatch(showResults(""));
-    dispatch(loadingActionResults(""));
+    dispatch(showResults());
+    dispatch(loadingActionResults());
     if (position) {
       feedbackClickEpic(StateGlobal, position);
       return;
     }
     if (settings.regions) {
-      serviceImage(url, StateGlobal).then((res: any) => {
-        dispatch(loadFile(res));
+      serviceImage(url, settings).then((res ) => {
+        console.log("res", res)
+        dispatch(setSearchResults(res));
         setLoading(false);
-        return dispatch(showFeedback(""));
+        return dispatch(showFeedback());
       });
 
       return;
@@ -313,13 +314,7 @@ function ResultComponent(props: Props) {
                               return;
                             }}
                             image={requestImage?.canvas}
-                            initialRegion={
-                              !selectedRegion
-                                ? regions[0]
-                                  ? regions[0]
-                                  : { x1: 0, x2: 1, y1: 0, y2: 1 }
-                                : selectedRegion
-                            }
+                            selection={selectedRegion}
                             regions={regions}
                             maxWidth={400}
                             maxHeight={500}