created view util

ohcnetwork · Dec 22, 2024 · a939247 · a939247
1 parent e0eb9d8
commit a939247
Show file tree

Hide file tree

Showing 10 changed files with 81 additions and 64 deletions.
diff --git a/src/Routers/routes/ResourceRoutes.tsx b/src/Routers/routes/ResourceRoutes.tsx
@@ -1,21 +1,13 @@
-import { Redirect } from "raviger";
-
+import View from "@/components/Common/View";
 import BoardView from "@/components/Resource/ResourceBoard";
 import ResourceDetails from "@/components/Resource/ResourceDetails";
 import { ResourceDetailsUpdate } from "@/components/Resource/ResourceDetailsUpdate";
 import ListView from "@/components/Resource/ResourceList";
 
 import { AppRoutes } from "@/Routers/AppRouter";
-import { getDefaultView } from "@/Utils/viewStorageUtils";
 
 const ResourceRoutes: AppRoutes = {
-  "/resource": () => (
-    <Redirect
-      to={`/resource/${getDefaultView("defaultResourceView", "board")}`}
-    />
-  ),
-  "/resource/board": () => <BoardView />,
-  "/resource/list": () => <ListView />,
+  "/resource": () => <View name="resource" board={BoardView} list={ListView} />,
   "/resource/:id": ({ id }) => <ResourceDetails id={id} />,
   "/resource/:id/update": ({ id }) => <ResourceDetailsUpdate id={id} />,
 };

diff --git a/src/Routers/routes/ShiftingRoutes.tsx b/src/Routers/routes/ShiftingRoutes.tsx
@@ -1,20 +1,14 @@
-import { Redirect } from "raviger";
-
+import View from "@/components/Common/View";
 import { ShiftCreate } from "@/components/Patient/ShiftCreate";
 import ShiftDetails from "@/components/Shifting/ShiftDetails";
 import { ShiftDetailsUpdate } from "@/components/Shifting/ShiftDetailsUpdate";
 import BoardView from "@/components/Shifting/ShiftingBoard";
 import ListView from "@/components/Shifting/ShiftingList";
 
 import { AppRoutes } from "@/Routers/AppRouter";
