@nyris/nyris-webapp 0.3.23 → 0.3.25

package/src/modules/LandingPage/index.tsx

@@ -1,186 +0,0 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import { RectCoords, cadExtensions, isCadFile } from '@nyris/nyris-api';
-
-import { useAppDispatch, useAppSelector } from 'Store/Store';
-import {
-  setSearchResults,
-  loadingActionResults,
-  searchFileImageNonRegion,
-  selectionChanged,
-  setRequestImage,
-  setRegions,
-  setSelectedRegion,
-  setError,
-} from 'Store/Search';
-import {
-  feedbackNegative,
-  feedbackSubmitPositive,
-  hideFeedback,
-  showCamera,
-  showFeedback,
-  showResults,
-  showStart,
-} from 'Store/Nyris';
-import {
-  createImage,
-  findByCadFile,
-  findByImage,
-  findRegions,
-} from 'services/image';
-import { debounce } from 'lodash';
-import {
-  feedbackClickEpic,
-  feedbackRegionEpic,
-  feedbackSuccessEpic,
-} from 'services/Feedback';
-import AppMD from './AppMD';
-import App from './App';
-import { AppHandlers, AppProps } from './propsType';
-import { defaultMdSettings } from '../../defaults';
-import { useMediaQuery } from 'react-responsive';
-import AppMobile from './AppMobile';
-
-const defaultSelection = { x1: 0.1, x2: 0.9, y1: 0.1, y2: 0.9 };
-
-const LandingPageApp = () => {
-  const dispatch = useAppDispatch();
-  const searchState = useAppSelector(state => state);
-  const [selection, setSelection] = useState<RectCoords>(defaultSelection);
-  const { settings, search, nyris } = searchState;
-  const { fetchingRegions, fetchingResults, requestImage, selectedRegion } =
-    search;
-  const { showPart } = nyris;
-  const isMobile = useMediaQuery({ query: '(max-width: 776px)' });
-  // update selection, if it is not the default one
-  useEffect(() => {
-    if (selectedRegion) {
-      setSelection(selectedRegion);
-    } else {
-      setSelection(defaultSelection);
-    }
-  }, [selectedRegion]);
-
-  const acceptTypes = ['image/*']
-    .concat(settings.cadSearch ? cadExtensions : [])
-    .join(',');
-
-  function scrollTop() {
-    // TODO might require polyfill for ios and edge
-    window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
-  }
-
-  const onLinkClick = (_position: number, url: string) => {
-    feedbackClickEpic(searchState, _position).catch(console.warn);
-    if (url) {
-      window.open(url);
-    }
-  };
-
-  const startSearch = async (file: File | HTMLCanvasElement | string) => {
-    try {
-      dispatch(loadingActionResults());
-      dispatch(showResults());
-      if (file instanceof File && isCadFile(file)) {
-        let res = await findByCadFile(file, settings);
-        dispatch(setSearchResults(res));
-      } else {
-        let image = await createImage(file);
-        dispatch(setRequestImage(image));
-        let searchRegion: RectCoords | undefined;
-        if (settings.regions) {
-          let { regions: foundRegions, selectedRegion: suggestedRegion } =
-            await findRegions(image, settings);
-          searchRegion = suggestedRegion;
-          dispatch(setRegions(foundRegions));
-          dispatch(setSelectedRegion(searchRegion));
-        }
-        return findByImage({ image, settings, region: searchRegion }).then(
-          res => {
-            dispatch(setSearchResults(res));
-            dispatch(showFeedback());
-          },
-        );
-      }
-    } catch (e) {
-      // TODO show error messages
-      dispatch(
-        setError(
-          'There was an error while performing the request. Please try again later.',
-        ),
-      );
-    }
-  };
-
-  const debouncedSetRectCoords = useCallback(
-    debounce(value => {
-      dispatch(selectionChanged(value));
-      feedbackRegionEpic(searchState, value);
-      dispatch(loadingActionResults());
-      findByImage({ image: requestImage!!.canvas, settings, region: value })
-        .then(res => {
-          dispatch(searchFileImageNonRegion(res));
-          dispatch(showFeedback());
-        })
-        .catch(e => console.warn('catch', e));
-    }, 1200),
-    [requestImage, searchState],
-  );
-
-  const handlers: AppHandlers = {
-    onExampleImageClick: url => {
-      startSearch(url);
-    },
-    onCameraClick: () => dispatch(showCamera),
-    onCaptureCanceled: () => dispatch(showStart),
-    onCaptureComplete: i => startSearch(i),
-    onCloseFeedback: () => dispatch(hideFeedback),
-    onFileDropped: f => startSearch(f),
-    onImageClick: (position, url) => {
-      startSearch(url);
-      feedbackClickEpic(searchState, position);
-    },
-    onLinkClick: onLinkClick,
-    onPositiveFeedback: () => {
-      dispatch(feedbackSubmitPositive());
-      feedbackSuccessEpic(searchState, true);
-    },
-    onNegativeFeedback: () => {
-      dispatch(feedbackNegative());
-      feedbackSuccessEpic(searchState, false);
-    },
-    onSelectFile: f => startSearch(f),
-    onSelectionChange: r => {
-      setSelection(r);
-      debouncedSetRectCoords(r);
-    },
-    onShowStart: () => {
-      dispatch(showStart());
-      scrollTop();
-    },
-  };
-
-  let props: AppProps = {
-    search: {
-      ...search,
-      previewSelection: selection,
-    },
-    settings,
-    previewImage: search?.requestImage,
-    acceptTypes,
-    showPart,
-    handlers,
-    loading: fetchingRegions || fetchingResults,
-    mdSettings: settings.themePage.materialDesign || defaultMdSettings,
-    feedbackState: nyris.feedbackState,
-  };
-
-  return isMobile ? (
-    <AppMobile {...props} />
-  ) : settings.themePage.materialDesign?.active ? (
-    <AppMD {...props} />
-  ) : (
-    <App {...props} />
-  );
-};
-
-export default LandingPageApp;

