@nyris/nyris-webapp 0.3.5 → 0.3.12

package/src/actions/searchActions.ts

@@ -0,0 +1,323 @@
+import { CanvasWithId } from "../types";
+import {
+  Code,
+  RectCoords,
+  Region,
+  selectFirstCenteredRegion,
+  Filter,
+} 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;
+      selectedFilters?: Filter[];
+    }
+  | { 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 }
+  | { type: "LOAD_FILTERS" }
+  | { type: "LOAD_FILTERS_SUCCESS"; filters: Filter[] }
+  | { type: "LOAD_FILTERS_FAIL"; reason: string; exception: any }
+  | { type: "ADD_TO_SELECTEDFILTERS"; key: string; value: string }
+  | { type: "REMOVE_FROM_SELECTEDFILTERS"; key: string; value: string }
+  | { type: "CLEAR_SELECTED_FILTERS" }
+  | { type: "SEARCH_FILTERS"; key: string; value: string }
+  | { type: "FILTER_CHANGED" }
+  | { type: "FILTER_CHANGED_FAIL" }
+  | { type: "CLEAR_REQUEST_IMAGE" }
+  | { type: "UPDATE_FILTERS"; key: string; values: string[] };
+
+interface CategoryPrediction {
+  name: string;
+  score: number;
+}
+
+export interface SearchState {
+  results: any[];
+  duration?: number;
+  requestId?: string;
+  sessionId?: string;
+  regions: Region[];
+  selectedRegion: RectCoords;
+  fetchingRegions: boolean;
+  fetchingResults: boolean;
+  filterOptions: string[];
+  requestImage?: CanvasWithId;
+  requestCadFile?: File;
+  categoryPredictions: CategoryPrediction[];
+  codes: Code[];
+  errorMessage: string;
+  filters: Filter[];
+  selectedFilters: Map<string, string[]>;
+}
+
+const initialState: SearchState = {
+  results: [],
+  regions: [],
+  selectedRegion: { x1: 0.1, x2: 0.9, y1: 0.1, y2: 0.9 },
+  requestImage: undefined,
+  fetchingResults: false,
+  fetchingRegions: false,
+  filterOptions: [],
+  categoryPredictions: [],
+  codes: [],
+  errorMessage: "",
+  filters: [],
+  selectedFilters: new Map<string, string[]>(),
+};
+
+export const loadFile = (file: File): SearchAction => ({
+  type: "LOAD_FILE",
+  file,
+});
+export const loadUrl = (url: string): SearchAction => ({
+  type: "LOAD_IMAGE",
+  url,
+});
+export const loadCanvas = (image: HTMLCanvasElement): SearchAction => ({
+  type: "LOAD_IMAGE",
+  image,
+});
+export const imageLoaded = (
+  image: HTMLCanvasElement,
+  id: string
+): SearchAction => ({ type: "IMAGE_LOADED", image: { canvas: image, id: id } });
+export const cadFileLoaded = (file: File, id: string): SearchAction => ({
+  type: "CAD_LOADED",
+  file,
+});
+export const selectionChanged = (normalizedRect: RectCoords): SearchAction => ({
+  type: "REGION_CHANGED",
+  normalizedRect,
+});
+export const searchRegions = (image: HTMLCanvasElement): SearchAction => ({
+  type: "REGION_REQUEST_START",
+  image,
+});
+export const searchOffersForImage = (
+  image: HTMLCanvasElement,
+  normalizedRect?: RectCoords
+): SearchAction => ({
+  type: "SEARCH_REQUEST_START",
+  image,
+  normalizedRect,
+});
+export const searchOffersForCad = (file: File): SearchAction => ({
+  type: "SEARCH_REQUEST_START",
+  file,
+});
+export const submitPositiveFeedback = (): SearchAction => ({
+  type: "FEEDBACK_SUBMIT_POSITIVE",
+});
+export const submitNegativeFeedback = (): SearchAction => ({
+  type: "FEEDBACK_SUBMIT_NEGATIVE",
+});
+export const loadFilters = (): SearchAction => ({ type: "LOAD_FILTERS" });
+export const addToSelectedFilters = (
+  key: string,
+  value: string
+): SearchAction => ({ type: "ADD_TO_SELECTEDFILTERS", key, value });
+export const removeFromSelectedFilters = (
+  key: string,
+  value: string
+): SearchAction => ({ type: "REMOVE_FROM_SELECTEDFILTERS", key, value });
+export const clearAllSelectedFilters = () => ({
+  type: "CLEAR_SELECTED_FILTERS",
+});
+export const searchFilters = (key: string, value: string): SearchAction => ({
+  type: "SEARCH_FILTERS",
+  key,
+  value,
+});
+export const filterChanged = (): SearchAction => ({ type: "FILTER_CHANGED" });
+export const clearRequestImage = (): SearchAction => ({
+  type: "CLEAR_REQUEST_IMAGE",
+});
+
+export const reducer = (
+  state: SearchState = initialState,
+  action: SearchAction
+) => {
+  switch (action.type) {
+    case "IMAGE_LOADED":
+      let { image } = action;
+      console.log("image", image);
+      return {
+        ...initialState,
+        requestImage: image,
+        selectedFilters: state.selectedFilters,
+      };
+    case "CAD_LOADED":
+      let { file } = action;
+      return {
+        ...initialState,
+        requestCadFile: file,
+      };
+    case "REGION_REQUEST_START":
+      return {
+        ...state,
+        fetchingRegions: true,
+      };
+    case "REGION_REQUEST_SUCCEED":
+      return {
+        ...state,
+        fetchingRegions: false,
+        regions: action.regions,
+        selectedRegion: selectFirstCenteredRegion(
+          action.regions,
+          0.3,
+          state.selectedRegion
+        ),
+      };
+    case "REGION_REQUEST_FAIL":
+      return {
+        ...state,
+        fetchingRegions: false,
+        errorMessage: action.exception.response.data.detail,
+      };
+    case "SEARCH_REQUEST_START":
+      return {
+        ...state,
+        fetchingResults: true,
+      };
+    case "SEARCH_REQUEST_SUCCEED":
+      let { results, requestId, duration, categoryPredictions, codes } = action;
+      return {
+        ...state,
+        results,
+        requestId,
+        fetchingResults: false,
+        sessionId: state.sessionId || requestId,
+        categoryPredictions,
+        codes,
+        duration,
+      };
+    case "SEARCH_REQUEST_FAIL":
+      return {
+        ...state,
+        fetchingResults: false,
+        errorMessage: action.reason,
+      };
+    case "REGION_CHANGED":
+      return {
+        ...state,
+        selectedRegion: action.normalizedRect,
+      };
+    case "LOAD_FILTERS_SUCCESS":
+      return {
+        ...state,
+        filters: action.filters,
+      };
+    case "LOAD_FILTERS_FAIL":
+      return {
+        ...state,
+        errorMessage: action.exception.response.data.detail,
+      };
+    case "ADD_TO_SELECTEDFILTERS":
+      return {
+        ...state,
+        selectedFilters: ADDtoSelectedfilters(
+          state.selectedFilters,
+          action.key,
+          action.value
+        ),
+      };
+    case "REMOVE_FROM_SELECTEDFILTERS":
+      return {
+        ...state,
+        selectedFilters: RemoveFromSelectedFilters(
+          state.selectedFilters,
+          action.key,
+          action.value
+        ),
+      };
+    case "CLEAR_SELECTED_FILTERS":
+      return {
+        ...state,
+        selectedFilters: new Map<string, string[]>(),
+      };
+    case "CLEAR_REQUEST_IMAGE":
+      return {
+        ...state,
+        requestImage: undefined,
+      };
+    case "UPDATE_FILTERS":
+      return {
+        ...state,
+        filters: UpdateFilters(state.filters, action.key, action.values),
+      };
+  }
+  return state;
+};
+
+function ADDtoSelectedfilters(
+  selectedFilters: Map<string, string[]>,
+  key: string,
+  value: string
+): Map<string, string[]> {
+  if (selectedFilters) {
+    let values = selectedFilters.get(key);
+    if (values) {
+      values.push(value);
+    } else {
+      values = new Array<string>(value);
+    }
+    selectedFilters.set(key, values);
+  }
+  console.log(selectedFilters);
+  return selectedFilters;
+}
+
+function RemoveFromSelectedFilters(
+  selectedFilters: Map<string, string[]>,
+  key: string,
+  value: string
+): Map<string, string[]> {
+  if (selectedFilters) {
+    let values = selectedFilters.get(key);
+    if (values) {
+      values = values.filter((x) => x !== value);
+      selectedFilters.set(key, values);
+    }
+  }
+  console.log(selectedFilters);
+  return selectedFilters;
+}
+
+function UpdateFilters(filters: Filter[], key: string, values: string[]) {
+  console.log(filters);
+  console.log(key);
+  console.log(values);
+  console.log(filters.find((x) => x.key === key));
+  if (filters && filters.length > 0 && filters.find((x) => x.key === key)) {
+    let idx = filters.findIndex((x) => x.key === key);
+    filters[idx].values = values;
+    console.log(filters);
+  }
+
+  return filters;
+}

