diff --git a/public/locale/en.json b/public/locale/en.json index 400a11697e1..e28f87ed0df 100644 --- a/public/locale/en.json +++ b/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" -} \ No newline at end of file +} diff --git a/src/Routers/routes/ResourceRoutes.tsx b/src/Routers/routes/ResourceRoutes.tsx index 547aeb53610..357b7812513 100644 --- a/src/Routers/routes/ResourceRoutes.tsx +++ b/src/Routers/routes/ResourceRoutes.tsx @@ -1,5 +1,4 @@ -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"; @@ -7,13 +6,8 @@ import ListView from "@/components/Resource/ResourceList"; import { AppRoutes } from "@/Routers/AppRouter"; -const getDefaultView = () => - localStorage.getItem("defaultResourceView") === "list" ? "list" : "board"; - const ResourceRoutes: AppRoutes = { - "/resource": () => , - "/resource/board": () => , - "/resource/list": () => , + "/resource": () => , "/resource/:id": ({ id }) => , "/resource/:id/update": ({ id }) => , }; diff --git a/src/Utils/ViewCache.ts b/src/Utils/ViewCache.ts new file mode 100644 index 00000000000..83f5214b3a2 --- /dev/null +++ b/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, +}; diff --git a/src/Utils/useView.ts b/src/Utils/useView.ts new file mode 100644 index 00000000000..dc25d6efcbe --- /dev/null +++ b/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]; +} diff --git a/src/components/Auth/Login.tsx b/src/components/Auth/Login.tsx index 4e8cb7478cc..0bb49366062 100644 --- a/src/components/Auth/Login.tsx +++ b/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; diff --git a/src/components/Common/View.tsx b/src/components/Common/View.tsx new file mode 100644 index 00000000000..465199ac131 --- /dev/null +++ b/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 ; +} diff --git a/src/components/Facility/FacilityUsers.tsx b/src/components/Facility/FacilityUsers.tsx index 2e8e7b4a769..8f24834ddbc 100644 --- a/src/components/Facility/FacilityUsers.tsx +++ b/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,6 +11,7 @@ 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(); @@ -19,7 +19,7 @@ export default function FacilityUsers(props: { facilityId: number }) { 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
No users found
; } + const handleTabChange = (tab: number) => { + setActiveTab(tab === 1 ? "list" : "card"); + }; + return ( updateQuery({ username })} searchValue={qParams.username} - activeTab={activeTab} - onTabChange={setActiveTab} + activeTab={activeTab === "list" ? 1 : 0} + onTabChange={handleTabChange} /> diff --git a/src/components/Resource/ResourceBoard.tsx b/src/components/Resource/ResourceBoard.tsx index 0b903e82829..1bd9bfa5b87 100644 --- a/src/components/Resource/ResourceBoard.tsx +++ b/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 (
@@ -97,7 +94,7 @@ export default function BoardView() {
- diff --git a/src/components/Users/ManageUsers.tsx b/src/components/Users/ManageUsers.tsx index e0f07c97565..fd75e475a7a 100644 --- a/src/components/Users/ManageUsers.tsx +++ b/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,6 +98,9 @@ export default function ManageUsers() { if (userListLoading || districtDataLoading || !userListData?.results) { return ; } + const handleTabChange = (tab: number) => { + setActiveTab(tab === 1 ? "list" : "card"); + }; manageUsers = (
@@ -104,8 +108,8 @@ export default function ManageUsers() { users={userListData?.results ?? []} onSearch={(username) => updateQuery({ username })} searchValue={qParams.username} - activeTab={activeTab} - onTabChange={setActiveTab} + activeTab={activeTab === "list" ? 1 : 0} + onTabChange={handleTabChange} />