@nyris/nyris-webapp 0.2.4 → 0.3.1

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/Saved/AllItem.tsx

@@ -0,0 +1,32 @@
+import { Grid } from "@material-ui/core";
+import ItemResult from "components/results/ItemResult";
+import React from "react";
+
+interface Props {
+  dataItem: any[];
+  isHover?: boolean
+}
+
+function AllItem(props: Props) {
+  const { dataItem } = props;
+
+  return (
+    <Grid container spacing={2}>
+      {dataItem &&
+        dataItem.map((item: any, index: any) => {
+          return (
+            <Grid item sm={3} key={index}>
+              <ItemResult
+                dataItem={item}
+                isHover={true}
+                // handlerToggleModal={handlerToggleModal}
+                // handlerToggleModalShare={() => setOpenModalShare(true)}
+              />
+            </Grid>
+          );
+        })}
+    </Grid>
+  );
+}
+
+export default AllItem;

package/src/components/Saved/Category.tsx

@@ -0,0 +1,16 @@
+import { Grid } from "@material-ui/core";
+import React from "react";
+
+interface Props {
+  nameCategory?: string;
+}
+
+function CategoryItemSaved(props: Props) {
+  return (
+    <Grid container>
+      <Grid item xs={4}></Grid>
+    </Grid>
+  );
+}
+
+export default CategoryItemSaved;

package/src/components/carousel/DefaultCarousel.tsx

@@ -0,0 +1,48 @@
+import { Box, Button } from "@material-ui/core";
+import React from "react";
+import { Carousel } from "react-responsive-carousel";
+import ChevronRightOutlinedIcon from "@material-ui/icons/ChevronRightOutlined";
+import ChevronLeftOutlinedIcon from "@material-ui/icons/ChevronLeftOutlined";
+interface Props {
+  imgItem: any[];
+}
+
+function DefaultCarousel(props: Props) {
+  const { imgItem } = props;
+  console.log("imgItem", imgItem);
+
+  return (
+    <Carousel
+      showThumbs={false}
+      infiniteLoop={false}
+      showStatus={false}
+      className={imgItem.length > 1 ? "" : "hide-btn-arrow"}
+      renderArrowNext={(onClickHandler, hasPrev, label) => (
+        <Button onClick={onClickHandler} className="btn-carousel-right">
+          <ChevronRightOutlinedIcon
+            className="icon-ct"
+            style={{ color: "#55566B" }}
+          />
+        </Button>
+      )}
+      renderArrowPrev={(onClickHandler, hasPrev, label) => (
+        <Button onClick={onClickHandler} className="btn-carousel-left">
+          <ChevronLeftOutlinedIcon
+            className="icon-ct"
+            style={{ color: "#55566B" }}
+          />
+        </Button>
+      )}
+    >
+      {imgItem?.map((item: any, index: any) => {
+        return (
+          <Box key={index} style={{height: '100%'}}>
+            <img style={{height: '100%'}} src={imgItem ? item?.url : ""} alt="image_product" />
+          </Box>
+        );
+      })}
+    </Carousel>
+  );
+}
+
+export default DefaultCarousel;

package/src/components/common.d.ts

@@ -0,0 +1,9 @@
+type ReactNode =
+  | ReactChild
+  | ReactFragment
+  | ReactPortal
+  | boolean
+  | null
+  | undefined;
+
+export { ReactNode };

package/src/components/common.scss

@@ -0,0 +1,54 @@
+.layout-main-newVersion {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  overflow: hidden;
+  .box-header-newVersion-main {
+    height: 32px;
+    background: #2b2c46;
+    .box-content {
+      max-width: 1280px;
+      margin: auto;
+      height: 100%;
+      justify-content: space-between;
+      align-items: center;
+      .nav-menu {
+        width: auto;
+        color: #fff;
+        font-family: "Montserrat";
+        font-weight: bold;
+        height: 100%;
+        a {
+          display: flex;
+          align-items: center;
+          height: 100%;
+          padding: 0 10px;
+          &.active {
+            background: #322bb0;
+          }
+        }
+
+        span {
+          color: #fff;
+          font-size: 11px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          img {
+            margin-left: 12px;
+          }
+        }
+        .item-nav {
+          &:last-child {
+            margin-right: 0px;
+          }
+        }
+      }
+    }
+  }
+  .box-body-newVersion-wrap-main {
+    height: calc(100% - 32px);
+    // overflow: auto;
+  }
+}

