@nyris/nyris-webapp 0.3.5 → 0.3.6

package/src/page/result/index.tsx

@@ -1,418 +0,0 @@
-import {
-  Box,
-  Button,
-  IconButton,
-  InputBase,
-  Paper,
-  Typography,
-} from "@material-ui/core";
-import React, { useEffect, useState } from "react";
-import IconWhatsApp from "common/assets/icons/Icon_whatsapp.png";
-import IconEmail from "common/assets/icons/icon_email.png";
-import IconWeChat from "common/assets/icons/Icon_wechat.png";
-import ItemResult from "components/results/ItemResult";
-import { useAppDispatch, useAppSelector } from "Store/Store";
-import { debounce } from "lodash";
-import KeyboardArrowRightOutlinedIcon from "@material-ui/icons/KeyboardArrowRightOutlined";
-import KeyboardArrowLeftOutlinedIcon from "@material-ui/icons/KeyboardArrowLeftOutlined";
-import FooterResult from "components/FooterResult";
-import DefaultModal from "components/modal/DefaultModal";
-import CloseOutlinedIcon from "@material-ui/icons/CloseOutlined";
-import DetailItem from "components/DetailItem";
-import FileCopyOutlinedIcon from "@material-ui/icons/FileCopyOutlined";
-import { RectCoords } from "@nyris/nyris-api";
-import {
-  setSearchResults,
-  loadingActionResults,
-  selectionChanged,
-  updateResultChangePosition, setRegions, setSelectedRegion,
-} from "Store/Search";
-import { showFeedback, showResults } from "Store/Nyris";
-import algoliasearch from "algoliasearch/lite";
-import {
-  InstantSearch,
-  Hits,
-  Pagination,
-  Configure,
-} from "react-instantsearch-dom";
-import CustomSearchBox from "components/input/inputSearch";
-import {feedbackClickEpic, feedbackSuccessEpic, feedbackTextSearchEpic} from "services/Feedback";
-import {
-  createImage, findByImage, findRegions,
-} from "services/image";
-import LoadingScreenCustom from "components/LoadingScreen";
-import { Preview } from "@nyris/nyris-react-components";
-import {AlgoliaResult, AlgoliaSettings} from "../../types";
-
-interface Props {}
-
-const defaultSelection = {x1: 0.1, x2: 0.9, y1: 0.1, y2: 0.9};
-function ResultComponent(props: Props) {
-  const dispatch = useAppDispatch();
-  const stateGlobal = useAppSelector((state) => state);
-  const [showColLeft, setToggleShowColLeft] = useState<boolean>(false);
-  const [showImageCanvas, setShowImageCanvas] = useState<boolean>(true);
-  const [isOpenModalImage, setOpenModalImage] = useState<boolean>(false);
-  const [numberResult, setNumberResult] = useState<number>(0);
-  const [isOpenModalShare, setOpenModalShare] = useState<boolean>(false);
-  const { search, settings } = stateGlobal;
-  const { results, requestImage, regions, selectedRegion } = search;
-  const { valueTextSearch } = search;
-  const [dataResult, setDataResult] = useState<any[]>([]);
-  const [dataImageModal, setDataImageModal] = useState<any>();
-  const [searchStateInput, setSearchStateInput] = useState<any>({});
-  const [isLoading, setLoading] = useState<any>(false);
-  const { apiKey, appId, indexName } = settings.algolia as AlgoliaSettings;
-  const searchClient = algoliasearch(appId, apiKey);
-  const index = searchClient.initIndex(indexName);
-
-  useEffect(() => {
-    if (!valueTextSearch) {
-      return;
-    }
-    setSearchStateInput(valueTextSearch);
-  }, [valueTextSearch]);
-
-  useEffect(() => {
-    if (results?.length === 0) {
-      setDataResult([]);
-      return;
-    }
-    setDataResult(results);
-  }, [results]);
-
-  useEffect(() => {
-    if (!showColLeft) {
-      return setShowImageCanvas(true);
-    }
-    return setShowImageCanvas(false);
-  }, [showColLeft]);
-
-  // TODO: hanlder modal:
-  const handlerToggleModal = (item: any) => {
-    setDataImageModal(item);
-    return setOpenModalImage(true);
-  };
-
-  const onNextItem = () => {
-    if (numberResult === results.length) {
-      return;
-    }
-    setNumberResult(numberResult + 1);
-  };
-
-  const onPrevItem = () => {
-    if (numberResult === 0) {
-      return;
-    }
-    setNumberResult(numberResult - 1);
-  };
-
-  // TODO: rectCoords
-
-  const debounceRectCoords = (value: any) => handlerRectCoords(value);
-
-  const handlerRectCoords = debounce((value: any) => {
-    dispatch(selectionChanged(value));
-    setLoading(true);
-    return findItemsInSelection(value);
-  }, 500);
-
-  // TODO: Search offers for image:
-  const findItemsInSelection = (r: RectCoords) => {
-    if (!requestImage) {
-      return;
-    }
-    const { canvas }: any = requestImage;
-    findByImage(canvas, stateGlobal.settings, r).then((res) => {
-      const payload = {
-        ...res,
-      };
-      dispatch(updateResultChangePosition(payload));
-      setLoading(false);
-      return dispatch(showFeedback());
-    });
-  };
-
-  // TODO: Search text
-  const searchTextByApiAndFilter = async (searchState: any) => {
-    try {
-      if (searchState?.query !== "") {
-        const data = await index.search<AlgoliaResult>(searchState.query, {});
-        const productIds = data.hits.map((hit) => hit.sku);
-        await feedbackTextSearchEpic(stateGlobal, data.query, data.page, productIds);
-      }
-    } catch (error) {
-      console.log("searchTextByApi", error);
-      return;
-    }
-  };
-
-  const sendFeedBackAction = async (type: string) =>
-    feedbackSuccessEpic(stateGlobal, type === "like");
-
-  // Search image with url or file
-  const getUrlToCanvasFile = async (url: string, position?: number) => {
-    dispatch(showResults());
-    dispatch(loadingActionResults());
-    let image = await createImage(url);
-    if (position) {
-      feedbackClickEpic(stateGlobal, position);
-      return;
-    }
-    let searchRegion : RectCoords | undefined = undefined;
-    if (settings.regions) {
-      let res = await findRegions(image, settings);
-      searchRegion = res.selectedRegion;
-      dispatch(setRegions(res.regions));
-      dispatch(setSelectedRegion(searchRegion));
-    }
-
-    findByImage(image, settings, searchRegion).then((res ) => {
-      dispatch(setSearchResults(res));
-      setLoading(false);
-      return dispatch(showFeedback());
-    });
-  };
-
-  // Todo: item result.
-  const Hit = (hit: any) => {
-    return (
-      <ItemResult
-        dataItem={hit?.hit}
-        handlerToggleModal={() => {
-          handlerToggleModal(hit?.hit);
-        }}
-        handlerToggleModalShare={() => setOpenModalShare(true)}
-        indexItem={hit.__position}
-        isHover={false}
-        onSearchImage={(url: any) => {
-          setSearchStateInput({});
-          getUrlToCanvasFile(url);
-          setLoading(true);
-        }}
-        handlerFeedback={(value: string) => {
-          sendFeedBackAction(value);
-        }}
-      />
-    );
-  };
-
-  const nonEmptyFilter: any[] = !requestImage
-    ? []
-    : ["sku:DOES_NOT_EXIST<score=1>"];
-  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={`wrap-main-result loading`}>
-      <>
-        {isLoading && (
-          <Box className="box-wrap-loading">
-            <Box className="loadingSpinCT">
-              <Box className="box-content-spin"></Box>
-            </Box>
-          </Box>
-        )}
-        <InstantSearch
-          indexName={indexName}
-          searchClient={searchClient}
-          searchState={searchStateInput}
-          onSearchStateChange={(state) => {
-            setSearchStateInput(state);
-            searchTextByApiAndFilter(state);
-          }}
-        >
-          <Configure filters={filtersString}></Configure>
-          <Box className="box-wrap-result-component">
-            <div className="box-search">
-              <Box>
-                <CustomSearchBox />
-              </Box>
-              {/* <Box className="box-filter">
-                <FilterComponent />
-              </Box> */}
-            </div>
-            <Box className="box-result">
-              <>
-                {settings.preview && requestImage && (
-                  <Box className={`col-left ${showColLeft && "toggle"}`}>
-                    <Box className="box-preview">
-                      <Button
-                        className="button-toggle"
-                        onClick={() => {
-                          setTimeout(() => {
-                            setToggleShowColLeft(!showColLeft);
-                          }, 500);
-                        }}
-                      >
-                        {showColLeft ? (
-                          <KeyboardArrowRightOutlinedIcon />
-                        ) : (
-                          <KeyboardArrowLeftOutlinedIcon />
-                        )}
-                      </Button>
-                      {requestImage && showImageCanvas && (
-                        <Box className="preview-item">
-                          <Preview
-                            key={requestImage?.id}
-                            onSelectionChange={(r: RectCoords) => {
-                              debounceRectCoords(r);
-                              return;
-                            }}
-                            image={requestImage?.canvas}
-                            selection={selectedRegion|| defaultSelection}
-                            regions={regions}
-                            maxWidth={400}
-                            maxHeight={500}
-                            dotColor="#FBD914"
-                          />
-                        </Box>
-                      )}
-                    </Box>
-                    <Box className="box-title_col-left">
-                      <Typography style={{ fontSize: 11, color: "#fff" }}>
-                        Adjust the selection frame for better results.
-                      </Typography>
-                    </Box>
-                  </Box>
-                )}
-
-                <Box
-                  className={`col-right ${
-                    settings.preview && "ml-auto mr-auto"
-                  }`}
-                >
-                  <Box
-                    className={`box-item-result ${
-                      requestImage && showImageCanvas
-                        ? "mr-auto"
-                        : "ml-auto mr-auto"
-                    }`}
-                  >
-                    <LoadingScreenCustom>
-                      <Hits hitComponent={Hit} />
-                    </LoadingScreenCustom>
-                  </Box>
-                </Box>
-              </>
-            </Box>
-            <Box>
-              <Box className="box-panigation">
-                <Pagination />
-              </Box>
-              <Box className="box-notify">
-                <FooterResult search={search} />
-              </Box>
-            </Box>
-
-            {/* TODO: Component modal image */}
-            <DefaultModal
-              openModal={isOpenModalImage}
-              handleClose={(e: any) => {
-                setOpenModalImage(false);
-              }}
-            >
-              <DetailItem
-                handlerCloseModal={() => {
-                  setOpenModalImage(false);
-                }}
-                onPrevItem={onPrevItem}
-                onNextItem={onNextItem}
-                dataItem={dataImageModal}
-                results={dataResult}
-                onHandlerModalShare={() => setOpenModalShare(true)}
-                onSearchImage={(url: string) => {
-                  setLoading(true);
-                  getUrlToCanvasFile(url);
-                }}
-              />
-            </DefaultModal>
-
-            {/* TODO: Component modal share */}
-            <DefaultModal
-              openModal={isOpenModalShare}
-              handleClose={() => setOpenModalShare(false)}
-            >
-              <Box className="box-modal-default box-modal-share">
-                <Box
-                  className="ml-auto"
-                  style={{ width: "fit-content", marginRight: 5 }}
-                >
-                  <Button
-                    style={{ padding: 0 }}
-                    onClick={() => setOpenModalShare(false)}
-                  >
-                    <CloseOutlinedIcon
-                      style={{ fontSize: 12, color: "#55566B" }}
-                    />
-                  </Button>
-                </Box>
-                <Box className="box-content-box-share">
-                  <Typography className="text-f12 text-gray text-bold">
-                    Share
-                  </Typography>
-                  <Paper component="form" className="box-input">
-                    <InputBase
-                      className="text-f9 text-gray"
-                      style={{ width: "100%" }}
-                      value={"https://www.go..."}
-                    />
-                    <IconButton
-                      color="secondary"
-                      aria-label="directions"
-                      style={{ padding: 0 }}
-                    >
-                      <FileCopyOutlinedIcon style={{ fontSize: 8 }} />
-                    </IconButton>
-                  </Paper>
-
-                  <Box mt={1} className="box-media-share">
-                    <Button style={{ padding: 0 }}>
-                      <Box display={"flex"} alignItems={"center"}>
-                        <img src={IconEmail} alt="icon_email" />
-                        <Typography
-                          className="text-f8 fw-500"
-                          style={{ color: "#2B2C46", marginLeft: 5 }}
-                        >
-                          Share with e-Mail
-                        </Typography>
-                      </Box>
-                    </Button>
-                    <Button style={{ padding: 0 }}>
-                      <Box display={"flex"} alignItems={"center"}>
-                        <img src={IconWhatsApp} alt="icon_email" />
-                        <Typography
-                          className="text-f8 fw-500"
-                          style={{ color: "#2B2C46", marginLeft: 5 }}
-                        >
-                          Share with WhatsApp
-                        </Typography>
-                      </Box>
-                    </Button>
-                    <Button style={{ padding: 0 }}>
-                      <Box display={"flex"} alignItems={"center"}>
-                        <img src={IconWeChat} alt="icon_email" />
-                        <Typography
-                          className="text-f8 fw-500"
-                          style={{ color: "#2B2C46", marginLeft: 5 }}
-                        >
-                          Share with WeChat
-                        </Typography>
-                      </Box>
-                    </Button>
-                  </Box>
-                </Box>
-              </Box>
-            </DefaultModal>
-          </Box>
-        </InstantSearch>
-      </>
-    </Box>
-  );
-}
-
-export default ResultComponent;

