@nyris/nyris-webapp 0.3.23 → 0.3.24

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/indexNewVersion.tsx

@@ -1,72 +0,0 @@
-import { Box } from '@material-ui/core';
-import React, { useState } from 'react';
-import './common.scss';
-import { cadExtensions } from '@nyris/nyris-api';
-import algoliasearch from 'algoliasearch/lite';
-import IconSupport from 'common/assets/icons/support3.svg';
-import DragDropFile from 'components/DragDropFile';
-import CustomSearchBox from 'components/input/inputSearch';
-import { connectInfiniteHits } from 'react-instantsearch-dom';
-import { useMediaQuery } from 'react-responsive';
-import { Link } from 'react-router-dom';
-import { useAppSelector } from 'Store/Store';
-import { AlgoliaSettings } from '../../types';
-
-interface Props {}
-
-function AppNewVersion(props: Props) {
-  const { settings } = useAppSelector(state => state);
-  const [isLoading, setLoading] = useState<boolean>(false);
-  const { apiKey, appId, indexName } = settings.algolia as AlgoliaSettings;
-  const searchClient = algoliasearch(appId, apiKey);
-  searchClient.initIndex(indexName);
-  const isMobile = useMediaQuery({ query: '(max-width: 776px)' });
-
-  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);
-
-  return (
-    <Box className={`box-content-main ${isLoading ? 'loading' : ''}`}>
-      {isMobile && (
-        <Box className="btn-open-support">
-          <Link to={'/support'} style={{ color: '#3E36DC' }}>
-            <img src={IconSupport} alt="" width={16} height={16} />
-          </Link>
-        </Box>
-      )}
-      <Box className="box-content_top">
-        <Box className="fw-700 text-f32 text-dark2">
-          <h1>{settings.headerText}</h1>
-        </Box>
-        <div className="box-input">
-          <div className="wrap-input-search">
-            <div style={{ display: 'none' }}>
-              <CustomInfiniteHits />
-            </div>
-            <CustomSearchBox />
-          </div>
-        </div>
-      </Box>
-      <Box className="box-content_bottom">
-        <DragDropFile
-          acceptTypes={acceptTypes}
-          isLoading={isLoading}
-          onChangeLoading={onChangeLoading}
-        />
-      </Box>
-    </Box>
-  );
-}
-
-export default AppNewVersion;

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;