@nyris/nyris-webapp 0.3.2 → 0.3.5

package/src/modules/LandingPage/index.tsx

@@ -0,0 +1,169 @@
+import React, { useCallback, useEffect, useState } from "react";
+import {
+    RectCoords,
+    cadExtensions,
+    isCadFile,
+} from "@nyris/nyris-api";
+
+import { useAppDispatch, useAppSelector } from "Store/Store";
+import {
+    setSearchResults,
+    loadingActionResults,
+    searchFileImageNonRegion, selectionChanged, setRequestImage, setRegions, setSelectedRegion, setError,
+} from "Store/Search";
+import {
+    feedbackNegative,
+    feedbackSubmitPositive,
+    hideFeedback,
+    showCamera,
+    showFeedback, showResults,
+    showStart,
+} from "Store/Nyris";
+import {createImage, findByCadFile, findByImage, findRegions} from "services/image";
+import { debounce } from "lodash";
+import {feedbackClickEpic, feedbackRegionEpic, feedbackSuccessEpic} from "services/Feedback";
+import AppMD from "./AppMD";
+import App from "./App";
+import {AppHandlers, AppProps} from "./propsType";
+import {defaultMdSettings} from "../../defaults";
+
+const defaultSelection = {x1: 0.1, x2: 0.9, y1: 0.1, y2: 0.9};
+
+const LandingPageApp = () => {
+    const dispatch = useAppDispatch();
+    const searchState = useAppSelector((state) => state);
+    const [selection, setSelection] = useState<RectCoords>(defaultSelection);
+
+    const { settings, search, nyris } = searchState;
+    const {
+        fetchingRegions,
+        fetchingResults,
+        requestImage,
+        selectedRegion,
+    } = search;
+    const { showPart } = nyris;
+
+    // update selection, if it is not the default one
+    useEffect(() => {
+        if (selectedRegion) {
+            setSelection(selectedRegion);
+        } else {
+            setSelection(defaultSelection);
+        }
+    }, [selectedRegion]);
+
+    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);
+        }
+    };
+
+    const startSearch = async (file: File | HTMLCanvasElement | string) => {
+        try {
+            dispatch(loadingActionResults());
+            dispatch(showResults());
+            if (file instanceof File && isCadFile(file)) {
+                let res = await findByCadFile(file, settings);
+                dispatch(setSearchResults(res));
+            } else {
+                let image = await createImage(file);
+                dispatch(setRequestImage(image));
+                let searchRegion : RectCoords | undefined;
+                if (settings.regions) {
+                    let {
+                        regions: foundRegions,
+                        selectedRegion: suggestedRegion
+                    } = await findRegions(image, settings);
+                    searchRegion = suggestedRegion;
+                    dispatch(setRegions(foundRegions));
+                    dispatch(setSelectedRegion(searchRegion))
+                }
+                return findByImage(image, searchState.settings, searchRegion).then((res) => {
+                    dispatch(setSearchResults(res));
+                    dispatch(showFeedback());
+                });
+            }
+        } catch (e) {
+            // TODO show error messages
+            dispatch(setError("There was an error while performing the request. Please try again later."));
+        }
+
+    };
+
+    const debouncedSetRectCoords = useCallback(
+        debounce(value => {
+            dispatch(selectionChanged(value));
+            feedbackRegionEpic(searchState, value);
+            findByImage(requestImage!!.canvas, settings, value).then((res) => {
+                dispatch(searchFileImageNonRegion(res));
+                dispatch(showFeedback());
+            }).catch(e => console.warn('catch', e));
+        }, 1200),
+        [requestImage, searchState]
+    );
+
+    const handlers : AppHandlers = {
+        onExampleImageClick: url => {
+            startSearch(url);
+        },
+        onCameraClick: () => dispatch(showCamera),
+        onCaptureCanceled: () => dispatch(showStart),
+        onCaptureComplete: (i) => startSearch(i),
+        onCloseFeedback: () => dispatch(hideFeedback),
+        onFileDropped: (f) => startSearch(f),
+        onImageClick: (position, url) => {
+            startSearch(url);
+            feedbackClickEpic(searchState, position);
+        },
+        onLinkClick: onLinkClick,
+        onPositiveFeedback: () => {
+            dispatch(feedbackSubmitPositive());
+            feedbackSuccessEpic(searchState, true);
+        },
+        onNegativeFeedback: () => {
+            dispatch(feedbackNegative());
+            feedbackSuccessEpic(searchState, false);
+        },
+        onSelectFile: (f) => startSearch(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,36 +14,28 @@ 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";
+import {AlgoliaSettings} from "../../types";
 
 interface Props {}
 
 function AppNewVersion(props: Props) {
   const dispatch = useAppDispatch();
   const history = useHistory();
-  const searchState = useAppSelector((state) => state);
-  const { settings, search }: any = searchState;
+  const { settings, search } = useAppSelector((state) => state);
   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);
+  const { apiKey, appId, indexName } = settings.algolia as AlgoliaSettings;
+  const searchClient = algoliasearch(appId, apiKey);
+  searchClient.initIndex(indexName);
 
   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(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 ");
@@ -74,10 +67,10 @@ function AppNewVersion(props: Props) {
   return (
     <Box className={`box-content-main ${isLoading ? "loading" : ""}`}>
       <InstantSearch
-        indexName={indexNameAlgolia}
+        indexName={indexName}
         searchClient={searchClient}
         searchState={searchStateInput}
-        onSearchStateChange={(state: any) => {
+        onSearchStateChange={(state) => {
           setSearchStateInput(state);
           dispatch(changeValueTextSearch(state));
           history.push("/result");

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

@@ -10,15 +10,6 @@ import React, { useEffect, useState } from "react";
 import IconWhatsApp from "common/assets/icons/Icon_whatsapp.png";
 import IconEmail from "common/assets/icons/icon_email.png";
 import IconWeChat from "common/assets/icons/Icon_wechat.png";
-// import FilterComponent from "components/FilterComponent";
-// import {
-//   dataFieldFive,
-//   dataFieldFour,
-//   dataFieldOne,
-//   dataFieldSix,
-//   dataFieldThree,
-//   dataFieldTow,
-// } from "./MockData";
 import ItemResult from "components/results/ItemResult";
 import { useAppDispatch, useAppSelector } from "Store/Store";
 import { debounce } from "lodash";
@@ -31,11 +22,10 @@ import DetailItem from "components/DetailItem";
 import FileCopyOutlinedIcon from "@material-ui/icons/FileCopyOutlined";
 import { RectCoords } from "@nyris/nyris-api";
 import {
-  loadFile,
+  setSearchResults,
   loadingActionResults,
-  searchFileImageNonRegion,
   selectionChanged,
-  updateResultChangePosition,
+  updateResultChangePosition, setRegions, setSelectedRegion,
 } from "Store/Search";
 import { showFeedback, showResults } from "Store/Nyris";
 import algoliasearch from "algoliasearch/lite";
@@ -46,37 +36,35 @@ import {
   Configure,
 } from "react-instantsearch-dom";
 import CustomSearchBox from "components/input/inputSearch";
-import { feedbackClickEpic } from "services/Feedback";
+import {feedbackClickEpic, feedbackSuccessEpic, feedbackTextSearchEpic} from "services/Feedback";
 import {
-  searchImageByPosition,
-  serviceImage,
-  serviceImageNonRegion,
+  createImage, findByImage, findRegions,
 } 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";
+import {AlgoliaResult, AlgoliaSettings} from "../../types";
 
 interface Props {}
 
+const defaultSelection = {x1: 0.1, x2: 0.9, y1: 0.1, y2: 0.9};
 function ResultComponent(props: Props) {
   const dispatch = useAppDispatch();
-  const StateGlobal = useAppSelector((state) => state);
+  const stateGlobal = useAppSelector((state) => state);
   const [showColLeft, setToggleShowColLeft] = useState<boolean>(false);
   const [showImageCanvas, setShowImageCanvas] = useState<boolean>(true);
   const [isOpenModalImage, setOpenModalImage] = useState<boolean>(false);
   const [numberResult, setNumberResult] = useState<number>(0);
   const [isOpenModalShare, setOpenModalShare] = useState<boolean>(false);
-  const { search, settings }: any = StateGlobal;
-  const { results, requestImage, regions, selectedRegion }: any = search;
+  const { search, settings } = stateGlobal;
+  const { results, requestImage, regions, selectedRegion } = search;
   const { valueTextSearch } = search;
   const [dataResult, setDataResult] = useState<any[]>([]);
   const [dataImageModal, setDataImageModal] = useState<any>();
   const [searchStateInput, setSearchStateInput] = useState<any>({});
-  const apiNyris = new NyrisAPI(settings);
   const [isLoading, setLoading] = useState<any>(false);
-  const { apiKeyAlgolia, appIdAlgolia, indexNameAlgolia } = settings;
-  const searchClient = algoliasearch(appIdAlgolia, apiKeyAlgolia);
-  const index = searchClient.initIndex(indexNameAlgolia);
+  const { apiKey, appId, indexName } = settings.algolia as AlgoliaSettings;
+  const searchClient = algoliasearch(appId, apiKey);
+  const index = searchClient.initIndex(indexName);
 
   useEffect(() => {
     if (!valueTextSearch) {
@@ -127,101 +115,64 @@ function ResultComponent(props: Props) {
   const handlerRectCoords = debounce((value: any) => {
     dispatch(selectionChanged(value));
     setLoading(true);
-    return onSearchOffersForImage(value);
+    return findItemsInSelection(value);
   }, 500);
 
   // TODO: Search offers for image:
-  const onSearchOffersForImage = (r: RectCoords) => {
+  const findItemsInSelection = (r: RectCoords) => {
     if (!requestImage) {
       return;
     }
     const { canvas }: any = requestImage;
-    if (settings.regions) {
-      searchImageByPosition(canvas, StateGlobal, r).then((res: any) => {
-        const payload = {
-          ...res,
-          requestImage: requestImage,
-        };
-        dispatch(updateResultChangePosition(payload));
-        setLoading(false);
-        return dispatch(showFeedback(""));
-      });
-    } else {
-      serviceImageNonRegion(canvas, StateGlobal, null).then((res: any) => {
-        const payload = {
-          ...res,
-          requestImage: requestImage,
-        };
-        dispatch(updateResultChangePosition(payload));
-        return dispatch(showFeedback(""));
-      });
-    }
+    findByImage(canvas, stateGlobal.settings, r).then((res) => {
+      const payload = {
+        ...res,
+      };
+      dispatch(updateResultChangePosition(payload));
+      setLoading(false);
+      return dispatch(showFeedback());
+    });
   };
 
   // TODO: Search text
   const searchTextByApiAndFilter = async (searchState: any) => {
     try {
       if (searchState?.query !== "") {
-        const data = await index.search(searchState.query, {});
-        const productIds = data.hits.map((hit: any) => hit.sku);
-        const eventData = {
-          query: data.query,
-          page: data.page,
-          product_ids: productIds,
-        };
-        const textSearchEvent: any = { event: "text-search", data: eventData };
-        await apiNyris.sendFeedback(
-          search?.sessionId,
-          search?.requestId,
-          textSearchEvent
-        );
+        const data = await index.search<AlgoliaResult>(searchState.query, {});
+        const productIds = data.hits.map((hit) => hit.sku);
+        await feedbackTextSearchEpic(stateGlobal, data.query, data.page, productIds);
       }
-    } catch (error: any) {
+    } catch (error) {
       console.log("searchTextByApi", error);
       return;
     }
   };
 
-  // TODO: Handler like dislike
-  const sendFeedBackAction = async (type: string) => {
-    try {
-      const action = type === "like" ? true : false;
-      const payload: any = {
-        event: "feedback",
-        data: {
-          success: action,
-        },
-      };
-      await apiNyris.sendFeedback(
-        search?.sessionId,
-        search?.requestId,
-        payload
-      );
-    } catch (error) {}
-  };
+  const sendFeedBackAction = async (type: string) =>
+    feedbackSuccessEpic(stateGlobal, type === "like");
 
   // Search image with url or file
-  const getUrlToCanvasFile = (url: string, position?: number) => {
-    dispatch(showResults(""));
-    dispatch(loadingActionResults(""));
+  const getUrlToCanvasFile = async (url: string, position?: number) => {
+    dispatch(showResults());
+    dispatch(loadingActionResults());
+    let image = await createImage(url);
     if (position) {
-      feedbackClickEpic(StateGlobal, position);
+      feedbackClickEpic(stateGlobal, position);
       return;
     }
+    let searchRegion : RectCoords | undefined = undefined;
     if (settings.regions) {
-      serviceImage(url, StateGlobal).then((res: any) => {
-        dispatch(loadFile(res));
-        setLoading(false);
-        return dispatch(showFeedback(""));
-      });
-
-      return;
-    } else {
-      serviceImageNonRegion(url, StateGlobal, undefined).then((res) => {
-        dispatch(searchFileImageNonRegion(res));
-      });
-      return;
+      let res = await findRegions(image, settings);
+      searchRegion = res.selectedRegion;
+      dispatch(setRegions(res.regions));
+      dispatch(setSelectedRegion(searchRegion));
     }
+
+    findByImage(image, settings, searchRegion).then((res ) => {
+      dispatch(setSearchResults(res));
+      setLoading(false);
+      return dispatch(showFeedback());
+    });
   };
 
   // Todo: item result.
@@ -247,12 +198,12 @@ function ResultComponent(props: Props) {
     );
   };
 
-  const nonEmptyFilter: any[] = !search?.requestImage
+  const nonEmptyFilter: any[] = !requestImage
     ? []
     : ["sku:DOES_NOT_EXIST<score=1>"];
   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 ");
@@ -267,10 +218,10 @@ function ResultComponent(props: Props) {
           </Box>
         )}
         <InstantSearch
-          indexName={indexNameAlgolia}
+          indexName={indexName}
           searchClient={searchClient}
           searchState={searchStateInput}
-          onSearchStateChange={(state: any) => {
+          onSearchStateChange={(state) => {
             setSearchStateInput(state);
             searchTextByApiAndFilter(state);
           }}
@@ -313,13 +264,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|| defaultSelection}
                             regions={regions}
                             maxWidth={400}
                             maxHeight={500}

package/src/services/Feedback.ts

@@ -1,65 +1,64 @@
-import NyrisAPI from "@nyris/nyris-api";
+import NyrisAPI, {FeedbackEventPayload, NyrisAPISettings, RectCoords} from "@nyris/nyris-api";
+import {RootState} from "../Store/Store";
 
-export const feedbackSuccessEpic = async (state: any, success: boolean) => {
+export const feedbackSuccessEpic = async (state: RootState, success: boolean) => {
   const { search, settings } = state;
-  try {
-    const api = new NyrisAPI(settings);
-    const sessionId = search.sessionId || search.requestId;
-    return await api.sendFeedback(sessionId, search.requestId, {
-      event: "feedback",
-      data: { success },
-    });
-  } catch (error) {
-    console.log("error feedbackSuccessEpic", error);
-  }
+  return await sendFeedbackByApi(settings, search.sessionId, search.requestId, {
+    event: 'feedback',
+    data: { success }
+  });
+};
+
+export const feedbackClickEpic = async (state: RootState, position: number) => {
+  const { search, settings } = state;
+  return await sendFeedbackByApi(settings, search.sessionId, search.requestId, {
+    event: "click",
+    data: { positions: [position] },
+  });
 };
 
-export const feedbackClickEpic = async (state: any, position: number) => {
+export const feedbackTextSearchEpic = async (state: RootState, query: string, page: number, productIds: string[]) => {
   try {
     const { search, settings } = state;
-    const api = new NyrisAPI(settings);
-    const sessionId = search.sessionId || search.requestId;
-    if (sessionId && state.search.requestId) {
-      await api.sendFeedback(sessionId, state.search.requestId, {
-        event: "click",
-        data: { positions: [position] },
-      });
-    }
+    const eventData = {
+      query,
+      page,
+      product_ids: productIds,
+    };
+    const textSearchEvent = { event: "text-search", data: eventData };
+    // @ts-ignore
+    return await sendFeedbackByApi(settings, search.sessionId, search.requestId, textSearchEvent);
   } catch (error) {
-    console.log("error feedbackClickEpic", feedbackClickEpic);
+    console.log("error feedbackTextSearchEpic", error);
   }
 };
 
-export const feedbackRegionEpic = async (state: any, region: any) => {
-  try {
-    const { search, settings } = state;
-    const api = new NyrisAPI(settings);
-    const sessionId = search.sessionId || search.requestId;
-    const { x1, x2, y1, y2 } = region;
-    if (sessionId && search.requestId) {
-      await api.sendFeedback(sessionId, search.requestId, {
+export const feedbackRegionEpic = async (state: RootState, region: RectCoords) => {
+  const {settings, search} = state;
+  const {sessionId, requestId } = search;
+  const { x1, x2, y1, y2 } = region;
+  const payload : FeedbackEventPayload = {
         event: "region",
-        data: { rect: { x: x1, y: y1, w: x2 - x1, h: y2 - y1 } },
-      });
-    }
-  } catch (error) {
-    console.log("error feedbackRegionEpic", error);
-  }
+        data: { rect: { x: x1, y: y1, w: x2 - x1, h: y2 - y1 } }
+  };
+  return await sendFeedbackByApi(settings, sessionId, requestId, payload);
 };
 
 export const sendFeedbackByApi = async (
-  settings: any,
-  sessionId: any,
-  requestId: any,
-  payload: any
+  settings: NyrisAPISettings,
+  sessionId: string | undefined,
+  requestId: string | undefined,
+  payload: FeedbackEventPayload
 ) => {
   const api = new NyrisAPI(settings);
-  try {
-    const dataByApi = await api
-      .sendFeedback(sessionId, requestId, payload)
-      .then((res) => {});
-    console.log("dataByApi", dataByApi);
-  } catch (error) {
-    console.log("error sendFeedbackByApi321", error);
+  if (sessionId && requestId) {
+    try {
+      const dataByApi = await api
+        .sendFeedback(sessionId, requestId, payload)
+        .then((res) => {});
+      console.log("dataByApi", dataByApi);
+    } catch (error) {
+      console.log("error sendFeedbackByApi321", error);
+    }
   }
 };