@nyris/nyris-webapp 0.3.4 → 0.3.9

package/src/components/input/inputSearch.tsx

@@ -1,77 +0,0 @@
-import React, { useEffect, useRef, useState } from "react";
-import { Button, Box } from "@material-ui/core";
-import ClearOutlinedIcon from "@material-ui/icons/ClearOutlined";
-import { connectSearchBox } from "react-instantsearch-dom";
-import { useHistory } from "react-router-dom";
-import { useAppDispatch } from "Store/Store";
-import { reset } from "Store/Search";
-import { debounce } from "lodash";
-import { useCallback } from "react";
-
-const SearchBox = ({ currentRefinement, isSearchStalled, refine }: any) => {
-  const focusInp: any = useRef();
-  const history = useHistory();
-  const [, setShowBtnClear] = useState<boolean>(true);
-  const [valueInput, setValueInput] = useState<string>("");
-  const dispatch = useAppDispatch();
-
-  useEffect(() => {
-    if (focusInp?.current) {
-      focusInp?.current.focus();
-    }
-  }, [focusInp]);
-
-  useEffect(() => {
-    // if (currentRefinement) {
-    setValueInput(currentRefinement);
-    // }
-  }, [currentRefinement]);
-
-  useEffect(() => {
-    if (valueInput.length > 0) {
-      setShowBtnClear(true);
-    }
-    setShowBtnClear(false);
-  }, [valueInput]);
-
-  const debounceSearch = useCallback(
-    debounce((nextValue: any) => refine(nextValue), 0),
-    []
-  );
-
-  return (
-    <Box className="wrap-input-search">
-      <Box p={2} display={"flex"} className="box-input-search">
-        <form noValidate action="" role="search">
-          <input
-            style={{ border: "0px", width: "100%" }}
-            className="input-search"
-            value={valueInput}
-            onChange={(event) => {
-              setValueInput(event.currentTarget.value);
-              debounceSearch(event.currentTarget.value);
-            }}
-            ref={focusInp}
-          />
-          {history.location.pathname === "/result" && (
-            <Button
-              className="btn-clear-text"
-              onClick={() => {
-                setValueInput("");
-                refine("");
-                dispatch(reset(""));
-                history.push("/");
-                return;
-              }}
-            >
-              <ClearOutlinedIcon style={{ fontSize: 12, color: "#2B2C46" }} />
-            </Button>
-          )}
-        </form>
-      </Box>
-    </Box>
-  );
-};
-
-const CustomSearchBox = connectSearchBox(SearchBox);
-export default CustomSearchBox;

package/src/components/modal/DefaultModal.tsx

@@ -1,28 +0,0 @@
-import React from "react";
-import Modal from "@material-ui/core/Modal";
-
-interface Props {
-  children: JSX.Element;
-  openModal: boolean;
-  handleClose: (e: any) => void;
-}
-
-function DefaultModal(props: Props) {
-  const { children, openModal = false, handleClose } = props;
-
-  return (
-    <Modal
-      open={openModal}
-      onClose={handleClose}
-      style={{
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-      }}
-    >
-      {children}
-    </Modal>
-  );
-}
-
-export default DefaultModal;

package/src/components/results/ItemResult.tsx

