Substitui onClick e useNavigate por <Link> para melhorar acessibilidade (#128)

* replaced navigate in favour of html link and added card hover

* fixed lint warnings

Author: sombraSoft

src/pages/Home/Home.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useContext, useMemo, useState } from 'react';
-import { useNavigate, useSearchParams } from 'react-router-dom';
+import { useSearchParams } from 'react-router-dom';
 import { RotateCw, LogOutIcon, PlusIcon } from 'lucide-react';
 import qs from 'qs';
 
@@ -48,7 +48,6 @@ const Home = () => {
     },
     []
   );
-  const navigate = useNavigate();
 
   const clearSearch = useCallback(() => {
     setSearch('');
@@ -161,7 +160,6 @@ const Home = () => {
           setFilterData((prev) => ({ ...prev, search: v }));
           setSearch(v);
         }}
-        onSelectShelter={(s) => navigate(`/abrigo/${s.id}`)}
         hasMoreItems={hasMore}
         onOpenModal={() => setOpenModal(true)}
         onClearSearch={clearSearch}

src/pages/Home/components/ShelterListItem/ShelterListItem.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useMemo } from 'react';
 import { format } from 'date-fns';
-import { useNavigate } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import { ChevronRight } from 'lucide-react';
 
 import {
@@ -20,9 +20,8 @@ import { IUseSheltersDataSupplyData } from '@/hooks/useShelters/types';
 import { ShelterSupplyCategoryRow } from '../ShelterSupplyCategoryRow';
 
 const ShelterListItem = (props: IShelterListItemProps) => {
-  const { data, onClick } = props;
+  const { data } = props;
   const { capacity, shelteredPeople } = data;
-  const navigate = useNavigate();
   const { availability, className: availabilityClassName } =
     useMemo<IShelterAvailabilityProps>(
       () => getAvailabilityProps(capacity, shelteredPeople),
@@ -42,53 +41,52 @@ const ShelterListItem = (props: IShelterListItemProps) => {
   }, []);
 
   return (
-    <div className="flex flex-col p-4 w-full border-2 border-border rounded-md gap-1 relative">
-      <Button size="sm" variant="ghost" className="absolute top-4 right-4">
-        <ChevronRight
-          className="h-5 w-5"
-          onClick={() => navigate(`/abrigo/${data.id}`)}
-        />
-      </Button>
-      <div
-        className="flex items-center gap-1"
-        onClick={() => navigate(`/abrigo/${data.id}`)}
-      >
-        <h3
-          className="font-semibold text-lg  hover:cursor-pointer hover:text-slate-500"
-          onClick={onClick}
+    <Link to={`/abrigo/${data.id}`} target="_blank">
+      <div className="flex flex-col p-4 w-full border-2 border-border rounded-md gap-1 relative hover:bg-accent">
+        <Button size="sm" variant="ghost" className="absolute top-4 right-4">
+          <ChevronRight
+            className="h-5 w-5"
+          />
+        </Button>
+        <div
+          className="flex items-center gap-1"
         >
-          {data.name}
-        </h3>
-        {data.verified && <VerifiedBadge />}
+          <h3
+            className="font-semibold text-lg  hover:cursor-pointer hover:text-slate-500"
+          >
+            {data.name}
+          </h3>
+          {data.verified && <VerifiedBadge />}
+        </div>
+        <h6 className={cn('font-semibold text-md', availabilityClassName)}>
+          {availability}
+        </h6>
+        <h6 className="text-muted-foreground text-sm md:text-lg font-medium">
+          {data.address}
+        </h6>
+        {data.shelterSupplies.length > 0 && (
+          <>
+            <ShelterSupplyCategoryRow
+              title="Necessita voluntários:"
+              tags={tags.NeedVolunteers.map(getChipProps)}
+            />
+            <ShelterSupplyCategoryRow
+              title="Necessita urgente doações de:"
+              tags={tags.NeedDonations.map(getChipProps)}
+            />
+            <ShelterSupplyCategoryRow
+              title="Sobrando para doações:"
+              tags={tags.RemainingSupplies.map(getChipProps)}
+            />
+          </>
+        )}
+        {data.updatedAt && (
+          <small className="text-sm md:text-md font-light text-muted-foreground mt-2">
+            Atualizado em {format(data.updatedAt, 'dd/MM/yyyy HH:mm')}
+          </small>
+        )}
       </div>
-      <h6 className={cn('font-semibold text-md', availabilityClassName)}>
-        {availability}
-      </h6>
-      <h6 className="text-muted-foreground text-sm md:text-lg font-medium">
-        {data.address}
-      </h6>
-      {data.shelterSupplies.length > 0 && (
-        <>
-          <ShelterSupplyCategoryRow
-            title="Necessita voluntários:"
-            tags={tags.NeedVolunteers.map(getChipProps)}
-          />
-          <ShelterSupplyCategoryRow
-            title="Necessita urgente doações de:"
-            tags={tags.NeedDonations.map(getChipProps)}
-          />
-          <ShelterSupplyCategoryRow
-            title="Sobrando para doações:"
-            tags={tags.RemainingSupplies.map(getChipProps)}
-          />
-        </>
-      )}
-      {data.updatedAt && (
-        <small className="text-sm md:text-md font-light text-muted-foreground mt-2">
-          Atualizado em {format(data.updatedAt, 'dd/MM/yyyy HH:mm')}
-        </small>
-      )}
-    </div>
+    </Link>
   );
 };
 

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

@@ -22,7 +22,6 @@ const ShelterListView = React.forwardRef<HTMLDivElement, IShelterListViewProps>(
       hasMoreItems = false,
       onSearchValueChange,
       onFetchMoreData,
-      onSelectShelter,
       className = '',
       onOpenModal,
       onClearSearch,
@@ -83,9 +82,6 @@ const ShelterListView = React.forwardRef<HTMLDivElement, IShelterListViewProps>(
                 <ShelterListItem
                   key={idx}
                   data={s}
-                  onClick={() =>
-                    onSelectShelter ? onSelectShelter(s) : undefined
-                  }
                 />
               ))}
               {hasMoreItems ? (