fix: incorrect selector usage in redux

flipt-io · Nov 25, 2023 · 51dc09a · 51dc09a
1 parent ce0609f
commit 51dc09a
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 27 deletions.
diff --git a/ui/src/app/flags/Flag.tsx b/ui/src/app/flags/Flag.tsx
@@ -49,7 +49,7 @@ export default function Flag() {
   const readOnly = useSelector(selectReadonly);
 
   const flag = useSelector((state: RootState) =>
-    selectFlag(state, namespace.key, flagKey || '')
+    selectFlag(state, flagKey || '')
   );
 
   const [showDeleteFlagModal, setShowDeleteFlagModal] = useState(false);
@@ -71,7 +71,7 @@ export default function Flag() {
       .catch((err) => {
         setError(err);
       });
-  }, [flagKey, namespace.key, clearError, setError]);
+  }, [flagKey, namespace.key, clearError, setError, dispatch]);
 
   if (!flag || flag.key != flagKey) return <Loading />;
 

diff --git a/ui/src/app/flags/flagsSlice.ts b/ui/src/app/flags/flagsSlice.ts
@@ -139,18 +139,17 @@ const setFlag = (
   state.flags[namespaceKey][flag.key] = flag;
 };
 
-export const selectFlag = createSelector(
-  [
-    (state: RootState, namespaceKey: string, key: string) => {
-      const flags = state.flags.flags[namespaceKey];
-      if (flags) {
-        return flags[key] || ({} as IFlag);
-      }
+const selectNamespaceFlags = (state: RootState) =>
+  state.flags.flags[state.namespaces.currentNamespace];
 
+export const selectFlag = createSelector(
+  [selectNamespaceFlags, (state: RootState, key: string) => key],
+  (flags, key) => {
+    if (flags === undefined) {
       return {} as IFlag;
     }
-  ],
-  (flag) => flag
+    return flags[key];
+  }
 );
 
 interface FlagIdentifier {

diff --git a/ui/src/app/namespaces/namespacesSlice.ts b/ui/src/app/namespaces/namespacesSlice.ts
@@ -75,25 +75,19 @@ export const namespacesSlice = createSlice({
 export const { currentNamespaceChanged } = namespacesSlice.actions;
 
 export const selectNamespaces = createSelector(
-  [
-    (state: RootState) =>
-      Object.entries(state.namespaces.namespaces).map(
-        ([_, value]) => value
-      ) as INamespace[]
-  ],
-  (namespaces) => namespaces
+  [(state: RootState) => state.namespaces.namespaces],
+  (namespaces) => {
+    return Object.entries(namespaces).map(
+      ([_, value]) => value
+    ) as INamespace[];
+  }
 );
 
 export const selectCurrentNamespace = createSelector(
-  [
-    (state: RootState) => {
-      if (state.namespaces.namespaces[state.namespaces.currentNamespace]) {
-        return state.namespaces.namespaces[state.namespaces.currentNamespace];
-      }
-      return { key: 'default', name: 'Default', description: '' } as INamespace;
-    }
-  ],
-  (currentNamespace) => currentNamespace
+  [(state: RootState) => state.namespaces],
+  (namespaces) =>
+    namespaces.namespaces[namespaces.currentNamespace] ||
+    ({ key: 'default', name: 'Default', description: '' } as INamespace)
 );
 
 export const fetchNamespacesAsync = createAsyncThunk(