package/src/components/CategoryFilter.tsx

@@ -1,17 +1,20 @@
-import React from 'react';
+import React from "react";
 
-
-const CategoryFilter = ({cats}: {cats: string[]}) => {
-    if (cats.length === 0) {
-        return null;
-    }
-    return (
-        <div id="catlist" style={{'textAlign': 'center'}}>
-            {
-                cats.map((s) => <a key={s} href="#top">{s}</a>) // TODO fix link
-            }
-        </div>
-    );
+const CategoryFilter = ({ cats }: { cats: string[] }) => {
+  if (cats.length === 0) {
+    return null;
+  }
+  return (
+    <div id="catlist" style={{ textAlign: "center" }}>
+      {
+        cats.map((s) => (
+          <a key={s} href="#top">
+            {s}
+          </a>
+        )) // TODO fix link
+      }
+    </div>
+  );
 };
 
 export default CategoryFilter;

package/src/components/Codes.tsx

@@ -1,20 +1,24 @@
-import React from 'react';
-import {Code} from '@nyris/nyris-api';
+import React from "react";
+import { Code } from "@nyris/nyris-api";
 
 interface Props {
-    codes: Code[]
+  codes: Code[];
 }
-const Codes = ({codes}: Props) =>
-    <>
-        <div className="codes" style={{textAlign: 'center'}}>
-            {codes.length > 0 && <span style={{fontSize: '0.8em'}}>Codes<br/> </span> }
-            {codes.map((c, i) =>
-                <small key={i} title={c.type}>
-                    {c.value}
-                </small>)}
-        </div>
-    </>
-;
-
-
+const Codes = ({ codes }: Props) => (
+  <>
+    <div className="codes" style={{ textAlign: "center" }}>
+      {codes.length > 0 && (
+        <span style={{ fontSize: "0.8em" }}>
+          Codes
+          <br />{" "}
+        </span>
+      )}
+      {codes.map((c, i) => (
+        <small key={i} title={c.type}>
+          {c.value}
+        </small>
+      ))}
+    </div>
+  </>
+);
 export default Codes;

package/src/components/ExampleImages.tsx

@@ -1,4 +1,3 @@
-import { Typography } from "@material-ui/core";
 import React from "react";
 
 interface ExampleImagesProps {
@@ -15,21 +14,17 @@ const ExampleImages: React.FC<ExampleImagesProps> = ({
   }
   return (
     <section className="useExampleImg">
-      <Typography className="title-box text-center">
-        You can also try one of these pictures:
-      </Typography>
-      <div className="exampleImages d-flex justify-center">
+      You can also try one of these pictures:
+      <div className="exampleImages">
         <div className="exImagesWrap">
-          {images.map((i) => {
-            return (
-              <img
-                key={i}
-                src={i}
-                alt=""
-                onClick={() => onExampleImageClicked(i)}
-              />
-            );
-          })}
+          {images.map((i) => (
+            <img
+              key={i}
+              src={i}
+              alt=""
+              onClick={() => onExampleImageClicked(i)}
+            />
+          ))}
         </div>
       </div>
     </section>

package/src/components/Feedback.tsx

@@ -1,30 +1,21 @@
-import { useAppDispatch, useAppSelector } from "Store/Store";
-import {
-  feedbackNegative,
-  feedbackSubmitPositive,
-  NyrisFeedbackState,
-} from "Store/Nyris";
 import React from "react";
+import { NyrisFeedbackState } from "../actions/nyrisAppActions";
 import { Animate } from "react-move";
-import { feedbackSuccessEpic } from "services/Feedback";
+
 interface FeedbackProps {
   feedbackState: NyrisFeedbackState;
+  onPositiveFeedback?: () => void;
+  onNegativeFeedback?: () => void;
   onClose?: () => void;
 }
 
-const Feedback: React.FC<FeedbackProps> = ({ feedbackState, onClose }) => {
+const Feedback: React.FC<FeedbackProps> = ({
+  feedbackState,
+  onPositiveFeedback,
+  onNegativeFeedback,
+  onClose,
+}) => {
   let inner: any = null;
-  const state = useAppSelector((state) => state);
-  const dispatch = useAppDispatch();
-  const onPositiveFeedback = (data: boolean) => {
-    feedbackSuccessEpic(state, data);
-    if (data) {
-      dispatch(feedbackSubmitPositive());
-    } else {
-      dispatch(feedbackNegative());
-    }
-  };
-
   switch (feedbackState) {
     case "question":
       inner = (
@@ -32,13 +23,13 @@ const Feedback: React.FC<FeedbackProps> = ({ feedbackState, onClose }) => {
           <p>Did you find what you were looking for?</p>
           <div
             className="btn primary positiveFeedback"
-            onClick={() => onPositiveFeedback(true)}
+            onClick={onPositiveFeedback}
           >
             Yes
           </div>
           <div
             className="btn secondary negativeFeedback"
-            onClick={() => onPositiveFeedback(false)}
+            onClick={onNegativeFeedback}
           >
             No
           </div>

package/src/components/FiltersList.tsx

@@ -0,0 +1,122 @@
+import React, { useEffect, useState } from "react";
+import { Filter } from "@nyris/nyris-api";
+import {
+  addToSelectedFilters,
+  removeFromSelectedFilters,
+  filterChanged,
+  searchFilters,
+} from "../actions/searchActions";
+import { useDispatch } from "react-redux";
+import { RiArrowDropUpLine, RiArrowDropDownLine } from "react-icons/ri";
+import { capitalizeFirstLetter } from "../utils";
+import { AiOutlineSearch } from "react-icons/ai";
+
+interface FilterProps {
+  filter: Filter;
+  selectedValues?: string[];
+}
+
+const FiltersList: React.FC<FilterProps> = ({ filter, selectedValues }) => {
+  const dispatch = useDispatch();
+  const [isCollapsed, setIsCollapsed] = useState(false);
+  const [message, setMessage] = useState("");
+  const handleToggler = () => {
+    if (isCollapsed) {
+      setIsCollapsed(false);
+      return;
+    }
+    setIsCollapsed(true);
+  };
+  const onFilterChanged = (
+    e: React.ChangeEvent<HTMLInputElement>,
+    value: string
+  ) => {
+    if (e.target.checked) {
+      if (filter.key) dispatch(addToSelectedFilters(filter.key, value));
+    } else {
+      if (filter.key) dispatch(removeFromSelectedFilters(filter.key, value));
+    }
+    dispatch(filterChanged());
+  };
+  // 👇️ called every time input's value changes
+  const handleChangeOnSearchInputTyped = (
+    e: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    setMessage(e.target.value);
+  };
+  const queryFilters = (key: string, value: string) => {
+    dispatch(searchFilters(key, value));
+  };
+
+  useEffect(() => {
+    if (message === "") {
+      dispatch(searchFilters(filter.key!, ""));
+    }
+  }, [message, filter.key, dispatch]);
+  return (
+    <div>
+      <div className="item">
+        {/* <RiLayoutGridLine className="sidebar-icon" /> */}
+        <span className="sidebar-text">
+          {" "}
+          {capitalizeFirstLetter(filter.key!)}
+        </span>
+        <RiArrowDropUpLine
+          className={
+            isCollapsed ? "sidebar-icon" : "sidebar-icon collapsedHide"
+          }
+          onClick={() => handleToggler()}
+        />
+        <RiArrowDropDownLine
+          className={
+            isCollapsed ? "sidebar-icon collapsedHide" : "sidebar-icon"
+          }
+          onClick={() => handleToggler()}
+        />
+      </div>
+
+      <div
+        className={
+          isCollapsed ? "list-container" : "list-container collapsedHide"
+        }
+      >
+        <div className="searchBar">
+          <input
+            id="searchQueryInput"
+            name="searchQueryInput"
+            placeholder="Search"
+            value={message}
+            onChange={(e) => handleChangeOnSearchInputTyped(e)}
+          />
+          <button
+            id="searchQuerySubmit"
+            type="submit"
+            name="searchQuerySubmit"
+            onClick={() => queryFilters(filter.key!, message)}
+          >
+            <AiOutlineSearch />
+          </button>
+        </div>
+        {filter &&
+          filter.values &&
+          filter.values.length > 0 &&
+          filter.values.slice(0, 6).map((item, index) => {
+            const checked = selectedValues && selectedValues.includes(item);
+            return (
+              <div key={index}>
+                <input
+                  value={item}
+                  checked={checked ? true : false}
+                  type="checkbox"
+                  onChange={(e) => onFilterChanged(e, item)}
+                />
+                <span className="itemLabel">{item}</span>
+              </div>
+            );
+          })}
+      </div>
+    </div>
+  );
+};
+
+export default FiltersList;

package/src/components/Header.tsx

@@ -1,35 +1,32 @@
 import React from "react";
 
-function HeaderComponent(): JSX.Element {
+const Header = () => {
   return (
-    <div className="navWrap">
-      <div className="wrapper" style={{ padding: 0 }}>
-        <section id="branding" />
-        <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 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 HeaderComponent;
+};
+export default Header;