@nyris/nyris-webapp 0.3.9 → 0.3.14

package/src/components/Header.tsx

@@ -1,20 +1,32 @@
 import React from "react";
 
-const Header = () =>{
-return (
+const Header = () => {
+  return (
     <div id="header">
-     
-    <section id="branding"></section>
-              <div id="menu" className="menuWrap" role="navigation" >
-                  <ul>
-                      <li><a href="https://nyris.io/imprint/#privacy" target="_blank"
-                             rel="noopener noreferrer">Privacy Policy</a></li>
-                      <li><a href="https://nyris.io/" target="_blank" rel="noopener noreferrer">Visit our
-                          Website</a></li>
-                  </ul>
-              </div>
-</div>
-);
-
-}
-export default Header;
+      <section id="branding"></section>
+      <div id="menu" className="menuWrap" role="navigation">
+        <ul>
+          <li>
+            <a
+              href="https://nyris.io/imprint/#privacy"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Privacy Policy
+            </a>
+          </li>
+          <li>
+            <a
+              href="https://nyris.io/"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Visit our Website
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  );
+};
+export default Header;

package/src/components/SelectedFiltersSummary.tsx

@@ -0,0 +1,84 @@
+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

@@ -1,42 +1,49 @@
-import React, { useState } from 'react';
-import {RiMenuLine} from 'react-icons/ri';
-import { Filter } from '../../../nyris-api/index';
-import  FiltersList from './FiltersList';
+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[]>
+  filters: Filter[];
+  selectedFilters: Map<string, string[]>;
 }
 
-const Sidebar: React.FC<SidebarProps> = ({filters, selectedFilters}) =>{
+const Sidebar: React.FC<SidebarProps> = ({ filters, selectedFilters }) => {
+  console.log(filters);
   const [isExpanded, setIsExpanded] = useState(false);
-  const handleToggler =()=>{
-      if(isExpanded){
-          setIsExpanded(false);
-          return;
-      }
-      setIsExpanded(true);
-  }
+  const handleToggler = () => {
+    if (isExpanded) {
+      setIsExpanded(false);
+      return;
+    }
+    setIsExpanded(true);
+  };
   return (
-
-      <div className={isExpanded ? "sidebar" : "Sidebar collapsed"}>
-        <div className="sidebarContent" >
-           <div className="sidebarHeader">
-            <RiMenuLine className="sidebar-icon" onClick={handleToggler}/>
-            <h1 className={isExpanded ? "sidebar-logo" : "sidebar-logo collapsedHide"}> Select 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}/>
-               })
-            }   
-            </div>
-        </div>     
+    <div className={isExpanded ? "sidebar" : "Sidebar collapsed"}>
+      <div
+        className={
+          isExpanded ? "sidebarContent" : "sidebarContent overflowHidden"
+        }
+      >
+        <div className="sidebarHeader">
+          <RiMenuLine className="sidebar-icon" onClick={handleToggler} />
+        </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} />;
+            })}
+        </div>
       </div>
- 
-             
-  )
-}
+    </div>
+  );
+};
 
-export default Sidebar
+export default Sidebar;

package/src/epics/index.ts

@@ -9,146 +9,166 @@ 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()
+  ofType('SHOW_RESULTS', 'SHOW_START'),
+  tap((action) => {
+      let { type } = action;
+      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)
+  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()
+  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)
+  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);
-    })
+  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);
-    })
+  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);
-    })
+  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);
-    })
+  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),
+  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 !== 'REGION_CHANGED') {
-            throw new Error(`Wrong action type ${action.type}`);
+    switchMap(
+      async ([
+        action,
+        {
+          search: { requestImage },
+        },
+      ]): Promise<AppAction> => {
+        if (action.type !== "FILTER_CHANGED") {
+          throw new Error(`Wrong action type ${action.type}`);
         }
-        if (!requestImage) {
-            throw new Error(`No requestImage`);
+        if (requestImage) {
+          return searchOffersForImage(requestImage.canvas);
+        } else {
+          return { type: "FILTER_CHANGED_FAIL" };
         }
-        let { normalizedRect } = action;
-        return searchOffersForImage(requestImage.canvas, normalizedRect);
-    })
-);
+      }
+    )
+  );
 
+//const startSearchOnClearingAllFilters:
 
 const rootEpic = combineEpics(
-    searchEpics,
-    feedbackEpics,
-    historyEpic,
-    startSearchOnImageLoaded,
-    startSearchOnCadLoaded,
-    startSearchOnRegionsSuccessful,
-    startSearchOnRegionsFailed,
-    startSearchOnRegionChange,
-    onSearchSuccessShowResults,
-    onSearchSuccessShowFeedbackDelayed,
-    onSearchSuccessRedirectToSite
+  searchEpics,
+  feedbackEpics,
+  historyEpic,
+  startSearchOnImageLoaded,
+  startSearchOnCadLoaded,
+  startSearchOnRegionsSuccessful,
+  startSearchOnRegionsFailed,
+  startSearchOnRegionChange,
+  onSearchSuccessShowResults,
+  onSearchSuccessShowFeedbackDelayed,
+  onSearchSuccessRedirectToSite,
+  startSearchOnFilterChange
 );
 
 export default rootEpic;