@nyris/nyris-webapp 0.3.3 → 0.3.6

package/src/components/HeaderNewVersion.tsx

@@ -1,92 +0,0 @@
-import { Box, Grid } from "@material-ui/core";
-import React from "react";
-import { NavLink } from "react-router-dom";
-import "./common.scss";
-import IconReLoad from "common/assets/icons/reload_icon.svg";
-import IconSave from "common/assets/icons/save_search.svg";
-import IconSupport from "common/assets/icons/support.svg";
-import IconAdmin from "common/assets/icons/admin.svg";
-import LogoNyris from "common/assets/icons/nyris_logo.svg";
-function HeaderNewVersion(): JSX.Element {
-  const handleCheckMatchLink = (match: any, location: any) => {
-    let active = false;
-    if (match?.url === location.pathname) {
-      active = true;
-    }
-
-    return active;
-  };
-
-  return (
-    <Box className="box-content" display={"flex"}>
-      <NavLink to="/" style={{ lineHeight: 0 }}>
-        {/* <section id="branding" style={{ height: 32 }} /> */}
-        <img width={74} height={19} src={`${LogoNyris}`} alt="nyris logo" />
-      </NavLink>
-      <Grid container className="nav-menu">
-        <Grid item className="item-nav">
-          <NavLink
-            activeClassName="active"
-            isActive={(match, location) =>
-              handleCheckMatchLink(match, location)
-            }
-            to={"/search-history"}
-            className="nav-link p-0 menu-children rounded-0"
-          >
-            <span className="d-none d-sm-block ms-4 px-2 py-1 border-bottom-1">
-              Search history
-              <img width={10} height={10} src={`${IconReLoad}`} alt=""/>
-            </span>
-          </NavLink>
-        </Grid>
-        <Grid item className="item-nav">
-          <NavLink
-            activeClassName="active"
-            isActive={(match, location) =>
-              handleCheckMatchLink(match, location)
-            }
-            to={"/saved"}
-            className="nav-link p-0 menu-children rounded-0"
-          >
-            <span className="d-none d-sm-block ms-4 px-2 py-1 border-bottom-1">
-              Saved
-              <img width={10} height={10} src={`${IconSave}`} alt=""/>
-            </span>
-          </NavLink>
-        </Grid>
-        <Grid item className="item-nav">
-          <NavLink
-            activeClassName="active"
-            isActive={(match, location) =>
-              handleCheckMatchLink(match, location)
-            }
-            to={"/support"}
-            className="nav-link p-0 menu-children rounded-0"
-          >
-            <span className="d-none d-sm-block ms-4 px-2 py-1 border-bottom-1">
-              Support
-              <img width={10} height={10} src={`${IconSupport}`} alt="" />
-            </span>
-          </NavLink>
-        </Grid>
-        <Grid item className="item-nav">
-          <NavLink
-            activeClassName="active"
-            isActive={(match, location) =>
-              handleCheckMatchLink(match, location)
-            }
-            to={"/account"}
-            className="nav-link p-0 menu-children rounded-0"
-          >
-            <span className="d-none d-sm-block ms-4 px-2 py-1 border-bottom-1">
-              My Account
-              <img width={10} height={10} src={`${IconAdmin}`} alt=""/>
-            </span>
-          </NavLink>
-        </Grid>
-      </Grid>
-    </Box>
-  );
-}
-
-export default HeaderNewVersion;

package/src/components/Layout.tsx

