@nyris/nyris-webapp 0.3.2 → 0.3.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nyris/nyris-webapp",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "homepage": "./",
   "dependencies": {
     "@babel/runtime": "^7.17.2",
@@ -8,8 +8,8 @@
     "@material-ui/data-grid": "^4.0.0-alpha.37",
     "@material-ui/icons": "^4.4.1",
     "@material-ui/lab": "^4.0.0-alpha.60",
-    "@nyris/nyris-api": "^0.3.2",
-    "@nyris/nyris-react-components": "^0.3.2",
+    "@nyris/nyris-api": "^0.3.3",
+    "@nyris/nyris-react-components": "^0.3.3",
     "@reduxjs/toolkit": "^1.6.1",
     "@types/blueimp-load-image": "^2.23.4",
     "@types/classnames": "^2.2.9",

package/public/js/test.js

@@ -12,15 +12,14 @@ var settings = {
   resultTemplate: "default",
   responseFormat: "application/offers.complete+json",
   exampleImages: [
-    "https://img.nyris.io/demo/everybag/kissen.jpg",
-    "https://img.nyris.io/demo/everybag/aspirin.jpg",
-    "https://img.nyris.io/demo/everybag/lego.jpg",
-    "https://img.nyris.io/demo/everybag/wdr_add_2.jpg",
-    "https://img.nyris.io/demo/everybag/mb-dle-4.jpg",
+    "https://storage.googleapis.com/nyris/share/examples_search/example_1.jpg",
+    "https://storage.googleapis.com/nyris/share/examples_search/example_2.jpg",
+    "https://storage.googleapis.com/nyris/share/examples_search/example_3.jpg",
+    "https://storage.googleapis.com/nyris/share/examples_search/example_4.jpg",
   ],
   deactivated: false,
   cadSearch: false,
-  theme: {
+  themePage: {
     default: {
       active: false,
     },
@@ -40,23 +39,18 @@ var settings = {
         resultLinkIcon: "eye",
       },
     },
-    searchSuite: {
+    newVersion: {
       active: true,
     },
   },
-
-  algolia: {
-    appIdAlgolia: "HBDJYUK5G4",
-    indexNameAlgolia: "Normparts",
-    apiKeyAlgolia: "f6a833ff662086f362b93064b9de6f02",
-  },
-  apiNyris: {
-    imageMatchingUrl: "https://api.nyris.io/find/v1",
-    imageMatchingUrlBySku: "https://api.nyris.io/recommend/v1",
-    imageMatchingSubmitManualUrl: "https://api.nyris.io/find/v1/manual",
-    regionProposalUrl: "https://api.nyris.io/find/v1/regions",
-    feedbackUrl: "https://api.nyris.io/feedback/v1",
-  }
+  imageMatchingUrl: "https://api.nyris.io/find/v1",
+  imageMatchingUrlBySku: "https://api.nyris.io/recommend/v1",
+  imageMatchingSubmitManualUrl: "https://api.nyris.io/find/v1/manual",
+  regionProposalUrl: "https://api.nyris.io/find/v1/regions",
+  feedbackUrl: "https://api.nyris.io/feedback/v1",
+  appIdAlgolia: "HBDJYUK5G4",
+  indexNameAlgolia: "Normparts",
+  apiKeyAlgolia: "f6a833ff662086f362b93064b9de6f02",
 };
 settings["customSearchRequest"] = null;
 settings["responseHook"] = null;

package/src/App.tsx

@@ -11,10 +11,10 @@ import {AppState} from "./types";
 
 function App(): JSX.Element {
   const { settings } = useAppSelector<AppState>((state: any) => state);
-  const { themePage } = settings;
+  const { themePage }: any = settings;
   let SelectedApp = 
     themePage.default?.active ? LandingPageApp : (
-      themePage.materialDesign?.active ? LandingPageAppMD : AppNewVersion);
+      themePage.mdWhiteLabel?.active ? LandingPageAppMD : AppNewVersion);
 
   return <SelectedApp />;
 }

package/src/components/CustomHits/index.tsx

@@ -0,0 +1,57 @@
+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/ExampleImages.tsx

@@ -15,10 +15,10 @@ const ExampleImages: React.FC<ExampleImagesProps> = ({
   }
   return (
     <section className="useExampleImg">
-      <Typography className="title-box">
+      <Typography className="title-box text-center">
         You can also try one of these pictures:
       </Typography>
-      <div className="exampleImages">
+      <div className="exampleImages d-flex justify-center">
         <div className="exImagesWrap">
           {images.map((i) => {
             return (

package/src/modules/LandingPage/indexApp.tsx

@@ -22,7 +22,6 @@ import { AppSettings, MDSettings, CanvasWithId } from "types";
 import {
   makeFileHandler,
   Capture,
-  Preview,
 } from "@nyris/nyris-react-components";
 import { Snackbar } from "@material-ui/core";
 import MuiAlert, { AlertProps } from "@material-ui/lab/Alert";
@@ -35,7 +34,6 @@ import {
   loadingActionRegions,
   loadingActionResults,
   searchFileImageNonRegion,
-  selectionChanged,
 } from "Store/Search";
 import {
   NyrisAppPart,
@@ -49,6 +47,7 @@ import { serviceImage, serviceImageNonRegion } from "services/image";
 import { findByImage } from "services/findByImage";
 import { debounce, isEmpty } from "lodash";
 import { feedbackClickEpic } from "services/Feedback";
+import Preview from "components/preview/preview";
 export interface AppHandlers {
   onExampleImageClick: (url: string) => void;
   onImageClick: (position: number, url: string) => void;
@@ -123,9 +122,9 @@ const LandingPageApp = () => {
       // return dispatch(loadFile(fs[0]));
     },
   });
-  const minPreviewHeight = 400;
-  const halfOfTheScreenHeight = Math.floor(window.innerHeight * 0.45);
-  const maxPreviewHeight = Math.max(minPreviewHeight, halfOfTheScreenHeight);
+  // const minPreviewHeight = 400;
+  // const halfOfTheScreenHeight = Math.floor(window.innerHeight * 0.45);
+  // const maxPreviewHeight = Math.max(minPreviewHeight, halfOfTheScreenHeight);
 
   useEffect(() => {
     if (isEmpty(rectCoords)) {
@@ -161,7 +160,7 @@ const LandingPageApp = () => {
       window.open(url);
     }
   };
-
+  // TODO: search image file home page
   const isCheckImageFile = (file: any) => {
     dispatch(showResults(""));
     dispatch(loadingActionResults(""));
@@ -175,6 +174,7 @@ const LandingPageApp = () => {
       return dispatch(loadCadFileLoad(file));
     }
   };
+  //
 
   const getUrlToCanvasFile = (url: string, position?: number) => {
     dispatch(showResults(""));
@@ -217,7 +217,6 @@ const LandingPageApp = () => {
     });
   };
 
-
   return (
     <div>
       {showPart === "camera" && (
@@ -360,9 +359,10 @@ const LandingPageApp = () => {
             </div>
           )}
         </Animate>
+        {/* // TODO:Box Preview image. */}
         {settings.preview && requestImage && (
           <div className="preview">
-            <Preview
+            {/* <Preview
               key={requestImage?.id}
               maxWidth={document.body.clientWidth}
               maxHeight={maxPreviewHeight}
@@ -374,6 +374,25 @@ const LandingPageApp = () => {
               regions={regions}
               selection={selectedRegion}
               image={requestImage.canvas}
+            /> */}
+            <Preview
+              key={requestImage?.id}
+              onSelectionChange={(r: RectCoords) => {
+                debounceRectCoords(r);
+                return;
+              }}
+              image={requestImage?.canvas}
+              initialRegion={
+                !selectedRegion
+                  ? regions[0]
+                    ? regions[0]
+                    : { x1: 0, x2: 1, y1: 0, y2: 1 }
+                  : selectedRegion
+              }
+              regions={regions}
+              maxWidth={400}
+              maxHeight={500}
+              dotColor="#FBD914"
             />
           </div>
         )}
@@ -384,7 +403,6 @@ const LandingPageApp = () => {
           <Codes codes={codes} />
         </div>
         <CategoryFilter cats={filterOptions} />
-
         <div className="wrapper">
           <NodeGroup
             data={results}

package/src/modules/LandingPage/indexAppMD.tsx

@@ -19,7 +19,7 @@ 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 { Capture } from "@nyris/nyris-react-components";
 import { useAppDispatch, useAppSelector } from "Store/Store";
 import {
   RectCoords,
@@ -36,7 +36,7 @@ import {
   loadingActionRegions,
   loadingActionResults,
   searchFileImageNonRegion,
-  selectionChanged,
+  // selectionChanged,
 } from "Store/Search";
 import { showCamera, showFeedback, showResults, showStart } from "Store/Nyris";
 import _, { debounce, isEmpty } from "lodash";
@@ -44,6 +44,7 @@ import { serviceImage, serviceImageNonRegion } from "services/image";
 import { findByImage } from "services/findByImage";
 import { feedbackRegionEpic } from "services/Feedback";
 import { MDSettings } from "../../types";
+import Preview from "components/preview/preview";
 
 const useStyles = makeStyles((theme) => ({
   icon: {
@@ -155,9 +156,9 @@ const LandingPageAppMD: React.FC<any> = () => {
     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 minPreviewHeight = 400;
+  // const halfOfTheScreenHeight = Math.floor(window.innerHeight * 0.45);
+  // const maxPreviewHeight = Math.max(minPreviewHeight, halfOfTheScreenHeight);
   const acceptTypes = ["image/*"]
     .concat(settings.cadSearch ? cadExtensions : [])
     .join(",");
@@ -358,17 +359,23 @@ const LandingPageAppMD: React.FC<any> = () => {
           {requestImage && (
             <Card style={{ marginBottom: "4em" }} raised={true}>
               <Preview
-                key={requestImage.id}
-                maxWidth={document.body.clientWidth}
-                maxHeight={maxPreviewHeight}
-                dotColor={mdSettings.primaryColor}
+                key={requestImage?.id}
                 onSelectionChange={(r: RectCoords) => {
-                  dispatch(selectionChanged(r));
-                  return debounceRectCoords(r);
+                  debounceRectCoords(r);
+                  return;
                 }}
+                image={requestImage?.canvas}
+                initialRegion={
+                  !selectedRegion
+                    ? regions[0]
+                      ? regions[0]
+                      : { x1: 0, x2: 1, y1: 0, y2: 1 }
+                    : selectedRegion
+                }
                 regions={regions}
-                selection={selectedRegion}
-                image={requestImage.canvas}
+                maxWidth={400}
+                maxHeight={500}
+                dotColor="#FBD914"
               />
             </Card>
           )}