@@ -1,155 +0,0 @@
-import { Box, Button, Grid, Typography } from "@material-ui/core";
-import React from "react";
-import IconSupport from "common/assets/icons/support.svg";
-import IconLike from "common/assets/icons/icon_like.svg";
-import IconDisLike from "common/assets/icons/icon_dislike.svg";
-import IconShare from "common/assets/icons/Fill.svg";
-import IconBookmark from "common/assets/icons/book_mark.svg";
-import IconModalImage from "common/assets/icons/icon_modal_image.svg";
-
-interface Props {
-  dataItem: any;
-  handlerToggleModal?: any;
-  handleClose?: () => void;
-  handlerToggleModalShare?: () => void;
-  isHover?: boolean;
-  indexItem?: number;
-  onSearchImage?: any;
-  handlerFeedback?: any;
-}
-
-function ItemResult(props: Props) {
-  const {
-    dataItem,
-    handlerToggleModal,
-    handlerToggleModalShare,
-    isHover = false,
-    onSearchImage,
-    handlerFeedback,
-  } = props;
-  const { img, sku, title, main_image_link } = dataItem;
-
-  return (
-    <Box className="wrap-main-item-result">
-      <Box className="box-top">
-        {!isHover && (
-          <Box className="box-icon-modal">
-            <Button
-              onClick={(e: any) => {
-                e.preventDefault();
-                onSearchImage(main_image_link);
-                // handlerToggleModal();
-              }}
-            >
-              <img
-                src={IconModalImage}
-                alt="icon_modal"
-                width={21}
-                height={21}
-              />
-            </Button>
-          </Box>
-        )}
-
-        <Box className="box-image">
-          <Button
-            style={{ width: "100%", height: "100%", padding: 0, zIndex: 9 }}
-            onClick={handlerToggleModal}
-          >
-            <img
-              src={img?.url ? img?.url : main_image_link}
-              alt="image_item"
-              className="img-style"
-            />
-          </Button>
-          {isHover && (
-            <Box className="box-hover">
-              <Button>View item</Button>
-            </Box>
-          )}
-        </Box>
-      </Box>
-      <Box
-        className="box-content"
-        display={"flex"}
-        style={{ flexDirection: "column" }}
-      >
-        <Box className="box-top">
-          <Grid container justifyContent="space-between">
-            <Grid item xs={10}>
-              <Typography className="text-f8 max-line-1">SKU: {sku}</Typography>
-              <Typography className="text-f9 text-bold max-line-3">
-                {title}
-              </Typography>
-            </Grid>
-            <Grid item>
-              <Button className="btn-item">
-                <img
-                  src={IconBookmark}
-                  alt="image_item"
-                  className="icon_action"
-                />
-              </Button>
-            </Grid>
-          </Grid>
-        </Box>
-
-        <Box className="box-bottom">
-          <Grid container justifyContent="space-between" alignItems="center">
-            <Grid item>
-              <Box display={"flex"} alignItems={"center"}>
-                <Button
-                  className="btn-item"
-                  onClick={() => handlerFeedback("like")}
-                >
-                  <img
-                    src={IconLike}
-                    alt="image_item"
-                    className="icon_action"
-                  />
-                </Button>
-                <Button
-                  className="btn-item"
-                  onClick={() => handlerFeedback("dislike")}
-                >
-                  <img
-                    src={IconDisLike}
-                    alt="image_item"
-                    className="icon_action"
-                  />
-                </Button>
-              </Box>
-            </Grid>
-            <Grid item>
-              <Box display={"flex"} alignItems={"center"}>
-                <Button className="btn-item" onClick={handlerToggleModalShare}>
-                  <img
-                    src={IconShare}
-                    alt="image_item"
-                    className="icon_action"
-                  />
-                </Button>
-                <Button className="btn-item">
-                  <Box
-                    className="box-gray text-center box-support"
-                    display={"flex"}
-                    justifyContent={"center"}
-                    alignItems={"center"}
-                  >
-                    <img
-                      src={IconSupport}
-                      alt="image_item"
-                      className="icon_support"
-                    />
-                  </Box>
-                </Button>
-              </Box>
-            </Grid>
-          </Grid>
-        </Box>
-      </Box>
-    </Box>
-  );
-}
-
-export default ItemResult;

package/src/components/search/ListSearch.tsx

