@nyris/nyris-webapp 0.3.5 → 0.3.6

package/src/components/Result.tsx

@@ -1,210 +1,137 @@
-import React from "react";
-import { OfferNyrisResult as ResultData } from "@nyris/nyris-api";
+import React from 'react';
+import {OfferNyrisResult as ResultData} from "@nyris/nyris-api";
 
 // TODO this needs refactoring: Make it one block with parameters for first line, second line, image url ..
 
 interface Options {
-  result: any;
-  noImageUrl: string;
-  onImageClick: (e: React.MouseEvent) => void;
-  onLinkClick: (e: React.MouseEvent) => void;
+    result: any,
+    noImageUrl: string,
+    onImageClick: (e: React.MouseEvent) => void,
+    onLinkClick: (e: React.MouseEvent) => void
 }
 
 const renderPrice = (result: ResultData) =>
-  result.p ? "" + (result.p.vi / 100).toFixed(2) + " " + result.p.c : "";
+    result.p ? '' + (result.p.vi / 100).toFixed(2) + ' ' + result.p.c : '';
 
-const renderDefault = ({
-  result,
-  noImageUrl,
-  onImageClick,
-  onLinkClick,
-}: Options) => {
-  return (
-    <>
-      <a
-        href={result.l}
-        className="imageLink"
-        title="Click the image so see similar products"
-        onClick={onImageClick}
-        onAuxClick={onLinkClick}
-      >
-        <div className="prdctImg">
-          <div className="imgWrap">
-            <img
-              src={(result.img && result.img.url + "?r=512x512") || noImageUrl}
-              alt={result.title}
-            />
-          </div>
-        </div>
-      </a>
-      <div className="prdctDetailsWrap">
-        <div>
-          <div className="prdctTitle">{result.title}</div>
-          <div className="prdctMeta">
-            <span className="prdctPrice">{renderPrice(result)}</span>
-          </div>
-          <a
-            onClick={onLinkClick}
-            onAuxClick={onLinkClick}
-            className="prdctShopLink"
-            href={result.l}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Buy Now
-          </a>
-        </div>
-      </div>
-    </>
-  );
+const renderDefault = ({result, noImageUrl, onImageClick, onLinkClick}: Options) => {
+    return (
+        <>
+            <a href={result.l} className="imageLink" title="Click the image so see similar products"
+               onClick={onImageClick}
+               onAuxClick={onLinkClick}>
+                <div className="prdctImg">
+                    <div className="imgWrap">
+                        <img src={(result.img && result.img.url + '?r=512x512') || noImageUrl} alt={result.title}/>
+                    </div>
+                </div>
+            </a>
+            <div className="prdctDetailsWrap">
+                <div>
+                    <div className="prdctTitle">{result.title}</div>
+                    <div className="prdctMeta">
+                        <span className="prdctPrice">{renderPrice(result)}</span>
+                    </div>
+                    <a onClick={onLinkClick} onAuxClick={onLinkClick} className="prdctShopLink" href={result.l}
+                       target="_blank" rel="noopener noreferrer">Buy Now</a>
+                </div>
+            </div>
+        </>
+    );
 };
 
-const renderSnr = ({
-  result,
-  noImageUrl,
-  onImageClick,
-  onLinkClick,
-}: Options) => (
-  <>
-    <a
-      href={result.l}
-      className="imageLink"
-      onClick={onImageClick}
-      onAuxClick={onLinkClick}
-    >
-      <div className="prdctImg">
-        <div className="imgWrap">
-          <img
-            src={(result.img && result.img.url + "?r=512x512") || noImageUrl}
-            alt={result.title}
-          />
-        </div>
-      </div>
-    </a>
-    <div className="prdctDetailsWrap">
-      <div>
-        <div className="prdctTitle">{result.sku}</div>
-        <div
-          className="prdctMeta"
-          style={{ height: "5em", whiteSpace: "normal" }}
-        >
-          {result.title}
-        </div>
-        <a
-          style={{ backgroundImage: "none", paddingLeft: "10px" }}
-          className="prdctShopLink"
-          href={result.l}
-          target="_blank"
-          rel="noopener noreferrer"
-          onClick={onLinkClick}
-          onAuxClick={onLinkClick}
-        >
-          Info
+const renderSnr = ({result, noImageUrl, onImageClick, onLinkClick}: Options) => (
+    <>
+        <a href={result.l} className="imageLink" onClick={onImageClick} onAuxClick={onLinkClick}>
+            <div className="prdctImg">
+                <div className="imgWrap">
+                    <img src={(result.img && result.img.url + '?r=512x512') || noImageUrl} alt={result.title}/>
+                </div>
+            </div>
         </a>
-      </div>
-    </div>
-  </>
+        <div className="prdctDetailsWrap">
+            <div>
+                <div className="prdctTitle">{result.sku}</div>
+                <div className="prdctMeta" style={{height: '5em', whiteSpace: 'normal'}}>
+                    {result.title}
+                </div>
+                <a style={{backgroundImage: 'none', paddingLeft: '10px'}} className="prdctShopLink" href={result.l}
+                   target="_blank" rel="noopener noreferrer"
+                   onClick={onLinkClick} onAuxClick={onLinkClick}>Info</a>
+            </div>
+        </div>
+    </>
 );
 
-const renderSnrMultilink = (
-  { result, noImageUrl, onImageClick }: Options,
-  onLinkClick: (url: string) => void
-) => (
-  <>
-    <a
-      href={result.l}
-      className="imageLink"
-      onClick={onImageClick}
-      onAuxClick={onImageClick}
-    >
-      <div className="prdctImg">
-        <div className="imgWrap">
-          <img
-            src={(result.img && result.img.url + "?r=512x512") || noImageUrl}
-            alt={result.title}
-          />
-        </div>
-      </div>
-    </a>
-    <div className="prdctDetailsWrap">
-      <div>
-        <div className="prdctTitle">{result.sku}</div>
-        <div
-          className="prdctMeta"
-          style={{ height: "5em", whiteSpace: "normal" }}
-        >
-          {result.title}
+const renderSnrMultilink = ({result, noImageUrl, onImageClick}: Options, onLinkClick: (url: string) => void) => (
+    <>
+        <a href={result.l} className="imageLink"
+           onClick={onImageClick} onAuxClick={onImageClick}>
+            <div className="prdctImg">
+                <div className="imgWrap">
+                    <img src={(result.img && result.img.url + '?r=512x512') || noImageUrl} alt={result.title}/>
+                </div>
+            </div>
+        </a>
+        <div className="prdctDetailsWrap">
+            <div>
+                <div className="prdctTitle">{result.sku}</div>
+                <div className="prdctMeta" style={{height: '5em', whiteSpace: 'normal'}}>
+                    {result.title}
+                </div>
+                {result.l.map((l: { text: string, href: string }) =>
+                    <a style={{backgroundImage: 'none', paddingLeft: '10px'}} className="prdctShopLink" href={l.href}
+                       onClick={() => onLinkClick(l.href)} onAuxClick={() => onLinkClick(l.href)} target="_blank"
+                       key={l.href}
+                       rel="noopener noreferrer">{l.text}</a>
+                )}
+            </div>
         </div>
-        {result.l.map((l: { text: string; href: string }) => (
-          <a
-            style={{ backgroundImage: "none", paddingLeft: "10px" }}
-            className="prdctShopLink"
-            href={l.href}
-            onClick={() => onLinkClick(l.href)}
-            onAuxClick={() => onLinkClick(l.href)}
-            target="_blank"
-            key={l.href}
-            rel="noopener noreferrer"
-          >
-            {l.text}
-          </a>
-        ))}
-      </div>
-    </div>
-  </>
+    </>
 );
 
 export interface ResultProps {
-  result: any;
-  style: any;
-  template?: string;
-  onImageClick: (pos: number, url: string) => void;
-  onLinkClick: (pos: number, url: string) => void;
-  noImageUrl?: string;
+    result: any,
+    style: any,
+    template?: string,
+    onImageClick: (pos: number, url: string) => void,
+    onLinkClick: (pos: number, url: string) => void,
+    noImageUrl?: string
 }
 
-const Result: React.FC<ResultProps> = ({
-  result,
-  style,
-  template,
-  onImageClick,
-  onLinkClick,
-  noImageUrl,
-}) => {
-  let options: Options = {
-    onImageClick: (e: React.MouseEvent) => {
-      e.preventDefault();
-      onImageClick(result.position, result.img.url);
-    },
-    onLinkClick: (e: React.MouseEvent) => {
-      e.preventDefault();
-      onLinkClick(result.position, result.l);
-    },
-    noImageUrl: noImageUrl || "images/ic_cam_large_noimage.png",
-    result,
-  };
+const Result: React.FC<ResultProps> = ({result, style, template, onImageClick, onLinkClick, noImageUrl}) => {
+    let options: Options = {
+        onImageClick: (e: React.MouseEvent) => {
+            e.preventDefault();
+            onImageClick(result.position, result.img.url);
+        },
+        onLinkClick: (e: React.MouseEvent) => {
+            e.preventDefault();
+            onLinkClick(result.position, result.l);
+        },
+        noImageUrl: noImageUrl || 'images/ic_cam_large_noimage.png',
+        result
+    };
 
-  let resultInner = null;
-  switch (template) {
-    case "snr":
-      resultInner = renderSnr(options);
-      break;
-    case "snr-multilink":
-      resultInner = renderSnrMultilink(options, (url) =>
-        onLinkClick(result.position, url)
-      );
-      break;
-    case "default":
-    default:
-      resultInner = renderDefault(options);
-      break;
-  }
+    let resultInner = null;
+    switch (template) {
+        case "snr":
+            resultInner = renderSnr(options);
+            break;
+        case "snr-multilink":
+            resultInner = renderSnrMultilink(options, (url) => onLinkClick(result.position, url));
+            break;
+        case 'default':
+        default:
+            resultInner = renderDefault(options);
+            break;
+    }
 
-  return (
-    <div className="prdctItem" style={{ ...style }}>
-      {resultInner}
-    </div>
-  );
+    return (
+        <div className="prdctItem" style={{...style}}>
+            {resultInner}
+        </div>
+    );
 };
 
+
 export default Result;

package/src/components/Sidebar.tsx

@@ -0,0 +1,40 @@
+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[]
+}
+
+const Sidebar: React.FC<SidebarProps> = ({filters}) =>{
+  const [isExpanded, setIsExpanded] = useState(false);
+  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) => { 
+               return <FiltersList filter={x}/>
+               })
+            }   
+            </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,154 @@
+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 rootEpic = combineEpics(
+    searchEpics,
+    feedbackEpics,
+    historyEpic,
+    startSearchOnImageLoaded,
+    startSearchOnCadLoaded,
+    startSearchOnRegionsSuccessful,
+    startSearchOnRegionsFailed,
+    startSearchOnRegionChange,
+    onSearchSuccessShowResults,
+    onSearchSuccessShowFeedbackDelayed,
+    onSearchSuccessRedirectToSite
+);
+
+export default rootEpic;