@nyris/nyris-webapp 0.3.5 → 0.3.6

package/src/components/CustomHits/index.tsx

@@ -1,57 +0,0 @@
-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

@@ -1,175 +0,0 @@
-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

@@ -1,192 +0,0 @@
-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 {createImage, findByImage, findRegions} from "services/image";
-import {
-  setSearchResults,
-  loadingActionResults,
-  setRequestImage, setRegions, setSelectedRegion,
-} 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";
-import {RectCoords} from "@nyris/nyris-api";
-
-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 [isLoadingLoadFile, setLoadingLoadFile] = useState<any>(false);
-
-  const { getRootProps, getInputProps, isDragActive } = useDropzone({
-    onDrop: async (fs: File[]) => {
-      onChangeLoading(true);
-      console.log("321");
-      let payload: any;
-      let filters: any[] = [];
-      setLoadingLoadFile(true);
-      console.log("fs", fs);
-
-      let image = await createImage(fs[0]);
-      dispatch(setRequestImage(image));
-      // TODO support regions
-      return findByImage(image, searchState.settings).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(setSearchResults(payload));
-        setLoadingLoadFile(false);
-        onChangeLoading(false);
-        history.push("/result");
-        return dispatch(showFeedback());
-      });
-    },
-  });
-
-  const getUrlToCanvasFile = async (url: string, position?: number) => {
-    onChangeLoading(true);
-    dispatch(showResults());
-    dispatch(loadingActionResults());
-    if (position) {
-      feedbackClickEpic(searchState, position);
-    }
-
-    let image = await createImage(url);
-    dispatch(setRequestImage(image));
-    let searchRegion: RectCoords| undefined = undefined;
-    if (settings.regions) {
-      let res = await findRegions(image, settings);
-      dispatch(setRegions(res.regions));
-      searchRegion = res.selectedRegion;
-      dispatch(setSelectedRegion(searchRegion));
-    }
-    return findByImage(image, searchState.settings, searchRegion).then((res) => {
-      dispatch(setSearchResults(res));
-      onChangeLoading(false);
-      history.push("/result");
-      return dispatch(showFeedback());
-    });
-  };
-
-  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/FilterComponent.tsx

@@ -1,33 +0,0 @@
-import { Box, Button, Grid } from "@material-ui/core";
-import DefaultSelect from "components/default-select";
-import React from "react";
-
-interface Props {}
-
-function FilterComponent(props: Props) {
-  const {} = props;
-
-  return (
-    <Box className="box-main-filter">
-      <Grid container>
-        <Grid item className="item">
-          <DefaultSelect attribute="brand" />
-        </Grid>
-        <Grid item className="item">
-          <DefaultSelect attribute="keyword_0" />
-        </Grid>
-
-        <Grid item className="item-seven text-center">
-          <Button
-            className="text-btn-small bg-pink text-red"
-            style={{ borderRadius: 12 }}
-          >
-            Clear x
-          </Button>
-        </Grid>
-      </Grid>
-    </Box>
-  );
-}
-
-export default FilterComponent;

package/src/components/Footer.tsx

@@ -1,29 +0,0 @@
-import React from "react";
-import { useAppDispatch, useAppSelector } from "Store/Store";
-import Feedback from "components/Feedback";
-import { hideFeedback } from "Store/Nyris";
-
-function FooterComponent(): JSX.Element {
-  const dispatch = useAppDispatch();
-  const searchState = useAppSelector((state) => state);
-  const { nyris } = searchState;
-  const { feedbackState } = nyris;
-  return (
-    <>
-      <section className="footnote">
-        <div className="wrapper">
-          © 2017 - 2019 <a href="https://nyris.io">nyris GmbH</a> - All rights
-          reserved - <a href="https://nyris.io/imprint/">Imprint</a>
-        </div>
-      </section>
-      <Feedback
-        feedbackState={feedbackState}
-        onClose={() => {
-          return dispatch(hideFeedback());
-        }}
-      />
-    </>
-  );
-}
-
-export default FooterComponent;

package/src/components/FooterMD.tsx

