chore: Remove RTK from brand store members

canonical · Jan 16, 2025 · fecafa9 · fecafa9
1 parent ecdf00a
commit fecafa9
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 42 deletions.
diff --git a/static/js/brand-store/hooks/index.ts b/static/js/brand-store/hooks/index.ts
@@ -6,6 +6,7 @@ import type { Model as ModelType, SigningKey, Policy } from "../types/shared";
 import useBrandStores from "./useBrandStores";
 import useSnaps from "./useSnaps";
 import useMembers from "./useMembers";
+import useInvites from "./useInvites";
 
 export const useAppDispatch: () => AppDispatch = useDispatch;
 export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
@@ -132,4 +133,4 @@ export function usePublisher() {
   });
 }
 
-export { useBrandStores, useSnaps, useMembers };
+export { useBrandStores, useSnaps, useMembers, useInvites };
diff --git a/static/js/brand-store/hooks/useInvites.ts b/static/js/brand-store/hooks/useInvites.ts
@@ -0,0 +1,20 @@
+import { useQuery } from "react-query";
+
+function useInvites(storeId: string) {
+  return useQuery({
+    queryKey: ["invites"],
+    queryFn: async () => {
+      const response = await fetch(`/api/store/${storeId}/invites`);
+
+      if (!response.ok) {
+        throw new Error("Unable to fetch invites");
+      }
+
+      const responseData = await response.json();
+
+      return responseData;
+    },
+  });
+}
+
+export default useInvites;
diff --git a/static/js/brand-store/pages/Members/InvitesTable.tsx b/static/js/brand-store/pages/Members/InvitesTable.tsx
@@ -5,15 +5,12 @@ import {
   Dispatch,
   SetStateAction,
 } from "react";
-import { useDispatch } from "react-redux";
-import { AppDispatch } from "../../state/store/index";
 import { useParams } from "react-router-dom";
 import { format } from "date-fns";
 import { MainTable, Button } from "@canonical/react-components";
 
 import InviteModal from "./InviteModal";
 
