@nyris/nyris-webapp 0.3.3 → 0.3.6

package/src/actions/searchActions.ts

@@ -0,0 +1,218 @@
+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: 'ADD_TO_SELECTEDFILTERS_SUCCESS', key: string , value : string}
+    | { type: 'REMOVE_FROM_SELECTEDFILTERS', key: string , value: string}
+    | { type: 'REMOVE_FROM_SELECTEDFILTERS_SUCCESS', key: string , value: string}
+    | { type: 'CLEAR_SELECTED_FILTERS'}
+
+
+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, selectedFilters?: Filter[]) : SearchAction => ({
+    type: 'SEARCH_REQUEST_START',
+    image,
+    normalizedRect,
+    selectedFilters
+});
+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 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_SUCCESS":
+            return {
+                ...state,
+                selectedFilters : ADDtoSelectedfilters(state.selectedFilters, action.key, action.value)
+            }
+        case "REMOVE_FROM_SELECTEDFILTERS_SUCCESS":
+            return {
+                ...state,
+                selectedFilters : RemoveFromSelectedFilters(state.selectedFilters, action.key, action.value)
+            }
+        case "CLEAR_SELECTED_FILTERS":
+            return {
+                ...state,
+                selectedFilters : new Map<string,string[]>()
+            }
+
+    }
+    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);      
+                }
+                    
+            }  
+            return selectedFilters;
+}

package/src/components/ExampleImages.tsx

@@ -1,39 +1,24 @@
-import { Typography } from "@material-ui/core";
-import React from "react";
+import React from 'react';
 
 interface ExampleImagesProps {
-  images: string[];
-  onExampleImageClicked: (url: string) => void;
+    images: string[],
+    onExampleImageClicked: (url: string) => void
 }
 
-const ExampleImages: React.FC<ExampleImagesProps> = ({
-  images,
-  onExampleImageClicked,
-}) => {
-  if (images.length === 0) {
-    return null;
-  }
-  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">
-        <div className="exImagesWrap">
-          {images.map((i) => {
-            return (
-              <img
-                key={i}
-                src={i}
-                alt=""
-                onClick={() => onExampleImageClicked(i)}
-              />
-            );
-          })}
-        </div>
-      </div>
-    </section>
-  );
+const ExampleImages : React.FC<ExampleImagesProps> = ({images, onExampleImageClicked}) => {
+    if (images.length === 0) {
+        return null;
+    }
+    return (
+        <section className="useExampleImg">
+            You can also try one of these pictures:
+            <div className="exampleImages">
+                <div className="exImagesWrap">
+                    {images.map((i) => (<img key={i} src={i} alt="" onClick={() => onExampleImageClicked(i)}/>))}
+                </div>
+            </div>
+        </section>
+    );
 };
 
 export default ExampleImages;

package/src/components/Feedback.tsx

@@ -1,94 +1,55 @@
-import { useAppDispatch, useAppSelector } from "Store/Store";
-import {
-  feedbackNegative,
-  feedbackSubmitPositive,
-  NyrisFeedbackState,
-} from "Store/Nyris";
-import React from "react";
-import { Animate } from "react-move";
-import { feedbackSuccessEpic } from "services/Feedback";
+import React from 'react';
+import {NyrisFeedbackState} from "../actions/nyrisAppActions";
+import {Animate} from "react-move";
+
 interface FeedbackProps {
-  feedbackState: NyrisFeedbackState;
-  onClose?: () => void;
+    feedbackState: NyrisFeedbackState,
+    onPositiveFeedback?: () => void,
+    onNegativeFeedback?: () => void,
+    onClose?: () => void
 }
 
