merge: ads rendering

fix: ads rendering
mikhailmogilnikov · Jun 25, 2024 · 9695cfe · 9695cfe
2 parents 40e9ab8 + fd718b3
commit 9695cfe
Show file tree

Hide file tree

Showing 6 changed files with 83 additions and 54 deletions.
diff --git a/src/page/public/favorite/ui/ads-container.tsx b/src/page/public/favorite/ui/ads-container.tsx
@@ -3,7 +3,8 @@
 import { Ad } from '@albomoni/entities/ad-card/model/ad.type';
 import { apiClient } from '@albomoni/shared/api/base';
 import { AdsInfiniteScroller } from '@albomoni/widgets/infinite-scroller';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
+import { useFavorites } from '@albomoni/features/add-to-favorites/lib/use-favorites';
 import { NoFavorites } from './no-favorites';
 
 export const AdsContainer = ({
@@ -14,22 +15,29 @@ export const AdsContainer = ({
   currencies: { [key: string]: number };
 }) => {
   const [isAds, setIsAds] = useState(true);
+  const { favorites } = useFavorites();
 
-  const fetchAds = async ({ queryKey }: { queryKey: [string, number] }) => {
-    const [_key, page] = queryKey;
-    try {
-      return await apiClient.post<Ad[]>(`favorite/${page}`, {
-        favorites: favoritesArray,
-      });
-    } catch (error) {
-      throw new Error('Error fetching ads');
-    }
-  };
+  const fetchAds =
+    (favoritesIds: number[]) =>
+      async ({ queryKey }: { queryKey: [string, number] }) => {
+        const [_key, page] = queryKey;
+        try {
+          return await apiClient.post<Ad[]>(`favorite/${page}`, {
+            favorites: favoritesIds,
+          });
+        } catch (error) {
+          throw new Error('Error fetching ads');
+        }
+      };
+
+  useEffect(() => {
+    setIsAds(true);
+  }, [favorites]);
 
   return isAds ? (
     <AdsInfiniteScroller
       currencies={currencies}
-      fetchFunc={fetchAds}
+      fetchFunc={fetchAds(favorites)}
       setIsAds={setIsAds}
       queryKey='favorite-scroll'
     />

diff --git a/src/page/public/home/api/get-ads/fetch-ads.ts b/src/page/public/home/api/get-ads/fetch-ads.ts
@@ -1,18 +1,14 @@
 import { Ad } from '@albomoni/entities/ad-card/model/ad.type';
 import { apiClient } from '@albomoni/shared/api/base';
-import { getLocation } from '@albomoni/shared/lib/utils/get-location';
+import { TLocation } from '@albomoni/shared/model/types/location.type';
 
-export const fetchAds = async ({
-  queryKey,
-}: {
-  queryKey: [string, number];
-}) => {
-  const address = getLocation();
-  const [_key, page] = queryKey;
-
-  try {
-    return await apiClient.put<Ad[]>(`ad/page/${page}`, address);
-  } catch (error) {
-    throw new Error('Error fetching ads');
-  }
-};
+export const fetchAds =
+  (address: TLocation) =>
+    async ({ queryKey }: { queryKey: [string, number] }) => {
+      const [_key, page] = queryKey;
+      try {
+        return await apiClient.put<Ad[]>(`ad/page/${page}`, address);
+      } catch (error) {
+        throw new Error('Error fetching ads');
+      }
+    };
diff --git a/src/page/public/home/ui/ads-list/ads-container.tsx b/src/page/public/home/ui/ads-list/ads-container.tsx
@@ -1,8 +1,8 @@
 'use client';
 
 import { AdsInfiniteScroller } from '@albomoni/widgets/infinite-scroller';
-import { useState } from 'react';
-import { getLocation } from '@albomoni/shared/lib/utils/get-location';
+import { useEffect, useState } from 'react';
+import { useLocation } from '@albomoni/shared/lib/providers/location-provider';
 import { fetchAds } from '../../api/get-ads/fetch-ads';
 import { HomeAdsPlaceholder } from './placeholder';
 
@@ -12,13 +12,17 @@ export const AdsContainer = ({
   currencies: { [key: string]: number };
 }) => {
   const [isAds, setIsAds] = useState(true);
-  const location = getLocation();
+  const location = useLocation();
+
+  useEffect(() => {
+    setIsAds(true);
+  }, [location]);
 
   return isAds ? (
     <AdsInfiniteScroller
       setIsAds={setIsAds}
       currencies={currencies}
-      fetchFunc={fetchAds}
+      fetchFunc={fetchAds(location)}
       queryKey={`home-scroll_${location.address}_${location.lon}`}
     />
   ) : (

diff --git a/src/page/public/search/ui/searchlist.tsx b/src/page/public/search/ui/searchlist.tsx
@@ -5,25 +5,33 @@ import { AdsInfiniteScroller } from '@albomoni/widgets/infinite-scroller';
 import { useEffect, useState } from 'react';
 import { useCurrencies } from '@albomoni/shared/lib/providers/currencies-provider';
 import { useRouter } from 'next/navigation';
+import { HomeAdsPlaceholder } from '../../home/ui/ads-list/placeholder';
 import { getSearchResults } from '../api/get-search-results';
 
 export const SearchList = ({ query }: { query: string }) => {
   const [isAds, setIsAds] = useState(true);
-  const { refresh } = useRouter();
+  const { push } = useRouter();
 
   const location = getLocation();
   const currencies = useCurrencies();
 
   useEffect(() => {
-    refresh();
+    if (query) {
+      setIsAds(true);
+    }
+    if (query.length < 3) {
+      push('/');
+    }
   }, [query]);
 
-  return (
+  return isAds ? (
     <AdsInfiniteScroller
       setIsAds={setIsAds}
       currencies={currencies}
       fetchFunc={getSearchResults(query)}
       queryKey={`search_${query}_${location.lon}`}
     />
+  ) : (
+    <HomeAdsPlaceholder />
   );
 };
diff --git a/src/shared/lib/providers/location-provider/index.tsx b/src/shared/lib/providers/location-provider/index.tsx
@@ -1,10 +1,17 @@
 'use client';
 
-import { ReactNode, useEffect } from 'react';
+import {
+  ReactNode,
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+} from 'react';
 import { getGeolocation } from '@albomoni/shared/api/get-geolocation';
 import { googleGeosuggest } from '@albomoni/shared/api/get-google-geosuggest';
 import { getCookie, setCookie } from 'cookies-next';
 import { saveLocation } from '@albomoni/shared/api/save-location';
+import { TLocation } from '@albomoni/shared/model/types/location.type';
 import { useSession } from '../../hooks/use-session';
 import { useModal } from '../modal/lib/use-modal';
 import { EModalStates } from '../modal/model/modal-states.enum';
@@ -14,14 +21,27 @@ type Props = {
   children: ReactNode;
 };
 
+const initialLocation = {
+  address: 'Весь мир',
+  city: 'Весь мир',
+  country: 'Весь мир',
+  country_code: '',
+  lat: 0,
+  lon: 0,
+};
+
+const LocationContext = createContext(initialLocation);
+
 export const LocationProvider = ({ children }: Props) => {
   const cookieLocation = getCookie('location');
+  const [locationState, setLocationState] = useState<TLocation>(
+    cookieLocation ? JSON.parse(cookieLocation) : initialLocation,
+  );
   const { user, isPending } = useSession();
   const token = getCookie('token');
 
   const { setModalState } = useModal();
   const userLocation = user?.address;
-
   useEffect(() => {
     if (!cookieLocation && !isPending) {
       const getGeo = async () => {
@@ -43,29 +63,29 @@ export const LocationProvider = ({ children }: Props) => {
           }
 
           setCookie('location', location);
+          setLocationState(location);
           setModalState(EModalStates.LOCATION);
         } catch (e) {
           console.log(e);
           return;
         }
       };
-
       if (userLocation) {
         const { address, city, country, country_code, lat, lon } = user;
-
-        setCookie('location', {
-          address,
-          city,
-          country,
-          country_code,
-          lat,
-          lon,
-        });
+        const location = { address, city, country, country_code, lat, lon };
+        setLocationState(location);
+        setCookie('location', location);
       } else {
         getGeo();
       }
     }
   }, [isPending]);
 
-  return children;
+  return (
+    <LocationContext.Provider value={locationState}>
+      {children}
+    </LocationContext.Provider>
+  );
 };
+
+export const useLocation = () => useContext(LocationContext);
diff --git a/src/shared/lib/providers/modal/ui/variants/location/index.tsx b/src/shared/lib/providers/modal/ui/variants/location/index.tsx
@@ -2,7 +2,6 @@ import { Button } from '@nextui-org/button';
 import { PiCheckBold, PiMapPinBold, PiPencilSimpleBold } from 'react-icons/pi';
 import Link from 'next/link';
 import { getLocation } from '@albomoni/shared/lib/utils/get-location';
-import { useEffect } from 'react';
 import { ModalScrollableArea } from '../../scrollable-area';
 import { useModal } from '../../../lib/use-modal';
 import { EModalStates } from '../../../model/modal-states.enum';
@@ -11,12 +10,6 @@ export const ModalVariantLocation = () => {
   const { setModalState } = useModal();
   const location = getLocation();
 
-  useEffect(() => {
-    return () => {
-      window.location.reload();
-    };
-  }, []);
-
   return (
     <>
       <ModalScrollableArea>