@@ -1,46 +0,0 @@
-import React from "react";
-import { ReactNode } from "components/common";
-import "./common.scss";
-import HeaderComponent from "./Header";
-import FooterComponent from "./Footer";
-import { useAppSelector } from "Store/Store";
-import HeaderMdComponent from "./HeaderMd";
-import FooterMD from "./FooterMD";
-import HeaderNewVersion from "./HeaderNewVersion";
-import FooterNewVersion from "./FooterNewVersion";
-import {AppState} from "../types";
-function Layout({ children }: ReactNode): JSX.Element {
-  const { settings } = useAppSelector<AppState>((state:any) => state);
-  const { themePage } = settings;
-  
-  let HeaderApp: any;
-  let FooterApp: any;
-  let classNameBoxVersion: string = "newVersion";
-  if (themePage.default?.active) {
-    classNameBoxVersion = "default";
-    HeaderApp = HeaderComponent;
-    FooterApp = FooterComponent;
-  } else if (themePage.materialDesign?.active) {
-    classNameBoxVersion = "materialDesign";
-    HeaderApp = HeaderMdComponent;
-    FooterApp = FooterMD;
-  } else {
-    HeaderApp = HeaderNewVersion;
-    FooterApp = FooterNewVersion;
-  }
-  return (
-    <div className={`layout-main-${classNameBoxVersion}`}>
-      <div className={`box-header-${classNameBoxVersion}-main`}>
-        <HeaderApp />
-      </div>
-      <div className={`box-body-${classNameBoxVersion}-wrap-main`}>
-        {children}
-      </div>
-      <div className="footer-wrap-main">
-        <FooterApp />
-      </div>
-    </div>
-  );
-}
-
-export default Layout;

package/src/components/LoadingScreen/index.tsx

@@ -1,29 +0,0 @@
-import React, { useState } from "react";
-import { Box } from "@material-ui/core";
-import { connectStateResults } from "react-instantsearch-dom";
-
-function LoadingScreen({
-  searchState,
-  searchResults,
-  children,
-  isSearchStalled,
-  searchingForFacetValues,
-  searching,
-}: any) {
-  const [isLoading] = useState<boolean>(false);
-
-  return (
-    <>
-      {isLoading && (
-        <Box className="box-wrap-loading">
-          <Box className="loadingSpinCT">
-            <Box className="box-content-spin"></Box>
-          </Box>
-        </Box>
-      )}
-      {children}
-    </>
-  );
-}
-const LoadingScreenCustom = connectStateResults(LoadingScreen);
-export default LoadingScreenCustom;

package/src/components/Navigation.tsx

@@ -1,34 +0,0 @@
-import React from "react";
-import { NavLink } from "react-router-dom";
-// import * as H from "history";
-
-function Navigation(): JSX.Element {
-  // const handleCheckMatchLink = (match: any, location: H.Location) => {
-  //   if (match?.url === location?.pathname) {
-  //     return true;
-  //   }
-  //   return false;
-  // };
-
-  return (
-    <ul className="d-flex align-center">
-      <li>
-        <NavLink
-          activeClassName="active"
-          // isActive={(match, location: H.Location) => {
-          //   return handleCheckMatchLink(match, location);
-          // }}
-          isActive={() => false}
-          to={"/search-history"}
-          className="nav-link p-0 menu-children rounded-0"
-        >
-          <span className="d-none d-sm-block ms-4 px-2 py-1 border-bottom-1">
-            Search history
-          </span>
-        </NavLink>
-      </li>
-    </ul>
-  );
-}
-
-export default Navigation;

package/src/components/Panigation/Pagination.tsx

