@nyris/nyris-webapp 0.3.12 → 0.3.15

package/src/components/Sidebar.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 import { RiMenuLine } from "react-icons/ri";
 import { Filter } from "../../../nyris-api/index";
 import FiltersList from "./FiltersList";
@@ -9,43 +9,23 @@ interface SidebarProps {
 }
 
 const Sidebar: React.FC<SidebarProps> = ({ filters, selectedFilters }) => {
-  console.log(filters);
-  const [isExpanded, setIsExpanded] = useState(false);
-  const handleToggler = () => {
-    if (isExpanded) {
-      setIsExpanded(false);
-      return;
-    }
-    setIsExpanded(true);
-  };
   return (
-    <div className={isExpanded ? "sidebar" : "Sidebar collapsed"}>
-      <div
-        className={
-          isExpanded ? "sidebarContent" : "sidebarContent overflowHidden"
-        }
-      >
-        <div className="sidebarHeader">
-          <RiMenuLine className="sidebar-icon" onClick={handleToggler} />
-          {/* <h1 className={isExpanded ? "sidebar-logo" : "sidebar-logo collapsedHide"}> Filters </h1>
-           */}
-        </div>
-        <div
-          className={
-            isExpanded ? "Sidebar-items" : "Sidebar-items collapsedHide"
-          }
-        >
-          {filters &&
-            filters.map((x) => {
-              let selectedValues = x.key
-                ? selectedFilters.get(x.key)
-                : undefined;
-              return <FiltersList filter={x} selectedValues={selectedValues} />;
-            })}
-          {/* <FiltersList2/> */}
-        </div>
-      </div>
-    </div>
+     <div className = "sidebar">
+     <div className= "sidebarContent" >
+       <div className="sidebarHeader">
+         <RiMenuLine className="sidebar-icon" />
+       </div>
+       <div  className="Sidebar-items" >
+         {filters &&
+           filters.map((x) => {
+             let selectedValues = x.key
+               ? selectedFilters.get(x.key)
+               : undefined;
+             return <FiltersList filter={x} selectedValues={selectedValues} />;
+           })}
+       </div>
+     </div>
+   </div>
   );
 };
 

package/src/epics/index.ts

@@ -1,184 +1,135 @@
-import { combineEpics, ofType } from "redux-observable";
-import {
-  debounceTime,
-  delay,
-  ignoreElements,
-  map,
-  switchMap,
-  tap,
-  withLatestFrom,
-} from "rxjs/operators";
-import { showFeedback, showResults } from "../actions/nyrisAppActions";
-import { EpicConf } from "./types";
+import {combineEpics, ofType} from "redux-observable";
+import {debounceTime, delay, ignoreElements, map, switchMap, tap, withLatestFrom} from "rxjs/operators";
+import {showFeedback, showResults} from "../actions/nyrisAppActions";
+import {EpicConf} from "./types";
 import feedbackEpics from "./feedback";
 import searchEpics from "./search";