-const Feedback: React.FC<FeedbackProps> = ({ feedbackState, 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(""));
+const Feedback: React.FC<FeedbackProps> = ({feedbackState, onPositiveFeedback, onNegativeFeedback, onClose}) => {
+    let inner : any = null;
+    switch (feedbackState) {
+        case 'question':
+            inner =
+                <div className="feedbackForm">
+                    <p>Did you find what you were looking for?</p>
+                    <div className="btn primary positiveFeedback" onClick={onPositiveFeedback}>Yes</div>
+                    <div className="btn secondary negativeFeedback" onClick={onNegativeFeedback}>No</div>
+                </div>;
+            break;
+        case 'positive':
+            inner = <div className="feedbackMessage positive">Great, thank you for your feedback!</div>
+            break;
+        case 'negative':
+            inner =
+                <div className="feedbackMessage negative">We saved your request so we can track down the
+                    issue and improve the search experience. Your Feedback helps us to make our service
+                    better for everyone,
+                    thank you!<br/>
+                    <div className="btn dismiss" onClick={onClose}>Dismiss</div>
+                </div>;
+            break;
+        default:
+            inner = null;
+            break;
     }
-  };
-
-  switch (feedbackState) {
-    case "question":
-      inner = (
-        <div className="feedbackForm">
-          <p>Did you find what you were looking for?</p>
-          <div
-            className="btn primary positiveFeedback"
-            onClick={() => onPositiveFeedback(true)}
-          >
-            Yes
-          </div>
-          <div
-            className="btn secondary negativeFeedback"
-            onClick={() => onPositiveFeedback(false)}
-          >
-            No
-          </div>
-        </div>
-      );
-      break;
-    case "positive":
-      inner = (
-        <div className="feedbackMessage positive">
-          Great, thank you for your feedback!
-        </div>
-      );
-      break;
-    case "negative":
-      inner = (
-        <div className="feedbackMessage negative">
-          We saved your request so we can track down the issue and improve the
-          search experience. Your Feedback helps us to make our service better
-          for everyone, thank you!
-          <br />
-          <div className="btn dismiss" onClick={onClose}>
-            Dismiss
-          </div>
-        </div>
-      );
-      break;
-    default:
-      inner = null;
-      break;
-  }
-  return (
-    <Animate
-      show={feedbackState !== "hidden"}
-      start={{ y: 100, opacity: 0 }}
-      enter={{ y: [0], opacity: [1] }}
-      leave={{ y: [100], opacity: [0] }}
-    >
-      {({ y, opacity }) => (
-        <section
-          className="feedback"
-          style={{ transform: `translateY(${y}%)`, opacity }}
-        >
-          <div className="wrapper">{inner}</div>
-          <div className="closeFeedbackContainer">
-            <div className="closeFeedback" onClick={onClose} />
-          </div>
-        </section>
-      )}
-    </Animate>
-  );
+    return (
+        <Animate show={feedbackState !== 'hidden'} start={{y: 100, opacity: 0}} enter={{y: [0], opacity: [1]}} leave={{y: [100], opacity: [0] }}>
+            {({y, opacity}) =>
+                <section className="feedback" style={{transform: `translateY(${y}%)`, opacity }}>
+                    <div className="wrapper">
+                        {inner}
+                    </div>
+                    <div className="closeFeedbackContainer">
+                        <div className="closeFeedback" onClick={onClose}/>
+                    </div>
+                </section>
+            }
+        </Animate>
+    );
 };
 
 export default Feedback;

package/src/components/FiltersList.tsx

@@ -0,0 +1,69 @@
+
+import React, { useState } from 'react';
+import {Filter} from '../../../nyris-api/index';
+import { addToSelectedFilters, removeFromSelectedFilters } from '../actions/searchActions';
+import {  useDispatch } from 'react-redux';
+import { RiLayoutGridLine} from 'react-icons/ri';
+
+interface FilterProps {
+    filter : Filter
+}
+
+
+
+const FiltersList : React.FC<FilterProps> = ({filter})=>{
+    const [checked, setChecked] = useState<string[]>([]);
+    const dispatch = useDispatch();
+
+    const onFilterChanged=(e: React.ChangeEvent<HTMLInputElement>,value:string) =>{
+       var updatedList = [...checked];
+       console.log(e.target.checked);
+       if (e.target.checked) {
+        if(filter.key)
+         dispatch(addToSelectedFilters(filter.key , value));
+          updatedList = [...checked, value];
+        } else {
+            if(filter.key)
+            dispatch(removeFromSelectedFilters(filter.key, value));
+        updatedList.splice(checked.indexOf(value), 1);
+       }
+       setChecked(updatedList);
+       console.log(updatedList);
+    }
+    
+    if(filter && filter.values && filter.key && filter.values.length > 0){   
+          
+        return (
+            <div>
+                <div className='item'>
+                <RiLayoutGridLine className="sidebar-icon" />
+                 <span className="sidebar-text"> {filter.key}</span>
+                </div>
+                
+               <div className='item'>
+               <div className="list-container">
+       
+             {filter.values.slice(0, 6).map((item, index) => (
+            <div key={index}>
+            <input value={item} type="checkbox" onChange={(e)=>onFilterChanged(e,item)} />
+            
+            <label className='itemLabel'>{item}</label>
+           </div>
+           ))}
+       </div>  
+               </div>
+                                 
+            </div>
+
+        );
+    }
+    else{
+     return (
+       <div>
+        No filter to load
+       </div>
+  );
+ } 
+}
+
+export default FiltersList;

package/src/components/Header.tsx

@@ -1,35 +1,20 @@
 import React from "react";
 
-function HeaderComponent(): JSX.Element {
-  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>
-    </div>
-  );
-}
+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 HeaderComponent;
+}
+export default Header;