-import { fetchInvites } from "../../state/slices/invitesSlice";
 import ROLES from "./memberRoles";
 
 import type {
@@ -25,13 +22,15 @@ import type {
 
 type Props = {
   invites: InvitesList;
+  refetchInvites: () => void;
   setShowSuccessNotification: Dispatch<SetStateAction<boolean>>;
   setNotificationText: Dispatch<SetStateAction<string>>;
   setShowErrorNotification: Dispatch<SetStateAction<boolean>>;
 };
 
 function InvitesTable({
   invites,
+  refetchInvites,
   setShowSuccessNotification,
   setNotificationText,
   setShowErrorNotification,
@@ -44,11 +43,12 @@ function InvitesTable({
     useState<InviteActionData | null>(null);
   const [inviteModalIsSaving, setInviteModalIsSaving] = useState(false);
   const { id } = useParams();
-  const dispatch = useDispatch<AppDispatch>();
 
   useEffect(() => {
     setPendingInvites(
-      invites.filter((invite: Invite) => invite.status === "Pending"),
+      invites
+        ? invites.filter((invite: Invite) => invite.status === "Pending")
+        : [],
     );
     setExpiredInvites(
       invites.filter((invite: Invite) => invite.status === "Expired"),
@@ -78,7 +78,7 @@ function InvitesTable({
         }
       })
       .then(() => {
-        dispatch(fetchInvites(id as string));
+        refetchInvites();
         setTimeout(() => {
           setInviteModalOpen(false);
           setInviteModalIsSaving(false);

diff --git a/static/js/brand-store/pages/Members/Members.tsx b/static/js/brand-store/pages/Members/Members.tsx
@@ -1,6 +1,6 @@
 import { ChangeEvent, ReactNode, useEffect, useState } from "react";
 import { useParams, Navigate } from "react-router-dom";
-import { useSelector, useDispatch } from "react-redux";
+import { useRecoilValue } from "recoil";
 import {
   Spinner,
   Accordion,
@@ -19,18 +19,10 @@ import InvitesTable from "./InvitesTable";
 import StoreNotFound from "../StoreNotFound";
 import Navigation from "../../components/Navigation";
 
-import {
-  membersSelector,
-  invitesSelector,
-  brandStoresListSelector,
-} from "../../state/selectors";
-import { fetchMembers } from "../../state/slices/membersSlice";
-import { fetchInvites } from "../../state/slices/invitesSlice";
+import { brandStoresState } from "../../state/brandStoreState";
+import { useMembers, useInvites } from "../../hooks";
 
 import { setPageTitle } from "../../utils";
-import { AppDispatch } from "../../state/store/index";
-
-import type { InvitesSlice } from "../../types/shared";
 
 type Members = {
   members: {
@@ -50,19 +42,18 @@ type Member = {
 };
 
 function Members(): ReactNode {
-  const members = useSelector(membersSelector);
-  const membersLoading = useSelector((state: Members) => state.members.loading);
-  const invites = useSelector(invitesSelector);
-  const brandStoresList = useSelector(brandStoresListSelector);
-  const invitesLoading = useSelector((state: Members) => state.members.loading);
-  const membersNotFound = useSelector(
-    (state: Members) => state.members.notFound,
-  );
-  const invitesNotFound = useSelector(
-    (state: InvitesSlice) => state.invites.notFound,
-  );
-  const dispatch = useDispatch<AppDispatch>();
+  const brandStoresList = useRecoilValue(brandStoresState);
   const { id } = useParams();
+  const {
+    data: members,
+    isLoading: membersLoading,
+    refetch: refetchMembers,
+  } = useMembers(id || "");
+  const {
+    data: invites,
+    isLoading: invitesLoading,
+    refetch: refetchInvites,
+  } = useInvites(id || "");
   const [filteredMembers, setFilteredMembers] = useState<Member[]>([]);
   const [sidePanelOpen, setSidePanelOpen] = useState(false);
   const [newMemberEmail, setNewMemberEmail] = useState("");
@@ -117,8 +108,8 @@ function Members(): ReactNode {
             setSidePanelOpen(false);
             setNewMemberEmail("");
             setNewMemberRoles([]);
-            dispatch(fetchMembers(id as string));
-            dispatch(fetchInvites(id as string));
+            refetchMembers();
+            refetchInvites();
             setShowSuccessNotification(true);
             setNotificationText("Member has been added to the store");
             setShowInviteForm(false);
@@ -156,8 +147,8 @@ function Members(): ReactNode {
     currentMember?.roles.length === 1 && currentMember?.roles.includes("view");
 
   useEffect(() => {
-    dispatch(fetchMembers(id as string));
-    dispatch(fetchInvites(id as string));
+    refetchMembers();
+    refetchInvites();
     setStoreName((): string | undefined => {
       const store = brandStoresList.find((item) => item.id === id);
 
@@ -170,19 +161,23 @@ function Members(): ReactNode {
   }, [id]);
 
   useEffect(() => {
-    setFilteredMembers(members);
+    if (members) {
+      setFilteredMembers(members);
+    }
   }, [members]);
 
   useEffect(() => {
     setMemberButtonDisabled(!newMemberEmail || newMemberRoles.length === 0);
   }, [newMemberEmail, newMemberRoles]);
 
   useEffect(() => {
-    setCurrentMember(members.find((member) => member.current_user));
+    if (members) {
+      setCurrentMember(members.find((member: Member) => member.current_user));
+    }
   }, [members, membersLoading, invitesLoading]);
 
   const getSectionName = () => {
-    if (!membersNotFound && !invitesNotFound) {
+    if (members && invites) {
       return "members";
     } else {
       return null;
@@ -209,7 +204,8 @@ function Members(): ReactNode {
               <div className="u-fixed-width">
                 <Spinner text="Loading&hellip;" />
               </div>
-            ) : membersNotFound || invitesNotFound ? (
+            ) : (!members && !membersLoading) ||
+              (!invites && !invitesLoading) ? (
               <StoreNotFound />
             ) : isOnlyViewer() ? (
               <Navigate to={`/admin/${id}/snaps`} />
@@ -229,7 +225,7 @@ function Members(): ReactNode {
                         if (query) {
                           setFilteredMembers(
                             members.filter(
-                              (member) =>
+                              (member: Member) =>
                                 member.displayname.includes(query) ||
                                 member.email.includes(query),
                             ),
@@ -267,10 +263,11 @@ function Members(): ReactNode {
                       },
                       {
                         key: "invites-table",
-                        title: `${invites.length} invites`,
+                        title: `${invites ? invites.length : 0} invites`,
                         content: (
                           <InvitesTable
                             invites={invites}
+                            refetchInvites={refetchInvites}
                             setNotificationText={setNotificationText}
                             setShowSuccessNotification={
                               setShowSuccessNotification

diff --git a/static/js/brand-store/pages/Snaps/Snaps.tsx b/static/js/brand-store/pages/Snaps/Snaps.tsx
@@ -349,7 +349,7 @@ function Snaps() {
               <Reviewer />
             ) : currentStore && isPublisherOnly ? (
               <Publisher />
-            ) : !snaps ? (
+            ) : !snapsLoading && !snaps ? (
               <StoreNotFound />
             ) : (
               <>

diff --git a/static/sass/_patterns_modal.scss b/static/sass/_patterns_modal.scss
@@ -1,7 +1,7 @@
 @mixin vf-p-modal-snapcraft {
   .p-modal {
     position: fixed; // make it stick to screen regardless of scroll
-    z-index: 100; // put it on top of everything (including global nav)
+    z-index: 1000; // put it on top of everything (including global nav)
 
     .p-modal__dialog.is-centered-mobile {
       left: 0;