@nyris/nyris-webapp 0.3.2 → 0.3.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nyris/nyris-webapp",
-  "version": "0.3.2",
+  "version": "0.3.5",
   "homepage": "./",
   "dependencies": {
     "@babel/runtime": "^7.17.2",
@@ -8,8 +8,8 @@
     "@material-ui/data-grid": "^4.0.0-alpha.37",
     "@material-ui/icons": "^4.4.1",
     "@material-ui/lab": "^4.0.0-alpha.60",
-    "@nyris/nyris-api": "^0.3.2",
-    "@nyris/nyris-react-components": "^0.3.2",
+    "@nyris/nyris-api": "^0.3.5",
+    "@nyris/nyris-react-components": "^0.3.5",
     "@reduxjs/toolkit": "^1.6.1",
     "@types/blueimp-load-image": "^2.23.4",
     "@types/classnames": "^2.2.9",

package/public/js/test.js

@@ -12,15 +12,14 @@ var settings = {
   resultTemplate: "default",
   responseFormat: "application/offers.complete+json",
   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://storage.googleapis.com/nyris/share/examples_search/example_1.jpg",
+    "https://storage.googleapis.com/nyris/share/examples_search/example_2.jpg",
+    "https://storage.googleapis.com/nyris/share/examples_search/example_3.jpg",
+    "https://storage.googleapis.com/nyris/share/examples_search/example_4.jpg",
   ],
   deactivated: false,
   cadSearch: false,
-  theme: {
+  themePage: {
     default: {
       active: false,
     },
@@ -40,23 +39,18 @@ var settings = {
         resultLinkIcon: "eye",
       },
     },
-    searchSuite: {
+    newVersion: {
       active: true,
     },
   },
-
-  algolia: {
-    appIdAlgolia: "HBDJYUK5G4",
-    indexNameAlgolia: "Normparts",
-    apiKeyAlgolia: "f6a833ff662086f362b93064b9de6f02",
-  },
-  apiNyris: {
-    imageMatchingUrl: "https://api.nyris.io/find/v1",
-    imageMatchingUrlBySku: "https://api.nyris.io/recommend/v1",
-    imageMatchingSubmitManualUrl: "https://api.nyris.io/find/v1/manual",
-    regionProposalUrl: "https://api.nyris.io/find/v1/regions",
-    feedbackUrl: "https://api.nyris.io/feedback/v1",
-  }
+  imageMatchingUrl: "https://api.nyris.io/find/v1",
+  imageMatchingUrlBySku: "https://api.nyris.io/recommend/v1",
+  imageMatchingSubmitManualUrl: "https://api.nyris.io/find/v1/manual",
+  regionProposalUrl: "https://api.nyris.io/find/v1/regions",
+  feedbackUrl: "https://api.nyris.io/feedback/v1",
+  appIdAlgolia: "HBDJYUK5G4",
+  indexNameAlgolia: "Normparts",
+  apiKeyAlgolia: "f6a833ff662086f362b93064b9de6f02",
 };
 settings["customSearchRequest"] = null;
 settings["responseHook"] = null;

package/src/App.tsx

@@ -4,17 +4,13 @@ import React from "react";
 import "typeface-roboto";
 import "index.css";
 import { useAppSelector } from "Store/Store";
-import LandingPageApp from "modules/LandingPage/indexApp";
-import LandingPageAppMD from "modules/LandingPage/indexAppMD";
+import LandingPageApp from "modules/LandingPage/index";
 import AppNewVersion from "modules/LandingPage/indexNewVersion";
-import {AppState} from "./types";
 
 function App(): JSX.Element {
-  const { settings } = useAppSelector<AppState>((state: any) => state);
+  const { settings } = useAppSelector((state) => state);
   const { themePage } = settings;
-  let SelectedApp = 
-    themePage.default?.active ? LandingPageApp : (
-      themePage.materialDesign?.active ? LandingPageAppMD : AppNewVersion);
+  let SelectedApp = themePage.searchSuite?.active ? AppNewVersion : LandingPageApp;
 
   return <SelectedApp />;
 }

package/src/Store/Nyris.ts

@@ -1,4 +1,4 @@
-import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+import { createSlice } from "@reduxjs/toolkit";
 
 export type NyrisAppPart = "start" | "camera" | "results";
 export type NyrisFeedbackState =
@@ -20,7 +20,7 @@ export const nyrisSlice = createSlice({
   name: "nyris",
   initialState,
   reducers: {
-    showStart: (state, _data: PayloadAction<any>) => {
+    showStart: (state) => {
       return {
         ...state,
         showPart: "start",
@@ -32,31 +32,31 @@ export const nyrisSlice = createSlice({
         showPart: "camera",
       };
     },
-    showResults: (state, _data: PayloadAction<any>) => {
+    showResults: (state) => {
       return {
         ...state,
         showPart: "results",
       };
     },
-    showFeedback: (state, _data: PayloadAction<any>) => {
+    showFeedback: (state) => {
       return {
         ...state,
         feedbackState: "question",
       };
     },
-    hideFeedback: (state, _data: PayloadAction<any>) => {
+    hideFeedback: (state) => {
       return {
         ...state,
         feedbackState: "hidden",
       };
     },
-    feedbackSubmitPositive: (state, _data: PayloadAction<any>) => {
+    feedbackSubmitPositive: (state) => {
       return {
         ...state,
         feedbackState: "positive",
       };
     },
-    feedbackNegative: (state, _data: PayloadAction<any>) => {
+    feedbackNegative: (state) => {
       return {
         ...state,
         feedbackState: "negative",

package/src/Store/Search.ts

@@ -2,37 +2,6 @@ import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 import { CanvasWithId } from "types";
 import { Code, RectCoords, Region } from "@nyris/nyris-api";
 
-export type ImageSourceType =
-  | { url: string }
-  | { file: File }
-  | { image: HTMLCanvasElement };
-
-export type SearchAction =
-  | { type: "FEEDBACK_SUBMIT_POSITIVE" }
-  | { type: "FEEDBACK_SUBMIT_NEGATIVE" }
-  | { type: "IMAGE_LOADED"; image: CanvasWithId }
-  | { type: "REGION_REQUEST_START"; image: HTMLCanvasElement }
-  | { type: "REGION_REQUEST_SUCCEED"; regions: Region[] }
-  | { type: "REGION_REQUEST_FAIL"; reason: string; exception: any }
-  | {
-      type: "SEARCH_REQUEST_START";
-      image: HTMLCanvasElement;
-      normalizedRect?: RectCoords;
-    }
-  | { type: "SEARCH_REQUEST_START"; file: File }
-  | {
-      type: "SEARCH_REQUEST_SUCCEED";
-      results: any[];
-      requestId: string;
-      duration: number;
-      categoryPredictions: CategoryPrediction[];
-      codes: Code[];
-    }
-  | { type: "SEARCH_REQUEST_FAIL"; reason: string; exception?: any }
-  | { type: "REGION_CHANGED"; normalizedRect: RectCoords }
-  | ({ type: "LOAD_IMAGE" } & ImageSourceType)
-  | { type: "LOAD_FILE"; file: File }
-  | { type: "CAD_LOADED"; file: File };
 
 interface CategoryPrediction {
   name: string;
@@ -45,12 +14,11 @@ export interface SearchState {
   requestId?: string;
   sessionId?: string;
   regions: Region[];
-  selectedRegion: RectCoords;
+  selectedRegion?: RectCoords;
   fetchingRegions: boolean;
   fetchingResults: boolean;
   filterOptions: string[];
   requestImage?: CanvasWithId;
-  requestCadFile?: File;
   categoryPredictions: CategoryPrediction[];
   codes: Code[];
   errorMessage: string;
@@ -65,7 +33,7 @@ export interface SearchState {
 const initialState: SearchState = {
   results: [],
   regions: [],
-  selectedRegion: { x1: 0.1, x2: 0.9, y1: 0.1, y2: 0.9 },
+  selectedRegion: undefined,
   requestImage: undefined,
   fetchingResults: false,
   fetchingRegions: false,
@@ -80,46 +48,51 @@ const initialState: SearchState = {
   loadingSearchAlgolia: false,
 };
 
-export const searchSlice = createSlice({
-  name: "search",
-  initialState,
-  reducers: {
-    loadFile: (state, data: PayloadAction<any>) => {
+
+  export const searchSlice = createSlice({
+    name: "search",
+    initialState,
+    reducers: {
+      setSearchResults: (state, data) => {
       const { payload } = data;
       const {
-        requestImage,
         results,
         requestId,
         categoryPredictions,
         codes,
         duration,
-        regions,
-        selectedRegion,
         filters,
       } = payload;
       return {
         ...state,
         filters,
-        requestImage,
         results,
         requestId,
         categoryPredictions,
         codes,
         duration,
         sessionId: state.sessionId || requestId,
-        regions,
-        selectedRegion,
         fetchingResults: false,
       };
     },
 
-    loadCadFileLoad: (state, data: PayloadAction<any>) => {
-      const { payload } = data;
-      return {
+    setRegions: (state, data: PayloadAction<Region[]>) => ({
+      ...state,
+      regions: data.payload
+    }),
+
+    setSelectedRegion: (state, data: PayloadAction<RectCoords|undefined>) => ({
+      ...state,
+      selectedRegion: data.payload
+    }),
+
+    setRequestImage: (state, data: PayloadAction<HTMLCanvasElement>) => ({
         ...state,
-        requestCadFile: payload,
-      };
-    },
+        requestImage: {
+          canvas: data.payload,
+          id: Math.random().toString()
+        }
+    }),
 
     selectionChanged: (state, data: PayloadAction<RectCoords>) => {
       const { payload } = data;
@@ -144,19 +117,13 @@ export const searchSlice = createSlice({
         fetchingRegions: false,
       };
     },
-    submitPositiveFeedback: (state, data: PayloadAction<RectCoords>) => {
-      return;
-    },
-    submitNegativeFeedback: (state, data: PayloadAction<RectCoords>) => {
-      return;
-    },
-    loadingActionResults: (state, _data: PayloadAction<any>) => {
+    loadingActionResults: (state) => {
       return {
         ...state,
         fetchingResults: true,
       };
     },
-    loadingActionRegions: (state, _data: PayloadAction<any>) => {
+    loadingActionRegions: (state) => {
       return {
         ...state,
         fetchingRegions: true,
@@ -170,7 +137,6 @@ export const searchSlice = createSlice({
         duration,
         categoryPredictions,
         codes,
-        requestImage,
       } = payload;
       return {
         ...state,
@@ -179,32 +145,31 @@ export const searchSlice = createSlice({
         duration,
         categoryPredictions,
         codes,
-        requestImage,
         fetchingResults: false,
       };
     },
-    changeValueTextSearch: (state: any, data: PayloadAction<any>) => {
+    changeValueTextSearch: (state, data: PayloadAction<any>) => {
       const { payload } = data;
       return {
         ...state,
         valueTextSearch: payload,
       };
     },
-    resultSearchText: (state: any, data: PayloadAction<any>) => {
+    resultSearchText: (state, data: PayloadAction<any>) => {
       const { payload } = data;
       return {
         ...state,
         resultSearchText: payload,
       };
     },
-    updateResults: (state: any, data: PayloadAction<any>) => {
+    updateResults: (state, data: PayloadAction<any>) => {
       const { payload } = data;
       return {
         ...state,
         results: payload,
       };
     },
-    reset: (state: any, data: PayloadAction<any>) => {
+    reset: (state, data: PayloadAction<any>) => {
       return {
         results: [],
         regions: [],
@@ -222,22 +187,21 @@ export const searchSlice = createSlice({
         loadingSearchAlgolia: false,
       };
     },
-    configureFilter: (state: any, data: PayloadAction<any>) => {
+    configureFilter: (state, data: PayloadAction<any>) => {
       const { payload } = data;
       return {
         ...state,
         configureFilter: payload,
       };
     },
-    setUpdateSession: (state: any, data: PayloadAction<any>) => {
+    setUpdateSession: (state, data: PayloadAction<string>) => {
       const { payload } = data;
       return {
         ...state,
-        requestId: payload.requestId,
-        sessionId: payload.sessionId,
+        sessionId: payload,
       };
     },
-    updateResultChangePosition: (state: any, data: PayloadAction<any>) => {
+    updateResultChangePosition: (state, data: PayloadAction<any>) => {
       const { payload } = data;
       const { results } = payload;
       return {
@@ -245,16 +209,25 @@ export const searchSlice = createSlice({
         results,
       };
     },
+
+    setError: (state, data: PayloadAction<string>) => {
+        return {
+          ...state,
+          fetchingRegions: false,
+          fetchingResults: false,
+          errorMessage: data.payload
+        }
+    }
   },
 });
 
 export const {
-  loadFile,
+  setSearchResults,
   selectionChanged,
-  submitPositiveFeedback,
-  submitNegativeFeedback,
-  loadCadFileLoad,
+  setRequestImage,
   loadFileSelectRegion,
+  setRegions,
+  setSelectedRegion,
   loadingActionResults,
   loadingActionRegions,
   searchFileImageNonRegion,
@@ -265,5 +238,6 @@ export const {
   configureFilter,
   setUpdateSession,
   updateResultChangePosition,
+  setError,
 } = searchSlice.actions;
 export default searchSlice.reducer;

package/src/Store/Store.ts

@@ -1,21 +1,29 @@
 import { configureStore } from "@reduxjs/toolkit";
 import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
 import { combineReducers } from "redux";
-import thunk from "redux-thunk";
 import Auth from "Store/Auth";
-import { AppSettings } from "types";
-import { defaultSettings } from "defaults";
+import {AppSettings, MDSettings} from "types";
 import { getUrlParam } from "utils";
 import Search from "Store/Search";
 import Nyris from "Store/Nyris";
+import {defaultMdSettings, defaultSettings} from "../defaults";
 
 declare var settings: AppSettings;
 
+
+
 let normalizedSettings: AppSettings = {
   ...defaultSettings,
   ...settings,
 };
 
+// spread default settings for material design
+let mdSettings : MDSettings = {
+  ...defaultMdSettings,
+  ...settings.themePage.materialDesign
+}
+normalizedSettings.themePage.materialDesign = mdSettings;
+
 normalizedSettings = {
   ...normalizedSettings,
   apiKey: (getUrlParam("apiKey") as string) || normalizedSettings.apiKey,
@@ -28,7 +36,7 @@ normalizedSettings = {
 
 const reducers = combineReducers({
   auth: Auth,
-  settings: () => normalizedSettings as AppSettings,
+  settings: () => normalizedSettings,
   search: Search,
   nyris: Nyris,
 });
@@ -36,7 +44,6 @@ const reducers = combineReducers({
 export const store = configureStore({
   reducer: reducers,
   devTools: process.env.NODE_ENV !== "production",
-  middleware: [thunk],
 });
 
 export type RootState = ReturnType<typeof store.getState>;

package/src/components/CustomHits/index.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { connectHits } from "react-instantsearch-dom";
+import ItemResult from "components/results/ItemResult";
+
+function Hits({
+  hits,
+  setDataResultToAlgolia,
+  handlerToggleModal,
+  setOpenModalShare,
+  setSearchStateInput,
+  getUrlToCanvasFile,
+  setLoading,
+  sendFeedBackAction,
+}: any): JSX.Element {
+  const handleSearch = () => {
+    setDataResultToAlgolia(hits);
+  };
+  console.log("hitshits", hits);
+
+  return (
+    <>
+      {handleSearch}
+      {hits.map((hit: any, index: any) => {
+        return (
+          <ItemResult
+            key={index}
+            dataItem={hit}
+            handlerToggleModal={() => {
+              handlerToggleModal(hit);
+            }}
+            handlerToggleModalShare={() => setOpenModalShare(true)}
+            indexItem={hit.__position}
+            isHover={false}
+            onSearchImage={(url: any) => {
+              setSearchStateInput({});
+              getUrlToCanvasFile(url);
+              setLoading(true);
+            }}
+            handlerFeedback={(value: string) => {
+              sendFeedBackAction(value);
+            }}
+          />
+        );
+      })}
+    </>
+  );
+}
+
+Hits.propTypes = {
+  hits: PropTypes.arrayOf(PropTypes.object),
+  objectIDs: PropTypes.arrayOf(PropTypes.string),
+  setObjectIDs: PropTypes.func,
+};
+
+const CustomHits = connectHits(Hits);
+export default CustomHits;

package/src/components/DragDropFile.tsx

@@ -4,17 +4,18 @@ import { useDropzone } from "react-dropzone";
 import IconSearch from "common/assets/icons/icon_search_image.svg";
 import { makeFileHandler } from "@nyris/nyris-react-components";
 import { useAppDispatch, useAppSelector } from "Store/Store";
-import { serviceImage, serviceImageNonRegion } from "services/image";
+import {createImage, findByImage, findRegions} from "services/image";
 import {
-  loadFile,
+  setSearchResults,
   loadingActionResults,
-  searchFileImageNonRegion,
+  setRequestImage, setRegions, setSelectedRegion,
 } from "Store/Search";
 import { showFeedback, showResults } from "Store/Nyris";
 import { useHistory } from "react-router-dom";
 import ExampleImages from "./ExampleImages";
 import { feedbackClickEpic } from "services/Feedback";
 import { useState } from "react";
+import {RectCoords} from "@nyris/nyris-api";
 
 interface Props {
   acceptTypes: any;
@@ -28,11 +29,10 @@ function DragDropFile(props: Props) {
   const { acceptTypes, onChangeLoading, isLoading } = props;
   const searchState = useAppSelector((state) => state);
   const { settings } = searchState;
-  const [rectCoords] = useState<any>(undefined);
   const [isLoadingLoadFile, setLoadingLoadFile] = useState<any>(false);
 
   const { getRootProps, getInputProps, isDragActive } = useDropzone({
-    onDrop: (fs: File[]) => {
+    onDrop: async (fs: File[]) => {
       onChangeLoading(true);
       console.log("321");
       let payload: any;
@@ -40,7 +40,10 @@ function DragDropFile(props: Props) {
       setLoadingLoadFile(true);
       console.log("fs", fs);
 
-      return serviceImage(fs[0], searchState).then((res: any) => {
+      let image = await createImage(fs[0]);
+      dispatch(setRequestImage(image));
+      // TODO support regions
+      return findByImage(image, searchState.settings).then((res: any) => {
         console.log("res?.results", res);
 
         res?.results.map((item: any) => {
@@ -56,37 +59,38 @@ function DragDropFile(props: Props) {
         };
         console.log("payload", payload);
 
-        dispatch(loadFile(payload));
+        dispatch(setSearchResults(payload));
         setLoadingLoadFile(false);
         onChangeLoading(false);
         history.push("/result");
-        return dispatch(showFeedback(""));
+        return dispatch(showFeedback());
       });
     },
   });
 
-  const getUrlToCanvasFile = (url: string, position?: number) => {
+  const getUrlToCanvasFile = async (url: string, position?: number) => {
     onChangeLoading(true);
-    dispatch(showResults(""));
-    dispatch(loadingActionResults(""));
+    dispatch(showResults());
+    dispatch(loadingActionResults());
     if (position) {
       feedbackClickEpic(searchState, position);
     }
 
+    let image = await createImage(url);
+    dispatch(setRequestImage(image));
+    let searchRegion: RectCoords| undefined = undefined;
     if (settings.regions) {
-      serviceImage(url, searchState).then((res) => {
-        dispatch(loadFile(res));
-        onChangeLoading(false);
-        history.push("/result");
-        return dispatch(showFeedback(""));
-      });
-    } else {
-      serviceImageNonRegion(url, searchState, rectCoords).then((res) => {
-        onChangeLoading(false);
-        history.push("/result");
-        dispatch(searchFileImageNonRegion(res));
-      });
+      let res = await findRegions(image, settings);
+      dispatch(setRegions(res.regions));
+      searchRegion = res.selectedRegion;
+      dispatch(setSelectedRegion(searchRegion));
     }
+    return findByImage(image, searchState.settings, searchRegion).then((res) => {
+      dispatch(setSearchResults(res));
+      onChangeLoading(false);
+      history.push("/result");
+      return dispatch(showFeedback());
+    });
   };
 
   return (

package/src/components/ExampleImages.tsx

@@ -15,10 +15,10 @@ const ExampleImages: React.FC<ExampleImagesProps> = ({
   }
   return (
     <section className="useExampleImg">
-      <Typography className="title-box">
+      <Typography className="title-box text-center">
         You can also try one of these pictures:
       </Typography>
-      <div className="exampleImages">
+      <div className="exampleImages d-flex justify-center">
         <div className="exImagesWrap">
           {images.map((i) => {
             return (

package/src/components/Feedback.tsx

@@ -19,9 +19,9 @@ const Feedback: React.FC<FeedbackProps> = ({ feedbackState, onClose }) => {
   const onPositiveFeedback = (data: boolean) => {
     feedbackSuccessEpic(state, data);
     if (data) {
-      dispatch(feedbackSubmitPositive(""));
+      dispatch(feedbackSubmitPositive());
     } else {
-      dispatch(feedbackNegative(""));
+      dispatch(feedbackNegative());
     }
   };
 

package/src/components/Footer.tsx

@@ -19,7 +19,7 @@ function FooterComponent(): JSX.Element {
       <Feedback
         feedbackState={feedbackState}
         onClose={() => {
-          return dispatch(hideFeedback(""));
+          return dispatch(hideFeedback());
         }}
       />
     </>

package/src/components/HeaderMd.tsx

@@ -1,17 +1,16 @@
 import React from "react";
 import { Container, Toolbar, Typography, AppBar } from "@material-ui/core";
-import { defaultMdSettings } from "defaults";
 import { useAppSelector } from "Store/Store";
+import {MDSettings} from "../types";
 interface Props {
   settings: any;
 }
 
 function HeaderMdComponent(): JSX.Element {
-  const { settings } = useAppSelector((state: any) => state);
+  const { settings } = useAppSelector((state) => state);
   const { themePage } = settings;
-  const mdSettings: any = themePage.materialDesign.active
-    ? themePage.materialDesign.materialDesign
-    : defaultMdSettings;
+  const mdSettings = themePage.materialDesign as MDSettings;
+
   return (
     <AppBar
       position={"relative"}