@nyris/nyris-webapp 0.3.5 → 0.3.12

package/src/components/PredictedCategories.tsx

@@ -1,14 +1,17 @@
-import React from 'react';
-
-const PredictedCategories = ({cs}: {cs: {name: string, score: number}[]}) =>
-    <>
-        {cs.map((c) =>
-            <small key={c.name}>
-                {c.name === "" ? "No category" : c.name.split(" > ").slice(-1)[0]}:
-                {(c.score * 100).toFixed(0)}%
-            </small>)}
-    </>
-;
-
+import React from "react";
 
+const PredictedCategories = ({
+  cs,
+}: {
+  cs: { name: string; score: number }[];
+}) => (
+  <>
+    {cs.map((c) => (
+      <small key={c.name}>
+        {c.name === "" ? "No category" : c.name.split(" > ").slice(-1)[0]}:
+        {(c.score * 100).toFixed(0)}%
+      </small>
+    ))}
+  </>
+);
 export default PredictedCategories;

package/src/components/SelectedFiltersSummary.tsx

@@ -0,0 +1,85 @@
+import React from "react";
+import { BsX } from "react-icons/bs";
+import { connect, ConnectedProps, useDispatch } from "react-redux";
+import { AppState } from "../types";
+import { capitalizeFirstLetter } from "../utils";
+import {
+  removeFromSelectedFilters,
+  clearAllSelectedFilters,
+  filterChanged,
+} from "../actions/searchActions";
+
+const SelectedFiltersSummary: React.FC<selectedFiltersSummaryProps> = ({
+  search,
+}) => {
+  const dispatch = useDispatch();
+  const handleRemoveFilterButtonClick = (key: string, value: string) => {
+    dispatch(removeFromSelectedFilters(key, value));
+    dispatch(filterChanged());
+  };
+
+  const clearAllSelectedFiltersFromList = () => {
+    dispatch(clearAllSelectedFilters());
+    dispatch(filterChanged());
+  };
+  const selectedValues = ([] as string[]).concat.apply(
+    [],
+    Array.from(search.selectedFilters.values())
+  );
+
+  return (
+    <div className="wrap-box-refinements">
+      <ul>
+        {Array.from(search.selectedFilters.keys()).map(
+          (filterKey) =>
+            search.selectedFilters.get(filterKey) &&
+            search.selectedFilters.get(filterKey)!.map((val) => {
+              return (
+                <li>
+                  <button
+                    onClick={() =>
+                      handleRemoveFilterButtonClick(filterKey, val)
+                    }
+                  >
+                    <span className="summary-label">
+                      <div className="summary-label-key-text">
+                        {capitalizeFirstLetter(val)}
+                        <BsX />
+                      </div>
+                    </span>
+                  </button>
+                </li>
+              );
+            })
+        )}
+        <li>
+          <button
+            className={
+              search.selectedFilters &&
+              search.selectedFilters.size > 0 &&
+              selectedValues &&
+              selectedValues.length > 0
+                ? "clear-all-filters "
+                : "clear-all-filters-hidden"
+            }
+            onClick={() => clearAllSelectedFiltersFromList()}
+          >
+            {" "}
+            Clear All{" "}
+          </button>
+        </li>
+      </ul>
+    </div>
+  );
+};
+
+const mapStateToProps = (state: AppState) => ({
+  showPart: state.nyrisDesign.showPart,
+  search: {
+    filters: state.search.filters,
+    selectedFilters: state.search.selectedFilters,
+  },
+});
+const connector = connect(mapStateToProps);
+type selectedFiltersSummaryProps = ConnectedProps<typeof connector>;
+export default connect(mapStateToProps)(SelectedFiltersSummary);

package/src/components/Sidebar.tsx

@@ -0,0 +1,52 @@
+import React, { useState } from "react";
+import { RiMenuLine } from "react-icons/ri";
+import { Filter } from "../../../nyris-api/index";
+import FiltersList from "./FiltersList";
+
+interface SidebarProps {
+  filters: Filter[];
+  selectedFilters: Map<string, string[]>;
+}
+
+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>
+  );
+};
+
+export default Sidebar;

package/src/defaults.ts

