@nyris/nyris-webapp 0.3.12 → 0.3.15

package/src/components/Codes.tsx

@@ -1,24 +1,20 @@
-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,34 +1,24 @@
-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">
-      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>
-  );
+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,85 +1,55 @@
-import React from "react";
-import { NyrisFeedbackState } from "../actions/nyrisAppActions";
-import { Animate } from "react-move";
+import React from 'react';
+import {NyrisFeedbackState} from "../actions/nyrisAppActions";
+import {Animate} from "react-move";
 
 interface FeedbackProps {
-  feedbackState: NyrisFeedbackState;
-  onPositiveFeedback?: () => void;
-  onNegativeFeedback?: () => void;
-  onClose?: () => void;
+    feedbackState: NyrisFeedbackState,
+    onPositiveFeedback?: () => void,
+    onNegativeFeedback?: () => void,
+    onClose?: () => void
 }
 
-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;
-  }
-  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>
-  );
+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;
+    }
+    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

@@ -19,7 +19,7 @@ interface FilterProps {
 const FiltersList: React.FC<FilterProps> = ({ filter, selectedValues }) => {
   const dispatch = useDispatch();
   const [isCollapsed, setIsCollapsed] = useState(false);
-  const [message, setMessage] = useState("");
+  const [searchInp, setSearchInp] = useState("");
   const handleToggler = () => {
     if (isCollapsed) {
       setIsCollapsed(false);
@@ -38,27 +38,26 @@ const FiltersList: React.FC<FilterProps> = ({ filter, selectedValues }) => {
     }
     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));
+    setSearchInp(e.target.value);
   };
 
   useEffect(() => {
-    if (message === "") {
+    if (searchInp === "") {
       dispatch(searchFilters(filter.key!, ""));
     }
-  }, [message, filter.key, dispatch]);
+    if (searchInp.length > 1) {
+      dispatch(searchFilters(filter.key!, searchInp));
+    }
+  }, [searchInp, filter.key, dispatch]);
+
   return (
     <div>
       <div className="item">
-        {/* <RiLayoutGridLine className="sidebar-icon" /> */}
         <span className="sidebar-text">
-          {" "}
           {capitalizeFirstLetter(filter.key!)}
         </span>
         <RiArrowDropUpLine
@@ -85,22 +84,17 @@ const FiltersList: React.FC<FilterProps> = ({ filter, selectedValues }) => {
             id="searchQueryInput"
             name="searchQueryInput"
             placeholder="Search"
-            value={message}
+            value={searchInp}
             onChange={(e) => handleChangeOnSearchInputTyped(e)}
           />
-          <button
-            id="searchQuerySubmit"
-            type="submit"
-            name="searchQuerySubmit"
-            onClick={() => queryFilters(filter.key!, message)}
-          >
+          <button id="searchQuerySubmit" type="submit" name="searchQuerySubmit">
             <AiOutlineSearch />
           </button>
         </div>
         {filter &&
           filter.values &&
           filter.values.length > 0 &&
-          filter.values.slice(0, 6).map((item, index) => {
+          filter.values.map((item, index) => {
             const checked = selectedValues && selectedValues.includes(item);
             return (
               <div key={index}>

package/src/components/PredictedCategories.tsx

@@ -1,17 +1,14 @@
-import React from "react";
+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>)}
+    </>
+;
+
 
-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/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/SelectedFiltersSummary.tsx

@@ -64,8 +64,7 @@ const SelectedFiltersSummary: React.FC<selectedFiltersSummaryProps> = ({
             }
             onClick={() => clearAllSelectedFiltersFromList()}
           >
-            {" "}
-            Clear All{" "}
+            Clear All
           </button>
         </li>
       </ul>