@@ -1,140 +0,0 @@
-import React from 'react';
-import { usePagination, UsePaginationProps } from 'react-instantsearch-hooks';
-import { cx } from './cx';
-import { isModifierClick } from './isModifierClick';
-
-export type PaginationProps = React.ComponentProps<'div'> & UsePaginationProps;
-
-export function PaginationComponent(props: PaginationProps) {
-  const {
-    refine,
-    createURL,
-    pages,
-    currentRefinement,
-    isFirstPage,
-    isLastPage,
-    nbPages,
-    canRefine,
-  } = usePagination(props);
-
-  return (
-    <div
-      className={cx(
-        'ais-Pagination',
-        canRefine === false && 'ais-Pagination--noRefinement',
-        props.className
-      )}
-    >
-      <ul className="ais-Pagination-list">
-        <PaginationItem
-          aria-label="First"
-          value={0}
-          isDisabled={isFirstPage}
-          createURL={createURL}
-          refine={refine}
-          className={cx(
-            'ais-Pagination-item',
-            'ais-Pagination-item--firstPage'
-          )}
-        >
-          ‹‹
-        </PaginationItem>
-
-        <PaginationItem
-          aria-label="Previous"
-          value={currentRefinement - 1}
-          isDisabled={isFirstPage}
-          createURL={createURL}
-          refine={refine}
-          className={cx(
-            'ais-Pagination-item',
-            'ais-Pagination-item--previousPage'
-          )}
-        >
-          ‹
-        </PaginationItem>
-
-        {pages.map((page) => (
-          <PaginationItem
-            key={page}
-            aria-label={String(page)}
-            value={page}
-            isDisabled={false}
-            createURL={createURL}
-            refine={refine}
-            className={cx(
-              'ais-Pagination-item',
-              page === currentRefinement && 'ais-Pagination-item--selected'
-            )}
-          >
-            {page + 1}
-          </PaginationItem>
-        ))}
-
-        <PaginationItem
-          aria-label="Next"
-          value={currentRefinement + 1}
-          isDisabled={isLastPage}
-          createURL={createURL}
-          refine={refine}
-          className={cx('ais-Pagination-item', 'ais-Pagination-item--nextPage')}
-        >
-          ›
-        </PaginationItem>
-
-        <PaginationItem
-          aria-label="Last"
-          value={nbPages - 1}
-          isDisabled={isLastPage}
-          createURL={createURL}
-          refine={refine}
-          className={cx('ais-Pagination-item', 'ais-Pagination-item--lastPage')}
-        >
-          ››
-        </PaginationItem>
-      </ul>
-    </div>
-  );
-}
-
-type PaginationItemProps = React.ComponentProps<'a'> &
-  Pick<ReturnType<typeof usePagination>, 'refine' | 'createURL'> & {
-    isDisabled: boolean;
-    value: number;
-  };
-
-function PaginationItem(props: PaginationItemProps) {
-  const { isDisabled, className, href, value, createURL, refine, ...rest } =
-    props;
-
-  if (isDisabled) {
-    return (
-      <li className={cx(className, 'ais-Pagination-item--disabled')}>
-        <span className="ais-Pagination-link" {...rest} />
-      </li>
-    );
-  }
-
-  return (
-    <li className={className}>
-      <a
-        className="ais-Pagination-link"
-        href={createURL(value)}
-        onClick={(event) => {
-          // We let the browser handle the native event when the click is modified
-          // (with a special mouse event or with a combination key) for accessibility
-          // purposes. For example, clicking the link while holding the Control
-          // key opens the next search state link in a new tab, but doesn't refine
-          // the search state in the current tab.
-          if (isModifierClick(event)) {
-            return;
-          }
-
-          event.preventDefault();
-          refine(value);
-        }}
-        {...rest}
-      />
-    </li>
-  );
-}

package/src/components/Panigation/cx.js

@@ -1,3 +0,0 @@
-export function cx(...classNames) {
-  return classNames.filter(Boolean).join(' ');
-}

package/src/components/Panigation/isModifierClick.js

@@ -1,10 +0,0 @@
-export function isModifierClick(event) {
-  const isMiddleClick = event.button === 1;
-  return Boolean(
-      isMiddleClick ||
-      event.altKey ||
-      event.ctrlKey ||
-      event.metaKey ||
-      event.shiftKey
-  );
-}

package/src/components/Saved/AllItem.tsx