@@ -17,10 +17,7 @@ export const defaultSettings : AppSettings = {
         '^https?://(www.)?vimeo.com/',
         '^https?://(www.)?dailymotion.com/',
         '^https?://(www.)?dai.ly/'
-    ],
-    themePage: {
-        default: { active: true }
-    }
+    ]
 };
 
 export const defaultMdSettings = {
@@ -30,8 +27,10 @@ export const defaultMdSettings = {
     appBarTitle: '',
     primaryColor: '#e2001a',
     secondaryColor: '#777777',
+
     resultFirstRowProperty: 'title',
     resultSecondRowProperty: 'sku',
     resultLinkText: 'Info',
+
     customFontFamily: 'Helvetica',
 };

package/src/epics/feedback.ts

@@ -0,0 +1,59 @@
+import {combineEpics, ofType} from "redux-observable";
+import {debounceTime, ignoreElements, tap, withLatestFrom} from "rxjs/operators";
+import {EpicConf} from "./types";
+
+const feedbackSuccessEpic: EpicConf = (action$, state$, {api}) => action$.pipe(
+    ofType('FEEDBACK_SUBMIT_POSITIVE', "FEEDBACK_SUBMIT_NEGATIVE"),
+    withLatestFrom(state$),
+    tap(async ([{type}, state]) => {
+        const success = type === 'FEEDBACK_SUBMIT_POSITIVE';
+        const sessionId = state.search.sessionId || state.search.requestId;
+        if (sessionId && state.search.requestId) {
+            await api.sendFeedback(sessionId, state.search.requestId, {
+                event: 'feedback', data: {success}
+            });
+        }
+    }),
+    ignoreElements()
+);
+
+const feedbackRegionEpic: EpicConf = (action$, state$, {api}) => action$.pipe(
+    ofType('REGION_CHANGED'),
+    debounceTime(1200),
+    withLatestFrom(state$),
+    tap(async ([action, state]) => {
+        if (action.type === 'REGION_CHANGED') {
+            let {normalizedRect: {x1, x2, y1, y2}} = action;
+            const sessionId = state.search.sessionId || state.search.requestId;
+            if (sessionId && state.search.requestId) {
+                await api.sendFeedback(sessionId, state.search.requestId, {
+                    event: 'region', data: {rect: {x: x1, y: y1, w: x2 - x1, h: y2 - y1}}
+                });
+            }
+        }
+    }),
+    ignoreElements()
+);
+
+const feedbackClickEpic: EpicConf = (action$, state$, {api}) => action$.pipe(
+    ofType('RESULT_LINK_CLICKED', 'RESULT_IMAGE_CLICKED'),
+    withLatestFrom(state$),
+    tap(async ([action, state]) => {
+        if (action.type === 'RESULT_LINK_CLICKED' || action.type === 'RESULT_IMAGE_CLICKED') {
+            let {position} = action;
+            const sessionId = state.search.sessionId || state.search.requestId;
+            if (sessionId && state.search.requestId) {
+                await api.sendFeedback(sessionId, state.search.requestId, {
+                    event: 'click', data: {positions: [position]}
+                });
+            }
+        }
+    }),
+    ignoreElements()
+);
+
+export default combineEpics(
+    feedbackSuccessEpic,
+    feedbackRegionEpic,
+    feedbackClickEpic
+);

package/src/epics/index.ts

@@ -0,0 +1,223 @@
+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]) => {
+      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_START" && history.location.pathname !== "/") {
+        history.goBack();
+      }
+    }),
+    ignoreElements()
+  );
+
+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 firstLink = action.results[0].l;
+      const instantRedirectPatterns = settings.instantRedirectPatterns;
+      if (!instantRedirectPatterns.find((r) => new RegExp(r).test(firstLink))) {
+        return;
+      }
+      window.location.href = firstLink;
+    }),
+    ignoreElements()
+  );
+
+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}`);
+      }
+
+      let { image } = action;
+
+      if (settings.regions) {
+        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}`);
+      }
+      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") {
+          throw new Error(`Wrong action type ${action.type}`);
+        }
+        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);
+      }
+    )
+  );
+
+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) {
+          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") {
+          throw new Error(`Wrong action type ${action.type}`);
+        }
+        if (!requestImage) {
+          throw new Error(`No requestImage`);
+        }
+        let { normalizedRect } = action;
+        return searchOffersForImage(requestImage.canvas, normalizedRect);
+      }
+    )
+  );
+
+const startSearchOnFilterChange: EpicConf = (action$, state$) =>
+  action$.pipe(
+    ofType("FILTER_CHANGED"),
+    withLatestFrom(state$),
+    switchMap(
+      async ([
+        action,
+        {
+          search: { requestImage },
+        },
+      ]): Promise<AppAction> => {
+        if (action.type !== "FILTER_CHANGED") {
+          throw new Error(`Wrong action type ${action.type}`);
+        }
+        if (requestImage) {
+          return searchOffersForImage(requestImage.canvas);
+        } else {
+          return { type: "FILTER_CHANGED_FAIL" };
+        }
+      }
+    )
+  );
+
+//const startSearchOnClearingAllFilters:
+
+const rootEpic = combineEpics(
+  searchEpics,
+  feedbackEpics,
+  historyEpic,
+  startSearchOnImageLoaded,
+  startSearchOnCadLoaded,
+  startSearchOnRegionsSuccessful,
+  startSearchOnRegionsFailed,
+  startSearchOnRegionChange,
+  onSearchSuccessShowResults,
+  onSearchSuccessShowFeedbackDelayed,
+  onSearchSuccessRedirectToSite,
+  startSearchOnFilterChange
+);
+
+export default rootEpic;