Cross-tab cache invalidation (#104)

Fixes #57 

- Use RTK's cache invalidation for gear and people install of manually refetching data on update
- Use `BroadcastChannel` to invalidate data across browser tabs and windows

Author: fpagnoux

src/pages/Approvals/AddNewApproval.tsx

@@ -1,5 +1,4 @@
 import { useState } from "react";
-import { useDispatch } from "react-redux";
 import { useLocation, useNavigate } from "react-router-dom";
 
 import {
@@ -9,7 +8,8 @@ import {
 import { APIError as APIErrorClass } from "src/apiClient/client";
 import { APIErrorType } from "src/apiClient/types";
 import { useSetPageTitle } from "src/hooks";
-import { gearDbApi } from "src/redux/api";
+import { TagType } from "src/redux/api";
+import { invalidateCache } from "src/redux/store";
 
 import { AddNewApprovalForm } from "./AddNewApprovalForm";
 
@@ -22,12 +22,11 @@ export default function AddNewApproval() {
   const searchParams = new URLSearchParams(location.search);
   const personId = searchParams.get("personId");
 
-  const dispatch = useDispatch();
   const onSubmit = (args: CreateNewApprovalArgs) => {
     createNewApproval(args)
       .then(() => {
         setError(undefined);
-        dispatch(gearDbApi.util.invalidateTags(["Approvals"]));
+        invalidateCache([TagType.Approvals]);
         if (personId != null) {
           navigate(`/people/${personId}?tab=approvals`);
         } else {

src/pages/Gear/GearInfoPanel.tsx

@@ -4,15 +4,17 @@ import { Link } from "react-router-dom";
 import type { GearSummary } from "src/apiClient/gear";
 import { newApprovalUI } from "src/featureFlags";
 import { fmtAmount } from "src/lib/fmtNumber";
+import { TagType } from "src/redux/api";
 import { useConfig } from "src/redux/hooks";
+import { invalidateCache } from "src/redux/store";
 
 import { GearItemEditForm } from "./GearItemEditForm";
 import { GearStatus } from "./GearStatus";
 import { GearStatusForm, GearStatusFormType } from "./GearStatusForm";
 
-type Props = { gearItem: GearSummary; refreshGear: () => void };
+type Props = { gearItem: GearSummary };
 
-export function GearInfoPanel({ gearItem, refreshGear }: Props) {
+export function GearInfoPanel({ gearItem }: Props) {
   const [formToShow, setFormToShow] = useState<GearStatusFormType>(
     GearStatusFormType.none,
   );
@@ -78,7 +80,9 @@ export function GearInfoPanel({ gearItem, refreshGear }: Props) {
         <GearItemEditForm
           gearItem={gearItem}
           closeForm={() => setEditing(false)}
-          refreshGear={refreshGear}
+          refreshGear={() => {
+            invalidateCache([TagType.GearItems]);
+          }}
         />
       )}
 
@@ -108,7 +112,7 @@ export function GearInfoPanel({ gearItem, refreshGear }: Props) {
           formType={formToShow}
           gearItem={gearItem}
           onChange={() => {
-            refreshGear();
+            invalidateCache([TagType.GearItems]);
             setFormToShow(GearStatusFormType.none);
           }}
         />

src/pages/Gear/GearItemPage.tsx

@@ -3,7 +3,8 @@ import { useParams } from "react-router-dom";
 import { addNote } from "src/apiClient/gear";
 import { Notes } from "src/components/Notes";
 import { useSetPageTitle } from "src/hooks";
-import { useGetGearItemQuery } from "src/redux/api";
+import { TagType, useGetGearItemQuery } from "src/redux/api";
+import { invalidateCache } from "src/redux/store";
 
 import { GearInfoPanel } from "./GearInfoPanel";
 import { GearPicture } from "./GearPicture";
@@ -12,19 +13,23 @@ import { GearRentalsHistory } from "./GearRentalsHistory";
 export default function GearItemPage() {
   const gearId = useParams<{ gearId: string }>().gearId!;
   useSetPageTitle(gearId);
-  const { data: gearItem, refetch: refreshGear } = useGetGearItemQuery(gearId);
+  const { data: gearItem } = useGetGearItemQuery(gearId);
 
   if (gearItem == null) {
     return null;
   }
   return (
     <div className="row">
       <div className="col-12 col-md-5 p-2">
-        <GearInfoPanel gearItem={gearItem} refreshGear={refreshGear} />
-        <GearPicture gearItem={gearItem} refreshGear={refreshGear} />
+        <GearInfoPanel gearItem={gearItem} />
+        <GearPicture gearItem={gearItem} />
         <Notes
           notes={gearItem.notes}
-          onAdd={(note) => addNote(gearId, note).then(refreshGear)}
+          onAdd={(note) =>
+            addNote(gearId, note).then(() =>
+              invalidateCache([TagType.GearItems]),
+            )
+          }
         />
       </div>
       <div className="col-12 col-md-7 p-2">

src/pages/Gear/GearPicture.tsx

@@ -4,16 +4,17 @@ import { useState } from "react";
 import styled from "styled-components";
 
 import { GearItem } from "src/apiClient/gear";
+import { TagType } from "src/redux/api";
+import { invalidateCache } from "src/redux/store";
 
 import { PicturePickerModal } from "./PicturePickerModal";
 import { PicturePlaceholder } from "./PicturePlaceholder";
 
 type Props = {
   gearItem: GearItem;
-  refreshGear: () => void;
 };
 
-export function GearPicture({ gearItem, refreshGear }: Props) {
+export function GearPicture({ gearItem }: Props) {
   const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
 
   return (
@@ -40,7 +41,7 @@ export function GearPicture({ gearItem, refreshGear }: Props) {
           isOpen={isModalOpen}
           close={() => setIsModalOpen(false)}
           item={gearItem}
-          refreshGear={refreshGear}
+          refreshGear={() => invalidateCache([TagType.GearItems])}
         />
       )}
     </>

src/pages/People/PeoplePage/PersonPageContext.tsx

@@ -5,6 +5,8 @@ import React, { useContext, useState } from "react";
 import { RenterApproval } from "src/apiClient/approvals";
 import { GearSummary } from "src/apiClient/gear";
 import { checkoutGear, Person, Rental, returnGear } from "src/apiClient/people";
+import { TagType } from "src/redux/api";
+import { invalidateCache } from "src/redux/store";
 
 import { ItemToPurchase } from "../types";
 
@@ -14,7 +16,6 @@ type PersonPageContextType = ReturnType<typeof useMakePersonPageContext>;
 
 type Props = {
   person: Person;
-  refreshPerson: () => void;
   approvals: RenterApproval[];
 };
 
@@ -44,7 +45,7 @@ export function usePersonPageContext() {
   return context;
 }
 
-function useMakePersonPageContext({ person, refreshPerson, approvals }: Props) {
+function useMakePersonPageContext({ person, approvals }: Props) {
   const checkoutBasketBase = useBasket<GearSummary>();
   const returnBasketBase = useBasket<Rental>();
   const purchaseBasket = useBasket<ItemToPurchase>();
@@ -115,7 +116,6 @@ function useMakePersonPageContext({ person, refreshPerson, approvals }: Props) {
     person,
     approvals,
     isApproved,
-    refreshPerson,
     purchaseBasket,
     returnBasket: {
       ...returnBasketBase,
@@ -139,7 +139,7 @@ function useMakePersonPageContext({ person, refreshPerson, approvals }: Props) {
         ).then(() => {
           returnBasketBase.clear();
           purchaseBasket.clear();
-          refreshPerson();
+          invalidateCache([TagType.People]);
         });
       },
     },
@@ -149,7 +149,7 @@ function useMakePersonPageContext({ person, refreshPerson, approvals }: Props) {
         const gearIDs = map(checkoutBasketBase.items, "id");
         return checkoutGear(person.id, gearIDs).then(() => {
           checkoutBasketBase.clear();
-          refreshPerson();
+          invalidateCache([TagType.People]);
         });
       },
     },

src/pages/People/PersonPage.tsx

@@ -4,7 +4,12 @@ import { useParams } from "react-router-dom";
 import { addNote, archiveNote } from "src/apiClient/people";
 import { Notes } from "src/components/Notes";
 import { useSetPageTitle } from "src/hooks";
-import { useGetPersonQuery, useGetRenterApprovalsQuery } from "src/redux/api";
+import {
+  TagType,
+  useGetPersonQuery,
+  useGetRenterApprovalsQuery,
+} from "src/redux/api";
+import { invalidateCache } from "src/redux/store";
 
 import { BuyGear } from "./BuyGear";
 import { CheckoutStaging } from "./CheckoutStaging";
@@ -22,7 +27,7 @@ import { ReturnStaging } from "./ReturnStaging";
 
 export function PersonPage() {
   const personId = useParams<{ personId: string }>().personId!;
-  const { data: person, refetch: refreshPerson } = useGetPersonQuery(personId);
+  const { data: person } = useGetPersonQuery(personId);
   const { data: approvalResult } = useGetRenterApprovalsQuery({
     personID: personId,
     past: false,
@@ -33,7 +38,6 @@ export function PersonPage() {
   return (
     <PersonPageContextProvider
       person={person}
-      refreshPerson={refreshPerson}
       // NOTE: This doesn't handle pagination for now, which could be a problem if someone has 50+ active approvals. Unlikely.
       approvals={approvalResult?.results ?? []}
     >
@@ -45,14 +49,8 @@ export function PersonPage() {
 function PersonPageInner() {
   const [tab, setTab] = useTab();
 
-  const {
-    person,
-    refreshPerson,
-    checkoutBasket,
-    returnBasket,
-    purchaseBasket,
-    isApproved,
-  } = usePersonPageContext();
+  const { person, checkoutBasket, returnBasket, purchaseBasket, isApproved } =
+    usePersonPageContext();
 
   useSetPageTitle(person ? `${person.firstName} ${person.lastName} ` : "");
 
@@ -75,10 +73,14 @@ function PersonPageInner() {
         <Notes
           notes={person.notes}
           onAdd={(note) => {
-            return addNote(person.id, note).then(refreshPerson);
+            return addNote(person.id, note).then(() =>
+              invalidateCache([TagType.People]),
+            );
           }}
           onArchive={(noteId) => {
-            archiveNote(person.id, noteId).then(refreshPerson);
+            archiveNote(person.id, noteId).then(() =>
+              invalidateCache([TagType.People]),
+            );
           }}
         />
         {!isEmpty(checkoutBasket.items) && (

src/pages/People/PersonProfile/FrequentFlyerForm.tsx

@@ -4,7 +4,8 @@ import { useState } from "react";
 import DatePicker from "react-datepicker";
 
 import { addFFChecks, Person } from "src/apiClient/people";
-import { useGetPersonQuery } from "src/redux/api";
+import { TagType } from "src/redux/api";
+import { invalidateCache } from "src/redux/store";
 
 import { getNextExpirationDate } from "./utils";
 
@@ -14,7 +15,6 @@ type Props = {
 };
 
 export function FrequentFlyerForm({ person, onClose }: Props) {
-  const { refetch: refreshPerson } = useGetPersonQuery(String(person.id));
   const initial = getNextExpirationDate();
   const [date, setDate] = useState<Date>(initial);
   const [checkNumber, setCheckNumber] = useState<string>("");
@@ -49,7 +49,7 @@ export function FrequentFlyerForm({ person, onClose }: Props) {
           onClick={(evt) => {
             evt.preventDefault();
             addFFChecks(person.id, date, checkNumber).then(() => {
-              refreshPerson();
+              invalidateCache([TagType.People]);
               onClose();
             });
           }}

src/pages/People/PersonProfile/MembershipForm.tsx

@@ -5,7 +5,8 @@ import DatePicker from "react-datepicker";
 
 import { addMembership, Person } from "src/apiClient/people";
 import { Select } from "src/components/Inputs/Select";
-import { useGetAffiliationsQuery, useGetPersonQuery } from "src/redux/api";
+import { TagType, useGetAffiliationsQuery } from "src/redux/api";
+import { invalidateCache } from "src/redux/store";
 
 import { getNextExpirationDate } from "./utils";
 
@@ -15,7 +16,6 @@ type Props = {
 };
 
 export function MembershipForm({ person, onClose }: Props) {
-  const { refetch: refreshPerson } = useGetPersonQuery(String(person.id));
   const { data: affiliations = [] } = useGetAffiliationsQuery();
   const affiliationOptions = affiliations.map(({ id, name }) => ({
     value: id,
@@ -63,7 +63,7 @@ export function MembershipForm({ person, onClose }: Props) {
               return;
             }
             addMembership(person.id, date, membershipType).then(() => {
-              refreshPerson();
+              invalidateCache([TagType.People]);
               onClose();
             });
           }}

src/pages/People/PersonProfile/MitocCreditForm.tsx

@@ -2,15 +2,15 @@ import { useState } from "react";
 
 import { addMitocCredit, Person } from "src/apiClient/people";
 import { NumberField } from "src/components/Inputs/NumberField";
-import { useGetPersonQuery } from "src/redux/api";
+import { TagType } from "src/redux/api";
+import { invalidateCache } from "src/redux/store";
 
 type Props = {
   person: Person;
   onClose: () => void;
 };
 
 export function MitocCreditForm({ person, onClose }: Props) {
-  const { refetch: refreshPerson } = useGetPersonQuery(String(person.id));
   const [amount, setAmount] = useState<number | null>(15);
   return (
     <div>
@@ -21,7 +21,7 @@ export function MitocCreditForm({ person, onClose }: Props) {
             return;
           }
           addMitocCredit(person.id, amount).then(() => {
-            refreshPerson();
+            invalidateCache([TagType.People]);
             onClose();
           });
         }}

src/pages/People/PersonProfile/PeopleGroups.tsx

@@ -3,14 +3,15 @@ import { useState } from "react";
 
 import { PeopleGroup, Person, updatePersonGroups } from "src/apiClient/people";
 import { GroupSelect } from "src/components/GroupSelect";
+import { TagType } from "src/redux/api";
 import { useCurrentUser, usePermissions } from "src/redux/auth";
+import { invalidateCache } from "src/redux/store";
 
 type Props = {
   person: Person;
-  refreshPerson: () => void;
 };
 
-export default function PeopleGroups({ person, refreshPerson }: Props) {
+export default function PeopleGroups({ person }: Props) {
   const [showGroupsForm, setShowGroupForms] = useState<boolean>(false);
   const { user } = useCurrentUser();
   const { isOfficer } = usePermissions();
@@ -53,15 +54,14 @@ export default function PeopleGroups({ person, refreshPerson }: Props) {
     <PeopleGroupsForm
       isOfficer={isOfficer}
       person={person}
-      refreshPerson={refreshPerson}
       closeForm={() => setShowGroupForms(false)}
     />
   );
 }
 
 function PeopleGroupsForm({
   person,
-  refreshPerson,
+
   closeForm,
   isOfficer,
 }: Props & { isOfficer?: boolean; closeForm: () => void }) {
@@ -72,7 +72,7 @@ function PeopleGroupsForm({
       person.id,
       groups.map((g) => g.id),
     ).then(() => {
-      refreshPerson();
+      invalidateCache([TagType.People]);
       closeForm();
     });