Refactor/list

app/components/list/index.tsx

@@ -6,6 +6,7 @@ import { tw } from "~/utils/tw";
 import { EmptyState } from "./empty-state";
 
 import { ListHeader } from "./list-header";
+import type { ListItemProps } from "./list-item";
 import { ListItem } from "./list-item";
 import { Pagination } from "./pagination";
 import { Table } from "../table";
@@ -17,15 +18,14 @@ export const List = ({
   ItemComponent,
   headerChildren,
   hideFirstHeaderColumn = false,
-  navigate,
   className,
   customEmptyStateContent,
+  link,
+  onRowClick,
 }: {
   ItemComponent: any;
   headerChildren?: ReactNode;
   hideFirstHeaderColumn?: boolean;
-  /** Function to be passed if the rows of the table should navigate */
-  navigate?: (id: string) => void;
   className?: string;
   customEmptyStateContent?: {
     title: string;
@@ -34,6 +34,8 @@ export const List = ({
     newButtonContent: string;
     buttonProps?: any;
   };
+  link?: ListItemProps["link"];
+  onRowClick?: ListItemProps["onClick"];
 }) => {
   const { items } = useLoaderData<IndexResponse>();
   const hasItems = items?.length > 0;
@@ -56,7 +58,12 @@ export const List = ({
             />
             <tbody>
               {items.map((item) => (
-                <ListItem item={item} key={item.id} navigate={navigate}>
+                <ListItem
+                  item={item}
+                  key={item.id}
+                  link={link}
+                  onClick={onRowClick}
+                >
                   <ItemComponent item={item} />
                 </ListItem>
               ))}

app/components/list/list-item.tsx

@@ -1,22 +1,38 @@
-import { tw } from "~/utils/tw";
+import { Link, type LinkProps } from "@remix-run/react";
 
 export interface ListItemData {
   id: string;
 }
+
+export type ListItemProps = {
+  item: ListItemData;
+  children: React.ReactNode;
+  link?: ((itemId: string) => LinkProps) | null;
+  onClick?: ((itemId: string) => void) | null;
+};
+
 export const ListItem = ({
   item,
   children,
-  navigate,
-}: {
-  item: ListItemData;
-  children: React.ReactNode;
-  navigate?: (id: string) => void;
-}) => (
+  link = null,
+  onClick,
+}: ListItemProps) => (
   <tr
     key={item.id}
-    onClick={navigate ? () => navigate(item.id) : undefined}
-    className={tw("hover:bg-gray-50", navigate ? "cursor-pointer" : "")}
+    className="hover:bg-gray-50"
+    onClick={() => {
+      onClick && onClick(item.id);
+    }}
   >
-    {children}
+    {link ? (
+      <Link
+        {...link(item.id)}
+        className="m-0 contents w-full border p-0 align-middle"
+      >
+        {children}
+      </Link>
+    ) : (
+      children
+    )}
   </tr>
 );

app/routes/_layout+/admin-dashboard+/users.tsx

@@ -1,7 +1,6 @@
 import type { User } from "@prisma/client";
 import type { LoaderFunctionArgs } from "@remix-run/node";
 import { redirect, json } from "@remix-run/node";
-import { useNavigate } from "@remix-run/react";
 import { ErrorContent } from "~/components/errors";
 import type { HeaderData } from "~/components/layout/header/types";
 import { List } from "~/components/list";
@@ -57,7 +56,6 @@ export async function loader({ context, request }: LoaderFunctionArgs) {
 }
 
 export default function Area51() {
-  const navigate = useNavigate();
   return (
     <div>
       <h1>Admin dashboard</h1>
@@ -67,7 +65,7 @@ export default function Area51() {
         </Filters>
         <List
           ItemComponent={ListUserContent}
-          navigate={(itemId) => navigate(`../${itemId}`)}
+          link={(itemId) => ({ to: `../${itemId}` })}
         />
       </div>
     </div>

app/routes/_layout+/assets._index.tsx

@@ -7,7 +7,7 @@ import type {
 } from "@remix-run/node";
 import { json } from "@remix-run/node";
 import type { ShouldRevalidateFunctionArgs } from "@remix-run/react";
-import { useLoaderData, useNavigate } from "@remix-run/react";
+import { useLoaderData } from "@remix-run/react";
 import { redirect } from "react-router";
 import { AssetImage } from "~/components/assets/asset-image";
 import { AssetStatusBadge } from "~/components/assets/asset-status-badge";
@@ -248,7 +248,6 @@ export const meta: MetaFunction<typeof loader> = ({ data }) => [
 ];
 
 export default function AssetIndexPage() {
-  const navigate = useNavigate();
   const hasFiltersToClear = useSearchParamHasValue(
     "category",
     "tag",
@@ -352,7 +351,7 @@ export default function AssetIndexPage() {
         </Filters>
         <List
           ItemComponent={ListAssetContent}
-          navigate={(itemId) => navigate(itemId)}
+          link={(itemId) => ({ to: itemId })}
           className=" overflow-x-visible md:overflow-x-auto"
           headerChildren={
             <>

app/routes/_layout+/bookings.$bookingId.add-assets.tsx

@@ -305,7 +305,7 @@ export default function AddAssetsToNewBooking() {
         <List
           ItemComponent={RowComponent}
           /** Clicking on the row will add the current asset to the atom of selected assets */
-          navigate={(assetId) => {
+          onRowClick={(assetId) => {
             setSelectedAssets((selectedAssets) =>
               selectedAssets.includes(assetId)
                 ? selectedAssets.filter((id) => id !== assetId)

app/routes/_layout+/bookings.tsx

@@ -3,7 +3,7 @@ import { BookingStatus, OrganizationRoles } from "@prisma/client";
 import type { MetaFunction, LoaderFunctionArgs } from "@remix-run/node";
 import { json } from "@remix-run/node";
 import type { ShouldRevalidateFunction } from "@remix-run/react";
-import { Link, Outlet, useMatches, useNavigate } from "@remix-run/react";
+import { Link, Outlet, useMatches } from "@remix-run/react";
 import { AvailabilityBadge } from "~/components/booking/availability-label";
 import { StatusFilter } from "~/components/booking/status-filter";
 import { ErrorContent } from "~/components/errors";
@@ -155,7 +155,6 @@ export type RouteHandleWithName = {
 };
 
 export default function BookingsIndexPage() {
-  const navigate = useNavigate();
   const matches = useMatches();
 
   const currentRoute: RouteHandleWithName = matches[matches.length - 1];
@@ -188,7 +187,7 @@ export default function BookingsIndexPage() {
         />
         <List
           ItemComponent={ListAssetContent}
-          navigate={(id) => navigate(id)}
+          link={(id) => ({ to: id })}
           className=" overflow-x-visible md:overflow-x-auto"
           headerChildren={
             <>

app/routes/_layout+/locations.$locationId.add-assets.tsx

@@ -382,7 +382,7 @@ export default function AddAssetsToLocation() {
         <List
           ItemComponent={RowComponent}
           /** Clicking on the row will add the current asset to the atom of selected assets */
-          navigate={(assetId) => {
+          onRowClick={(assetId) => {
             setSelectedAssets((selectedAssets) =>
               selectedAssets.includes(assetId)
                 ? selectedAssets.filter((id) => id !== assetId)

app/routes/_layout+/locations.$locationId.tsx

@@ -6,7 +6,7 @@ import type {
   LoaderFunctionArgs,
   MetaFunction,
 } from "@remix-run/node";
-import { useLoaderData, useNavigate } from "@remix-run/react";
+import { useLoaderData } from "@remix-run/react";
 import mapCss from "maplibre-gl/dist/maplibre-gl.css?url";
 import { z } from "zod";
 import { AssetImage } from "~/components/assets/asset-image";
@@ -169,7 +169,6 @@ export async function action({ context, request, params }: ActionFunctionArgs) {
 
 export default function LocationPage() {
   const { location, mapData } = useLoaderData<typeof loader>();
-  const navigate = useNavigate();
 
   return (
     <div>
@@ -267,7 +266,7 @@ export default function LocationPage() {
             </Filters>
             <List
               ItemComponent={ListAssetContent}
-              navigate={(itemId) => navigate(`/assets/${itemId}`)}
+              link={(itemId) => ({ to: `/assets/${itemId}` })}
               headerChildren={
                 <>
                   <Th className="hidden md:table-cell">Category</Th>

app/routes/_layout+/locations._index.tsx

@@ -1,7 +1,6 @@
 import type { Asset, Image as ImageDataType, Location } from "@prisma/client";
 import { json } from "@remix-run/node";
 import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
-import { useNavigate } from "@remix-run/react";
 
 import Header from "~/components/layout/header";
 import type { HeaderData } from "~/components/layout/header/types";
@@ -87,7 +86,6 @@ export const meta: MetaFunction<typeof loader> = ({ data }) => [
 ];
 
 export default function LocationsIndexPage() {
-  const navigate = useNavigate();
   return (
     <>
       <Header>
@@ -105,7 +103,7 @@ export default function LocationsIndexPage() {
         <Filters />
         <List
           ItemComponent={ListItemContent}
-          navigate={(itemId) => navigate(itemId)}
+          link={(itemId) => ({ to: itemId })}
           headerChildren={
             <>
               <Th className="hidden md:table-cell">Assets</Th>

app/routes/qr+/$qrId_.link-existing-asset.tsx

@@ -302,7 +302,7 @@ export default function QrLinkExisting() {
         <List
           ItemComponent={RowComponent}
           /** Clicking on the row will add the current asset to the atom of selected assets */
-          navigate={handleSelectAsset}
+          onRowClick={handleSelectAsset}
           customEmptyStateContent={{
             title: "You haven't added any assets yet.",
             text: "What are you waiting for? Create your first asset now!",