Convert brand store App component to TypeScript (#4308)

canonical · Jun 27, 2023 · 5ed074c · 5ed074c
1 parent d5e9094
commit 5ed074c
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 22 deletions.
diff --git a/static/js/brand-store/components/App/App.js → static/js/brand-store/components/App/App.tsx b/static/js/brand-store/components/App/App.js → static/js/brand-store/components/App/App.tsx
@@ -20,13 +20,17 @@ import Policies from "../Model/Policies";
 import SigningKeys from "../SigningKeys";
 import StoreNotFound from "../StoreNotFound";
 
+import type { Stores, BrandStores } from "../../types/shared";
+
 function App() {
-  const isLoading = useSelector((state) => state.brandStores.loading);
-  const brandStoresList = useSelector(brandStoresListSelector);
+  const isLoading = useSelector(
+    (state: BrandStores) => state.brandStores.loading
+  );
+  const brandStoresList: Stores = useSelector(brandStoresListSelector);
   const dispatch = useDispatch();
 
   useEffect(() => {
-    dispatch(fetchStores());
+    dispatch(fetchStores() as any);
   }, []);
 
   return (
@@ -35,7 +39,6 @@ function App() {
         <Navigation />
         <Routes>
           <Route
-            exact
             path="/admin"
             element={
               !isLoading ? (
@@ -50,21 +53,16 @@ function App() {
               ) : null
             }
           />
-          <Route exact path="/admin/:id/snaps" element={<Snaps />} />
-          <Route exact path="/admin/:id/members" element={<Members />} />
-          <Route exact path="/admin/:id/settings" element={<Settings />} />
-          <Route exact path="/admin/:id/models" element={<Models />} />
-          <Route exact path="/admin/:id/models/:model_id" element={<Model />} />
+          <Route path="/admin/:id/snaps" element={<Snaps />} />
+          <Route path="/admin/:id/members" element={<Members />} />
+          <Route path="/admin/:id/settings" element={<Settings />} />
+          <Route path="/admin/:id/models" element={<Models />} />
+          <Route path="/admin/:id/models/:model_id" element={<Model />} />
           <Route
-            exact
             path="/admin/:id/models/:model_id/policies"
             element={<Policies />}
           />
-          <Route
-            exact
-            path="/admin/:id/signing-keys"
-            element={<SigningKeys />}
-          />
+          <Route path="/admin/:id/signing-keys" element={<SigningKeys />} />
         </Routes>
       </div>
     </Router>

diff --git a/...ic/js/brand-store/components/App/index.js → ...ic/js/brand-store/components/App/index.ts b/...ic/js/brand-store/components/App/index.js → ...ic/js/brand-store/components/App/index.ts
diff --git a/static/js/brand-store/hooks/index.ts b/static/js/brand-store/hooks/index.ts
@@ -1,4 +1,5 @@
-import { useDispatch } from "react-redux";
-import type { AppDispatch } from "../store";
+import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
+import type { AppDispatch, RootState } from "../store";
 
-export const useAppDispatch = () => useDispatch<AppDispatch>();
+export const useAppDispatch: () => AppDispatch = useDispatch;
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
diff --git a/static/js/brand-store/slices/brandStoreSlice.ts b/static/js/brand-store/slices/brandStoreSlice.ts
@@ -1,4 +1,4 @@
-import { createSlice } from "@reduxjs/toolkit";
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 import { AppDispatch } from "../store";
 
 export const slice = createSlice({
@@ -12,8 +12,8 @@ export const slice = createSlice({
     getBrandStoresLoading: (state) => {
       state.loading = true;
     },
-    getBrandStoresSuccess: (state, { payload }) => {
-      state.brandStoresList = payload || [];
+    getBrandStoresSuccess: (state, action: PayloadAction<[]>) => {
+      state.brandStoresList = action.payload || [];
       state.loading = false;
     },
     getBrandStoresNotFound: (state) => {

diff --git a/static/js/brand-store/store/index.ts b/static/js/brand-store/store/index.ts
@@ -15,4 +15,5 @@ export const store = configureStore({
   },
 });
 
+export type RootState = ReturnType<typeof store.getState>;
 export type AppDispatch = typeof store.dispatch;
diff --git a/static/js/brand-store/types/shared.ts b/static/js/brand-store/types/shared.ts
@@ -13,7 +13,9 @@ export type Member = {
 
 export type BrandStores = {
   brandStores: {
-    brandStoresList: Array<{}>;
+    brandStoresList: Stores;
+    loading: boolean;
+    notFound: boolean;
   };
 };
 
@@ -49,3 +51,5 @@ export type Store = {
   id?: string;
   name?: string;
 };
+
+export type Stores = Array<Store>;