@nyris/nyris-webapp 0.2.5 → 0.3.2

package/src/modules/LandingPage/indexAppMD.tsx

@@ -0,0 +1,494 @@
+import { useDropzone } from "react-dropzone";
+import {
+  makeStyles,
+  Button,
+  Card,
+  CardActions,
+  CardContent,
+  CardMedia,
+  CircularProgress,
+  Container,
+  CssBaseline,
+  Fab,
+  Grid,
+  Hidden,
+  Typography,
+} from "@material-ui/core";
+import { PhotoCamera, ArrowBack, Image } from "@material-ui/icons";
+import Icon from "@material-ui/core/Icon";
+import React, { useCallback, useEffect, useState } from "react";
+import { NodeGroup } from "react-move";
+import classNames from "classnames";
+import { Capture, Preview } from "@nyris/nyris-react-components";
+import { useAppDispatch, useAppSelector } from "Store/Store";
+import {
+  RectCoords,
+  cadExtensions,
+  isCadFile,
+  isImageFile,
+  ImageSearchOptions,
+} from "@nyris/nyris-api";
+import NyrisAPI from "@nyris/nyris-api";
+import {
+  loadCadFileLoad,
+  loadFile,
+  loadFileSelectRegion,
+  loadingActionRegions,
+  loadingActionResults,
+  searchFileImageNonRegion,
+  selectionChanged,
+} from "Store/Search";
+import { showCamera, showFeedback, showResults, showStart } from "Store/Nyris";
+import _, { debounce, isEmpty } from "lodash";
+import { serviceImage, serviceImageNonRegion } from "services/image";
+import { findByImage } from "services/findByImage";
+import { feedbackRegionEpic } from "services/Feedback";
+import { MDSettings } from "../../types";
+
+const useStyles = makeStyles((theme) => ({
+  icon: {
+    marginRight: theme.spacing(2),
+  },
+  heroContent: {
+    backgroundColor: theme.palette.background.paper,
+    padding: theme.spacing(8, 0, 6),
+    transition: "all 300ms",
+    overflow: "hidden",
+    height: 500,
+  },
+  heroContentClosed: {
+    height: 0,
+    padding: 0,
+  },
+  heroButtons: {
+    marginTop: theme.spacing(4),
+  },
+  cardGrid: {
+    paddingTop: theme.spacing(8),
+    paddingBottom: theme.spacing(8),
+    minHeight: 600,
+    overflow: "hidden",
+    transition: "all 300ms",
+  },
+  cardGridCollapsed: {
+    height: 0,
+    opacity: 0,
+    minHeight: 0,
+    paddingTop: 0,
+    paddingBottom: 0,
+  },
+  card: {
+    height: "100%",
+    display: "flex",
+    flexDirection: "column",
+  },
+  cardMedia: {
+    paddingTop: "56.25%", // 16:9
+    backgroundSize: "contain",
+  },
+  cardContent: {
+    flexGrow: 1,
+    paddingBottom: 0,
+  },
+  footer: {
+    backgroundColor: theme.palette.background.paper,
+    padding: theme.spacing(6),
+  },
+  withElipsis: {
+    textOverflow: "ellipsis",
+    overflow: "hidden",
+    whiteSpace: "nowrap",
+  },
+  loading: {
+    margin: theme.spacing(2),
+  },
+  fabContainer: {
+    position: "fixed",
+    bottom: theme.spacing(2),
+  },
+  fab: {
+    marginLeft: theme.spacing(2),
+  },
+}));
+
+const makeFileHandler = (action: any) => (e: any) => {
+  let file = (e.dataTransfer && e.dataTransfer.files[0]) || e.target.files[0];
+  if (e.target && e.target.value) {
+    e.target.value = "";
+  }
+
+  if (file) {
+    action(file);
+  }
+};
+
+const LandingPageAppMD: React.FC<any> = () => {
+  const dispatch = useAppDispatch();
+  const classes = useStyles();
+  const [rectCoords, setRectCoords] = useState<any>();
+  const searchState = useAppSelector((state) => state);
+  const { settings, search, nyris } = searchState;
+  const { showPart } = nyris;
+  const {
+    requestImage,
+    regions,
+    selectedRegion,
+    fetchingRegions,
+    fetchingResults,
+    results,
+    requestId,
+  } = search;
+  const { themePage }: any = settings;
+  useEffect(() => {
+    if (isEmpty(rectCoords)) {
+      return;
+    }
+    onSearchOffersForImage(rectCoords);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [rectCoords]);
+
+  const loading = fetchingRegions || fetchingResults;
+
+  const mdSettings: any = themePage.materialDesign as MDSettings;
+
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    onDrop: (fs: File[]) => dispatch(loadFile(fs[0])),
+  });
+
+  const minPreviewHeight = 400;
+  const halfOfTheScreenHeight = Math.floor(window.innerHeight * 0.45);
+  const maxPreviewHeight = Math.max(minPreviewHeight, halfOfTheScreenHeight);
+  const acceptTypes = ["image/*"]
+    .concat(settings.cadSearch ? cadExtensions : [])
+    .join(",");
+
+  const isCheckImageFile = async (file: any) => {
+    dispatch(showResults(""));
+    dispatch(loadingActionResults(""));
+    dispatch(showFeedback(""));
+    if (isImageFile(file) || typeof file === "string") {
+      if (settings.regions) {
+        serviceImage(file, searchState).then((res) => {
+          dispatch(loadFile(res));
+          return dispatch(showFeedback(""));
+        });
+      } else {
+        serviceImageNonRegion(file, searchState, rectCoords).then((res) => {
+          dispatch(searchFileImageNonRegion(res));
+        });
+      }
+      // return serviceImage(file, settings).then((res) => {
+      //   return dispatch(loadFile(res));
+      // });
+    }
+    if (isCadFile(file)) {
+      return dispatch(loadCadFileLoad(file));
+    }
+  };
+
+  const feedbackClickEpic = async (position: any, _url: string) => {
+    try {
+      const api = new NyrisAPI(settings);
+      const sessionId = search.sessionId || search.requestId;
+      if (sessionId && requestId) {
+        await api.sendFeedback(sessionId, requestId, {
+          event: "click",
+          data: { positions: [position] },
+        });
+      }
+    } catch (error) {
+      console.log("err feedbackClickEpic", error);
+    }
+  };
+
+  const handlerRectCoords = debounce((value) => {
+    setRectCoords(value);
+  }, 1200);
+
+  const debounceRectCoords = useCallback(
+    (value) => handlerRectCoords(value),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  const onSearchOffersForImage = (r: RectCoords) => {
+    const { canvas }: any = requestImage;
+    let options: ImageSearchOptions = {
+      cropRect: r,
+    };
+    feedbackRegionEpic(searchState, r);
+    dispatch(loadingActionRegions(""));
+    return findByImage(canvas, options, settings).then((res) => {
+      dispatch(loadFileSelectRegion(res));
+      return dispatch(showFeedback(""));
+    });
+  };
+
+  return (
+    <React.Fragment>
+      {!_.isEmpty(mdSettings?.resultLinkIcon) && (
+        <link
+          rel="stylesheet"
+          href="https://fonts.googleapis.com/icon?family=Material+Icons"
+        />
+      )}
+      <CssBaseline />
+      {showPart === "camera" && (
+        <Capture
+          onCaptureComplete={(image: HTMLCanvasElement) =>
+            isCheckImageFile(image)
+          }
+          onCaptureCanceled={() => dispatch(showStart)}
+          useAppText="Use default camera app"
+        />
+      )}
+      <main>
+        <div
+          className={classNames(
+            classes.heroContent,
+            showPart === "results" ? classes.heroContentClosed : null
+          )}
+        >
+          <Container maxWidth="md">
+            <div>
+              <Hidden mdUp>
+                <div style={{ textAlign: "center" }}>
+                  <PhotoCamera style={{ fontSize: "20em", color: "#cccccc" }} />
+                </div>
+                <div style={{ textAlign: "center" }}>
+                  <Button
+                    variant={"contained"}
+                    color={"primary"}
+                    onClick={() => {
+                      return dispatch(showCamera);
+                    }}
+                  >
+                    Take a picture
+                  </Button>
+                </div>
+                <div style={{ textAlign: "center" }}>
+                  <Typography>or</Typography>
+                </div>
+                <div style={{ textAlign: "center" }}>
+                  <input
+                    accept={acceptTypes}
+                    id="raised-button-file"
+                    type="file"
+                    onChange={makeFileHandler((e: any) => isCheckImageFile(e))}
+                    style={{
+                      width: ".1px",
+                      height: ".1px",
+                      overflow: "hidden",
+                      opacity: 0,
+                    }}
+                  />
+                  <label htmlFor="raised-button-file">
+                    <Button
+                      variant={"contained"}
+                      color={"primary"}
+                      component="span"
+                    >
+                      Select a file
+                    </Button>
+                  </label>
+                </div>
+              </Hidden>
+              <Hidden smDown>
+                <div
+                  style={{
+                    borderStyle: "dashed",
+                    borderWidth: 5,
+                    borderColor: isDragActive ? "#ccc" : "#eee",
+                    borderRadius: 10,
+                    padding: 10,
+                    paddingBottom: 30,
+                  }}
+                  {...getRootProps({
+                    onClick: (e) => {
+                      e.stopPropagation();
+                    },
+                  })}
+                >
+                  <div style={{ textAlign: "center" }}>
+                    <Image style={{ fontSize: "20em", color: "#cccccc" }} />
+                  </div>
+                  <div style={{ textAlign: "center" }}>
+                    <Typography variant="body2">DROP AN IMAGE</Typography>
+                  </div>
+                  <div style={{ textAlign: "center" }}>
+                    <Typography variant="subtitle2">or</Typography>
+                  </div>
+                  <div style={{ textAlign: "center" }}>
+                    <input
+                      accept={acceptTypes}
+                      id="raised-button-file"
+                      type="file"
+                      {...getInputProps()}
+                      onChange={makeFileHandler((e: any) => {
+                        return isCheckImageFile(e);
+                      })}
+                      style={{
+                        width: ".1px",
+                        height: ".1px",
+                        overflow: "hidden",
+                        opacity: 0,
+                      }}
+                    />
+                    <label htmlFor="raised-button-file">
+                      <Button
+                        variant={"contained"}
+                        color={"primary"}
+                        component="span"
+                      >
+                        Select an image
+                      </Button>
+                    </label>
+                  </div>
+                </div>
+              </Hidden>
+            </div>
+          </Container>
+        </div>
+        <Container
+          className={classNames(
+            classes.cardGrid,
+            showPart !== "results" && classes.cardGridCollapsed
+          )}
+          maxWidth="md"
+        >
+          {requestImage && (
+            <Card style={{ marginBottom: "4em" }} raised={true}>
+              <Preview
+                key={requestImage.id}
+                maxWidth={document.body.clientWidth}
+                maxHeight={maxPreviewHeight}
+                dotColor={mdSettings.primaryColor}
+                onSelectionChange={(r: RectCoords) => {
+                  dispatch(selectionChanged(r));
+                  return debounceRectCoords(r);
+                }}
+                regions={regions}
+                selection={selectedRegion}
+                image={requestImage.canvas}
+              />
+            </Card>
+          )}
+
+          {loading && (
+            <div style={{ textAlign: "center" }}>
+              <CircularProgress className={classes.loading} />
+            </div>
+          )}
+
+          <Grid container spacing={4}>
+            <NodeGroup
+              data={results}
+              keyAccessor={(r) => r.position + r.sku}
+              start={(r, i) => ({ opacity: 0, translateX: -100 })}
+              enter={(r, i) => ({
+                opacity: [1],
+                translateX: [0],
+                timing: { delay: i * 100, duration: 300 },
+              })}
+            >
+              {(rs) => (
+                <>
+                  {rs.map(({ key, data: result, state }) => (
+                    <Grid item key={key} xs={12} sm={4} md={3}>
+                      <Card
+                        className={classes.card}
+                        style={{
+                          opacity: state.opacity,
+                          position: "relative",
+                          transform: `translateX(${state.translateX}%)`,
+                        }}
+                      >
+                        <CardMedia
+                          className={classes.cardMedia}
+                          image={
+                            (result.img && result.img.url) ||
+                            settings.noImageUrl
+                          }
+                          title={result.title}
+                        />
+                        <CardContent className={classes.cardContent}>
+                          <Typography
+                            gutterBottom
+                            variant="subtitle2"
+                            component="h5"
+                            className={classes.withElipsis}
+                          >
+                            {result[mdSettings.resultFirstRowProperty]}
+                          </Typography>
+                          <Typography
+                            variant="body2"
+                            className={classes.withElipsis}
+                          >
+                            {result[mdSettings.resultSecondRowProperty]}
+                          </Typography>
+                        </CardContent>
+                        {result.l && (
+                          <CardActions>
+                            <Button
+                              variant="outlined"
+                              style={{ marginLeft: "auto" }}
+                              size="small"
+                              color="primary"
+                              onClick={
+                                () => {
+                                  return feedbackClickEpic(
+                                    result.position,
+                                    result.l
+                                  );
+                                }
+                                // handlers.onLinkClick(result.position, result.l)
+                              }
+                              onAuxClick={() => {
+                                return feedbackClickEpic(
+                                  result.position,
+                                  result.l
+                                );
+                              }}
+                            >
+                              {mdSettings.resultLinkIcon && (
+                                <React.Fragment>
+                                  <Icon>{mdSettings.resultLinkIcon}</Icon>{" "}
+                                </React.Fragment>
+                              )}
+                              {mdSettings.resultLinkText}
+                            </Button>
+                          </CardActions>
+                        )}
+                      </Card>
+                    </Grid>
+                  ))}
+                </>
+              )}
+            </NodeGroup>
+          </Grid>
+
+          {results.length === 0 && showPart === "results" && !loading && (
+            <Typography variant="h3" align="center">
+              We did not find anything
+            </Typography>
+          )}
+        </Container>
+        {showPart !== "start" && (
+          <Container maxWidth="lg">
+            <div className={classes.fabContainer}>
+              <Fab
+                aria-label="back"
+                className={classes.fab}
+                color="primary"
+                onClick={() => dispatch(showStart(""))}
+              >
+                <ArrowBack />
+              </Fab>
+            </div>
+          </Container>
+        )}
+      </main>
+    </React.Fragment>
+  );
+};
+
+export default LandingPageAppMD;