@@ -1,54 +0,0 @@
-import React from "react";
-import { makeStyles, Typography, Link } from "@material-ui/core";
-import { useAppSelector } from "Store/Store";
-
-const useStyles = makeStyles((theme) => ({
-  footer: {
-    backgroundColor: theme.palette.background.paper,
-    padding: theme.spacing(6),
-  },
-}));
-
-function Copyright() {
-  return (
-    <Typography variant="body2" color="textSecondary" align="center">
-      {"Powered by "}
-      <Link
-        color="inherit"
-        href="https://nyris.io/"
-        component="a"
-        target="_blank"
-      >
-        nyris.io
-      </Link>
-    </Typography>
-  );
-}
-
-function FooterMD(): JSX.Element {
-  const searchState = useAppSelector((state) => state);
-  const { search, nyris } = searchState;
-  const { showPart } = nyris;
-  const { requestId } = search;
-  const classes = useStyles();
-  return (
-    <footer className={classes.footer}>
-      <Typography variant="subtitle1" align="center" color="textSecondary">
-        {requestId && showPart === "results" && (
-          <div
-            style={{
-              textAlign: "center",
-              fontSize: "0.7em",
-              paddingTop: "0.8em",
-            }}
-          >
-            Request identifier {requestId}
-          </div>
-        )}
-      </Typography>
-      <Copyright />
-    </footer>
-  );
-}
-
-export default FooterMD;

package/src/components/FooterNewVersion.tsx

@@ -1,12 +0,0 @@
-import { Box } from '@material-ui/core'
-import React from 'react'
-
-interface Props {}
-
-function FooterNewVersion(props: Props): JSX.Element {
-  return (
-    <Box></Box>
-  )
-}
-
-export default FooterNewVersion

package/src/components/FooterResult.tsx

@@ -1,47 +0,0 @@
-import { Box, Grid, Typography } from "@material-ui/core";
-import React from "react";
-import { Link } from "react-router-dom";
-import TitleOutlinedIcon from "@material-ui/icons/TitleOutlined";
-
-interface Props {
-  search: any;
-}
-
-function FooterResult(props: Props) {
-  const {search} = props;
-
-  return (
-    <Grid
-      container
-      justifyContent="space-between"
-      alignItems="center"
-      style={{ height: "100%" }}
-    >
-      <Grid
-        item
-        className="item-notify"
-        style={{ borderRight: "1px solid #E9E9EC", minWidth: 69 }}
-      >
-        <Typography className="text-f8 text-center">
-          {search.results.length} results
-        </Typography>
-      </Grid>
-      <Grid item className="item-notify">
-        <Typography className="text-f8 text-center">
-          Didn’t find what you were looking for? Share your search with our{" "}
-          <Link to={"#"}>product experts</Link>.
-        </Typography>
-      </Grid>
-      <Grid item className="item-notify" style={{ minWidth: 32 }}>
-        <Typography className="text-f8">
-          <Box>
-            <TitleOutlinedIcon style={{ color: "#55566B", fontSize: 8 }} />
-            <TitleOutlinedIcon style={{ color: "#55566B", fontSize: 10 }} />
-          </Box>
-        </Typography>
-      </Grid>
-    </Grid>
-  );
-}
-
-export default FooterResult;

package/src/components/HeaderMd.tsx

@@ -1,38 +0,0 @@
-import React from "react";
-import { Container, Toolbar, Typography, AppBar } from "@material-ui/core";
-import { useAppSelector } from "Store/Store";
-import {MDSettings} from "../types";
-interface Props {
-  settings: any;
-}
-
-function HeaderMdComponent(): JSX.Element {
-  const { settings } = useAppSelector((state) => state);
-  const { themePage } = settings;
-  const mdSettings = themePage.materialDesign as MDSettings;
-
-  return (
-    <AppBar
-      position={"relative"}
-      style={{ backgroundColor: mdSettings.appBarCustomBackgroundColor }}
-    >
-      <Container
-        maxWidth="md"
-        style={{ flexDirection: "row", display: "flex" }}
-      >
-        <img
-          src={mdSettings.appBarLogoUrl}
-          style={{ height: "2em", minHeight: "64px", display: "flex" }}
-          alt="Logo"
-        />
-        <Toolbar component="span">
-          <Typography style={{ color: mdSettings.appBarCustomTextColor }}>
-            {mdSettings.appBarTitle}
-          </Typography>
-        </Toolbar>
-      </Container>
-    </AppBar>
-  );
-}
-
-export default HeaderMdComponent;