@nyris/nyris-webapp 0.3.6 → 0.3.13

package/src/components/Result.tsx

@@ -1,137 +1,210 @@
-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 renderSnr = ({result, noImageUrl, onImageClick, onLinkClick}: Options) => (
+const renderDefault = ({
+  result,
+  noImageUrl,
+  onImageClick,
+  onLinkClick,
+}: Options) => {
+  return (
     <>
-        <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</a>
-            </div>
+      <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 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>
+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
         </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>
+    </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}
+        </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

@@ -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,40 +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[]
+  filters: Filter[];
+  selectedFilters: Map<string, string[]>;
 }
 
-const Sidebar: React.FC<SidebarProps> = ({filters}) =>{
+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) => { 
-               return <FiltersList filter={x}/>
-               })
-            }   
-            </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;