package/src/components/default-select.tsx

@@ -0,0 +1,45 @@
+import { Box, MenuItem, Select } from "@material-ui/core";
+import React, { useEffect, useState } from "react";
+import KeyboardArrowDownOutlinedIcon from "@material-ui/icons/KeyboardArrowDownOutlined";
+import { connectMenu } from "react-instantsearch-dom";
+
+interface Props {
+  dataField: any[];
+}
+
+function DefaultSelectCustom({ items, currentRefinement, refine }: any) {
+  const [valueFilter, setValueFilter] = useState<string>();
+
+  useEffect(() => {
+    if (!valueFilter) {
+      return;
+    }
+    refine(valueFilter);
+  }, [valueFilter]);
+
+  return (
+    <Box className="w-100">
+      <select
+        className="w-100 btn-ct"
+        value={currentRefinement || ""}
+        onChange={(event: any) => {
+          setValueFilter(event?.currentTarget.value);
+          // refine(event.currentTarget.value);
+        }}
+      >
+        <option value="">See all options</option>
+        {items.map((item: any) => (
+          <option
+            key={item.label}
+            value={item.isRefined ? currentRefinement : item.value}
+          >
+            {item.label}
+          </option>
+        ))}
+      </select>
+    </Box>
+  );
+}
+const DefaultSelect = connectMenu(DefaultSelectCustom);
+
+export default DefaultSelect;

package/src/components/hitItem/hits.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import { Hit as AlgoliaHit } from "@algolia/client-search";
+import { useHits, UseHitsProps } from "react-instantsearch-hooks";
+import { useAppDispatch } from "Store/Store";
+import { useEffect } from "react";
+import { resultSearchText } from "Store/Search";
+import { useState } from "react";
+import { CircularProgress } from "@material-ui/core";
+
+export type HitsProps<THit> = React.ComponentProps<"div"> &
+  UseHitsProps & {
+    hitComponent: (props: { hit: THit }) => JSX.Element;
+  };
+
+export function Hits<THit extends AlgoliaHit<Record<string, unknown>>>({
+  hitComponent: Hit,
+  ...props
+}: HitsProps<THit>) {
+  
+  const { hits } = useHits(props);
+  const dispatch = useAppDispatch();
+  const [isLoading, setLoading] = useState<boolean>(false);
+
+  useEffect(() => {
+    setLoading(true);
+    setTimeout(() => {
+      setLoading(false);
+    }, 1000);
+  }, []);
+
+  useEffect(() => {
+    if (hits?.length > 0) {
+      dispatch(resultSearchText(hits));
+    }
+  }, []);
+
+  return (
+    <>
+      {isLoading ? (
+        <CircularProgress />
+      ) : (
+        <>
+          {hits.map((hit: any, index: any) => (
+            <Hit key={index} hit={hit as unknown as THit} />
+          ))}
+        </>
+      )}
+    </>
+  );
+}

package/src/components/hitItem/infinitiHits.tsx

@@ -0,0 +1,33 @@
+import { Grid } from "@material-ui/core";
+import ItemResult from "components/results/ItemResult";
+import React from "react";
+import {
+  useInfiniteHits,
+  UseInfiniteHitsProps,
+} from "react-instantsearch-hooks";
+
+function InfiniteHits(props: any) {
+  const { hits, isLastPage, showMore } = useInfiniteHits(props);
+  console.log("props", useInfiniteHits(props));
+
+  return (
+    <>
+      {hits.map((hit: any, index: any) => {
+        return (
+          <Grid item xs={3}>
+            <ItemResult
+              dataItem={hit?.hit}
+              // handlerToggleModal={() => {
+              //   handlerToggleModal(hit?.hit);
+              // }}
+              // handlerToggleModalShare={() => setOpenModalShare(true)}
+              // indexItem={hit.__position}
+            />
+          </Grid>
+        );
+      })}
+    </>
+  );
+}
+
+export default InfiniteHits;