package/src/modules/LandingPage/propsType.ts

@@ -1,43 +0,0 @@
-import {CategoryPrediction, Code, RectCoords, Region} from "@nyris/nyris-api";
-import {AppSettings, CanvasWithId, MDSettings} from "../../types";
-import {NyrisAppPart, NyrisFeedbackState} from "../../Store/Nyris";
-
-export interface AppHandlers {
-    onExampleImageClick: (url: string) => void;
-    onImageClick: (position: number, url: string) => void;
-    onLinkClick: (position: number, url: string) => void;
-    onFileDropped: (file: File) => void;
-    onCaptureComplete: (image: HTMLCanvasElement) => void;
-    onCaptureCanceled: () => void;
-    onSelectFile: (f: File) => void;
-    onCameraClick: () => void;
-    onShowStart: () => void;
-    onSelectionChange: (r: RectCoords) => void;
-    onPositiveFeedback: () => void;
-    onNegativeFeedback: () => void;
-    onCloseFeedback: () => void;
-}
-
-
-export interface AppProps {
-    search: {
-        results: any[];
-        requestId?: string;
-        duration?: number;
-        categoryPredictions: CategoryPrediction[];
-        codes: Code[];
-        filterOptions: string[];
-        errorMessage?: string;
-        regions: Region[];
-        previewSelection: RectCoords;
-        toastErrorMessage?: string;
-    };
-    acceptTypes: string,
-    previewImage?: CanvasWithId;
-    settings: AppSettings;
-    loading: boolean;
-    showPart: NyrisAppPart;
-    feedbackState: NyrisFeedbackState;
-    handlers: AppHandlers;
-    mdSettings: MDSettings;
-}

package/src/page/Auth/login.tsx

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

package/src/page/Exception/404.tsx

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

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

package/src/page/Profile/index.tsx

