@nyris/nyris-webapp 0.3.1 → 0.3.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nyris/nyris-webapp",
-  "version": "0.3.1",
+  "version": "0.3.4",
   "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.1",
-    "@nyris/nyris-react-components": "^0.3.1",
+    "@nyris/nyris-api": "^0.3.4",
+    "@nyris/nyris-react-components": "^0.3.4",
     "@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,14 @@ 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 { 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

@@ -80,11 +80,12 @@ 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,
@@ -144,19 +145,19 @@ export const searchSlice = createSlice({
         fetchingRegions: false,
       };
     },
-    submitPositiveFeedback: (state, data: PayloadAction<RectCoords>) => {
+    submitPositiveFeedback: () => {
       return;
     },
-    submitNegativeFeedback: (state, data: PayloadAction<RectCoords>) => {
+    submitNegativeFeedback: () => {
       return;
     },
-    loadingActionResults: (state, _data: PayloadAction<any>) => {
+    loadingActionResults: (state) => {
       return {
         ...state,
         fetchingResults: true,
       };
     },
-    loadingActionRegions: (state, _data: PayloadAction<any>) => {
+    loadingActionRegions: (state) => {
       return {
         ...state,
         fetchingRegions: true,
@@ -249,7 +250,7 @@ export const searchSlice = createSlice({
 });
 
 export const {
-  loadFile,
+  setSearchResults,
   selectionChanged,
   submitPositiveFeedback,
   submitNegativeFeedback,

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

@@ -6,7 +6,7 @@ import { makeFileHandler } from "@nyris/nyris-react-components";
 import { useAppDispatch, useAppSelector } from "Store/Store";
 import { serviceImage, serviceImageNonRegion } from "services/image";
 import {
-  loadFile,
+  setSearchResults,
   loadingActionResults,
   searchFileImageNonRegion,
 } from "Store/Search";
@@ -40,7 +40,7 @@ function DragDropFile(props: Props) {
       setLoadingLoadFile(true);
       console.log("fs", fs);
 
-      return serviceImage(fs[0], searchState).then((res: any) => {
+      return serviceImage(fs[0], searchState.settings).then((res: any) => {
         console.log("res?.results", res);
 
         res?.results.map((item: any) => {
@@ -56,29 +56,29 @@ 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) => {
     onChangeLoading(true);
-    dispatch(showResults(""));
-    dispatch(loadingActionResults(""));
+    dispatch(showResults());
+    dispatch(loadingActionResults());
     if (position) {
       feedbackClickEpic(searchState, position);
     }
 
     if (settings.regions) {
-      serviceImage(url, searchState).then((res) => {
-        dispatch(loadFile(res));
+      serviceImage(url, searchState.settings).then((res) => {
+        dispatch(setSearchResults(res));
         onChangeLoading(false);
         history.push("/result");
-        return dispatch(showFeedback(""));
+        return dispatch(showFeedback());
       });
     } else {
       serviceImageNonRegion(url, searchState, rectCoords).then((res) => {

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/FilterComponent.tsx

@@ -2,35 +2,21 @@ import { Box, Button, Grid } from "@material-ui/core";
 import DefaultSelect from "components/default-select";
 import React from "react";
 
-interface Props {
-  dataFieldOne: any[];
-  dataFieldTow: any[];
-  dataFieldThree: any[];
-  dataFieldFour: any[];
-  dataFieldFive: any[];
-  dataFieldSix: any[];
-}
+interface Props {}
 
 function FilterComponent(props: Props) {
-  const {
-    dataFieldOne,
-    dataFieldTow,
-    dataFieldThree,
-    dataFieldFour,
-    dataFieldFive,
-    dataFieldSix,
-  } = props;
+  const {} = props;
 
   return (
     <Box className="box-main-filter">
       <Grid container>
         <Grid item className="item">
-          <DefaultSelect attribute="brand"  />
+          <DefaultSelect attribute="brand" />
         </Grid>
         <Grid item className="item">
-          <DefaultSelect attribute="keyword_0"  />
+          <DefaultSelect attribute="keyword_0" />
         </Grid>
-        
+
         <Grid item className="item-seven text-center">
           <Button
             className="text-btn-small bg-pink text-red"

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"}

package/src/components/LoadingScreen/index.tsx

@@ -11,19 +11,6 @@ function LoadingScreen({
   searching,
 }: any) {
   const [isLoading] = useState<boolean>(false);
-  // const hasResults = searchResults && searchResults.nbHits !== 0;
-
-  // useEffect(() => {
-  //   if (searching) {
-  //     return;
-  //   } else {
-  //     setLoading(true);
-  //     setTimeout(() => {
-  //       setLoading(false);
-  //     }, 1000);
-  //   }
-  // }, [searching, searchResults]);
-  console.log("searchResults", searchResults);
 
   return (
     <>

package/src/components/default-select.tsx

@@ -1,6 +1,5 @@
-import { Box, MenuItem, Select } from "@material-ui/core";
+import { Box } from "@material-ui/core";
 import React, { useEffect, useState } from "react";
-import KeyboardArrowDownOutlinedIcon from "@material-ui/icons/KeyboardArrowDownOutlined";
 import { connectMenu } from "react-instantsearch-dom";
 
 interface Props {

package/src/index.tsx

@@ -20,9 +20,10 @@ document.title = window.location.host;
 
 let md: MDSettings = {
   ...defaultMdSettings,
-  ...settings.materialDesign,
+  ...settings.themePage.materialDesign,
 };
 
+
 let theme = createTheme({
   typography: {
     fontFamily: md.customFontFamily,