package/src/services/Feedback.ts

@@ -1,64 +0,0 @@
-import NyrisAPI, {FeedbackEventPayload, NyrisAPISettings, RectCoords} from "@nyris/nyris-api";
-import {RootState} from "../Store/Store";
-
-export const feedbackSuccessEpic = async (state: RootState, success: boolean) => {
-  const { search, settings } = state;
-  return await sendFeedbackByApi(settings, search.sessionId, search.requestId, {
-    event: 'feedback',
-    data: { success }
-  });
-};
-
-export const feedbackClickEpic = async (state: RootState, position: number) => {
-  const { search, settings } = state;
-  return await sendFeedbackByApi(settings, search.sessionId, search.requestId, {
-    event: "click",
-    data: { positions: [position] },
-  });
-};
-
-export const feedbackTextSearchEpic = async (state: RootState, query: string, page: number, productIds: string[]) => {
-  try {
-    const { search, settings } = state;
-    const eventData = {
-      query,
-      page,
-      product_ids: productIds,
-    };
-    const textSearchEvent = { event: "text-search", data: eventData };
-    // @ts-ignore
-    return await sendFeedbackByApi(settings, search.sessionId, search.requestId, textSearchEvent);
-  } catch (error) {
-    console.log("error feedbackTextSearchEpic", error);
-  }
-};
-
-export const feedbackRegionEpic = async (state: RootState, region: RectCoords) => {
-  const {settings, search} = state;
-  const {sessionId, requestId } = search;
-  const { x1, x2, y1, y2 } = region;
-  const payload : FeedbackEventPayload = {
-        event: "region",
-        data: { rect: { x: x1, y: y1, w: x2 - x1, h: y2 - y1 } }
-  };
-  return await sendFeedbackByApi(settings, sessionId, requestId, payload);
-};
-
-export const sendFeedbackByApi = async (
-  settings: NyrisAPISettings,
-  sessionId: string | undefined,
-  requestId: string | undefined,
-  payload: FeedbackEventPayload
-) => {
-  const api = new NyrisAPI(settings);
-  if (sessionId && requestId) {
-    try {
-      const dataByApi = await api
-        .sendFeedback(sessionId, requestId, payload)
-        .then((res) => {});
-      console.log("dataByApi", dataByApi);
-    } catch (error) {
-      console.log("error sendFeedbackByApi321", error);
-    }
-  }
-};

