@nyris/nyris-webapp 0.2.6 → 0.3.3

package/src/components/CustomHits/index.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { connectHits } from "react-instantsearch-dom";
+import ItemResult from "components/results/ItemResult";
+
+function Hits({
+  hits,
+  setDataResultToAlgolia,
+  handlerToggleModal,
+  setOpenModalShare,
+  setSearchStateInput,
+  getUrlToCanvasFile,
+  setLoading,
+  sendFeedBackAction,
+}: any): JSX.Element {
+  const handleSearch = () => {
+    setDataResultToAlgolia(hits);
+  };
+  console.log("hitshits", hits);
+
+  return (
+    <>
+      {handleSearch}
+      {hits.map((hit: any, index: any) => {
+        return (
+          <ItemResult
+            key={index}
+            dataItem={hit}
+            handlerToggleModal={() => {
+              handlerToggleModal(hit);
+            }}
+            handlerToggleModalShare={() => setOpenModalShare(true)}
+            indexItem={hit.__position}
+            isHover={false}
+            onSearchImage={(url: any) => {
+              setSearchStateInput({});
+              getUrlToCanvasFile(url);
+              setLoading(true);
+            }}
+            handlerFeedback={(value: string) => {
+              sendFeedBackAction(value);
+            }}
+          />
+        );
+      })}
+    </>
+  );
+}
+
+Hits.propTypes = {
+  hits: PropTypes.arrayOf(PropTypes.object),
+  objectIDs: PropTypes.arrayOf(PropTypes.string),
+  setObjectIDs: PropTypes.func,
+};
+
+const CustomHits = connectHits(Hits);
+export default CustomHits;

package/src/components/DetailItem.tsx