package/src/modules/LandingPage/indexNewVersion.tsx

@@ -0,0 +1,117 @@
+import { Box, Typography } from "@material-ui/core";
+import React, { useState, useEffect } from "react";
+import "./common.scss";
+import TranslateIcon from "common/assets/icons/translate_icon.svg";
+import DragDropFile from "components/DragDropFile";
+import { cadExtensions } from "@nyris/nyris-api";
+import { useAppDispatch, useAppSelector } from "Store/Store";
+import { changeValueTextSearch, setUpdateSession } from "Store/Search";
+import { useHistory } from "react-router-dom";
+import {
+  Configure,
+  InstantSearch,
+  connectInfiniteHits,
+} from "react-instantsearch-dom";
+import algoliasearch from "algoliasearch/lite";
+import CustomSearchBox from "components/input/inputSearch";
+import NyrisAPICT from "services/findRegionsCustom";
+
+interface Props {}
+
+function AppNewVersion(props: Props) {
+  const dispatch = useAppDispatch();
+  const history = useHistory();
+  const searchState = useAppSelector((state) => state);
+  const { settings, search }: any = searchState;
+  const [searchStateInput, setSearchStateInput] = useState<any>({});
+  const [isLoading, setLoading] = useState<boolean>(false);
+  const nyrisApi = new NyrisAPICT(settings);
+  const { apiKeyAlgolia, appIdAlgolia, indexNameAlgolia } = settings;
+  const searchClient = algoliasearch(appIdAlgolia, apiKeyAlgolia);
+  searchClient.initIndex(indexNameAlgolia);
+
+  useEffect(() => {
+    const createSession = async () => {
+      try {
+        await nyrisApi.createSession().then((res: any) => {
+          const payload: any = {
+            sessionId: res.data.session,
+            requestId: res.data.id,
+          };
+          dispatch(setUpdateSession(payload));
+        });
+      } catch (error) {}
+    };
+
+    createSession();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const acceptTypes = ["image/*"]
+    .concat(settings.cadSearch ? cadExtensions : [])
+    .join(",");
+
+  const InfiniteHits = ({ hits }: any) => {
+    return <div></div>;
+  };
+
+  const onChangeLoading = (value: boolean) => {
+    setLoading(value);
+  };
+
+  const CustomInfiniteHits = connectInfiniteHits(InfiniteHits);
+
+  const nonEmptyFilter: any[] = !search?.requestImage
+    ? []
+    : ["sku:DOES_NOT_EXIST<score=1>"];
+  const filterSkus: any = search?.results
+    ? search?.results.map(
+        (f: any) => `sku:'${f.sku}'<score=${Math.round(100 * f.score)}>`
+      )
+    : "";
+  const filtersString = [...nonEmptyFilter, ...filterSkus].join(" OR ");
+
+  return (
+    <Box className={`box-content-main ${isLoading ? "loading" : ""}`}>
+      <InstantSearch
+        indexName={indexNameAlgolia}
+        searchClient={searchClient}
+        searchState={searchStateInput}
+        onSearchStateChange={(state: any) => {
+          setSearchStateInput(state);
+          dispatch(changeValueTextSearch(state));
+          history.push("/result");
+        }}
+      >
+        <Box className="box-content_top">
+          <div className="box-logo">
+            <img src={TranslateIcon} width={32} height={27} alt="logo_icon" />
+          </div>
+          <div className="box-input">
+            <div className="wrap-input-search">
+              <Configure filters={filtersString}></Configure>
+              <div style={{ display: "none" }}>
+                <CustomInfiniteHits />
+              </div>
+              <CustomSearchBox />
+            </div>
+          </div>
+          <div className="box-bottom">
+            <Typography className="text-bottom">
+              Search by any name, category, SKU or keyword.
+            </Typography>
+          </div>
+        </Box>
+        <Box className="box-content_bottom">
+          <DragDropFile
+            acceptTypes={acceptTypes}
+            isLoading={isLoading}
+            onChangeLoading={onChangeLoading}
+          />
+        </Box>
+      </InstantSearch>
+    </Box>
+  );
+}
+
+export default AppNewVersion;

package/src/page/Auth/login.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+function Login(): JSX.Element {
+  return <div>page login</div>;
+}
+
+export default Login;

package/src/page/Exception/404.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+interface Props {}
+
+function NotFound(props: Props): JSX.Element {
+  const {} = props;
+
+  return <div>NotFound</div>;
+}
+
+export default NotFound;

package/src/page/History/index.tsx

@@ -0,0 +1,76 @@
+import { Box, Button, Typography } from "@material-ui/core";
+import React from "react";
+import ListSearch from "components/search/ListSearch";
+
+interface Option {
+  readonly label: string;
+  readonly value: string;
+}
+
+function SearchHistory(): JSX.Element {
+  return (
+    <Box className="wrap-main-search-history">
+      <Box className="box-main-top">
+        <Box className="box-input">
+          {/* <InputSearch
+            inputValueInputSearch={inputValueInputSearch}
+            handleChange={handleChangeInputSearch}
+            handleKeyDown={handleKeyDown}
+            handleInputChange={handleInputChange}
+            valueInputSearch={valueInputSearch}
+            styleControl={{
+              width: 640,
+              background: "#FFFFFF",
+              boxShadow: "0px 0px 6.66667px rgba(0, 0, 0, 0.2)",
+              borderRadius: 21,
+              minHeight: 42,
+              display: "flex",
+              alignItems: "center",
+              paddingLeft: "16px",
+            }}
+            placeholder={"Search"}
+            customComponent={{
+              DropdownIndicator: () => {
+                return (
+                  <Box mr={1}>
+                    <button
+                      className="btn-input-search"
+                      onClick={() => {
+                        console.log("321");
+                      }}
+                    >
+                      <img src={IconSetting} alt="icon_search" />
+                    </button>
+                  </Box>
+                );
+              },
+            }}
+          /> */}
+        </Box>
+      </Box>
+
+      <Box className="box-main-bottom">
+        <Box className="col-left">
+          <ul className="box-time">
+            <li>
+              <Button>
+                <Typography className="text-f9 active">2021</Typography>
+              </Button>
+            </li>
+            <li>
+              <Button>
+                <Typography className="text-f9">2020</Typography>
+              </Button>
+            </li>
+          </ul>
+        </Box>
+        <Box className="col-right">
+          <ListSearch />
+          <ListSearch />
+        </Box>
+      </Box>
+    </Box>
+  );
+}
+
+export default SearchHistory;