package/src/services/image.ts

@@ -1,40 +0,0 @@
-import {
-  NyrisAPISettings,
-  RectCoords,
-  selectFirstCenteredRegion,
-  urlOrBlobToCanvas
-} from "@nyris/nyris-api";
-import NyrisAPI from "@nyris/nyris-api";
-import {isEqual} from "lodash";
-
-export const defaultRect = {x1: 0, x2: 1, y1: 0, y2: 1};
-
-export const createImage = async (fileOrUrl: File|string|HTMLCanvasElement) => {
-  const image = fileOrUrl instanceof HTMLCanvasElement ? fileOrUrl : await urlOrBlobToCanvas(fileOrUrl);
-  return image;
-}
-
-export const findRegions = async (image: HTMLCanvasElement, settings: NyrisAPISettings) => {
-  const nyrisApi = new NyrisAPI(settings);
-  let regions = await nyrisApi.findRegions(image);
-
-  const selectedRegion = selectFirstCenteredRegion(regions, 0.3, defaultRect);
-  return {
-    selectedRegion: isEqual(selectedRegion, defaultRect) ? undefined : selectedRegion,
-    regions
-  }
-};
-
-export const findByImage = (image: HTMLCanvasElement, settings: NyrisAPISettings, region?: RectCoords) => {
-  const nyrisApi = new NyrisAPI(settings);
-  let options = {};
-  if (region) {
-    options = { cropRect: region };
-  }
-  return nyrisApi.findByImage(image, options);
-};
-
-export const findByCadFile = (file: File, settings: NyrisAPISettings) => {
-  const nyrisApi = new NyrisAPI(settings);
-  return nyrisApi.findByCad(file, {});
-};