@@ -1,140 +0,0 @@
-import React, { useLayoutEffect } from 'react';
-import {
-  Box,
-  Button,
-  FormControlLabel,
-  Grid,
-  Typography,
-} from '@material-ui/core';
-import BgColor from 'common/assets/images/Rectangle.png';
-import { useMediaQuery } from 'react-responsive';
-import { useHistory } from 'react-router-dom';
-
-interface Props {}
-
-function Profile(props: Props) {
-  const isMobile = useMediaQuery({ query: '(max-width: 776px)' });
-  const history = useHistory();
-  useLayoutEffect(() => {
-    history.push({
-      pathname: '/',
-    });
-  }, [history]);
-
-  return (
-    <Box className="wrap-main-profile">
-      <Grid container>
-        <Grid item lg={6} xs={12} sm={12} className="box-col-left">
-          {!isMobile ? (
-            <Box className="box-top">
-              <Typography className="text-f40 fw-600 text-dark">
-                Jose Luis Reyes
-              </Typography>
-              <Typography className="text-f13 text-dark2 fw-600">
-                Nyris GmbH
-              </Typography>
-            </Box>
-          ) : (
-            <Box className="box-top">
-              <Typography className="text-f40 fw-600 text-dark">
-                My Account
-              </Typography>
-            </Box>
-          )}
-
-          <Box className="box-bottom">
-            <Box className="box-content">
-              {!isMobile && (
-                <Typography className="text-f12 text-dark fw-700">
-                  Profile
-                </Typography>
-              )}
-
-              <Box mt={1}>
-                <FormControlLabel
-                  labelPlacement="top"
-                  control={<input />}
-                  label="Name"
-                  className="w-100"
-                  style={{ alignItems: 'flex-start', margin: 0 }}
-                />
-              </Box>
-              <Box mt={1}>
-                <FormControlLabel
-                  labelPlacement="top"
-                  control={<input />}
-                  label="E-mail"
-                  style={{ alignItems: 'flex-start', margin: 0 }}
-                  className="w-100"
-                />
-              </Box>
-              <Box mt={1}>
-                <FormControlLabel
-                  labelPlacement="top"
-                  control={<input />}
-                  label="Password"
-                  style={{ alignItems: 'flex-start', margin: 0 }}
-                  className="w-100"
-                />
-              </Box>
-              {!isMobile && (
-                <>
-                  <Box className="w-100" mt={2}>
-                    <Typography className="text-f12 text-dark fw-700">
-                      Account
-                    </Typography>
-                  </Box>
-                  <Box mt={1}>
-                    <FormControlLabel
-                      labelPlacement="top"
-                      control={<input />}
-                      label="Company"
-                      style={{ alignItems: 'flex-start', margin: 0 }}
-                      className="w-100"
-                    />
-                  </Box>
-                  <Box mt={1}>
-                    <FormControlLabel
-                      labelPlacement="top"
-                      control={<input />}
-                      label="Role"
-                      style={{ alignItems: 'flex-start', margin: 0 }}
-                      className="w-100"
-                    />
-                  </Box>
-                </>
-              )}
-
-              <Box mt={2}>
-                {isMobile && (
-                  <Box style={{ marginBottom: 10 }}>
-                    <a
-                      href="/#"
-                      style={{
-                        fontSize: 12,
-                        fontWeight: 500,
-                        color: '#3E36DC',
-                      }}
-                    >
-                      Reset password
-                    </a>
-                  </Box>
-                )}
-                <Button className="btn-log-out">Log out</Button>
-              </Box>
-            </Box>
-          </Box>
-        </Grid>
-        {!isMobile && (
-          <Grid item xs={6} className="box-col-right">
-            <Box className="box-bg-image">
-              <img src={BgColor} alt="" />
-            </Box>
-          </Grid>
-        )}
-      </Grid>
-    </Box>
-  );
-}
-
-export default Profile;

package/src/page/ResultMobile/index.tsx

@@ -1,12 +0,0 @@
-import { Box } from "@material-ui/core";
-import React from "react";
-
-interface Props {}
-
-function ResultComponentMobile(props: Props) {
-  const {} = props;
-
-  return <Box>day la component result mobile</Box>;
-}
-
-export default ResultComponentMobile;

package/src/page/Saved/MockData.ts

