fix: some bugs

Author: webdevgrisha

src/App.tsx

@@ -1,4 +1,3 @@
-import { useState } from "react";
 import "./App.css";
 import getCotails from "./services/cotails-api";
 

src/components/FilterResult/CustomSelect/CustomSelect.tsx

@@ -7,7 +7,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import getCotails from "@/services/cotails-api";
+import getData from "@/services/cotails-api";
 import { useQuery } from "@tanstack/react-query";
 
 interface CustomSelectProps {
@@ -16,6 +16,7 @@ interface CustomSelectProps {
   placeholder: string;
   path?: string;
   options?: (string | boolean)[];
+  parseKey?: string;
 }
 
 async function getDataForFilter({
@@ -25,7 +26,7 @@ async function getDataForFilter({
 }) {
   const [path] = queryKey;
 
-  const response = getCotails(`${path}`);
+  const response = getData(`${path}`);
 
   return response;
 }
@@ -36,20 +37,37 @@ function CustomSelect({
   path,
   placeholder,
   options = [],
+  parseKey,
 }: CustomSelectProps) {
-  const { data, error } = useQuery([path], getDataForFilter);
+  const { data, error, loading } = useQuery([path], getDataForFilter, {
+    enabled: !!path,
+    staleTime: Infinity,
+    cacheTime: Infinity,
+    refetchOnWindowFocus: false,
+  });
 
-  const dataParse: undefined | string[] = data?.data;
+  let dataParse: undefined | [string, string][];
+
+  if (parseKey && !loading) {
+    dataParse = data?.data.map((dataObj: { [key: string]: string }) => [
+      dataObj.id,
+      dataObj[parseKey],
+    ]);
+  } else {
+    dataParse = data?.data.map((value: string) => [value, value]);
+  }
 
   const RenderSelectItems = () => {
-    const optionArr = path ? dataParse : options;
+    const refactorOptions = options?.map((value) => [value, value]);
+
+    const optionArr = path ? dataParse : refactorOptions;
 
     if (optionArr === undefined) return "Loading data";
 
-    return optionArr.map((option: string | boolean) => {
+    return optionArr.map(([key, value]) => {
       return (
-        <SelectItem value={String(option)}>
-          <span>{String(option)}</span>
+        <SelectItem value={String(key)} key={String(key)}>
+          <span>{String(value)}</span>
         </SelectItem>
       );
     });
@@ -64,6 +82,11 @@ function CustomSelect({
         <SelectValue placeholder={placeholder} />
       </SelectTrigger>
       <SelectContent>
+        {loading && path !== undefined && (
+          <SelectLabel>
+            loading...
+          </SelectLabel>
+        )}
         <SelectGroup>
           <SelectLabel>
             {error && path !== undefined ? "Faild to load data" : placeholder}

src/components/FilterResult/FilterResult.css

@@ -11,6 +11,11 @@
 
 .filter-result > .apply-filters {
     background-color: #1d4ed8;
+    transition: 0.4s background-color;
+
+    &:hover {
+        background-color: #2563eb;
+    }
 }
 
 @media (max-width: 1440px) {

src/components/FilterResult/FilterResult.tsx

@@ -70,9 +70,7 @@ function FilterResult({ fields, searchPlaceholder }: FilterResultProps) {
       {Object.entries(fields).map(([key, config]) => {
         return (
           <CustomSelect
-            placeholder={config.placeholder}
-            path={config.path}
-            options={config.options}
+            {...config}
             value={filterData[key] || ""}
             setValue={(value: string) => handleFilterDataChange(key, value)}
           />

src/components/Loader/Loader.tsx

@@ -1,14 +1,6 @@
 import './Loader.css';
 
-// import { Status } from '../../enums';
-
-// interface LoaderProps {
-//   status: Status;
-// }
-
 function Loader() {
-  console.log('Call lodaer');
-  // alert('Call loader');
   return <span className="loader"></span>;
 }
 

src/components/PageSwitcher/PageSwitcher.tsx

@@ -21,7 +21,6 @@ import {
 import "./PageSwitcher.css";
 import { PageData } from "../../pages/CocktailsPages/interfaces";
 import useCustomSearchParams from "@/hooks/useCustomSearchParams";
-import { Fragment } from "react/jsx-runtime";
 
 interface PageSwitcherProps {
   metaData: PageData | null;
@@ -40,14 +39,12 @@ function PageSwitcher({ metaData }: PageSwitcherProps) {
 
   const handlePageClick = (page: number) => {
     setSearchParams({
-      // ...Object.fromEntries(searchParams.entries()),
       page: page.toString(),
     });
   };
 
   const handlePerPageChange = (value: string) => {
     setSearchParams({
-      // ...Object.fromEntries(searchParams.entries()),
       perPage: value,
     });
   };

src/components/interfaces.ts

@@ -3,6 +3,7 @@ interface FilterFields {
         placeholder: string;
         path?: string;
         options?: string[],
+        parseKey?: string,
     }
 }
 

src/hooks/useCustomSearchParams.ts

@@ -1,6 +1,6 @@
 import { useLocation, useSearchParams } from "react-router-dom";
 import useFavoritesId from "./useFavoritesId";
-import { useEffect, } from "react";
+import { useEffect, useRef, } from "react";
 
 interface NewSearchParams {
     [key: string]: string;
@@ -10,36 +10,42 @@ interface NewSearchParams {
 function useCustomSearchParams(): [URLSearchParams, (newSearchParams: NewSearchParams) => void] {
     const [searchParams, setSearchParams] = useSearchParams();
     const { pathname, search } = useLocation();
+    const previousPathPart = useRef<string | null>(null); 
     const favoritesId = useFavoritesId();
 
     const page = searchParams.get('page') || '1';
     const perPage = searchParams.get('perPage') || '15';
     const pathPart: string = pathname.split("/")[1];
 
-    console.log('useCustomSearchParams: ', location);
-
-    // useEffect(() => {
-    //     window.scrollTo({
-    //         top: 0,
-    //         behavior: "smooth",
-    //       });
-    // }, [pathname])
+    useEffect(() => {
+        window.scrollTo({
+            top: 0,
+            behavior: "smooth",
+        });
+    }, [pathPart, search])
 
     useEffect(() => {
         const saveParams = localStorage.getItem(pathPart);
         const parsedParams = saveParams ? JSON.parse(saveParams) : {};
-        if (pathPart === 'favourites') {
+
+        if (search && pathPart !== previousPathPart.current) {
+            const searchParamsObject = Object.fromEntries(new URLSearchParams(search).entries());
+
+            setCustomSearchParams(searchParamsObject);
+        } else if (pathPart === 'favourites') {
             setCustomSearchParams(parsedParams);
         } else {
             setCustomSearchParams(parsedParams);
         }
 
+        previousPathPart.current = pathPart;
+
     }, [favoritesId, pathPart]);
 
-    const setCustomSearchParams = (newSearchParams: NewSearchParams) => {
+    const setCustomSearchParams = (newSearchParams: NewSearchParams | URLSearchParams) => {
         const newSearchParamsConfig = { page, perPage, ...newSearchParams }
         if (pathPart === 'favourites') {
-            setSearchParams({ id: favoritesId, ...newSearchParamsConfig });
+            setSearchParams({...newSearchParamsConfig, id: favoritesId });
             localStorage.setItem(pathPart, JSON.stringify(newSearchParamsConfig));
         } else {
             setSearchParams(newSearchParamsConfig);

src/layouts/CocktailsLayout/filterFields.ts

@@ -1,6 +1,11 @@
 import { FilterFields } from "@/components/interfaces";
 
 const filterFields: FilterFields = {
+    'ingredientId': {
+        placeholder: "Main ingredient",
+        path: "/ingredients?perPage=1000",
+        parseKey: 'name',
+    },
     'glass': {
         placeholder: "Select a glass",
         path: "/cocktails/glasses",

src/pages/CocktailsPages/CocktailList/CocktailList.tsx

@@ -1,33 +1,46 @@
 import "../../style/CardList.css";
 import "./CocktailList.css";
 import { ResponseData } from "../interfaces";
-import getCotails from "../../../services/cotails-api";
+import getData from "../../../services/cotails-api";
 import { useQuery } from "@tanstack/react-query";
 import CocktailCard from "../CocktailCard/CocktailCard";
 import PageSwitcher from "../../../components/PageSwitcher/PageSwitcher";
 import Loader from "../../../components/Loader/Loader";
 import { Outlet, useLocation } from "react-router-dom";
+import { Button } from "@/components/ui/button";
+import useCustomSearchParams from "@/hooks/useCustomSearchParams";
 
 async function getCards({ queryKey }: { queryKey: [string, string] }) {
-  const [_key, search] = queryKey;
-  const response = await getCotails(`/cocktails${search}`);
+  const [, search] = queryKey;
+  const response = await getData(`/cocktails${search}`);
 
   return response;
 }
 
 function CocktailList() {
+  const [, setSearchParams] = useCustomSearchParams();
   const location = useLocation();
 
   const { search } = location;
 
-  const { data, isLoading, error } = useQuery(["cocktails", search], getCards);
+  const { data, isLoading, error } = useQuery(["cocktails", search], getCards, {
+    staleTime: 5 * 60 * 1000,
+    cacheTime: 15 * 60 * 1000,
+    enabled: !!search,
+    retry: 2,
+    refetchOnWindowFocus: false,
+  });
 
   if (error) return <p>Error loading data.</p>;
 
   const cards = data as ResponseData;
 
   const isNoData = cards?.data?.length === 0;
 
+  const handleResetFilter = () => {
+    setSearchParams({});
+  };
+
   return (
     <>
       {isLoading ? (
@@ -41,8 +54,11 @@ function CocktailList() {
       )}
 
       {isNoData && !isLoading && (
-        <div className="rest-filter">
+        <div className="reset-filter">
           <h3 className="emty-data">No data available for this request</h3>
+          <Button className="reset-filters-btn" onClick={handleResetFilter}>
+            Reset Filter
+          </Button>
         </div>
       )}
       <PageSwitcher metaData={cards?.meta || null} />