Refactor LocationList: Extract LocationListView and Simplify Rendering

ohcnetwork · Feb 21, 2025 · 968910b · 968910b
1 parent b36b844
commit 968910b
Show file tree

Hide file tree

Showing 2 changed files with 98 additions and 71 deletions.
diff --git a/src/pages/Facility/settings/locations/LocationList.tsx b/src/pages/Facility/settings/locations/LocationList.tsx
@@ -6,27 +6,18 @@ import { Trans, useTranslation } from "react-i18next";
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
 import { Button } from "@/components/ui/button";
-import { Card, CardContent } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
-import {
-  Table,
-  TableBody,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
 import Page from "@/components/Common/Page";
-import { TableSkeleton } from "@/components/Common/SkeletonLoading";
 
 import query from "@/Utils/request/query";
 import { useView } from "@/Utils/useView";
 import { LocationList as LocationListType } from "@/types/location/location";
 import locationApi from "@/types/location/locationApi";
 
 import LocationSheet from "./LocationSheet";
-import { LocationRow } from "./components/LocationRow";
+import { LocationListView } from "./components/LocationListView";
 
 interface Props {
   facilityId: string;
@@ -190,55 +181,6 @@ export default function LocationList({ facilityId }: Props) {
     setExpandedRows(newExpandedRows);
   }, [searchQuery, data?.results]);
 
-  const renderListView = () => {
-    if (isLoading) {
-      return <TableSkeleton count={6} />;
-    }
-
-    if (!tableData?.length) {
-      return (
-        <Card className="col-span-full">
-          <CardContent className="p-6 text-center text-gray-500">
-            {searchQuery
-              ? t("no_locations_found")
-              : t("no_locations_available")}
-          </CardContent>
-        </Card>
-      );
-    }
-
-    return (
-      <div className="space-y-4">
-        <Table className="border rounded-lg w-full overflow-hidden">
-          <TableHeader>
-            <TableRow>
-              <TableHead className="w-[80%] border text-gray-700 bg-gray-200">
-                {t("name")}
-              </TableHead>
-              <TableHead className="hidden sm:table-cell bg-gray-200 text-gray-700">
-                {t("location_form")}
-              </TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {filteredTopLevelLocations.map((location) => (
-              <LocationRow
-                key={location.id}
-                location={location}
-                expandedRows={expandedRows}
-                toggleRow={toggleRow}
-                getChildren={getChildren}
-                indent={1}
-                onEdit={handleEditLocation}
-                setExpandedRows={setExpandedRows}
-              />
-            ))}
-          </TableBody>
-        </Table>
-      </div>
-    );
-  };
-
   return (
     <Page title={t("locations")} hideTitleOnPage={true} className="p-0">
       <div className="md:px-6 space-y-6">
@@ -342,16 +284,18 @@ export default function LocationList({ facilityId }: Props) {
             </div>
           )}
 
-          {
-            activeTab === "list"
-              ? renderListView()
-              : /* Map view will be added later
-            <div className="h-[600px] bg-gray-100 rounded-lg flex items-center justify-center">
-              <p className="text-gray-500">{t("map_view_coming_soon")}</p>
-            </div>
-            */
-                renderListView() // Default to list view for now
-          }
+          {/* Map view will be added later, for now always show list view */}
+          <LocationListView
+            isLoading={isLoading}
+            tableData={tableData}
+            searchQuery={searchQuery}
+            filteredTopLevelLocations={filteredTopLevelLocations}
+            expandedRows={expandedRows}
+            toggleRow={toggleRow}
+            getChildren={getChildren}
+            handleEditLocation={handleEditLocation}
+            setExpandedRows={setExpandedRows}
+          />
 
           <LocationSheet
             open={isSheetOpen}

diff --git a/...ings/locations/components/LocationRow.tsx → ...locations/components/LocationListView.tsx b/...ings/locations/components/LocationRow.tsx → ...locations/components/LocationListView.tsx
@@ -5,7 +5,17 @@ import { useTranslation } from "react-i18next";
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
 import { Button } from "@/components/ui/button";
-import { TableCell, TableRow } from "@/components/ui/table";
+import { Card, CardContent } from "@/components/ui/card";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+
+import { TableSkeleton } from "@/components/Common/SkeletonLoading";
 
 import useBreakpoints from "@/hooks/useBreakpoints";
 
@@ -24,7 +34,7 @@ interface LocationRowProps {
   >;
 }
 
-export function LocationRow({
+function LocationRow({
   location,
   expandedRows,
   toggleRow,
@@ -161,3 +171,76 @@ export function LocationRow({
     </>
   );
 }
+
+interface LocationListViewProps {
+  isLoading: boolean;
+  tableData: LocationListType[];
+  searchQuery: string;
+  filteredTopLevelLocations: LocationListType[];
+  expandedRows: Record<string, boolean>;
+  toggleRow: (id: string) => void;
+  getChildren: (parentId: string) => LocationListType[];
+  handleEditLocation: (location: LocationListType) => void;
+  setExpandedRows: React.Dispatch<
+    React.SetStateAction<Record<string, boolean>>
+  >;
+}
+
+export function LocationListView({
+  isLoading,
+  tableData,
+  searchQuery,
+  filteredTopLevelLocations,
+  expandedRows,
+  toggleRow,
+  getChildren,
+  handleEditLocation,
+  setExpandedRows,
+}: LocationListViewProps) {
+  const { t } = useTranslation();
+
+  if (isLoading) {
+    return <TableSkeleton count={6} />;
+  }
+
+  if (!tableData?.length) {
+    return (
+      <Card className="col-span-full">
+        <CardContent className="p-6 text-center text-gray-500">
+          {searchQuery ? t("no_locations_found") : t("no_locations_available")}
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      <Table className="border rounded-lg w-full overflow-hidden">
+        <TableHeader>
+          <TableRow>
+            <TableHead className="w-[80%] border text-gray-700 bg-gray-200">
+              {t("name")}
+            </TableHead>
+            <TableHead className="hidden sm:table-cell bg-gray-200 text-gray-700">
+              {t("location_form")}
+            </TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {filteredTopLevelLocations.map((location) => (
+            <LocationRow
+              key={location.id}
+              location={location}
+              expandedRows={expandedRows}
+              toggleRow={toggleRow}
+              getChildren={getChildren}
+              indent={1}
+              onEdit={handleEditLocation}
+              setExpandedRows={setExpandedRows}
+            />
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}