@@ -1,223 +0,0 @@
-export const dataItem = [
-  {
-    av: {
-      t: "INVALID",
-    },
-    id: "9c5c2eeb72895300bdd3b4ff8e6b67c4",
-    mid: "3ab221c77f2058efb4dc4f9a4255f270",
-    mer: "demo.nyris.io",
-    title: "HOYA",
-    desc: "Pflanze",
-    var: [],
-    img: {
-      id: "46ffb718a24bf47125c09db0bb0643074a119f2eb14939863665414afd306c3e",
-      ifid: "",
-      url: "https://img.nyris.io/46f/46ffb718a24bf47125c09db0bb0643074a119f2eb14939863665414afd306c3e.jpg",
-      h: false,
-    },
-    cc: ["Dekoration", "Blumentöpfe, Pflanzen & Blumenständer", "Pflanzen"],
-    sku: "60392745",
-    position: 0,
-  },
-  {
-    av: {
-      t: "INVALID",
-    },
-    id: "65f857e9779856e18cd67a809fd9e23c",
-    mid: "3ab221c77f2058efb4dc4f9a4255f270",
-    mer: "demo.nyris.io",
-    title: "FEJKA",
-    desc: "Kunstpflanze",
-    var: [],
-    img: {
-      id: "25f72fedd3cc0ef399bf88086157df643638e5b6e755a08b20c61221b1186c49",
-      ifid: "",
-      url: "https://img.nyris.io/25f/25f72fedd3cc0ef399bf88086157df643638e5b6e755a08b20c61221b1186c49.jpg",
-      h: false,
-    },
-    cc: [
-      "Dekoration",
-      "Blumentöpfe, Pflanzen & Blumenständer",
-      "Kunstpflanzen & -blumen",
-    ],
-    sku: "20349532",
-    position: 1,
-  },
-  {
-    av: {
-      t: "INVALID",
-    },
-    id: "c66fd178c8125ae198089caff89245a9",
-    mid: "3ab221c77f2058efb4dc4f9a4255f270",
-    mer: "demo.nyris.io",
-    title: "BEGÄRLIG",
-    desc: "Vase",
-    var: [],
-    img: {
-      id: "3b99e5300504273d8b363a501344c7d06b7fb5a29b5e0a50caf1d3d036a015b7",
-      ifid: "",
-      url: "https://img.nyris.io/3b9/3b99e5300504273d8b363a501344c7d06b7fb5a29b5e0a50caf1d3d036a015b7.jpg",
-      h: false,
-    },
-    cc: ["Dekoration", "Vasen & Schalen", "Vasen"],
-    sku: "30309781",
-    position: 2,
-  },
-  {
-    av: {
-      t: "INVALID",
-    },
-    id: "9ffd0e329cc15d5489a6f2e2fc3f7497",
-    mid: "3ab221c77f2058efb4dc4f9a4255f270",
-    mer: "demo.nyris.io",
-    title: "INDUSTRIELL",
-    desc: "Teller",
-    var: [],
-    img: {
-      id: "60bd1dfa0229b9a9065ee6d74b969718c75a55383e830a627fb0f9decf407925",
-      ifid: "",
-      url: "https://img.nyris.io/60b/60bd1dfa0229b9a9065ee6d74b969718c75a55383e830a627fb0f9decf407925.jpg",
-      h: false,
-    },
-    cc: ["Essen", "Essgeschirr", "Teller"],
-    sku: "90387078",
-    position: 3,
-  },
-  {
-    av: {
-      t: "INVALID",
-    },
-    id: "939e4f8f643156cf81c14804174a9efd",
-    mid: "3ab221c77f2058efb4dc4f9a4255f270",
-    mer: "demo.nyris.io",
-    title: "CITRUS",
-    desc: "Topfpflanze",
-    var: [],
-    img: {
-      id: "a3bcf8cb031effb87e3d412a51cc218860a064543a39e4cd6b368ccda4e44b5f",
-      ifid: "",
-      url: "https://img.nyris.io/a3b/a3bcf8cb031effb87e3d412a51cc218860a064543a39e4cd6b368ccda4e44b5f.jpg",
-      h: false,
-    },
-    cc: ["Dekoration", "Blumentöpfe, Pflanzen & Blumenständer", "Pflanzen"],
-    sku: "60392665",
-    position: 4,
-  },
-  {
-    p: {
-      c: "EUR",
-      vi: 3199,
-      ve: 3198,
-      t: 0,
-    },
-    av: {
-      t: "INVALID",
-    },
-    l: "https://www.impressionen.de/de/Weihnachten/Weihnachtsbeleuchtung/LED-Kranz-mit-Tannenzapfen-und-Blumen/produkt/246278?fromSearch=Suche&ctp=cG9zPTIxODEmc2ltaT05Ni4w",
-    id: "116e947ef4685a8e941f0b7b6d06753c",
-    mid: "3ab221c77f2058efb4dc4f9a4255f270",
-    mer: "demo.nyris.io",
-    title: "LED-Kranz mit Tannenzapfen und Blumen",
-    desc: "",
-    var: [],
-    img: {
-      id: "a6b41a30d15214450fb33cc39f29519a0dec354b266901c199d4467bb605d1c0",
-      ifid: "",
-      url: "https://img.nyris.io/a6b/a6b41a30d15214450fb33cc39f29519a0dec354b266901c199d4467bb605d1c0.jpg",
-      h: false,
-    },
-    cc: ["Weihnachten", "Weihnachtsbeleuchtung"],
-    sku: "246278",
-    position: 5,
-  },
-  {
-    av: {
-      t: "INVALID",
-    },
-    id: "19543b4d71e5591892cb36f0cc45918f",
-    mid: "3ab221c77f2058efb4dc4f9a4255f270",
-    mer: "demo.nyris.io",
-    title: "SMYCKA",
-    desc: "Kunstblatt",
-    var: [],
-    img: {
-      id: "af4a0c55b0d9a7a8ac96ca85f8302ee7f97f01a133f51dc5126ede9a5969b86e",
-      ifid: "",
-      url: "https://img.nyris.io/af4/af4a0c55b0d9a7a8ac96ca85f8302ee7f97f01a133f51dc5126ede9a5969b86e.jpg",
-      h: false,
-    },
-    cc: [
-      "Dekoration",
-      "Blumentöpfe, Pflanzen & Blumenständer",
-      "Kunstpflanzen & -blumen",
-    ],
-    sku: "80335773",
-    position: 6,
-  },
-  {
-    av: {
-      t: "INVALID",
-    },
-    id: "8342509d872959efa36170e1ed933243",
-    mid: "3ab221c77f2058efb4dc4f9a4255f270",
-    mer: "demo.nyris.io",
-    title: "STILREN",
-    desc: "Vase",
-    var: [],
-    img: {
-      id: "f1df581ba7e1ac05058a450ff1d222c8c1443e8582b515e447546e48e8ea5f6f",
-      ifid: "",
-      url: "https://img.nyris.io/f1d/f1df581ba7e1ac05058a450ff1d222c8c1443e8582b515e447546e48e8ea5f6f.jpg",
-      h: false,
-    },
-    cc: ["Dekoration", "Vasen & Schalen", "Vasen"],
-    sku: "10442045",
-    position: 7,
-  },
-  {
-    av: {
-      t: "INVALID",
-    },
-    id: "cbf502eb20d454e086e21ffe0d6dd474",
-    mid: "3ab221c77f2058efb4dc4f9a4255f270",
-    mer: "demo.nyris.io",
-    title: "STILREN",
-    desc: "Vase",
-    var: [],
-    img: {
-      id: "40b1a22c8610bfcd52e3acb59b39ee7a8c9a547db288344b0a9978d7f7353798",
-      ifid: "",
-      url: "https://img.nyris.io/40b/40b1a22c8610bfcd52e3acb59b39ee7a8c9a547db288344b0a9978d7f7353798.jpg",
-      h: false,
-    },
-    cc: ["Dekoration", "Vasen & Schalen", "Vasen"],
-    sku: "60442043",
-    position: 8,
-  },
-  {
-    p: {
-      c: "EUR",
-      vi: 795,
-      ve: 794,
-      t: 0,
-    },
-    av: {
-      t: "INVALID",
-    },
-    l: "https://www.dm.de/183-days-by-trend-it-up-lidschatten-cream-square-eyeshadow-palette-020-p4058172080852.html",
-    id: "cb6039515188564eac24d7b4c1c19e79",
-    mid: "3ab221c77f2058efb4dc4f9a4255f270",
-    mer: "demo.nyris.io",
-    title: "Lidschatten Cream Square Eyeshadow Palette 020, 8,1 g",
-    desc: "",
-    var: [],
-    img: {
-      id: "80abb67003ea310765db1dcadb3f7a65769ba0e5f2555397964b054e6a6d6a82",
-      ifid: "",
-      url: "https://img.nyris.io/80a/80abb67003ea310765db1dcadb3f7a65769ba0e5f2555397964b054e6a6d6a82.jpg",
-      h: false,
-    },
-    sku: "4058172080852",
-    position: 9,
-  },
-];