@@ -1,32 +0,0 @@
-import { Grid } from "@material-ui/core";
-import ItemResult from "components/results/ItemResult";
-import React from "react";
-
-interface Props {
-  dataItem: any[];
-  isHover?: boolean
-}
-
-function AllItem(props: Props) {
-  const { dataItem } = props;
-
-  return (
-    <Grid container spacing={2}>
-      {dataItem &&
-        dataItem.map((item: any, index: any) => {
-          return (
-            <Grid item sm={3} key={index}>
-              <ItemResult
-                dataItem={item}
-                isHover={true}
-                // handlerToggleModal={handlerToggleModal}
-                // handlerToggleModalShare={() => setOpenModalShare(true)}
-              />
-            </Grid>
-          );
-        })}
-    </Grid>
-  );
-}
-
-export default AllItem;

package/src/components/Saved/Category.tsx

@@ -1,16 +0,0 @@
-import { Grid } from "@material-ui/core";
-import React from "react";
-
-interface Props {
-  nameCategory?: string;
-}
-
-function CategoryItemSaved(props: Props) {
-  return (
-    <Grid container>
-      <Grid item xs={4}></Grid>
-    </Grid>
-  );
-}
-
-export default CategoryItemSaved;

package/src/components/carousel/DefaultCarousel.tsx

@@ -1,48 +0,0 @@
-import { Box, Button } from "@material-ui/core";
-import React from "react";
-import { Carousel } from "react-responsive-carousel";
-import ChevronRightOutlinedIcon from "@material-ui/icons/ChevronRightOutlined";
-import ChevronLeftOutlinedIcon from "@material-ui/icons/ChevronLeftOutlined";
-interface Props {
-  imgItem: any[];
-}
-
-function DefaultCarousel(props: Props) {
-  const { imgItem } = props;
-  console.log("imgItem", imgItem);
-
-  return (
-    <Carousel
-      showThumbs={false}
-      infiniteLoop={false}
-      showStatus={false}
-      className={imgItem.length > 1 ? "" : "hide-btn-arrow"}
-      renderArrowNext={(onClickHandler, hasPrev, label) => (
-        <Button onClick={onClickHandler} className="btn-carousel-right">
-          <ChevronRightOutlinedIcon
-            className="icon-ct"
-            style={{ color: "#55566B" }}
-          />
-        </Button>
-      )}
-      renderArrowPrev={(onClickHandler, hasPrev, label) => (
-        <Button onClick={onClickHandler} className="btn-carousel-left">
-          <ChevronLeftOutlinedIcon
-            className="icon-ct"
-            style={{ color: "#55566B" }}
-          />
-        </Button>
-      )}
-    >
-      {imgItem?.map((item: any, index: any) => {
-        return (
-          <Box key={index} style={{height: '100%'}}>
-            <img style={{height: '100%'}} src={imgItem ? item?.url : ""} alt="image_product" />
-          </Box>
-        );
-      })}
-    </Carousel>
-  );
-}
-
-export default DefaultCarousel;

package/src/components/common.d.ts

@@ -1,9 +0,0 @@
-type ReactNode =
-  | ReactChild
-  | ReactFragment
-  | ReactPortal
-  | boolean
-  | null
-  | undefined;
-
-export { ReactNode };

package/src/components/common.scss

@@ -1,54 +0,0 @@
-.layout-main-newVersion {
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  overflow: hidden;
-  .box-header-newVersion-main {
-    height: 32px;
-    background: #2b2c46;
-    .box-content {
-      max-width: 1280px;
-      margin: auto;
-      height: 100%;
-      justify-content: space-between;
-      align-items: center;
-      .nav-menu {
-        width: auto;
-        color: #fff;
-        font-family: "Montserrat";
-        font-weight: bold;
-        height: 100%;
-        a {
-          display: flex;
-          align-items: center;
-          height: 100%;
-          padding: 0 10px;
-          &.active {
-            background: #322bb0;
-          }
-        }
-
-        span {
-          color: #fff;
-          font-size: 11px;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          img {
-            margin-left: 12px;
-          }
-        }
-        .item-nav {
-          &:last-child {
-            margin-right: 0px;
-          }
-        }
-      }
-    }
-  }
-  .box-body-newVersion-wrap-main {
-    height: calc(100% - 32px);
-    // overflow: auto;
-  }
-}

