Fix : View Retention in Users Tab After Navigation

public/locale/en.json

@@ -1444,8 +1444,8 @@
   "qualification": "Qualification",
   "qualification_required": "Qualification is required",
   "quantity_approved": "Quantity Approved",
-  "quantity_required": "Quantity Required",
   "quantity_requested": "Quantity Requested",
+  "quantity_required": "Quantity Required",
   "raise_consent_request": "Raise a consent request to fetch patient records over ABDM",
   "ration_card__APL": "APL",
   "ration_card__BPL": "BPL",
@@ -1676,10 +1676,10 @@
   "test_type": "Type of test done",
   "tested_on": "Tested on",
   "thank_you_for_choosing": "Thank you for choosing our care service",
-  "time": "Time",
-  "time_slot": "Time Slot",
   "the_request_for_resources_placed_by_yourself_is": "The request for resource (details below) placed by yourself is",
   "third_party_software_licenses": "Third Party Software Licenses",
+  "time": "Time",
+  "time_slot": "Time Slot",
   "title_of_request": "Title of Request",
   "titrate_dosage": "Titrate Dosage",
   "to": "to",
@@ -1871,4 +1871,4 @@
   "you_need_at_least_a_location_to_create_an_assest": "You need at least a location to create an assest.",
   "zoom_in": "Zoom In",
   "zoom_out": "Zoom Out"
-}
+}

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", "shifting"];
+  viewKeys.forEach(invalidate);
+};
+
+export default {
+  invalidate,
+  invalidateAll,
+};

src/Utils/useView.ts

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

src/components/Auth/Login.tsx

@@ -31,6 +31,7 @@ import { CarePatientTokenKey } from "@/common/constants";
 
 import FiltersCache from "@/Utils/FiltersCache";
 import * as Notification from "@/Utils/Notifications";
+import ViewCache from "@/Utils/ViewCache";
 import routes from "@/Utils/request/api";
 import mutate from "@/Utils/request/mutate";
 import request from "@/Utils/request/request";
@@ -254,6 +255,7 @@ const Login = (props: { forgot?: boolean }) => {
 
   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: "shifting" | "resource";
+  board: ComponentType;
+  list: ComponentType;
+}) {
+  const [view] = useView(name);
+
+  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 CountBlock from "@/CAREUI/display/Count";
@@ -12,14 +11,15 @@ import useFilters from "@/hooks/useFilters";
 import routes from "@/Utils/request/api";
 import query from "@/Utils/request/query";
 import useTanStackQueryInstead from "@/Utils/request/useQuery";
+import { useView } from "@/Utils/useView";
 
 export default function FacilityUsers(props: { facilityId: number }) {
   const { t } = useTranslation();
   const { qParams, updateQuery, Pagination } = useFilters({
     limit: 18,
     cacheBlacklist: ["username"],
   });
-  const [activeTab, setActiveTab] = useState(0);
+  const [activeTab, setActiveTab] = useView("users");
   const { facilityId } = props;
 
   const { data: facilityData } = useTanStackQueryInstead(
@@ -47,6 +47,10 @@ export default function FacilityUsers(props: { facilityId: number }) {
     return <div>No users found</div>;
   }
 
+  const handleTabChange = (tab: number) => {
+    setActiveTab(tab === 1 ? "list" : "card");
+  };
+
   return (
     <Page
       title={`${t("users")} - ${facilityData?.name}`}
@@ -65,8 +69,8 @@ export default function FacilityUsers(props: { facilityId: number }) {
         users={userListData?.results ?? []}
         onSearch={(username) => updateQuery({ username })}
         searchValue={qParams.username}
-        activeTab={activeTab}
-        onTabChange={setActiveTab}
+        activeTab={activeTab === "list" ? 1 : 0}
+        onTabChange={handleTabChange}
       />
 
       <Pagination totalCount={userListData.count} />

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");
   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 Chip from "@/CAREUI/display/Chip";
@@ -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");
   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(
@@ -218,7 +216,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/components/Users/ManageUsers.tsx

@@ -1,5 +1,5 @@
 import { navigate } from "raviger";
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 
 import CountBlock from "@/CAREUI/display/Count";
@@ -19,6 +19,7 @@ import { USER_TYPES } from "@/common/constants";
 
 import routes from "@/Utils/request/api";
 import useTanStackQueryInstead from "@/Utils/request/useQuery";
+import { useView } from "@/Utils/useView";
 
 export default function ManageUsers() {
   const { t } = useTranslation();
@@ -39,7 +40,7 @@ export default function ManageUsers() {
   const userTypes = authUser.is_superuser
     ? [...USER_TYPES]
     : USER_TYPES.slice(0, userIndex + 1);
-  const [activeTab, setActiveTab] = useState(0);
+  const [activeTab, setActiveTab] = useView("users");
 
   const { data: homeFacilityData } = useTanStackQueryInstead(
     routes.getAnyFacility,
@@ -97,15 +98,18 @@ export default function ManageUsers() {
   if (userListLoading || districtDataLoading || !userListData?.results) {
     return <Loading />;
   }
+  const handleTabChange = (tab: number) => {
+    setActiveTab(tab === 1 ? "list" : "card");
+  };
 
   manageUsers = (
     <div>
       <UserListView
         users={userListData?.results ?? []}
         onSearch={(username) => updateQuery({ username })}
         searchValue={qParams.username}
-        activeTab={activeTab}
-        onTabChange={setActiveTab}
+        activeTab={activeTab === "list" ? 1 : 0}
+        onTabChange={handleTabChange}
       />
       <Pagination totalCount={userListData.count} />
     </div>