Feature/shelter map with user current location

package.json

@@ -26,12 +26,14 @@
     "clsx": "^2.1.1",
     "date-fns": "^3.6.0",
     "formik": "^2.4.6",
+    "leaflet": "^1.9.4",
     "lucide-react": "^0.378.0",
     "qs": "^6.12.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.51.4",
     "react-input-mask": "^2.0.4",
+    "react-leaflet": "^4.2.1",
     "react-router-dom": "^6.23.0",
     "react-select": "^5.8.0",
     "tailwind-merge": "^2.3.0",
@@ -40,6 +42,7 @@
     "zod": "^3.23.6"
   },
   "devDependencies": {
+    "@types/leaflet": "^1.9.12",
     "@types/node": "^20.12.8",
     "@types/qs": "^6.9.15",
     "@types/react": "^18.2.66",

src/App.tsx

@@ -4,6 +4,7 @@ import { BrowserRouter } from 'react-router-dom';
 import { Routes } from './routes/Routes';
 import { SessionProvider } from './contexts';
 import { Toaster } from './components/ui/toaster';
+import 'leaflet/dist/leaflet.css'
 
 const App = () => {
   return (

src/hooks/usePaginatedQuery/paths.ts

@@ -2,4 +2,5 @@ export enum PaginatedQueryPath {
   Shelters = '/shelters',
   SupplyCategories = '/supply-categories',
   Supplies = '/supplies',
+  Map = '/map',
 }

src/hooks/useShelters/types.ts

@@ -29,4 +29,5 @@ export interface IUseSheltersDataSupplyData {
 
 export interface IUseShelterOptions {
   cache?: boolean;
+  getAllShelters?: boolean;
 }

src/hooks/useShelters/useShelters.tsx

@@ -7,15 +7,39 @@ import { IPaginatedResponse } from '../usePaginatedQuery/types';
 import { IUseShelterOptions, IUseSheltersData } from './types';
 
 const useShelters = (options: IUseShelterOptions = {}) => {
-  const { cache } = options;
+  const { cache, getAllShelters } = options;
   const [loading, setLoading] = useState<boolean>(false);
   const [data, setData] = useState<IPaginatedResponse<IUseSheltersData>>({
     count: 0,
     page: 1,
     perPage: 20,
     results: [],
   });
+  const [allSheltersData, setAllSheltersData] = useState<IUseSheltersData[]>([]);
 
+  const fetchAllShelters = useCallback(async () => {
+    try {
+      setLoading(true);
+      const response = await api.get<IServerResponse<any>>('/shelters/all', {
+        params: {
+          orderBy: 'prioritySum',
+          order: 'desc',
+        },
+      });
+      const { results } = response.data.data;
+
+      setAllSheltersData(results);
+
+    } catch (error) {
+      console.error('Error getting all shelters:', error);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+
+
+
   const refresh = useCallback(
     (config: AxiosRequestConfig<any> = {}, append: boolean = false) => {
       const { search, ...rest } = (config ?? {}).params ?? {};
@@ -57,10 +81,15 @@ const useShelters = (options: IUseShelterOptions = {}) => {
   );
 
   useEffect(() => {
-    refresh();
-  }, [refresh]);
+
+    if (getAllShelters) {
+      fetchAllShelters()
+    } else {
+      refresh();
+    }
+  }, [fetchAllShelters, getAllShelters, refresh]);
 
-  return { data, loading, refresh };
+  return { data, loading, refresh, allSheltersData };
 };
 
 export { useShelters };

src/pages/Home/components/ShelterListView/ShelterListView.tsx

@@ -1,5 +1,5 @@
 import React, { Fragment } from 'react';
-import { CircleAlert, ListFilter, Loader } from 'lucide-react';
+import { CircleAlert, ListFilter, Loader, MapIcon } from 'lucide-react';
 
 import {
   Alert,
@@ -10,7 +10,7 @@ import {
 import { Button } from '@/components/ui/button';
 import { cn } from '@/lib/utils';
 import { IShelterListViewProps } from './types';
-import { useSearchParams } from 'react-router-dom';
+import { useNavigate, useSearchParams } from 'react-router-dom';
 
 const ShelterListView = React.forwardRef<HTMLDivElement, IShelterListViewProps>(
   (props, ref) => {
@@ -28,6 +28,7 @@ const ShelterListView = React.forwardRef<HTMLDivElement, IShelterListViewProps>(
       onClearSearch,
       ...rest
     } = props;
+    const navigate = useNavigate();
 
     const [searchParams] = useSearchParams();
 
@@ -60,6 +61,15 @@ const ShelterListView = React.forwardRef<HTMLDivElement, IShelterListViewProps>(
             <ListFilter className="h-5 w-5 stroke-blue-500" />
             Filtros
           </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="flex gap-2 items-center text-blue-500 hover:text-blue-600 active:text-blue-700"
+            onClick={() => navigate('/map')}
+          >
+            <MapIcon className="h-5 w-5 stroke-blue-500" />
+            Mapa
+          </Button>
           {searchParams.toString() && (
             <Button
               variant="ghost"

src/pages/Map/Map.tsx

@@ -0,0 +1,88 @@
+import { ChevronLeft, PawPrint } from 'lucide-react';
+import { useNavigate } from 'react-router-dom';
+import { Header, VerifiedBadge } from '@/components';
+import { Button } from '@/components/ui/button';
+import { useShelters } from '@/hooks';
+import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
+import { useEffect, useState } from 'react';
+import { getAvailabilityProps } from '@/lib/utils';
+
+const MapComponent = () => {
+  const navigate = useNavigate();
+  const { allSheltersData  } = useShelters({getAllShelters: true});
+  const [userLocation, setUserLocation] = useState<[number, number] | null>(null);
+
+  useEffect(() => {
+    navigator.geolocation.getCurrentPosition((position) => {
+      setUserLocation([position.coords.latitude, position.coords.longitude]);
+    });
+
+  }, [])
+
+
+  return (
+
+
+    <div className="flex flex-col h-screen items-center">
+      <Header
+        title="Mapa de abrigos"
+        className="bg-white [&_*]:text-zinc-800 border-b-[1px] border-b-border"
+        startAdornment={
+          <Button
+            variant="ghost"
+            className="[&_svg]:stroke-blue-500"
+            onClick={() => navigate('/')}
+          >
+            <ChevronLeft size={20} />
+          </Button>
+        }
+      />
+      <div className="p-4 flex flex-col max-w-5xl w-full gap-3 items-start h-full">
+        <p>Abrigos com coordenadas cadastradas</p>
+        <MapContainer 
+          center={userLocation || [-29.89020757796022, -51.14125020208303]}
+          zoom={10}
+          scrollWheelZoom={true}
+          style={{ height: '400px', width: '100%' }}
+        >
+          <TileLayer
+            attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+          />
+            {userLocation && (
+              <Marker position={userLocation}>
+                <Popup>Você está aqui</Popup>
+              </Marker>
+            )}
+            {allSheltersData?.map((item) => {
+              const shelterItemProps = getAvailabilityProps(item.capacity, item.shelteredPeople);
+              if (item.latitude && item.longitude) {
+                return (
+                  <Marker key={item.id} position={[parseFloat(item.latitude), parseFloat(item.longitude)]}>
+                    <Popup>
+                      <div className='flex flex-col gap-4 p-1' >
+                        <div>
+                          <div className='font-semibold'>{item.name}</div>
+                          {item.address}
+                        </div>
+                        <div aria-label='ete'>
+                          {item.petFriendly && <PawPrint size={20}/>}
+                          {item.verified && <VerifiedBadge />}
+                        </div>
+                        <div className={shelterItemProps.className}>
+                          {shelterItemProps.availability}
+                        </div>
+                      </div>
+                    </Popup>
+                  </Marker>
+                );
+              }
+              return null;
+            })}
+        </MapContainer>
+      </div>
+    </div>
+  );
+};
+
+export { MapComponent };

src/pages/Map/index.ts

@@ -0,0 +1,3 @@
+import { MapComponent } from './Map';
+
+export { MapComponent };

src/pages/Map/types.ts

@@ -0,0 +1 @@
+export {};

src/pages/index.ts

@@ -7,6 +7,7 @@ import { CreateSupply } from './CreateSupply';
 import { CreateShelter } from './CreateShelter';
 import { UpdateShelter } from './UpdateShelter';
 import { Filter } from './Home/components/Filter';
+import { MapComponent } from './Map';
 
 export {
   SignIn,
@@ -16,5 +17,6 @@ export {
   CreateSupply,
   CreateShelter,
   UpdateShelter,
-  Filter
+  Filter,
+  MapComponent
 };

src/routes/Routes.tsx

@@ -8,6 +8,7 @@ import {
   EditShelterSupply,
   SignIn,
   UpdateShelter,
+  MapComponent
 } from '@/pages';
 
 const Routes = () => {
@@ -24,6 +25,7 @@ const Routes = () => {
       <Route path="/" element={<Home />} />
       <Route path="/entrar" element={<SignIn />} />
       <Route path="*" element={<Navigate to="/" />} />
+      <Route path="/map" element={<MapComponent />} />      
     </Switch>
   );
 };