package/src/components/default-select.tsx

@@ -1,44 +0,0 @@
-import { Box } from "@material-ui/core";
-import React, { useEffect, useState } from "react";
-import { connectMenu } from "react-instantsearch-dom";
-
-interface Props {
-  dataField: any[];
-}
-
-function DefaultSelectCustom({ items, currentRefinement, refine }: any) {
-  const [valueFilter, setValueFilter] = useState<string>();
-
-  useEffect(() => {
-    if (!valueFilter) {
-      return;
-    }
-    refine(valueFilter);
-  }, [valueFilter]);
-
-  return (
-    <Box className="w-100">
-      <select
-        className="w-100 btn-ct"
-        value={currentRefinement || ""}
-        onChange={(event: any) => {
-          setValueFilter(event?.currentTarget.value);
-          // refine(event.currentTarget.value);
-        }}
-      >
-        <option value="">See all options</option>
-        {items.map((item: any) => (
-          <option
-            key={item.label}
-            value={item.isRefined ? currentRefinement : item.value}
-          >
-            {item.label}
-          </option>
-        ))}
-      </select>
-    </Box>
-  );
-}
-const DefaultSelect = connectMenu(DefaultSelectCustom);
-
-export default DefaultSelect;

package/src/components/hitItem/hits.tsx

@@ -1,50 +0,0 @@
-import React from "react";
-import { Hit as AlgoliaHit } from "@algolia/client-search";
-import { useHits, UseHitsProps } from "react-instantsearch-hooks";
-import { useAppDispatch } from "Store/Store";
-import { useEffect } from "react";
-import { resultSearchText } from "Store/Search";
-import { useState } from "react";
-import { CircularProgress } from "@material-ui/core";
-
-export type HitsProps<THit> = React.ComponentProps<"div"> &
-  UseHitsProps & {
-    hitComponent: (props: { hit: THit }) => JSX.Element;
-  };
-
-export function Hits<THit extends AlgoliaHit<Record<string, unknown>>>({
-  hitComponent: Hit,
-  ...props
-}: HitsProps<THit>) {
-  
-  const { hits } = useHits(props);
-  const dispatch = useAppDispatch();
-  const [isLoading, setLoading] = useState<boolean>(false);
-
-  useEffect(() => {
-    setLoading(true);
-    setTimeout(() => {
-      setLoading(false);
-    }, 1000);
-  }, []);
-
-  useEffect(() => {
-    if (hits?.length > 0) {
-      dispatch(resultSearchText(hits));
-    }
-  }, []);
-
-  return (
-    <>
-      {isLoading ? (
-        <CircularProgress />
-      ) : (
-        <>
-          {hits.map((hit: any, index: any) => (
-            <Hit key={index} hit={hit as unknown as THit} />
-          ))}
-        </>
-      )}
-    </>
-  );
-}

package/src/components/hitItem/infinitiHits.tsx

@@ -1,33 +0,0 @@
-import { Grid } from "@material-ui/core";
-import ItemResult from "components/results/ItemResult";
-import React from "react";
-import {
-  useInfiniteHits,
-  UseInfiniteHitsProps,
-} from "react-instantsearch-hooks";
-
-function InfiniteHits(props: any) {
-  const { hits, isLastPage, showMore } = useInfiniteHits(props);
-  console.log("props", useInfiniteHits(props));
-
-  return (
-    <>
-      {hits.map((hit: any, index: any) => {
-        return (
-          <Grid item xs={3}>
-            <ItemResult
-              dataItem={hit?.hit}
-              // handlerToggleModal={() => {
-              //   handlerToggleModal(hit?.hit);
-              // }}
-              // handlerToggleModalShare={() => setOpenModalShare(true)}
-              // indexItem={hit.__position}
-            />
-          </Grid>
-        );
-      })}
-    </>
-  );
-}
-
-export default InfiniteHits;