@nyris/nyris-webapp 0.3.58 → 0.3.59

package/src/components/Experience-visual-search/ExperienceVisualSearch.tsx

@@ -1,4 +1,4 @@
-import React, { useState, memo, useEffect, useRef } from 'react';
+import { useState, memo, useEffect, useRef } from 'react';
 import { createPortal } from 'react-dom';
 import CloseOutlinedIcon from '@material-ui/icons/CloseOutlined';
 import './ExperienceVisualSearch.scss';
@@ -7,28 +7,21 @@ import { useAppDispatch, useAppSelector } from '../../Store/Store';
 import { ReactComponent as IconSearchImage } from 'common/assets/icons/icon_search_image2.svg';
 import {
   loadingActionResults,
-  setImageSearchInput,
-  setRegions,
-  setRequestImage,
-  setSearchResults,
-  setSelectedRegion,
   updateStatusLoading,
-  setFirstSearchResults,
-  setFirstSearchImage,
-  setFirstSearchPrefilters,
-  setFirstSearchThumbSearchInput
 } from '../../Store/search/Search';
-import { createImage, find, findRegions } from '../../services/image';
-import { RectCoords } from '@nyris/nyris-api';
-import { isEmpty } from 'lodash';
+import { useImageSearch } from 'hooks/useImageSearch';
+import { useHistory } from 'react-router-dom';
 
 function ExperienceVisualSearch() {
   const dispatch = useAppDispatch();
-  const { search, settings } = useAppSelector(state => state);
+  const { settings } = useAppSelector(state => state);
   const [showModal, setShowModal] = useState(false);
-  const [images, setImages] = useState<string[]>([])
+  const [images, setImages] = useState<string[]>([]);
   const button = useRef(null);
   let interval = useRef<NodeJS.Timeout | null>(null);
+  const history = useHistory();
+
+  const { singleImageSearch } = useImageSearch();
 
   useEffect(() => {
     if (document.body.getBoundingClientRect().width >= 776) {
@@ -40,7 +33,10 @@ function ExperienceVisualSearch() {
         }, 3000);
       } else if (interval?.current) {
         clearInterval(interval?.current);
-        if (button?.current && !(button.current as HTMLElement).classList.contains('hover')) {
+        if (
+          button?.current &&
+          !(button.current as HTMLElement).classList.contains('hover')
+        ) {
           (button.current as HTMLElement).classList.toggle('hover');
         }
       }
@@ -48,15 +44,17 @@ function ExperienceVisualSearch() {
         if (interval?.current) {
           clearInterval(interval?.current);
         }
-      }
+      };
     }
   }, [showModal]);
 
   const modalToggle = (isOpen: boolean) => {
     setShowModal(isOpen);
     if (isOpen) {
-      const randomImages = settings?.experienceVisualSearchImages
-        ?.slice(0, Math.min(settings?.experienceVisualSearchImages?.length, 4));
+      const randomImages = settings?.experienceVisualSearchImages?.slice(
+        0,
+        Math.min(settings?.experienceVisualSearchImages?.length, 4),
+      );
       setImages(randomImages || []);
       document.body.classList.add('overflow-hidden');
     } else {
@@ -67,41 +65,13 @@ function ExperienceVisualSearch() {
   const getUrlToCanvasFile = async (url: string) => {
     dispatch(updateStatusLoading(true));
     dispatch(loadingActionResults());
-    dispatch(setImageSearchInput(url));
-    let image = await createImage(url);
-    dispatch(setRequestImage(image));
-
-    let searchRegion: RectCoords | undefined = undefined;
 
-    if (settings.regions) {
-      let res = await findRegions(image, settings);
-      searchRegion = res.selectedRegion;
-      dispatch(setRegions(res.regions));
-      dispatch(setSelectedRegion(searchRegion));
-    }
-    const preFilterValues = [
-      {
-        key: settings.visualSearchFilterKey,
-        values: Object.keys(search.preFilter) as string[],
-      },
-    ];
-    find({
-      image,
-      settings,
-      region: searchRegion,
-      filters: !isEmpty(search.preFilter) ? preFilterValues : undefined,
-    }).then((res: any) => {
-      dispatch(setSearchResults(res));
+    singleImageSearch({ image: url, settings }).then(() => {
       dispatch(updateStatusLoading(false));
-      // go back
-      dispatch(setFirstSearchResults(res));
-      dispatch(setFirstSearchImage(image));
-      dispatch(setFirstSearchPrefilters(search.preFilter));
-      dispatch(setFirstSearchThumbSearchInput(url));
-      return;
     });
+    history.push('/result');
   };
-  
+
   return (
     <>
       <div
@@ -116,56 +86,62 @@ function ExperienceVisualSearch() {
         createPortal(
           <div
             className="custom-modal"
-            onClick={(e) => {
+            onClick={e => {
               e.stopPropagation();
               modalToggle(false);
             }}
           >
             <div
               className="custom-modal-body"
-              onClick={(e) => {
+              onClick={e => {
                 e.stopPropagation();
               }}
             >
               <CloseOutlinedIcon
                 style={{ fontSize: 24, color: '#55566B' }}
                 className="close-icon"
-                onClick={(e) => {
+                onClick={e => {
                   e.stopPropagation();
                   modalToggle(false);
                 }}
               />
-              <div className="custom-modal-body-title">Experience Visual Search</div>
+              <div className="custom-modal-body-title">
+                Experience Visual Search
+              </div>
               <div className="custom-modal-body-subtitle">
                 Start your visual search by selecting an image below.
               </div>
               <div className="custom-modal-body-content experience-visual-search-images">
-                {images.map((itemImage) => (
+                {images.map(itemImage => (
+                  <div
+                    className="experience-visual-search-image-container"
+                    onClick={() => {
+                      modalToggle(false);
+                      getUrlToCanvasFile(itemImage);
+                    }}
+                  >
                     <div
-                      className="experience-visual-search-image-container"
-                      onClick={() => {
-                        modalToggle(false);
-                        getUrlToCanvasFile(itemImage);
+                      className="experience-visual-search-image"
+                      style={{
+                        backgroundImage: `url(${itemImage}?width=192&height=192)`,
                       }}
-                    >
-                      <div
-                        className="experience-visual-search-image"
-                        style={{ backgroundImage: `url(${itemImage}?width=192&height=192)` }}
+                    />
+                    <div className="box-icon-modal">
+                      <IconSearchImage
+                        width={16}
+                        height={16}
+                        color={'#AAABB5'}
                       />
-                      <div
-                        className="box-icon-modal"
-                      >
-                        <IconSearchImage width={16} height={16} color={'#AAABB5'} />
-                      </div>
                     </div>
+                  </div>
                 ))}
               </div>
             </div>
           </div>,
-          document.body
+          document.body,
         )}
     </>
-  )
+  );
 }
 
-export default memo(ExperienceVisualSearch);
+export default memo(ExperienceVisualSearch);

package/src/components/Feedback.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { ReactComponent as IconLike } from 'common/assets/icons/icon_like.svg';
 import { ReactComponent as IconDislike } from 'common/assets/icons/icon_dislike.svg';
 import { ReactComponent as IconClose } from 'common/assets/icons/close.svg';
@@ -10,23 +10,37 @@ function Feedback({
   submitFeedback: any;
   onFeedbackClose: any;
 }) {
-  return (
-    <div className="feedback-wrapper">
-      <p>Are these results useful?</p>
+  const [isHovered, setIsHovered] = useState(false);
 
+  return (
+    <div
+      className={`feedback-wrapper`}
+      style={{
+        backgroundColor: isHovered ? '#D3D1FF' : '#e4e3ffed',
+        transition: 'background-color 0.3s ease',
+      }}
+    >
+      <p className="desktop:w-[146px]">Are these results useful?</p>
       <div
         className="feedback-icon-wrapper"
+        onClick={() => submitFeedback(false)}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+      >
+        <IconDislike />
+      </div>
+      <div
+        className="feedback-icon-wrapper scroll-n"
         onClick={() => submitFeedback(true)}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
       >
         <IconLike />
       </div>
       <div
-        className="feedback-icon-wrapper"
-        onClick={() => submitFeedback(false)}
+        className="feedback-icon-wrapper-close"
+        onClick={() => onFeedbackClose()}
       >
-        <IconDislike />
-      </div>
-      <div className="feedback-icon-wrapper" onClick={() => onFeedbackClose()}>
         <IconClose />
       </div>
     </div>

package/src/components/GoBackButton.tsx

@@ -1,54 +1,51 @@
-import React, {useCallback} from 'react';
+import React, { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useMediaQuery } from 'react-responsive';
 import { CurrentRefinementsProvided } from 'react-instantsearch-core';
 import {
-  setImageSearchInput,
   setPreFilter,
   setRequestImage,
   setSearchResults,
-  clearPostFilter
+  clearPostFilter,
 } from '../Store/search/Search';
 import { connectCurrentRefinements } from 'react-instantsearch-dom';
 import { ReactComponent as GoBackIcon } from 'common/assets/icons/path.svg';
 import { useAppDispatch, useAppSelector } from '../Store/Store';
+import useRequestStore from 'Store/requestStore';
 
 const GoBackButton = ({ items, refine }: CurrentRefinementsProvided) => {
   const isMobile = useMediaQuery({ query: '(max-width: 776px)' });
   const dispatch = useAppDispatch();
   const stateGlobal = useAppSelector(state => state);
   const { search } = stateGlobal;
-  const {
-    firstSearchResults,
-    firstSearchImage,
-    firstSearchPrefilters,
-    firstSearchThumbSearchInput,
-  } = search;
+  const { firstSearchResults, firstSearchImage, firstSearchPrefilters } =
+    search;
   const clearPostFilters = useCallback(() => refine(items), [refine, items]);
   const { t } = useTranslation();
 
+  const { setRequestImages, resetRegions } = useRequestStore(state => ({
+    setRequestImages: state.setRequestImages,
+    resetRegions: state.resetRegions,
+  }));
   const onGoBack = () => {
     dispatch(setSearchResults(firstSearchResults));
     dispatch(setRequestImage(firstSearchImage));
+    setRequestImages([firstSearchImage]);
     dispatch(setPreFilter(firstSearchPrefilters));
     dispatch(clearPostFilter());
+    resetRegions();
     clearPostFilters();
-    if (!isMobile) {
-      dispatch(setImageSearchInput(firstSearchThumbSearchInput));
-    }
-  }
+  };
 
   return (
     <div
       className={`go-back-button ${isMobile ? 'mobile-view' : ''}`}
       onClick={() => onGoBack()}
     >
-      <GoBackIcon width={16} height={16}  />
+      <GoBackIcon width={16} height={16} />
       {t('Back to request image')}
     </div>
-  )
+  );
 };
 
-export const GoBack = connectCurrentRefinements<any>(
-  GoBackButton,
-);
+export const GoBack = connectCurrentRefinements<any>(GoBackButton);