@@ -1,209 +0,0 @@
-import * as React from "react";
-import {
-  DataGrid,
-} from "@material-ui/data-grid";
-import { Box, Button, Typography } from "@material-ui/core";
-import ViewOff from "common/assets/icons/view_off.png";
-import ImageTest from "common/assets/images/image_test.png";
-import MoreVertOutlinedIcon from "@material-ui/icons/MoreVertOutlined";
-import KeyboardArrowUpOutlinedIcon from "@material-ui/icons/KeyboardArrowUpOutlined";
-import KeyboardArrowDownOutlinedIcon from "@material-ui/icons/KeyboardArrowDownOutlined";
-// image_test.png
-const handleCellClick = (param: any, event: any) => {
-  // console.log(param);
-  // console.log(event);
-  if (param.colIndex === 2) {
-    event.stopPropagation();
-  }
-};
-
-const handleRowClick = (param: any, event: any) => {
-  // console.log("Row:");
-  // console.log(param);
-  // console.log(event);
-};
-
-const columns: any = [
-  {
-    field: "time",
-    headerName: "Time",
-    width: 42,
-    renderHeader: (params: any) => {
-      return (
-        <Typography className="text-f9 text-white fw-700">Time</Typography>
-      );
-    },
-    renderCell: (cellValues: any) => {
-      console.log("cellValues", cellValues);
-      return (
-        <Typography className="text-f9 fw-500 text-gray2">
-          {cellValues.value}
-        </Typography>
-      );
-    },
-  },
-  {
-    field: "search",
-    headerName: "Search",
-    width: 139,
-    renderHeader: (params: any) => {
-      return (
-        <Typography className="text-f9 text-white fw-700">Search</Typography>
-      );
-    },
-    renderCell: (cellValues: any) => {
-      console.log("cellValues", cellValues);
-      return (
-        <Box display={"flex"} alignItems={"center"}>
-          <Box className="box-image-search">
-            <img src={cellValues?.row.search.image} alt="img_search" />
-          </Box>
-          <Typography className="text-f9 text-gray2 fw-500">
-            {cellValues?.row.search.text}
-          </Typography>
-        </Box>
-      );
-    },
-  },
-  {
-    field: "order",
-    headerName: "Order",
-    width: 112,
-    renderHeader: (params: any) => {
-      return (
-        <Typography className="text-f9 text-white fw-700">Order</Typography>
-      );
-    },
-    renderCell: (cellValues: any) => {
-      console.log("cellValues", cellValues);
-      return (
-        <Typography className="text-f9 text-gray2 fw-500">
-          {cellValues?.row.order ? cellValues?.row.order : "_"}
-        </Typography>
-      );
-    },
-  },
-  {
-    field: "device",
-    headerName: "Device",
-    width: 161,
-    // align: "left",
-    renderHeader: (params: any) => {
-      return (
-        <Typography className="text-f9 text-white fw-700">Device</Typography>
-      );
-    },
-    renderCell: (cellValues: any) => {
-      console.log("cellValues", cellValues);
-      return (
-        <Typography className="text-f9 text-gray2 fw-500">
-          {cellValues?.row.device ? cellValues?.row.device : "_"}
-        </Typography>
-      );
-    },
-  },
-  {
-    field: "more",
-    headerName: "More",
-    sortable: false,
-    width: 48,
-    // valueGetter: (params: any) => {
-    //   return `${params.getValue(params.id, "firstName") || ""} ${
-    //     params.getValue(params.id, "lastName") || ""
-    //   }`;
-    // },
-    renderHeader: (params: any) => {
-      return (
-        <Typography className="text-f9 text-white fw-700">More</Typography>
-      );
-    },
-    renderCell: (cellValues: any) => {
-      console.log("cellValues", cellValues);
-      return (
-        <Box>
-          <Button>
-            <MoreVertOutlinedIcon style={{ fontSize: 12 }} />
-          </Button>
-        </Box>
-      );
-    },
-  },
-];
-
-const rows = [
-  {
-    id: 1,
-    time: "14:32",
-    search: {
-      image: ViewOff,
-      text: "engine bühler",
-    },
-    order: "",
-    device: "Desktop app",
-    more: "",
-  },
-  {
-    id: 2,
-    time: "14:32",
-    search: {
-      image: ImageTest,
-      text: "",
-    },
-    order: "Secondary search",
-    device: "Desktop app",
-    more: "",
-  },
-  {
-    id: 3,
-    time: "14:32",
-    search: {
-      image: ViewOff,
-      text: "engine bühler",
-    },
-    order: "",
-    device: "Desktop app",
-    more: "",
-  },
-];
-
-export default function ListSearch() {
-  return (
-    <>
-      <Box>
-        <Typography
-          className="text-f12 text-gray2 box-gray2 fw-700"
-          style={{ padding: "2px 10px" }}
-        >
-          Monday January 1st, 2021
-        </Typography>
-      </Box>
-      <DataGrid
-        // rowHeight={32}
-        // className={classes.root}
-        rows={rows}
-        columns={columns}
-        // pageSize={100}
-        checkboxSelection
-        onCellClick={handleCellClick}
-        onRowClick={handleRowClick}
-        disableSelectionOnClick
-        hideFooter
-        disableColumnMenu
-        autoHeight
-        components={{
-          ColumnSortedAscendingIcon: () => (
-            <KeyboardArrowUpOutlinedIcon
-              style={{ fontSize: 12, color: "#fff" }}
-            />
-          ),
-          ColumnSortedDescendingIcon: () => (
-            <KeyboardArrowDownOutlinedIcon
-              style={{ fontSize: 12, color: "#fff" }}
-            />
-          ),
-          // Checkbox: (props) => <div>{...props}</div>
-        }}
-      />
-    </>
-  );
-}