fix: cache search params

Author: fagundesjg

src/api/cache.ts

@@ -1,20 +1,22 @@
 import { AxiosResponse, InternalAxiosRequestConfig } from 'axios';
+import qs from 'qs';
 
 function getCacheRequestData(config: InternalAxiosRequestConfig<any>) {
   if (
     config.method === 'get' &&
     config.url &&
     config.headers['x-app-cache'] === 'true'
   ) {
-    const cache = localStorage.getItem(config.url);
+    const url = config.url + '?' + qs.stringify(config.params);
+    const cache = localStorage.getItem(url);
     if (cache) {
       const { data, timestamp } = JSON.parse(cache);
       const ttl = 1000 * 60 * 5; // 5 minutes
       if (new Date().getTime() - timestamp >= ttl) {
-        console.log(`cache - expirado - ${config.url}`);
-        localStorage.removeItem(config.url);
+        console.log(`cache - expirado - ${url}`);
+        localStorage.removeItem(url);
       } else {
-        console.log(`cache - ok - ${config.url}`);
+        console.log(`cache - ok - ${url}`);
         return data;
       }
     }
@@ -23,6 +25,7 @@ function getCacheRequestData(config: InternalAxiosRequestConfig<any>) {
 }
 
 function handleCacheResponse(resp: AxiosResponse<any, any>) {
+  const url = resp.config.url + '?' + qs.stringify(resp.config.params);
   if (
     resp.config.method === 'get' &&
     resp.config.url &&
@@ -32,7 +35,7 @@ function handleCacheResponse(resp: AxiosResponse<any, any>) {
   ) {
     const { data, headers, status, statusText } = resp;
     localStorage.setItem(
-      resp.config.url,
+      url,
       JSON.stringify({
         data: { data, headers, status, statusText },
         timestamp: new Date().getTime(),

src/hooks/useShelters/types.ts

@@ -20,3 +20,7 @@ export interface IUseSheltersDataSupplyData {
   supply: { name: string };
   priority: number;
 }
+
+export interface IUseShelterOptions {
+  cache?: boolean;
+}

src/hooks/useShelters/useShelters.tsx

@@ -4,9 +4,10 @@ import { AxiosRequestConfig } from 'axios';
 import { api } from '@/api';
 import { IServerResponse } from '@/types';
 import { IPaginatedResponse } from '../usePaginatedQuery/types';
-import { IUseSheltersData } from './types';
+import { IUseShelterOptions, IUseSheltersData } from './types';
 
-const useShelters = () => {
+const useShelters = (options: IUseShelterOptions = {}) => {
+  const { cache } = options;
   const [loading, setLoading] = useState<boolean>(false);
   const [data, setData] = useState<IPaginatedResponse<IUseSheltersData>>({
     count: 0,
@@ -18,10 +19,13 @@ const useShelters = () => {
   const refresh = useCallback(
     (config: AxiosRequestConfig<any> = {}, append: boolean = false) => {
       const { search, ...rest } = (config ?? {}).params ?? {};
+      const headers = config.headers ?? {};
+      if (cache) headers['x-app-cache'] = 'true';
       if (!append) setLoading(true);
       api
         .get<IServerResponse<any>>('/shelters', {
           ...config,
+          headers,
           params: {
             orderBy: 'prioritySum',
             order: 'desc',

src/pages/Home/Home.tsx

@@ -20,7 +20,7 @@ const initialFilterData: IFilterFormProps = {
 };
 
 const Home = () => {
-  const { data: shelters, loading, refresh } = useShelters();
+  const { data: shelters, loading, refresh } = useShelters({ cache: true });
   const {
     loading: loadingSession,
     refreshSession,