chore: Remove RTK from brand store

static/js/brand-store/brand-store.tsx

@@ -1,4 +1,5 @@
 import { createRoot } from "react-dom/client";
+import { QueryClient, QueryClientProvider } from "react-query";
 import * as Sentry from "@sentry/react";
 import { BrowserTracing } from "@sentry/browser";
 import App from "./routes/App";
@@ -13,10 +14,21 @@ Sentry.init({
 
 const container = document.getElementById("root");
 const root = createRoot(container as HTMLDivElement);
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+      refetchOnReconnect: false,
+    },
+  },
+});
+
 root.render(
   <Provider store={store}>
-    <RecoilRoot>
-      <App />
-    </RecoilRoot>
+    <QueryClientProvider client={queryClient}>
+      <RecoilRoot>
+        <App />
+      </RecoilRoot>
+    </QueryClientProvider>
   </Provider>,
 );

static/js/brand-store/components/Navigation/Navigation.tsx

@@ -1,23 +1,23 @@
 import { useState, useEffect, ReactNode } from "react";
-import { useSelector } from "react-redux";
-import { useRecoilState } from "recoil";
+import { useRecoilState, useRecoilValue } from "recoil";
 import { useParams, NavLink } from "react-router-dom";
 
 import Logo from "./Logo";
 
 import { publisherState } from "../../state/publisherState";
 import { brandIdState } from "../../state/brandStoreState";
-import { brandStoresListSelector } from "../../state/selectors";
 import { useBrand, usePublisher } from "../../hooks";
 
+import { brandStoresState } from "../../state/brandStoreState";
+
 import type { Store } from "../../types/shared";
 
 function Navigation({
   sectionName,
 }: {
   sectionName: string | null;
 }): ReactNode {
-  const brandStoresList = useSelector(brandStoresListSelector);
+  const brandStoresList = useRecoilValue(brandStoresState);
   const { id } = useParams();
   const { data: brand } = useBrand(id);
   const { data: publisherData } = usePublisher();

static/js/brand-store/hooks/index.ts

@@ -3,6 +3,8 @@ import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
 import type { AppDispatch, RootState } from "../state/store";
 import type { Model as ModelType, SigningKey, Policy } from "../types/shared";
 
+import useBrandStores from "./useBrandStores";
+
 export const useAppDispatch: () => AppDispatch = useDispatch;
 export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
 
@@ -127,3 +129,5 @@ export function usePublisher() {
     return publisherData;
   });
 }
+
+export { useBrandStores };

static/js/brand-store/hooks/useBrandStores.tsx

@@ -0,0 +1,24 @@
+import { useQuery } from "react-query";
+
+function useBrandStores() {
+  return useQuery({
+    queryKey: ["brandStores"],
+    queryFn: async () => {
+      const response = await fetch("/api/stores");
+
+      if (!response.ok) {
+        throw new Error("Unable to fetch stores");
+      }
+
+      const responseData = await response.json();
+
+      if (!responseData.success) {
+        throw new Error(responseData.message);
+      }
+
+      return responseData.data;
+    },
+  });
+}
+
+export default useBrandStores;

static/js/brand-store/pages/Snaps/Snaps.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from "react";
-import type { ReactNode } from "react";
 import { useParams, Link } from "react-router-dom";
+import { useRecoilValue } from "recoil";
 import { useSelector } from "react-redux";
 import { AsyncThunkAction } from "@reduxjs/toolkit";
 import { useAppDispatch } from "../../state/store";
@@ -14,14 +14,12 @@ import {
   Accordion,
 } from "@canonical/react-components";
 
-import {
-  snapsSelector,
-  brandStoresListSelector,
-  membersSelector,
-} from "../../state/selectors";
+import { snapsSelector, membersSelector } from "../../state/selectors";
 import { fetchSnaps } from "../../state/slices/snapsSlice";
 import { fetchMembers } from "../../state/slices/membersSlice";
 
+import { brandStoresState } from "../../state/brandStoreState";
+
 import Publisher from "../Publisher";
 import Reviewer from "../Reviewer";
 import ReviewerAndPublisher from "../ReviewerAndPublisher";
@@ -35,23 +33,19 @@ import IncludedSnapsTable from "./IncludedSnapsTable";
 import { setPageTitle } from "../../utils";
 
 import type {
-  StoresSlice,
+  Store,
   Snap,
   SnapsList,
-  Store,
   Member,
   SnapsSlice,
   MembersSlice,
 } from "../../types/shared";
 
-function Snaps(): ReactNode {
-  const brandStoresList = useSelector(brandStoresListSelector);
+function Snaps() {
+  const brandStoresList = useRecoilValue(brandStoresState);
   const snaps = useSelector(snapsSelector);
   const members = useSelector(membersSelector);
   const snapsLoading = useSelector((state: SnapsSlice) => state.snaps.loading);
-  const storesLoading = useSelector(
-    (state: StoresSlice) => state.brandStores.loading,
-  );
   const membersLoading = useSelector(
     (state: MembersSlice) => state.members.loading,
   );
@@ -86,7 +80,7 @@ function Snaps(): ReactNode {
     useState(false);
   const [showRemoveSnapsConfirmation, setShowRemoveSnapsConfirmation] =
     useState(false);
-  const [globalStore, setGlobalStore] = useState<Store | null>(null);
+  const [globalStore, setGlobalStore] = useState<Store>();
 
   const [fetchSnapsByStoreIdPromise, setFetchSnapsByStoreIdPromise] = useState<
     ReturnType<AsyncThunkAction<Snap[], string, object>> | undefined
@@ -374,7 +368,7 @@ function Snaps(): ReactNode {
       <main className="l-main">
         <div className="p-panel">
           <div className="p-panel__content">
-            {snapsLoading && storesLoading && membersLoading ? (
+            {snapsLoading && membersLoading ? (
               <div className="u-fixed-width">
                 <Spinner text="Loading&hellip;" />
               </div>
@@ -479,7 +473,7 @@ function Snaps(): ReactNode {
                               content: (
                                 <IncludedSnapsTable
                                   otherStores={otherStores}
-                                  globalStore={globalStore}
+                                  globalStore={globalStore || null}
                                   getStoreName={getStoreName}
                                   isOnlyViewer={isOnlyViewer}
                                   snapsToRemove={snapsToRemove}