@nyris/nyris-webapp 0.3.5 → 0.3.12

package/src/modules/LandingPage/index.tsx

@@ -1,169 +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";
-
-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;
-
-    // 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, searchState.settings, 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);
-            findByImage(requestImage!!.canvas, settings, 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 settings.themePage.materialDesign?.active? <AppMD {...props}/> : <App {...props}/>;
-
-};
-
-export default LandingPageApp;

package/src/modules/LandingPage/indexNewVersion.tsx

@@ -1,110 +0,0 @@
-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 {createSessionByApi} from "../../services/session";
-import {AlgoliaSettings} from "../../types";
-
-interface Props {}
-
-function AppNewVersion(props: Props) {
-  const dispatch = useAppDispatch();
-  const history = useHistory();
-  const { settings, search } = useAppSelector((state) => state);
-  const [searchStateInput, setSearchStateInput] = useState<any>({});
-  const [isLoading, setLoading] = useState<boolean>(false);
-  const { apiKey, appId, indexName } = settings.algolia as AlgoliaSettings;
-  const searchClient = algoliasearch(appId, apiKey);
-  searchClient.initIndex(indexName);
-
-  useEffect(() => {
-    const createSession = async () => {
-      let payload = await createSessionByApi(settings);
-      dispatch(setUpdateSession(payload));
-    };
-
-    createSession().catch(console.log);
-    // 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>"];
-  // Build filter using reverse position for stable item order
-  const filterSkus: any = search?.results
-    ? search?.results.slice().reverse().map(
-        (f: any, i: number) => `sku:'${f.sku}'<score=${i}>`
-      )
-    : "";
-  const filtersString = [...nonEmptyFilter, ...filterSkus].join(" OR ");
-
-  return (
-    <Box className={`box-content-main ${isLoading ? "loading" : ""}`}>
-      <InstantSearch
-        indexName={indexName}
-        searchClient={searchClient}
-        searchState={searchStateInput}
-        onSearchStateChange={(state) => {
-          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/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,87 +0,0 @@
-import React from "react";
-import { Box, Button, FormControlLabel, Grid, Typography } from "@material-ui/core";
-import BgColor from "common/assets/images/Rectangle.png";
-
-interface Props {}
-
-function Profile(props: Props) {
-  return (
-    <Box className="wrap-main-profile">
-      <Grid container>
-        <Grid item xs={6} className="box-col-left">
-          <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-bottom">
-            <Box className="box-content">
-              <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>
-              <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}>
-              <Button className="btn-log-out">Log out</Button>
-              </Box>
-            </Box>
-          </Box>
-        </Grid>
-        <Grid item xs={6} className="box-col-right">
-          <Box className="box-bg-image">
-            <img src={BgColor} alt="" />
-          </Box>
-        </Grid>
-      </Grid>
-    </Box>
-  );
-}
-
-export default Profile;