@@ -0,0 +1,175 @@
+import { Box, Button, Grid, Typography } from "@material-ui/core";
+import React from "react";
+import CloseOutlinedIcon from "@material-ui/icons/CloseOutlined";
+import DefaultCarousel from "./carousel/DefaultCarousel";
+import { Link } from "react-router-dom";
+import IconSupport from "common/assets/icons/support.svg";
+import IconLike from "common/assets/icons/icon_like.svg";
+import IconDisLike from "common/assets/icons/icon_dislike.svg";
+import IconShare from "common/assets/icons/Fill.svg";
+import IconBookmark from "common/assets/icons/book_mark.svg";
+// import IconPicture from "common/assets/icons/icon_picture.png";
+import IconPicture from "common/assets/icons/icon_modal_image.svg";
+import { useState } from "react";
+import { isEmpty } from "lodash";
+import { useEffect } from "react";
+
+interface Props {
+  numberResult?: number;
+  results?: any;
+  handlerCloseModal: () => void;
+  onNextItem?: () => void;
+  onPrevItem?: () => void;
+  dataItem?: any;
+  onHandlerModalShare?: () => void;
+  onSearchImage?: any;
+}
+
+function DetailItem(props: Props) {
+  const {
+    handlerCloseModal,
+    dataItem,
+    onHandlerModalShare,
+    onSearchImage,
+  } = props;
+
+  const { img, title, sku, main_image_link } = dataItem;
+  const [dataImageCarousel, setDataImageCarouSel] = useState<any[]>([]);
+
+  useEffect(() => {
+    checkDataItemResult(dataItem);
+  }, [dataItem]);
+
+  const checkDataItemResult = (dataItem: any) => {
+    if (!dataItem) {
+      return setDataImageCarouSel([]);
+    }
+    let valueKey: any[] = [];
+    const newObject = dataItem;
+    for (let key in newObject) {
+      if (key?.includes("recognition_image_link")) {
+        if (!isEmpty(newObject[key])) {
+          valueKey.push({
+            url: newObject[key],
+          });
+        }
+      } else {
+        if (key === "main_image_link") {
+          valueKey.push({
+            url: newObject[key],
+          });
+        }
+      }
+    }
+    setDataImageCarouSel(valueKey);
+  };
+
+  return (
+    <Box className="box-modal-default">
+      <Box className="ml-auto" style={{ width: "fit-content", marginRight: 5 }}>
+        <Button style={{ padding: 0 }} onClick={handlerCloseModal}>
+          <CloseOutlinedIcon style={{ fontSize: 12, color: "#55566B" }} />
+        </Button>
+      </Box>
+
+      <Box className="box-carosel">
+        <DefaultCarousel imgItem={dataImageCarousel} />
+        <Button
+          className="icon-style"
+          onClick={() => {
+            if (!main_image_link) {
+              console.log("321");
+
+              return;
+            }
+            onSearchImage(main_image_link);
+            handlerCloseModal();
+          }}
+        >
+          <img src={IconPicture} alt="icon_picture" />
+        </Button>
+      </Box>
+
+      <Box
+        className="box-content"
+        display={"flex"}
+        style={{ flexDirection: "column" }}
+      >
+        <Box className="box-top">
+          <Grid container justifyContent="space-between">
+            <Grid item xs={10}>
+              <Typography className="text-f9 fw-500 max-line-1">
+                SKU: {sku}
+              </Typography>
+              <Typography className="text-f16 fw-600 text-dark">
+                {title}
+              </Typography>
+              <Link className="text-f9 text-blue" to={"/"} href="#">
+                View full description
+              </Link>
+            </Grid>
+            <Grid item>
+              <Button className="btn-item">
+                <img
+                  src={IconBookmark}
+                  alt="image_item"
+                  className="icon_action"
+                />
+              </Button>
+            </Grid>
+          </Grid>
+        </Box>
+
+        <Box className="box-bottom">
+          <Grid container justifyContent="space-between" alignItems="center">
+            <Grid item>
+              <Box display={"flex"} alignItems={"center"}>
+                <Button className="btn-item">
+                  <img
+                    src={IconLike}
+                    alt="image_item"
+                    className="icon_action"
+                  />
+                </Button>
+                <Button className="btn-item">
+                  <img
+                    src={IconDisLike}
+                    alt="image_item"
+                    className="icon_action"
+                  />
+                </Button>
+              </Box>
+            </Grid>
+            <Grid item>
+              <Box display={"flex"} alignItems={"center"}>
+                <Button className="btn-item" onClick={onHandlerModalShare}>
+                  <img
+                    src={IconShare}
+                    alt="image_item"
+                    className="icon_action"
+                  />
+                </Button>
+                <Button className="btn-item">
+                  <Box
+                    className="box-gray text-center box-support"
+                    display={"flex"}
+                    justifyContent={"center"}
+                    alignItems={"center"}
+                  >
+                    <img
+                      src={IconSupport}
+                      alt="image_item"
+                      className="icon_support"
+                    />
+                  </Box>
+                </Button>
+              </Box>
+            </Grid>
+          </Grid>
+        </Box>
+      </Box>
+    </Box>
+  );
+}
+
+export default DetailItem;

package/src/components/DragDropFile.tsx

