Fix : View(list/card/board) retention for encounters/resource/users p…

…ages (#10039)

src/Routers/routes/ResourceRoutes.tsx

@@ -1,19 +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";
 
-const getDefaultView = () =>
-  localStorage.getItem("defaultResourceView") === "list" ? "list" : "board";
-
 const ResourceRoutes: AppRoutes = {
-  "/resource": () => <Redirect to={`/resource/${getDefaultView()}`} />,
-  "/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} />,
 };

src/Utils/ViewCache.ts

@@ -0,0 +1,23 @@
+const getKey = (name: string) => {
+  return `${name}`;
+};
+
+/**
+ * Clears the view preference.
+ */
+const invalidate = (name: string) => {
+  localStorage.removeItem(getKey(name));
+};
+
+/**
+ * Clears all the view preferences.
+ */
+const invalidateAll = () => {
+  const viewKeys = ["users", "resource", "appointments"];
+  viewKeys.forEach(invalidate);
+};
+
+export default {
+  invalidate,
+  invalidateAll,
+};

src/Utils/useView.ts

@@ -0,0 +1,26 @@
+import { useEffect, useState } from "react";
+
+export function useView(
+  name: string,
+  defaultView: string,
+): [string, (view: string) => void] {
+  const [view, setView] = useState(() => {
+    return localStorage.getItem(name) || defaultView;
+  });
+  const updateView = (newView: string) => {
+    localStorage.setItem(name, newView);
+    setView(newView);
+  };
+  useEffect(() => {
+    const interval = setInterval(() => {
+      const storedView = localStorage.getItem(name);
+      if (storedView !== view) {
+        setView(storedView || defaultView);
+      }
+    }, 100);
+    return () => {
+      clearInterval(interval);
+    };
+  }, [name, view]);
+  return [view, updateView];
+}

src/components/Auth/Login.tsx

@@ -30,6 +30,7 @@ import BrowserWarning from "@/components/ErrorPages/BrowserWarning";
 import { useAuthContext } from "@/hooks/useAuthUser";
 
 import FiltersCache from "@/Utils/FiltersCache";
+import ViewCache from "@/Utils/ViewCache";
 import routes from "@/Utils/request/api";
 import mutate from "@/Utils/request/mutate";
 import request from "@/Utils/request/request";
@@ -242,6 +243,7 @@ const Login = (props: LoginProps) => {
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
+    ViewCache.invalidateAll();
     const validated = validateData();
     if (!validated) return;
 

src/components/Common/View.tsx

@@ -0,0 +1,24 @@
+import React, { ComponentType } from "react";
+
+import { useView } from "@/Utils/useView";
+
+export default function View({
+  name,
+  board,
+  list,
+}: {
+  name: "resource";
+  board: ComponentType;
+  list: ComponentType;
+}) {
+  const [view] = useView(name, "board");
+
+  const views: Record<"board" | "list", ComponentType> = {
+    board,
+    list,
+  };
+
+  const SelectedView = views[view as keyof typeof views] || board;
+
+  return <SelectedView />;
+}

src/components/Facility/FacilityUsers.tsx

@@ -1,5 +1,4 @@
 import { useQuery } from "@tanstack/react-query";
-import { useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import CareIcon from "@/CAREUI/icons/CareIcon";
@@ -19,14 +18,16 @@ import useFilters from "@/hooks/useFilters";
 
 import routes from "@/Utils/request/api";
 import query from "@/Utils/request/query";
+import { useView } from "@/Utils/useView";
 
 export default function FacilityUsers(props: { facilityId: string }) {
   const { t } = useTranslation();
   const { qParams, updateQuery, Pagination } = useFilters({
     limit: 15,
     cacheBlacklist: ["username"],
   });
-  const [activeTab, setActiveTab] = useState<"card" | "list">("card");
+  const [activeTab, setActiveTab] = useView("users", "card");
+
   const { facilityId } = props;
 
   let usersList: JSX.Element = <></>;
@@ -58,7 +59,7 @@ export default function FacilityUsers(props: { facilityId: string }) {
       <div>
         <UserListAndCardView
           users={userListData?.results ?? []}
-          activeTab={activeTab}
+          activeTab={activeTab === "card" ? "card" : "list"}
         />
         <Pagination totalCount={userListData.count} />
       </div>

src/components/Resource/ResourceBoard.tsx

@@ -24,6 +24,7 @@ import { RESOURCE_CHOICES } from "@/common/constants";
 
 import routes from "@/Utils/request/api";
 import request from "@/Utils/request/request";
+import { useView } from "@/Utils/useView";
 import { ResourceRequest } from "@/types/resourceRequest/resourceRequest";
 
 const KanbanBoard = lazy(
@@ -36,6 +37,7 @@ const COMPLETED = ["COMPLETED", "REJECTED"];
 const ACTIVE = resourceStatusOptions.filter((o) => !COMPLETED.includes(o));
 
 export default function BoardView() {
+  const [, setView] = useView("resource", "board");
   const { qParams, FilterBadges, advancedFilter, updateQuery } = useFilters({
     limit: -1,
     cacheBlacklist: ["title"],
@@ -45,11 +47,6 @@ export default function BoardView() {
   const appliedFilters = formatFilter(qParams);
   const { t } = useTranslation();
 
-  const onListViewBtnClick = () => {
-    navigate("/resource/list", { query: qParams });
-    localStorage.setItem("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">
@@ -97,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" />

src/components/Resource/ResourceList.tsx

@@ -1,4 +1,4 @@
-import { Link, navigate } from "raviger";
+import { Link } from "raviger";
 import { useTranslation } from "react-i18next";
 
 import CareIcon from "@/CAREUI/icons/CareIcon";
@@ -20,10 +20,12 @@ import useFilters from "@/hooks/useFilters";
 import routes from "@/Utils/request/api";
 import request from "@/Utils/request/request";
 import useTanStackQueryInstead from "@/Utils/request/useQuery";
+import { useView } from "@/Utils/useView";
 import { formatDateTime } from "@/Utils/utils";
 import { ResourceRequest } from "@/types/resourceRequest/resourceRequest";
 
 export default function ListView() {
+  const [, setView] = useView("resource", "list");
   const {
     qParams,
     Pagination,
@@ -35,10 +37,6 @@ export default function ListView() {
 
   const { t } = useTranslation();
 
-  const onBoardViewBtnClick = () => {
-    navigate("/resource/board", { query: qParams });
-    localStorage.setItem("defaultResourceView", "board");
-  };
   const appliedFilters = formatFilter(qParams);
 
   const { loading, data, refetch } = useTanStackQueryInstead(
@@ -222,7 +220,7 @@ export default function ListView() {
           </div>
 
           <div className="mt-2 flex w-full flex-col gap-2 lg:w-fit lg:flex-row lg:gap-4">
-            <Button variant={"primary"} onClick={onBoardViewBtnClick}>
+            <Button variant={"primary"} onClick={() => setView("board")}>
               <CareIcon icon="l-list-ul" className="rotate-90 mr-2" />
               {t("board_view")}
             </Button>

src/pages/Appointments/AppointmentsPage.tsx

@@ -65,6 +65,7 @@ import useAuthUser from "@/hooks/useAuthUser";
 
 import mutate from "@/Utils/request/mutate";
 import query from "@/Utils/request/query";
+import { useView } from "@/Utils/useView";
 import {
   dateQueryString,
   formatDisplayName,
@@ -246,7 +247,7 @@ export default function AppointmentsPage(props: { facilityId?: string }) {
 
   const facilityId = props.facilityId ?? authUser.home_facility!;
 
-  const [viewMode, setViewMode] = useState<"board" | "list">("board");
+  const [activeTab, setActiveTab] = useView("appointments", "board");
 
   const schedulableUsersQuery = useQuery({
     queryKey: ["schedulable-users", facilityId],
@@ -336,8 +337,8 @@ export default function AppointmentsPage(props: { facilityId?: string }) {
       breadcrumbs={false}
       options={
         <Tabs
-          value={viewMode}
-          onValueChange={(value) => setViewMode(value as "board" | "list")}
+          value={activeTab}
+          onValueChange={(value) => setActiveTab(value as "board" | "list")}
         >
           <TabsList>
             <TabsTrigger value="board">
@@ -600,7 +601,7 @@ export default function AppointmentsPage(props: { facilityId?: string }) {
         </div>
       </div>
 
-      {viewMode === "board" ? (
+      {activeTab === "board" ? (
         <ScrollArea>
           <div className="flex w-max space-x-4">
             {(