From 8b4b7b505e682816906aca0fe4c1fa580129bc26 Mon Sep 17 00:00:00 2001
From: Ernest Litvinenko <ernest.litvinenko@mail.ru>
Date: Mon, 18 Mar 2024 03:17:10 +0300
Subject: [PATCH] Fix catalog filters in mobile version. Add accordion
 animations

---
 src/pages/catalog/index.tsx | 121 ++++++++++++++++++++++--------------
 1 file changed, 73 insertions(+), 48 deletions(-)

diff --git a/src/pages/catalog/index.tsx b/src/pages/catalog/index.tsx
index 8dedc08..5c734af 100644
--- a/src/pages/catalog/index.tsx
+++ b/src/pages/catalog/index.tsx
@@ -1,7 +1,7 @@
 import {
     CheckboxGroup,
     Checkbox,
-    Button, Skeleton
+    Button, Skeleton, Accordion, AccordionItem
 } from "@nextui-org/react";
 import Link from "next/link";
 
@@ -19,79 +19,99 @@ import {Img} from "react-image";
 
 
 
+const CheckboxUI = (obj: {id: number, name: string, values: {id: number, value: string}[]}) => {
+    return (
+        <Accordion>
+            <AccordionItem title={obj.name}>
+                <CheckboxGroup>
+                        {obj.values && obj.values.map(val => (
+                            <Checkbox value={String(val.id)} key={"VALUE_" + val.id}>{val.value}</Checkbox>
+                        ))}
+                </CheckboxGroup>
+            </AccordionItem>
+
+        </Accordion>
+    )
+}
 const FilterGenerator = ({filterPropertiesData}: Pick<InferGetStaticPropsType<typeof getStaticProps>, "filterPropertiesData">) => {
     return (
-        <form className={'filters mb-10'}>
-            <h2 className={"text-lg mb-4"}>Фильтры</h2>
-
-            {filterPropertiesData.map( obj => (
-                <CheckboxGroup label={obj.name} key={"FILTER_"+obj.id}>
-                    {obj.values && obj.values.map(val => (
-                        <Checkbox value={String(val.id)} key={"VALUE_"+val.id}>{val.value}</Checkbox>
+        <Accordion className={'filters mb-10 mr-4 lg:w-1/4 w-full'} defaultExpandedKeys={['1']}>
+            <AccordionItem title={"Фильтры"} key={"1"} aria-label={"Фильтры"} classNames={{trigger:"bg-primary px-4", base: "border-1 rounded", title: "font-bold"}}>
+                    {filterPropertiesData.map(obj => (
+                        <CheckboxUI key={obj.id} {...obj} />
                     ))}
-                </CheckboxGroup>
-
-            ))}
-        </form>
+            </AccordionItem>
+        </Accordion>
     )
 }
 
 
-type CardProps = InferGetStaticPropsType<typeof getStaticProps>['catalog'][0] & {isFavourite?: boolean}
+type CardProps = InferGetStaticPropsType<typeof getStaticProps>['catalog'][0] & { isFavourite?: boolean }
 
 
 const CatalogCard = (product: CardProps) => {
     const isClient = useClient()
-    const cartItems = useQuery({queryKey: ['cart'], queryFn: async () => {
-        const service = new LocalAPI()
-        return await service.getCartItems()
-    }})
+    const cartItems = useQuery({
+        queryKey: ['cart'], queryFn: async () => {
+            const service = new LocalAPI()
+            return await service.getCartItems()
+        }
+    })
 
 
     const qs = useQueryClient()
 
     const toggleCart = useMutation({
-     mutationFn: async ({productId, quantity}: { productId: number, quantity: number }) => {
-         const service = new LocalAPI()
-         if (cartItems.data!.find(({id}) => id === productId)) {
-             return await service.deleteCartItem(productId)
-         }
-         return await service.addCartItem(productId, quantity)
-     },
+        mutationFn: async ({productId, quantity}: { productId: number, quantity: number }) => {
+            const service = new LocalAPI()
+            if (cartItems.data!.find(({id}) => id === productId)) {
+                return await service.deleteCartItem(productId)
+            }
+            return await service.addCartItem(productId, quantity)
+        },
         onSuccess: () => {
-         qs.invalidateQueries({queryKey: ["cart"]})
+            qs.invalidateQueries({queryKey: ["cart"]})
         }
     })
 
 
     return (
-        <div className={"bg-gray-card w-full h-fit min-h-[250px] py-4 px-7 rounded-[20px] hover:shadow-md transition-shadow hover:cursor-pointer"} key={product.id}>
+        <div
+            className={"bg-gray-card w-full h-fit min-h-[250px] py-4 px-7 rounded-[20px] hover:shadow-md transition-shadow hover:cursor-pointer"}
+            key={product.id}>
             <div className={"grid grid-cols-1 sm:grid-cols-10 w-fit relative items-center"}>
                 {
-                    isClient && product.properties.main_image && <Img src={`https://relynolli.ru/upload/${product.properties.main_image[0]}`} alt={product.name} className={"col-auto mx-auto mb-4 sm:col-span-2 sm:row-span-2"} loader={<Skeleton className={"absolute top-0 left-0 right-3/4 rounded-[20px] h-full"} />}/>
+                    isClient && product.properties.main_image &&
+                    <Img src={`https://relynolli.ru/upload/${product.properties.main_image[0]}`} alt={product.name}
+                         className={"col-auto mx-auto mb-4 sm:col-span-2 sm:row-span-2"}
+                         loader={<Skeleton className={"absolute top-0 left-0 right-3/4 rounded-[20px] h-full"}/>}/>
                 }
                 <div className="col-auto sm:col-start-4 sm:col-span-6 h-full flex flex-col justify-center">
-                    <span className={"text-[#52525C] font-normal text-subtitle-4 mb-2 block"}>Стандарт API: {product.properties.api_standart} Тип: {product.properties.oil_type}</span>
+                    <span
+                        className={"text-[#52525C] font-normal text-subtitle-4 mb-2 block"}>Стандарт API: {product.properties.api_standart} Тип: {product.properties.oil_type}</span>
                     <h3 className={"font-bold text-lg uppercase text-black-3"}>{product.name}</h3>
                 </div>
                 {
                     isClient ?
-                    <FavouriteIcon onClick={() => toggleFavourite(product.id)} className={`transition-colors absolute z-20 top-0 right-0 ${product.isFavourite ? "fill-primary" : "fill-[#E0E3E3]"}`}/> : null
+                        <FavouriteIcon onClick={() => toggleFavourite(product.id)}
+                                       className={`transition-colors absolute z-20 top-0 right-0 ${product.isFavourite ? "fill-primary" : "fill-[#E0E3E3]"}`}/> : null
                 }
 
-                <div className="flex col-auto row-auto sm:row-start-2 sm:col-start-4 sm:col-span-7 justify-between w-full items-center pt-4">
+                <div
+                    className="flex col-auto row-auto sm:row-start-2 sm:col-start-4 sm:col-span-7 justify-between w-full items-center pt-4">
                                                 <span className="font-bold text-xl text-black-3">
                                                     {`${product.price.BASE}`.replace(/\B(?=(\d{3})+(?!\d))/g, ' ')} ₽
                                                 </span>
                     {
                         isClient ?
-                        <Button onClick={() => toggleCart.mutate({
-                            productId: product.id,
-                            quantity: 1
-                        })} className={"font-bold text-lg bg-green-2 uppercase italic text-black-3 relative z-20"}>{cartItems.data?.map(({id}) => id).includes(product.id) ? "В корзине" : "В корзину"}</Button> : null
+                            <Button onClick={() => toggleCart.mutate({
+                                productId: product.id,
+                                quantity: 1
+                            })}
+                                    className={"font-bold text-lg bg-green-2 uppercase italic text-black-3 relative z-20"}>{cartItems.data?.map(({id}) => id).includes(product.id) ? "В корзине" : "В корзину"}</Button> : null
                     }
 
-                <Link href={'/catalog/' + product.code} className={'absolute top-0 left-0 z-10 w-full h-full'}/>
+                    <Link href={'/catalog/' + product.code} className={'absolute top-0 left-0 z-10 w-full h-full'}/>
 
                 </div>
             </div>
@@ -104,20 +124,21 @@ const Catalog = (props: InferGetStaticPropsType<typeof getStaticProps>) => {
     const {favourites} = useSnapshot(favouritesStore)
 
     return (<Wrapper title={"Каталог"} breadcrumbs={[{name: "Каталог", link: "/catalog"}]}>
-                    <div className="flex flex-col justify-between lg:flex-row">
-                        <FilterGenerator filterPropertiesData={props.filterPropertiesData}/>
+            <div className="flex flex-col justify-between lg:flex-row">
+                <FilterGenerator filterPropertiesData={props.filterPropertiesData}/>
 
-                        <div className="products grid grid-cols-1 2xl:grid-cols-2 gap-7 lg:w-3/4 h-fit w-full">
+                <div className="products grid grid-cols-1 2xl:grid-cols-2 gap-7 lg:w-3/4 h-fit w-full">
 
-                            {
-                                props.catalog.map(product =>
-                                    <>
-                                        <CatalogCard key={product.id} {...product} isFavourite={favourites.includes(product.id)} />
-                                    </>
-                                )
-                            }
-                        </div>
-                    </div>
+                    {
+                        props.catalog.map(product =>
+                            <>
+                                <CatalogCard key={product.id} {...product}
+                                             isFavourite={favourites.includes(product.id)}/>
+                            </>
+                        )
+                    }
+                </div>
+            </div>
         </Wrapper>
     )
 }
@@ -126,7 +147,11 @@ export default Catalog;
 
 export const getStaticProps = async () => {
     const service = new LocalAPI()
-    const filterData = await service.getFilters() as {id: number, name: string, values: {id: number, value: string}[]}[]
+    const filterData = await service.getFilters() as {
+        id: number,
+        name: string,
+        values: { id: number, value: string }[]
+    }[]
     const catalogData = await service.getCatalogItems() as {
         id: number
         code: string,