-import {
-  searchOffersForImage,
-  searchOffersForCad,
-  searchRegions,
-} from "../actions/searchActions";
-import { AppAction } from "../types";
-import { selectFirstCenteredRegion } from "@nyris/nyris-api";
-
-const historyEpic: EpicConf = (action$, state$, { history }) =>
-  action$.pipe(
-    ofType("SHOW_RESULTS", "SHOW_START"),
-    withLatestFrom(state$),
-    tap(([action, state]) => {
+import {searchOffersForImage, searchOffersForCad, searchRegions} from "../actions/searchActions";
+import {AppAction} from "../types";
+import {selectFirstCenteredRegion} from "@nyris/nyris-api";
+
+
+const historyEpic: EpicConf = (action$, state$, {history}) => action$.pipe(
+  ofType('SHOW_RESULTS', 'SHOW_START'),
+  tap((action) => {
       let { type } = action;
-      console.log("action");
-      console.log(state.search.selectedFilters);
-      // action to clear all filters
-      if (type === "SHOW_RESULTS" && history.location.pathname !== "/results") {
-        history.push("/results");
+      if (type === 'SHOW_RESULTS' && history.location.pathname !== '/results') {
+          history.push('/results');
       }
-      if (type === "SHOW_START" && history.location.pathname !== "/") {
-        history.goBack();
+      if (type === 'SHOW_START' && history.location.pathname !== '/') {
+          history.goBack();
       }
-    }),
-    ignoreElements()
-  );
+  }),
+  ignoreElements()
+);
 
-const onSearchSuccessShowResults: EpicConf = (action$) =>
-  action$.pipe(ofType("SEARCH_REQUEST_SUCCEED"), map(showResults));
+const onSearchSuccessShowResults: EpicConf = (action$) => action$.pipe(
+  ofType('SEARCH_REQUEST_SUCCEED'),
+  map(showResults)
+);
 
-const onSearchSuccessRedirectToSite: EpicConf = (action$, state$) =>
-  action$.pipe(
-    ofType("SEARCH_REQUEST_SUCCEED"),
-    withLatestFrom(state$),
-    tap(([action, { settings }]) => {
-      if (
-        action.type !== "SEARCH_REQUEST_SUCCEED" ||
-        !action.results ||
-        action.results.length !== 1
-      ) {
-        return;
+const onSearchSuccessRedirectToSite: EpicConf = (action$, state$) => action$.pipe(
+  ofType('SEARCH_REQUEST_SUCCEED'),
+  withLatestFrom(state$),
+  tap(([action, {settings}]) => {
+      if (action.type !== 'SEARCH_REQUEST_SUCCEED' || !action.results || action.results.length !== 1) {
+          return;
       }
 
       const firstLink = action.results[0].l;
       const instantRedirectPatterns = settings.instantRedirectPatterns;
-      if (!instantRedirectPatterns.find((r) => new RegExp(r).test(firstLink))) {
-        return;
+      if (!instantRedirectPatterns.find(r => new RegExp(r).test(firstLink))) {
+          return;
       }
       window.location.href = firstLink;
-    }),
-    ignoreElements()
-  );
+  }),
+  ignoreElements()
+);
 
-const onSearchSuccessShowFeedbackDelayed: EpicConf = (action$) =>
-  action$.pipe(
-    ofType("SEARCH_REQUEST_SUCCEED"),
-    delay(3000),
-    map(showFeedback)
-  );
+const onSearchSuccessShowFeedbackDelayed: EpicConf = (action$) => action$.pipe(
+  ofType('SEARCH_REQUEST_SUCCEED'),
+  delay(3000),
+  map(showFeedback)
+);
 
-const startSearchOnImageLoaded: EpicConf = (action$, state$) =>
-  action$.pipe(
-    ofType("IMAGE_LOADED"),
-    withLatestFrom(state$),
-    switchMap(async ([action, { settings }]): Promise<AppAction> => {
-      if (action.type !== "IMAGE_LOADED") {
-        throw new Error(`Wrong action type ${action.type}`);
+
+const startSearchOnImageLoaded: EpicConf = (action$, state$) => action$.pipe(
+  ofType('IMAGE_LOADED'),
+  withLatestFrom(state$),
+  switchMap(async ([action, {settings}]) : Promise<AppAction> => {
+      if (action.type !== 'IMAGE_LOADED') {
+          throw new Error(`Wrong action type ${action.type}`);
       }
 
       let { image } = action;
 
       if (settings.regions) {
-        return searchRegions(image.canvas);
+          return searchRegions(image.canvas);
       }
       return searchOffersForImage(image.canvas);
-    })
-  );
+  })
+);
 
-const startSearchOnCadLoaded: EpicConf = (action$, state$) =>
-  action$.pipe(
-    ofType("CAD_LOADED"),
-    withLatestFrom(state$),
-    switchMap(async ([action, { settings }]): Promise<AppAction> => {
-      if (action.type !== "CAD_LOADED") {
-        throw new Error(`Wrong action type ${action.type}`);
+const startSearchOnCadLoaded: EpicConf = (action$, state$) => action$.pipe(
+  ofType('CAD_LOADED'),
+  withLatestFrom(state$),
+  switchMap(async ([action, {settings}]) : Promise<AppAction> => {
+      if (action.type !== 'CAD_LOADED') {
+          throw new Error(`Wrong action type ${action.type}`);
       }
       let { file } = action;
       return searchOffersForCad(file);
-    })
-  );
+  })
+);
 
-const startSearchOnRegionsSuccessful: EpicConf = (action$, state$) =>
-  action$.pipe(
-    ofType("REGION_REQUEST_SUCCEED"),
-    withLatestFrom(state$),
-    switchMap(
-      async ([
-        action,
-        {
-          search: { requestImage },
-        },
-      ]): Promise<AppAction> => {
-        if (action.type !== "REGION_REQUEST_SUCCEED") {
+const startSearchOnRegionsSuccessful: EpicConf = (action$, state$) => action$.pipe(
+  ofType('REGION_REQUEST_SUCCEED'),
+  withLatestFrom(state$),
+  switchMap(async ([action, { search: { requestImage}}]) : Promise<AppAction> => {
+      if (action.type !== 'REGION_REQUEST_SUCCEED') {
           throw new Error(`Wrong action type ${action.type}`);
-        }
-        if (!requestImage) {
+      }
+      if (!requestImage) {
           throw new Error(`No requestImage`);
-        }
-        let { regions } = action;
-
-        let selection = selectFirstCenteredRegion(regions, 0.3, {
-          x1: 0,
-          x2: 1,
-          y1: 0,
-          y2: 1,
-        });
-        return searchOffersForImage(requestImage.canvas, selection);
       }
-    )
-  );
+      let { regions } = action;
 
-const startSearchOnRegionsFailed: EpicConf = (action$, state$) =>
-  action$.pipe(
-    ofType("REGION_REQUEST_FAIL"),
-    withLatestFrom(state$),
-    switchMap(
-      async ([
-        action,
-        {
-          search: { requestImage },
-        },
-      ]): Promise<AppAction> => {
-        if (action.type !== "REGION_REQUEST_FAIL") {
+      let selection = selectFirstCenteredRegion(regions, 0.3, {x1: 0, x2: 1, y1: 0, y2: 1});
+      return searchOffersForImage(requestImage.canvas, selection);
+  })
+);
+
+const startSearchOnRegionsFailed: EpicConf = (action$, state$) => action$.pipe(
+  ofType('REGION_REQUEST_FAIL'),
+  withLatestFrom(state$),
+  switchMap(async ([action, { search: { requestImage}}]) : Promise<AppAction> => {
+      if (action.type !== 'REGION_REQUEST_FAIL') {
           throw new Error(`Wrong action type ${action.type}`);
-        }
-        if (!requestImage) {
+      }
+      if (!requestImage) {
           throw new Error(`No requestImage`);
-        }
-
-        return searchOffersForImage(requestImage.canvas);
       }
-    )
-  );
 
-const startSearchOnRegionChange: EpicConf = (action$, state$) =>
-  action$.pipe(
-    ofType("REGION_CHANGED"),
-    debounceTime(1200),
-    withLatestFrom(state$),
-    switchMap(
-      async ([
-        action,
-        {
-          search: { requestImage },
-        },
-      ]): Promise<AppAction> => {
-        if (action.type !== "REGION_CHANGED") {
+      return searchOffersForImage(requestImage.canvas);
+  })
+);
+
+const startSearchOnRegionChange: EpicConf = (action$, state$) => action$.pipe(
+  ofType('REGION_CHANGED'),
+  debounceTime(1200),
+  withLatestFrom(state$),
+  switchMap(async ([action, { search: { requestImage}}]) : Promise<AppAction> => {
+      if (action.type !== 'REGION_CHANGED') {
           throw new Error(`Wrong action type ${action.type}`);
-        }
-        if (!requestImage) {
+      }
+      if (!requestImage) {
           throw new Error(`No requestImage`);
-        }
-        let { normalizedRect } = action;
-        return searchOffersForImage(requestImage.canvas, normalizedRect);
       }
-    )
-  );
+      let { normalizedRect } = action;
+      return searchOffersForImage(requestImage.canvas, normalizedRect);
+  })
+);
+
 
 const startSearchOnFilterChange: EpicConf = (action$, state$) =>
   action$.pipe(

package/src/epics/search.ts

@@ -1,15 +1,10 @@
-import { EpicConf } from "./types";
-import { combineEpics, ofType } from "redux-observable";
-import { switchMap, withLatestFrom } from "rxjs/operators";
-import { AppAction } from "../types";
-import {
-  ImageSearchOptions,
-  urlOrBlobToCanvas,
-  isCadFile,
-  isImageFile,
-  Filter,
-} from "@nyris/nyris-api";
-import { imageLoaded, cadFileLoaded } from "../actions/searchActions";
+import {EpicConf} from "./types";
+import {combineEpics, ofType} from "redux-observable";
+import {switchMap, withLatestFrom} from "rxjs/operators";
+import {AppAction} from "../types";
+import {ImageSearchOptions, urlOrBlobToCanvas, isCadFile, isImageFile, Filter} from "@nyris/nyris-api";
+import {imageLoaded, cadFileLoaded} from "../actions/searchActions";
+
 
 const imageSearch: EpicConf = (action$, state$, { api }) =>
   action$.pipe(
@@ -22,7 +17,6 @@ const imageSearch: EpicConf = (action$, state$, { api }) =>
       if ("image" in action) {
         let { image, normalizedRect } = action;
 
-        // refactor this
         let selectedFilters = new Array<Filter>();
         if (state.search.selectedFilters.size > 0) {
           state.search.selectedFilters.forEach((values, key) => {
@@ -40,51 +34,9 @@ const imageSearch: EpicConf = (action$, state$, { api }) =>
           cropRect: normalizedRect,
         };
 
-        try {
-          if (selectedFilters && selectedFilters.length > 0) {
-            console.log("With Filters");
-            const { results, duration, requestId, categoryPredictions, codes } =
-              await api.findByImageWithFilters(image, options, selectedFilters);
-            return {
-              type: "SEARCH_REQUEST_SUCCEED",
-              results,
-              requestId,
-              duration,
-              categoryPredictions,
-              codes,
-            };
-          } else {
-            console.log("Without Filters");
-            const { results, duration, requestId, categoryPredictions, codes } =
-              await api.findByImage(image, options);
-            return {
-              type: "SEARCH_REQUEST_SUCCEED",
-              results,
-              requestId,
-              duration,
-              categoryPredictions,
-              codes,
-            };
-          }
-        } catch (e) {
-          console.warn("search failed", e);
-          return {
-            type: "SEARCH_REQUEST_FAIL",
-            reason: e.message,
-            exception: e,
-          };
-        }
-      }
-
-      if ("file" in action) {
-        console.log("file");
-        let { file } = action;
-
-        let options: ImageSearchOptions = {};
-
         try {
           const { results, duration, requestId, categoryPredictions, codes } =
-            await api.findByCad(file, options);
+            await api.findByImage(image, options, selectedFilters);
           return {
             type: "SEARCH_REQUEST_SUCCEED",
             results,
@@ -102,76 +54,86 @@ const imageSearch: EpicConf = (action$, state$, { api }) =>
           };
         }
       }
-      throw new Error(`Wrong action content ${action}`);
+
+      if ('file' in action) {
+        let { file } = action;
+
+        let options : ImageSearchOptions = { };
+
+        try {
+            const {results, duration, requestId, categoryPredictions, codes} = await api.findByCad(file, options);
+            return ({ type: 'SEARCH_REQUEST_SUCCEED', results, requestId, duration, categoryPredictions, codes });
+        } catch (e) {
+            console.warn('search failed', e);
+            return ({ type: 'SEARCH_REQUEST_FAIL', reason: e.message, exception: e });
+        }
+    }
+    throw new Error(`Wrong action content ${action}`);
+
     })
   );
 
-const regionSearch: EpicConf = (action$, state$, { api }) =>
-  action$.pipe(
-    ofType("REGION_REQUEST_START"),
+  const regionSearch: EpicConf = (action$, state$, {api}) => action$.pipe(
+    ofType('REGION_REQUEST_START'),
     withLatestFrom(state$),
-    switchMap(async ([action, { settings }]): Promise<AppAction> => {
-      if (action.type !== "REGION_REQUEST_START") {
-        throw new Error(`Wrong action type ${action.type}`);
-      }
+    switchMap(async ([action, {settings}]) : Promise<AppAction> => {
+        if (action.type !== 'REGION_REQUEST_START') {
+            throw new Error(`Wrong action type ${action.type}`);
+        }
 
-      let { image } = action;
+        let { image } = action;
 
-      try {
-        let regions = await api.findRegions(image);
-        return { type: "REGION_REQUEST_SUCCEED", regions };
-      } catch (e) {
-        console.error(e);
-        return { type: "REGION_REQUEST_FAIL", reason: e.message, exception: e };
-      }
+        try {
+            let regions = await api.findRegions(image);
+            return {type: 'REGION_REQUEST_SUCCEED', regions };
+
+        } catch (e) {
+            console.error(e);
+            return {type: 'REGION_REQUEST_FAIL', reason: e.message, exception: e};
+        }
     })
-  );
+);
 
-const loadFile: EpicConf = (action$) =>
-  action$.pipe(
-    ofType("LOAD_FILE"),
-    switchMap(async (action): Promise<AppAction> => {
-      if (action.type !== "LOAD_FILE") {
-        throw new Error(`Wrong action type ${action.type}`);
-      }
-      const randomId = Math.random().toString();
-      if ("file" in action) {
-        const file = action.file;
-        if (isImageFile(file)) {
-          return imageLoaded(await urlOrBlobToCanvas(file), randomId);
+const loadFile: EpicConf = (action$) => action$.pipe(
+    ofType('LOAD_FILE'),
+    switchMap(async (action) : Promise<AppAction> => {
+        if (action.type !== 'LOAD_FILE') {
+            throw new Error(`Wrong action type ${action.type}`);
         }
-        if (isCadFile(file)) {
-          return cadFileLoaded(file, randomId);
+        const randomId = Math.random().toString();
+        if ('file' in action) {
+            const file = action.file;
+            if (isImageFile(file)) {
+                return imageLoaded(await urlOrBlobToCanvas(file), randomId);
+            }
+            if (isCadFile(file)) {
+                return cadFileLoaded(file, randomId);
+            }
         }
-      }
-      throw new Error(
-        `LOAD_FILE action wrong properties ${Object.keys(action).join(",")}`
-      );
+        throw new Error(`LOAD_FILE action wrong properties ${Object.keys(action).join(',')}`);
     })
-  );
+);
 
-const loadImage: EpicConf = (action$) =>
-  action$.pipe(
-    ofType("LOAD_IMAGE"),
-    switchMap(async (action): Promise<AppAction> => {
-      if (action.type !== "LOAD_IMAGE") {
-        throw new Error(`Wrong action type ${action.type}`);
-      }
-      const randomId = Math.random().toString();
-      if ("url" in action) {
-        return imageLoaded(await urlOrBlobToCanvas(action.url), randomId);
-      }
-      if ("file" in action) {
-        return imageLoaded(await urlOrBlobToCanvas(action.file), randomId);
-      }
-      if ("image" in action) {
-        return imageLoaded(action.image, randomId);
-      }
-      throw new Error(
-        `LOAD_IMAGE action wrong properties ${Object.keys(action).join(",")}`
-      );
+const loadImage: EpicConf = (action$) => action$.pipe(
+    ofType('LOAD_IMAGE'),
+    switchMap(async (action) : Promise<AppAction> => {
+        if (action.type !== 'LOAD_IMAGE') {
+            throw new Error(`Wrong action type ${action.type}`);
+        }
+        const randomId = Math.random().toString();
+        if ('url' in action) {
+            return imageLoaded(await urlOrBlobToCanvas(action.url), randomId);
+        }
+        if ('file' in action) {
+            return imageLoaded(await urlOrBlobToCanvas(action.file), randomId);
+        }
+        if ('image' in action) {
+            return imageLoaded(action.image, randomId);
+        }
+        throw new Error(`LOAD_IMAGE action wrong properties ${Object.keys(action).join(',')}`);
     })
-  );
+);
+
 
 const loadFilters: EpicConf = (action$, state$, { api }) =>
   action$.pipe(
@@ -183,11 +145,7 @@ const loadFilters: EpicConf = (action$, state$, { api }) =>
       }
       try {
         // use find filters
-
         let filters = await api.getFilters();
-
-        filters = filters.slice(0, 3);
-        console.log(filters);
         return { type: "LOAD_FILTERS_SUCCESS", filters };
       } catch (e) {
         console.error(e);
@@ -205,7 +163,6 @@ const searchFilters: EpicConf = (action$, state$, { api }) =>
         throw new Error(`Wrong action type ${action.type}`);
       }
       try {
-        // use find filters
         let { key, value } = action;
         let values: string[] = [];
         if (value) {