package/src/services/session.ts

@@ -1,17 +0,0 @@
-import axios from "axios";
-import {NyrisAPISettings} from "@nyris/nyris-api";
-
-const httpClient = axios.create();
-
-export const createSessionByApi = async (settings: NyrisAPISettings) => {
-  const { apiKey, baseUrl} = settings;
-  let headers = {
-    "X-Api-Key": apiKey,
-  };
-  let response = await httpClient.request({
-    method: "POST",
-    url: `${baseUrl}/find/v1/session`,
-    headers,
-  });
-  return response.data.session;
-};

package/src/services/types.ts

@@ -1,50 +0,0 @@
-// import {SearchAction, SearchState} from "./actions/searchActions";
-// import {NyrisAction, NyrisAppState} from "./actions/nyrisAppActions";
-
-
-import {MDSettings} from "../types";
-
-export interface SearchServiceSettings {
-    xOptions: boolean | string,
-    customSearchRequest?: ((file: Blob, client: any) => Promise<any>),
-    responseHook?: ((response: any) => any),
-    apiKey: string,
-    imageMatchingUrl?: string,
-    imageMatchingUrlBySku?: string,
-    imageMatchingSubmitManualUrl?: string,
-    regionProposalUrl?: string,
-    responseFormat?: string,
-    feedbackUrl?: string,
-    exampleImages: string[],
-    resultTemplate?: string,
-    noImageUrl?: string,
-    materialDesign?: MDSettings,
-    preview: boolean,
-    regions: boolean,
-    jpegQuality: number,
-    maxWidth: number,
-    maxHeight: number,
-    useRecommendations: boolean
-}
-
-export interface Crop {
-    x: number,
-    y: number,
-    w: number,
-    h: number
-}
-
-export interface WH {
-    w: number,
-    h: number
-}
-
-export interface Result {
-    position: number,
-    sku?: string,
-    title?: string,
-    l?: string,
-    img?: { url?: string },
-    // There can be also any other data
-    [x: string]: any
-}