@@ -0,0 +1,188 @@
+import { Box, Typography } from "@material-ui/core";
+import React from "react";
+import { useDropzone } from "react-dropzone";
+import IconSearch from "common/assets/icons/icon_search_image.svg";
+import { makeFileHandler } from "@nyris/nyris-react-components";
+import { useAppDispatch, useAppSelector } from "Store/Store";
+import { serviceImage, serviceImageNonRegion } from "services/image";
+import {
+  loadFile,
+  loadingActionResults,
+  searchFileImageNonRegion,
+} from "Store/Search";
+import { showFeedback, showResults } from "Store/Nyris";
+import { useHistory } from "react-router-dom";
+import ExampleImages from "./ExampleImages";
+import { feedbackClickEpic } from "services/Feedback";
+import { useState } from "react";
+
+interface Props {
+  acceptTypes: any;
+  onChangeLoading: any;
+  isLoading: boolean;
+}
+
+function DragDropFile(props: Props) {
+  const history = useHistory();
+  const dispatch = useAppDispatch();
+  const { acceptTypes, onChangeLoading, isLoading } = props;
+  const searchState = useAppSelector((state) => state);
+  const { settings } = searchState;
+  const [rectCoords] = useState<any>(undefined);
+  const [isLoadingLoadFile, setLoadingLoadFile] = useState<any>(false);
+
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    onDrop: (fs: File[]) => {
+      onChangeLoading(true);
+      console.log("321");
+      let payload: any;
+      let filters: any[] = [];
+      setLoadingLoadFile(true);
+      console.log("fs", fs);
+
+      return serviceImage(fs[0], searchState).then((res: any) => {
+        console.log("res?.results", res);
+
+        res?.results.map((item: any) => {
+          filters.push({
+            sku: item.sku,
+            score: item.score,
+          });
+        });
+        payload = {
+          ...res,
+          // results: newResult,
+          filters,
+        };
+        console.log("payload", payload);
+
+        dispatch(loadFile(payload));
+        setLoadingLoadFile(false);
+        onChangeLoading(false);
+        history.push("/result");
+        return dispatch(showFeedback(""));
+      });
+    },
+  });
+
+  const getUrlToCanvasFile = (url: string, position?: number) => {
+    onChangeLoading(true);
+    dispatch(showResults(""));
+    dispatch(loadingActionResults(""));
+    if (position) {
+      feedbackClickEpic(searchState, position);
+    }
+
+    if (settings.regions) {
+      serviceImage(url, searchState).then((res) => {
+        dispatch(loadFile(res));
+        onChangeLoading(false);
+        history.push("/result");
+        return dispatch(showFeedback(""));
+      });
+    } else {
+      serviceImageNonRegion(url, searchState, rectCoords).then((res) => {
+        onChangeLoading(false);
+        history.push("/result");
+        dispatch(searchFileImageNonRegion(res));
+      });
+    }
+  };
+
+  return (
+    <Box
+      className={
+        !isDragActive && !isLoadingLoadFile
+          ? `box-content-main`
+          : `box-content-main-drop`
+      }
+    >
+      {isLoading && (
+        <Box className="loadingSpinCT">
+          <Box className="box-content-spin"></Box>
+        </Box>
+      )}
+
+      <div
+        className={`box-border`}
+        style={{ position: "relative" }}
+        {...getRootProps({
+          onClick: (e) => {
+            e.stopPropagation();
+          },
+        })}
+      >
+        {isDragActive ? (
+          <Box>
+            <Typography className="text-drop-file">
+              DRAG <span className="tractor">&</span> DROP
+            </Typography>
+            <input
+              {...getInputProps({
+                onClick: (e) => {
+                  e.stopPropagation();
+                },
+              })}
+              type="file"
+              name="file"
+              id="select_file"
+              // className="inputFile"
+              placeholder="Choose photo"
+              accept={acceptTypes}
+              onChange={makeFileHandler((e) => {})}
+            />
+          </Box>
+        ) : (
+          <>
+            <Box
+              className="box-content-drop"
+              {...getRootProps({
+                onClick: (e) => {
+                  e.stopPropagation();
+                },
+              })}
+            >
+              <Box className="box-image">
+                <img
+                  width={27}
+                  height={27}
+                  src={IconSearch}
+                  alt="icon_search"
+                />
+              </Box>
+              <label htmlFor="select_file" className="text-f20 text-bold">
+                <span className="box-blue">Choose photo</span> or drag & drop it
+                here
+              </label>
+              <input
+                {...getInputProps()}
+                type="file"
+                name="file"
+                id="select_file"
+                className="inputFile"
+                placeholder="Choose photo"
+                style={{ display: "block" }}
+                // accept={acceptTypes}
+                // onChange={makeFileHandler((e) => {
+                //   return isCheckImageFile(e);
+                // })}
+              />
+            </Box>
+            <Box style={{ marginTop: 19, zIndex: 109 }} className="box-thumb">
+              <Box display={"flex"} alignItems={"flex-end"}>
+                <ExampleImages
+                  images={settings.exampleImages}
+                  onExampleImageClicked={(url: string) => {
+                    return getUrlToCanvasFile(url);
+                  }}
+                />
+              </Box>
+            </Box>
+          </>
+        )}
+      </div>
+    </Box>
+  );
+}
+
+export default DragDropFile;

package/src/components/ExampleImages.tsx

@@ -1,24 +1,39 @@
-import React from 'react';
+import { Typography } from "@material-ui/core";
+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">
+      <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>
+  );
 };
 
 export default ExampleImages;