@nyris/nyris-webapp 0.2.5 → 0.3.2

package/src/components/FilterComponent.tsx

@@ -0,0 +1,33 @@
+import { Box, Button, Grid } from "@material-ui/core";
+import DefaultSelect from "components/default-select";
+import React from "react";
+
+interface Props {}
+
+function FilterComponent(props: Props) {
+  const {} = props;
+
+  return (
+    <Box className="box-main-filter">
+      <Grid container>
+        <Grid item className="item">
+          <DefaultSelect attribute="brand" />
+        </Grid>
+        <Grid item className="item">
+          <DefaultSelect attribute="keyword_0" />
+        </Grid>
+
+        <Grid item className="item-seven text-center">
+          <Button
+            className="text-btn-small bg-pink text-red"
+            style={{ borderRadius: 12 }}
+          >
+            Clear x
+          </Button>
+        </Grid>
+      </Grid>
+    </Box>
+  );
+}
+
+export default FilterComponent;

package/src/components/Footer.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { useAppDispatch, useAppSelector } from "Store/Store";
+import Feedback from "components/Feedback";
+import { hideFeedback } from "Store/Nyris";
+
+function FooterComponent(): JSX.Element {
+  const dispatch = useAppDispatch();
+  const searchState = useAppSelector((state) => state);
+  const { nyris } = searchState;
+  const { feedbackState } = nyris;
+  return (
+    <>
+      <section className="footnote">
+        <div className="wrapper">
+          © 2017 - 2019 <a href="https://nyris.io">nyris GmbH</a> - All rights
+          reserved - <a href="https://nyris.io/imprint/">Imprint</a>
+        </div>
+      </section>
+      <Feedback
+        feedbackState={feedbackState}
+        onClose={() => {
+          return dispatch(hideFeedback(""));
+        }}
+      />
+    </>
+  );
+}
+
+export default FooterComponent;

package/src/components/FooterMD.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import { makeStyles, Typography, Link } from "@material-ui/core";
+import { useAppSelector } from "Store/Store";
+
+const useStyles = makeStyles((theme) => ({
+  footer: {
+    backgroundColor: theme.palette.background.paper,
+    padding: theme.spacing(6),
+  },
+}));
+
+function Copyright() {
+  return (
+    <Typography variant="body2" color="textSecondary" align="center">
+      {"Powered by "}
+      <Link
+        color="inherit"
+        href="https://nyris.io/"
+        component="a"
+        target="_blank"
+      >
+        nyris.io
+      </Link>
+    </Typography>
+  );
+}
+
+function FooterMD(): JSX.Element {
+  const searchState = useAppSelector((state) => state);
+  const { search, nyris } = searchState;
+  const { showPart } = nyris;
+  const { requestId } = search;
+  const classes = useStyles();
+  return (
+    <footer className={classes.footer}>
+      <Typography variant="subtitle1" align="center" color="textSecondary">
+        {requestId && showPart === "results" && (
+          <div
+            style={{
+              textAlign: "center",
+              fontSize: "0.7em",
+              paddingTop: "0.8em",
+            }}
+          >
+            Request identifier {requestId}
+          </div>
+        )}
+      </Typography>
+      <Copyright />
+    </footer>
+  );
+}
+
+export default FooterMD;

package/src/components/FooterNewVersion.tsx

@@ -0,0 +1,12 @@
+import { Box } from '@material-ui/core'
+import React from 'react'
+
+interface Props {}
+
+function FooterNewVersion(props: Props): JSX.Element {
+  return (
+    <Box></Box>
+  )
+}
+
+export default FooterNewVersion

package/src/components/FooterResult.tsx

@@ -0,0 +1,47 @@
+import { Box, Grid, Typography } from "@material-ui/core";
+import React from "react";
+import { Link } from "react-router-dom";
+import TitleOutlinedIcon from "@material-ui/icons/TitleOutlined";
+
+interface Props {
+  search: any;
+}
+
+function FooterResult(props: Props) {
+  const {search} = props;
+
+  return (
+    <Grid
+      container
+      justifyContent="space-between"
+      alignItems="center"
+      style={{ height: "100%" }}
+    >
+      <Grid
+        item
+        className="item-notify"
+        style={{ borderRight: "1px solid #E9E9EC", minWidth: 69 }}
+      >
+        <Typography className="text-f8 text-center">
+          {search.results.length} results
+        </Typography>
+      </Grid>
+      <Grid item className="item-notify">
+        <Typography className="text-f8 text-center">
+          Didn’t find what you were looking for? Share your search with our{" "}
+          <Link to={"#"}>product experts</Link>.
+        </Typography>
+      </Grid>
+      <Grid item className="item-notify" style={{ minWidth: 32 }}>
+        <Typography className="text-f8">
+          <Box>
+            <TitleOutlinedIcon style={{ color: "#55566B", fontSize: 8 }} />
+            <TitleOutlinedIcon style={{ color: "#55566B", fontSize: 10 }} />
+          </Box>
+        </Typography>
+      </Grid>
+    </Grid>
+  );
+}
+
+export default FooterResult;

package/src/components/Header.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+
+function HeaderComponent(): JSX.Element {
+  return (
+    <div className="navWrap">
+      <div className="wrapper" style={{ padding: 0 }}>
+        <section id="branding" />
+        <div id="menu" className="menuWrap" role="navigation">
+          <ul>
+            <li>
+              <a
+                href="https://nyris.io/imprint/#privacy"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Privacy Policy
+              </a>
+            </li>
+            <li>
+              <a
+                href="https://nyris.io/"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Visit our Website
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default HeaderComponent;

package/src/components/HeaderMd.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { Container, Toolbar, Typography, AppBar } from "@material-ui/core";
+import { defaultMdSettings } from "defaults";
+import { useAppSelector } from "Store/Store";
+interface Props {
+  settings: any;
+}
+
+function HeaderMdComponent(): JSX.Element {
+  const { settings } = useAppSelector((state: any) => state);
+  const { themePage } = settings;
+  const mdSettings: any = themePage.materialDesign.active
+    ? themePage.materialDesign.materialDesign
+    : defaultMdSettings;
+  return (
+    <AppBar
+      position={"relative"}
+      style={{ backgroundColor: mdSettings.appBarCustomBackgroundColor }}
+    >
+      <Container
+        maxWidth="md"
+        style={{ flexDirection: "row", display: "flex" }}
+      >
+        <img
+          src={mdSettings.appBarLogoUrl}
+          style={{ height: "2em", minHeight: "64px", display: "flex" }}
+          alt="Logo"
+        />
+        <Toolbar component="span">
+          <Typography style={{ color: mdSettings.appBarCustomTextColor }}>
+            {mdSettings.appBarTitle}
+          </Typography>
+        </Toolbar>
+      </Container>
+    </AppBar>
+  );
+}
+
+export default HeaderMdComponent;

package/src/components/HeaderNewVersion.tsx

@@ -0,0 +1,92 @@
+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

@@ -0,0 +1,46 @@
+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

@@ -0,0 +1,29 @@
+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

@@ -0,0 +1,34 @@
+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

@@ -0,0 +1,140 @@
+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

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

package/src/components/Panigation/isModifierClick.js

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