-import { getDefaultView } from "@/Utils/viewStorageUtils";
 
 const ShiftingRoutes: AppRoutes = {
-  "/shifting": () => (
-    <Redirect to={`/shifting/${getDefaultView("defaultShiftView", "board")}`} />
-  ),
-  "/shifting/board": () => <BoardView />,
-  "/shifting/list": () => <ListView />,
+  "/shifting": () => <View name="shifting" board={BoardView} list={ListView} />,
   "/shifting/:id": ({ id }) => <ShiftDetails id={id} />,
   "/shifting/:id/update": ({ id }) => <ShiftDetailsUpdate id={id} />,
   "/facility/:facilityId/patient/:patientId/shift/new": ({

diff --git a/src/Utils/useView.ts b/src/Utils/useView.ts
@@ -0,0 +1,24 @@
+import { useEffect, useState } from "react";
+
+export function useView(name: string): [string, (view: string) => void] {
+  const [view, setView] = useState(() => localStorage.getItem(name) || "board");
+
+  const updateView = (view: string) => {
+    setView(view);
+    localStorage.setItem(name, view);
+  };
+
+  useEffect(() => {
+    const handleStorageChange = () => {
+      setView(localStorage.getItem(name) || "board");
+    };
+
+    window.addEventListener("storage", handleStorageChange);
+
+    return () => {
+      window.removeEventListener("storage", handleStorageChange);
+    };
+  }, [name]);
+
+  return [view, updateView];
+}
diff --git a/src/Utils/viewStorageUtils.ts b/src/Utils/viewStorageUtils.ts
diff --git a/src/components/Common/View.tsx b/src/components/Common/View.tsx
@@ -0,0 +1,27 @@
+import React, { ComponentType } from "react";
+
+import { useView } from "@/Utils/useView";
+
+export default function View({
+  name,
+  board,
+  list,
+}: {
+  name: string;
+  board: ComponentType<{ setView: (view: string) => void }>;
+  list: ComponentType<{ setView: (view: string) => void }>;
+}) {
+  const [view, setView] = useView(`${name}DefaultView`);
+
+  const views: Record<
+    "board" | "list",
+    ComponentType<{ setView: (view: string) => void }>
+  > = {
+    board,
+    list,
+  };
+
+  const SelectedView = views[view as keyof typeof views] || board;
+
+  return <SelectedView setView={setView} />;
+}
diff --git a/src/components/Resource/ResourceBoard.tsx b/src/components/Resource/ResourceBoard.tsx
@@ -25,7 +25,6 @@ import { RESOURCE_CHOICES } from "@/common/constants";
 
 import routes from "@/Utils/request/api";
 import request from "@/Utils/request/request";
-import { setDefaultView } from "@/Utils/viewStorageUtils";
 
 const KanbanBoard = lazy(
   () => import("@/components/Kanban/Board"),
@@ -36,7 +35,11 @@ const resourceStatusOptions = RESOURCE_CHOICES.map((obj) => obj.text);
 const COMPLETED = ["COMPLETED", "REJECTED"];
 const ACTIVE = resourceStatusOptions.filter((o) => !COMPLETED.includes(o));
 
-export default function BoardView() {
+export default function BoardView({
+  setView,
+}: {
+  setView: (view: string) => void;
+}) {
   const { qParams, FilterBadges, advancedFilter, updateQuery } = useFilters({
     limit: -1,
     cacheBlacklist: ["title"],
@@ -46,11 +49,6 @@ export default function BoardView() {
   const appliedFilters = formatFilter(qParams);
   const { t } = useTranslation();
 
-  const onListViewBtnClick = () => {
-    navigate("/resource/list", { query: qParams });
-    setDefaultView("defaultResourceView", "list");
-  };
-
   return (
     <div className="flex-col px-2 pb-2">
       <div className="flex w-full flex-col items-center justify-between lg:flex-row">
@@ -96,7 +94,7 @@ export default function BoardView() {
           <div className="flex w-full flex-col gap-2 lg:mr-4 lg:w-fit lg:flex-row lg:gap-4">
             <Button
               variant={"primary"}
-              onClick={onListViewBtnClick}
+              onClick={() => setView("list")}
               className="h-10.8 px-4 py-2"
             >
               <CareIcon icon="l-list-ul" className="mr-2" />

diff --git a/src/components/Resource/ResourceList.tsx b/src/components/Resource/ResourceList.tsx
@@ -1,4 +1,4 @@
-import { Link, navigate } from "raviger";
+import { Link } from "raviger";
 import { useTranslation } from "react-i18next";
 
 import Chip from "@/CAREUI/display/Chip";
@@ -22,9 +22,12 @@ import routes from "@/Utils/request/api";
 import request from "@/Utils/request/request";
 import useTanStackQueryInstead from "@/Utils/request/useQuery";
 import { formatDateTime } from "@/Utils/utils";
-import { setDefaultView } from "@/Utils/viewStorageUtils";
 
-export default function ListView() {
+export default function ListView({
+  setView,
+}: {
+  setView: (view: string) => void;
+}) {
   const {
     qParams,
     Pagination,
@@ -36,10 +39,6 @@ export default function ListView() {
 
   const { t } = useTranslation();
 
-  const onBoardViewBtnClick = () => {
-    navigate("/resource/board", { query: qParams });
-    setDefaultView("defaultResourceView", "board");
-  };
   const appliedFilters = formatFilter(qParams);
 
   const { loading, data, refetch } = useTanStackQueryInstead(
@@ -232,7 +231,7 @@ export default function ListView() {
           <div className="flex w-full flex-col gap-2 lg:mr-4 lg:w-fit lg:flex-row lg:gap-4">
             <Button
               variant={"primary"}
-              onClick={onBoardViewBtnClick}
+              onClick={() => setView("board")}
               className="h-10.8 px-4 py-2"
             >
               <CareIcon icon="l-list-ul" className="mr-2" />

diff --git a/src/components/Shifting/ShiftingBoard.tsx b/src/components/Shifting/ShiftingBoard.tsx
@@ -30,13 +30,12 @@ import {
 
 import routes from "@/Utils/request/api";
 import request from "@/Utils/request/request";
-import { setDefaultView } from "@/Utils/viewStorageUtils";
 
 const KanbanBoard = lazy(
   () => import("@/components/Kanban/Board"),
 ) as KanbanBoardType;
 
-export default function BoardView() {
+export default function ({ setView }: { setView: (view: string) => void }) {
   const { qParams, updateQuery, FilterBadges, advancedFilter } = useFilters({
     limit: -1,
     cacheBlacklist: ["patient_name"],
@@ -77,10 +76,6 @@ export default function BoardView() {
 
   const [boardFilter, setBoardFilter] = useState(activeBoards);
   const { t } = useTranslation();
-  const onListViewBtnClick = () => {
-    navigate("/shifting/list", { query: qParams });
-    setDefaultView("defaultShiftView", "list");
-  };
 
   return (
     <div className="flex-col px-2 pb-2">
@@ -127,7 +122,7 @@ export default function BoardView() {
           <div className="flex w-full flex-col gap-2 lg:mr-4 lg:w-fit lg:flex-row lg:gap-4">
             <Button
               variant={"primary"}
-              onClick={onListViewBtnClick}
+              onClick={() => setView("list")}
               className="h-10.8 px-4 py-2"
             >
               <CareIcon icon="l-list-ul" className="mr-2" />

diff --git a/src/components/Shifting/ShiftingList.tsx b/src/components/Shifting/ShiftingList.tsx
@@ -1,4 +1,3 @@
-import { navigate } from "raviger";
 import { useTranslation } from "react-i18next";
 
 import CareIcon from "@/CAREUI/icons/CareIcon";
@@ -19,11 +18,14 @@ import useFilters from "@/hooks/useFilters";
 import routes from "@/Utils/request/api";
 import request from "@/Utils/request/request";
 import useTanStackQueryInstead from "@/Utils/request/useQuery";
-import { setDefaultView } from "@/Utils/viewStorageUtils";
 
 import ShiftingTable from "./ShiftingTable";
 
-export default function ListView() {
+export default function ListView({
+  setView,
+}: {
+  setView: (view: string) => void;
+}) {
   const {
     qParams,
     updateQuery,
@@ -34,10 +36,7 @@ export default function ListView() {
   } = useFilters({ cacheBlacklist: ["patient_name"] });
 
   const { t } = useTranslation();
-  const onBoardViewBtnClick = () => {
-    navigate("/shifting/board", { query: qParams });
-    setDefaultView("defaultShiftView", "board");
-  };
+
   const {
     data: shiftData,
     loading,
@@ -83,7 +82,7 @@ export default function ListView() {
           <div className="flex w-full flex-col gap-2 lg:mr-4 lg:w-fit lg:flex-row lg:gap-4">
             <Button
               variant={"primary"}
-              onClick={onBoardViewBtnClick}
+              onClick={() => setView("board")}
               className="h-10.8 px-4 py-2"
             >
               <CareIcon icon="l-list-ul" className="mr-2" />

diff --git a/src/components/Users/ManageUsers.tsx b/src/components/Users/ManageUsers.tsx
@@ -26,8 +26,8 @@ import * as Notification from "@/Utils/Notifications";
 import routes from "@/Utils/request/api";
 import request from "@/Utils/request/request";
 import useTanStackQueryInstead from "@/Utils/request/useQuery";
+import { useView } from "@/Utils/useView";
 import { classNames } from "@/Utils/utils";
-import { getDefaultView, setDefaultView } from "@/Utils/viewStorageUtils";
 
 export default function ManageUsers() {
   const { t } = useTranslation();
@@ -48,9 +48,7 @@ export default function ManageUsers() {
   const userTypes = authUser.is_superuser
     ? [...USER_TYPES]
     : USER_TYPES.slice(0, userIndex + 1);
-  const [activeTab, setActiveTab] = useState(
-    getDefaultView("usersDefaultView", "card") === "list" ? 1 : 0,
-  );
+  const [activeTab, setActiveTab] = useView("usersDefaultView");
 
   const { data: homeFacilityData } = useTanStackQueryInstead(
     routes.getAnyFacility,
@@ -109,9 +107,7 @@ export default function ManageUsers() {
     return <Loading />;
   }
   const handleTabChange = (tab: number) => {
-    setActiveTab(tab);
-    const newView = tab === 1 ? "list" : "card";
-    setDefaultView("usersDefaultView", newView);
+    setActiveTab(tab === 1 ? "list" : "card");
   };
 
   manageUsers = (
@@ -120,7 +116,7 @@ export default function ManageUsers() {
         users={userListData?.results ?? []}
         onSearch={(username) => updateQuery({ username })}
         searchValue={qParams.username}
-        activeTab={activeTab}
+        activeTab={activeTab === "list" ? 1 : 0}
         onTabChange={handleTabChange}
       />
       <Pagination totalCount={userListData.count} />