diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx index 34974eb..75afd11 100755 --- a/src/components/Badge.tsx +++ b/src/components/Badge.tsx @@ -5,6 +5,7 @@ import classNames from "classnames"; import { StyleType } from "core/_variants"; import React from "react"; +import {ReactComponent as DeleteIcon} from "./Filters/svg/chest.svg" /* -------------------------------------------------------------------------- */ /* Component props */ @@ -15,7 +16,8 @@ type Props = { children: React.ReactNode; className?: string; iconed?: boolean; - onClick?: () => void; + onClick?: (element: any) => void; + closeOption?: Boolean; } & Omit, "">; /* -------------------------------------------------------------------------- */ @@ -27,17 +29,18 @@ function Badge({ children, onClick, emphasis = "low", + closeOption = false, ...props }: Props): JSX.Element { return ( + <> {children} + {closeOption && ( + + )} + ); } export default Badge; diff --git a/src/components/Checkbox.tsx b/src/components/Checkbox.tsx index d13b86b..913ceb0 100755 --- a/src/components/Checkbox.tsx +++ b/src/components/Checkbox.tsx @@ -1,12 +1,12 @@ import React from "react"; import classNames from "classnames"; -import { ReactComponent as Checkmark } from "assets/svg/check.svg"; +import { ReactComponent as Checkmark } from "../assets/svg/arrow-down.svg"; export type Props = { /** * Control the state of checkbox */ - isChecked: boolean; + isChecked?: boolean; /** * An Element next to the checkbox */ @@ -33,12 +33,8 @@ const Checkbox = ({ children, className, isChecked, ...props }: Props) => { checked={isChecked} {...props} /> -
- +
+
{children} diff --git a/src/components/Disclosure.tsx b/src/components/Disclosure.tsx new file mode 100644 index 0000000..e17f290 --- /dev/null +++ b/src/components/Disclosure.tsx @@ -0,0 +1,55 @@ +/* -------------------------------------------------------------------------- */ +/* Imports */ +/* -------------------------------------------------------------------------- */ +import React from "react"; +import { Disclosure as Disclose } from "@headlessui/react"; +import { ReactComponent as SelectIcon } from "../assets/svg/arrow-down.svg"; +import classNames from "classnames"; +/* -------------------------------------------------------------------------- */ +/* Component props */ +/* -------------------------------------------------------------------------- */ +type Props = { + children?: React.ReactNode; + className?: string; + caption?: string; +}; +/* -------------------------------------------------------------------------- */ +/* styles */ +/* -------------------------------------------------------------------------- */ +const ButtonStyle = ` +flex w-full +justify-between +items-center +py-2 text-left +text-base +font-medium +text-black-400 +`; +/* -------------------------------------------------------------------------- */ +/* Component implementation */ +/* -------------------------------------------------------------------------- */ +export default function Disclosure({ children, className, caption }: Props) { + return ( +
+
+ + {({ open }) => ( + <> + + {caption} + + + + {children} + + + )} + +
+
+ ); +} diff --git a/src/components/Filters/AppiledFilters.tsx b/src/components/Filters/AppiledFilters.tsx new file mode 100644 index 0000000..570382f --- /dev/null +++ b/src/components/Filters/AppiledFilters.tsx @@ -0,0 +1,64 @@ +/* -------------------------------------------------------------------------- */ +/* Imports */ +/* -------------------------------------------------------------------------- */ +import React from "react"; +import Badge from "components/Badge"; +import { IProduct } from "./IProdutct"; +import classNames from "classnames"; +/* -------------------------------------------------------------------------- */ +/* Component props */ +/* -------------------------------------------------------------------------- */ +type Props = { + hints?: IProduct[]; + delFilter: (element: IProduct) => void; + clearAll: () => void; + className?: string; +}; +/* -------------------------------------------------------------------------- */ +/* Component implementation */ +/* -------------------------------------------------------------------------- */ +export default function AppiledFilters({ + hints, + delFilter, + clearAll, + className, +}: Props) { + return ( + <> +
+
+
Фильтры
+
+ +
+
+ +
+ + ); +} diff --git a/src/components/Filters/Filter.tsx b/src/components/Filters/Filter.tsx new file mode 100644 index 0000000..384b37d --- /dev/null +++ b/src/components/Filters/Filter.tsx @@ -0,0 +1,109 @@ +import React from "react"; +import Disclosure from "components/Disclosure"; +import AppiledFilters from "./AppiledFilters"; +import SearchFilterBar from "./SearchFilterBar"; +import axios from "axios"; +import { useDebounce } from "./functions/debounce"; +import { IProduct } from "./IProdutct"; + +type Props = { + className?: string; +}; + +export default function Fiter({ className }: Props) { + const [checkedId, setCheckedId] = React.useState>([]); + const [activeFilter, setActiveFilter] = React.useState>([]); + + /* -------------------------------------------------------------------------- */ + /* Test request to demonstrate the basic functionality of the filter */ + /* -------------------------------------------------------------------------- */ + + const [query, setQuery] = React.useState(""); + const [hints, setHints] = React.useState>([]); + + const onChange = (e: React.ChangeEvent) => { + setQuery(e.target.value); + }; + const debounced = useDebounce(query); + + async function fetchProducts() { + const response = await axios.get( + `https://dummyjson.com/products/search?q=${debounced}` + ); + setHints(response.data.products); + } + React.useEffect(() => { + fetchProducts(); + }, [debounced, query]); + + const isChecked = (item: number) => (checkedId.includes(item) ? true : false); + + const handleChange = (e: React.ChangeEvent) => { + const selectedId = parseInt(e.target.value); + + /* ------------- Check if "checkedId" contains "selectedIds" ------------- */ + /* -------------- If true, this checkbox is already checked -------------- */ + + if (checkedId.includes(selectedId)) { + setCheckedId(checkedId.filter((id) => id !== selectedId)); + setActiveFilter(activeFilter.filter((item) => item.id !== selectedId)); + } else { + const newId = [...checkedId]; + newId.push(selectedId); + setCheckedId(newId); + + /* --------------- Adding checked filters to AppliedFilters component -------------- */ + + hints.forEach((hint) => { + if (hint.id === selectedId) + activeFilter.push({ id: selectedId, brand: hint.brand }); + setActiveFilter(activeFilter); + }); + } + }; + + /* ------------- Delete filter from AppliedFilters component ------------- */ + + const DelFilter = (e: IProduct) => { + setActiveFilter(activeFilter.filter((item) => item.id !== e.id)); + setCheckedId(checkedId.filter((id) => id !== e.id)); + }; + const clearAll = () => { + setActiveFilter([]); + setCheckedId([]); + setQuery(""); + }; + //console.log(activeFilter) + return ( + <> +
+
+ + + + + +

контент...

+
+ +

контент...

+
+ +

контент...

+
+
+
+ + ); +} diff --git a/src/components/Filters/IProdutct.ts b/src/components/Filters/IProdutct.ts new file mode 100644 index 0000000..9101267 --- /dev/null +++ b/src/components/Filters/IProdutct.ts @@ -0,0 +1,23 @@ + export interface IProduct { + id?: number; + title?: string; + description?: string; + price?: number; + discountPercentage?: number; + rating?: number; + stock?: number; + brand?: string; + category?: string; + thumbnail?: string; + images?: string[]; + } + + export interface serverResponse { + products: T[]; + total: number; + skip: number; + limit: number; + } + + + diff --git a/src/components/Filters/SearchFilterBar.tsx b/src/components/Filters/SearchFilterBar.tsx new file mode 100644 index 0000000..f9e6362 --- /dev/null +++ b/src/components/Filters/SearchFilterBar.tsx @@ -0,0 +1,117 @@ +import { useState, useCallback, Fragment } from "react"; +import { Combobox, Transition } from "@headlessui/react"; +import { IProduct } from "./IProdutct"; +import Checkbox from "components/Checkbox"; +import { ReactComponent as SearchIcon } from "./svg/searchIcon.svg"; +import classNames from "classnames"; + +type Props = { + hints: IProduct[]; + handleChange: (e: React.ChangeEvent) => void; + isChecked: (item: number) => boolean; + className?: string; + onChange: (e: React.ChangeEvent) => void; + placeHolder: string; + query: string; +}; + +export default function SearchFilterBar({ + hints, + isChecked, + handleChange, + className, + onChange, + placeHolder, + query, +}: Props): JSX.Element { + const [checkList, setCheckList] = useState(hints); + const [showFilters, SetShowFilters] = useState(false); + + const ShowAllFilters = useCallback(() => { + SetShowFilters((prev) => !prev); + }, [SetShowFilters]); + + return ( + <> + + {({ open }) => ( +
+
+
+ +
+ +
+
+
+
+ +
+
+
+ + + {open && ( +
    +
  • + {hints.length >= 5 && query !== "" && ( + + )} +
  • + {hints.length > 0 ? ( + hints.map((item) => ( +
  • + +

    {item.brand}

    +
    +
  • + )) + ) : ( +

    Nothing Found

    + )} +
+ )} +
+
+
+
+ )} +
+ + ); +} diff --git a/src/components/Filters/functions/debounce.ts b/src/components/Filters/functions/debounce.ts new file mode 100644 index 0000000..7d7bc78 --- /dev/null +++ b/src/components/Filters/functions/debounce.ts @@ -0,0 +1,11 @@ +import React from "react"; + +export function useDebounce(value: string, delay: number = 300) { + const [debounced, setDebouced] = React.useState(value); + React.useEffect(() => { + const handler = setTimeout(() => setDebouced(value), delay); + return () => clearTimeout(handler); + }, [value, delay]); + + return debounced; +} diff --git a/src/components/Filters/svg/chest.svg b/src/components/Filters/svg/chest.svg new file mode 100644 index 0000000..3b1d9ff --- /dev/null +++ b/src/components/Filters/svg/chest.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/Filters/svg/searchIcon.svg b/src/components/Filters/svg/searchIcon.svg new file mode 100644 index 0000000..dba33fe --- /dev/null +++ b/src/components/Filters/svg/searchIcon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/pages/SearchResultsPage.tsx b/src/pages/SearchResultsPage.tsx index cca667b..e6d3f35 100644 --- a/src/pages/SearchResultsPage.tsx +++ b/src/pages/SearchResultsPage.tsx @@ -6,6 +6,7 @@ import { SearchResultSection } from "components/SearchResultsSection"; import { useSearchStoreImplementation } from "searchResults/data/searchStoreImplementation"; import { useSearchViewModel } from "searchResults/controller/searchResultsViewModel"; import { Loader } from "components/Loader/Loader"; +import Fiter from "components/Filters/Filter"; export const SearchResultsPage = () => { return (