Add a state reducer

Author: gateixeira

src/App.tsx

@@ -18,6 +18,7 @@ import { useDashboardData } from './hooks/useDashboardData';
 import { useAppUsage } from './hooks/useAppUsage';
 import { useAppFilters, APPS_PER_PAGE } from './hooks/useAppFilters';
 import { useRepoView } from './hooks/useRepoView';
+import { useAppState } from './hooks/useAppState';
 import type { Repository } from './types';
 
 const Container = styled.div`
@@ -162,16 +163,12 @@ const ThemeButton = styled.button`
 `;
 
 function App() {
-  const [token, setToken] = useState('');
-  const [enterpriseUrl, setEnterpriseUrl] = useState('');
-  const [isConnected, setIsConnected] = useState(false);
-  const [selectedOrg, setSelectedOrg] = useState('');
-  const [inactiveDays, setInactiveDays] = useState(90);
+  const { state, dispatch, setToken, setEnterpriseUrl, setSelectedOrg, setInactiveDays } = useAppState();
+  const {
+    token, enterpriseUrl, isConnected, selectedOrg, inactiveDays,
+    isFirstLoad, usageLoadingStarted, smoothedAuditProgress, usageRefreshKey,
+  } = state;
   const [allRepositories] = useState<Repository[]>([]);
-  const [isFirstLoad, setIsFirstLoad] = useState(true);
-  const [usageLoadingStarted, setUsageLoadingStarted] = useState(false);
-  const [smoothedAuditProgress, setSmoothedAuditProgress] = useState({ checked: 0, total: 0, found: 0 });
-  const [usageRefreshKey, setUsageRefreshKey] = useState(0);
 
   const { 
     organizations, 
@@ -239,35 +236,37 @@ function App() {
 
   // Track when first load completes
   if (isFirstLoad && !loading && usageLoadingStarted && !usageLoading && installations.length > 0) {
-    setIsFirstLoad(false);
-    setUsageLoadingStarted(false);
+    dispatch({ type: 'FIRST_LOAD_COMPLETE' });
   }
 
   // Smooth the audit progress - only allow values to increase
   useEffect(() => {
     if (usageProgress) {
-      setSmoothedAuditProgress(prev => ({
-        checked: Math.max(prev.checked, usageProgress.appsChecked),
-        total: Math.max(prev.total, usageProgress.totalApps),
-        found: Math.max(prev.found, usageProgress.appsFound),
-      }));
+      dispatch({
+        type: 'UPDATE_AUDIT_PROGRESS',
+        payload: {
+          checked: usageProgress.appsChecked,
+          total: usageProgress.totalApps,
+          found: usageProgress.appsFound,
+        },
+      });
     }
-  }, [usageProgress]);
+  }, [usageProgress, dispatch]);
 
   // Reset smoothed progress when audit log checking is complete
   useEffect(() => {
     if (!isFirstLoad && smoothedAuditProgress.total > 0 && smoothedAuditProgress.checked >= smoothedAuditProgress.total) {
       const timer = setTimeout(() => {
-        setSmoothedAuditProgress({ checked: 0, total: 0, found: 0 });
+        dispatch({ type: 'RESET_AUDIT_PROGRESS' });
       }, 1000);
       return () => clearTimeout(timer);
     }
-  }, [isFirstLoad, smoothedAuditProgress.checked, smoothedAuditProgress.total]);
+  }, [isFirstLoad, smoothedAuditProgress.checked, smoothedAuditProgress.total, dispatch]);
 
   // Load app usage when apps are loaded and config is ready
   useEffect(() => {
     if (apps.size > 0 && organizations.length > 0 && configLoaded) {
-      setUsageLoadingStarted(true);
+      dispatch({ type: 'USAGE_LOADING_STARTED' });
       const slugs = Array.from(apps.keys());
       const orgLogins = organizations.map(o => o.login);
       loadUsage(orgLogins, slugs);
@@ -278,12 +277,10 @@ function App() {
   const handleConnect = async () => {
     if (isConnected) {
       refreshData();
-      setUsageRefreshKey(prev => prev + 1);
+      dispatch({ type: 'RECONNECT' });
       setAppsPage(1);
-      setIsFirstLoad(true);
-      setUsageLoadingStarted(false);
     } else {
-      setIsConnected(true);
+      dispatch({ type: 'CONNECT' });
     }
   };
 

src/hooks/useAppState.ts

@@ -0,0 +1,93 @@
+import { useReducer, useCallback } from 'react';
+
+interface AuditProgress {
+  checked: number;
+  total: number;
+  found: number;
+}
+
+export interface AppState {
+  token: string;
+  enterpriseUrl: string;
+  isConnected: boolean;
+  selectedOrg: string;
+  inactiveDays: number;
+  isFirstLoad: boolean;
+  usageLoadingStarted: boolean;
+  smoothedAuditProgress: AuditProgress;
+  usageRefreshKey: number;
+}
+
+type AppAction =
+  | { type: 'SET_TOKEN'; payload: string }
+  | { type: 'SET_ENTERPRISE_URL'; payload: string }
+  | { type: 'SET_SELECTED_ORG'; payload: string }
+  | { type: 'SET_INACTIVE_DAYS'; payload: number }
+  | { type: 'CONNECT' }
+  | { type: 'RECONNECT' }
+  | { type: 'FIRST_LOAD_COMPLETE' }
+  | { type: 'USAGE_LOADING_STARTED' }
+  | { type: 'UPDATE_AUDIT_PROGRESS'; payload: AuditProgress }
+  | { type: 'RESET_AUDIT_PROGRESS' };
+
+const initialState: AppState = {
+  token: '',
+  enterpriseUrl: '',
+  isConnected: false,
+  selectedOrg: '',
+  inactiveDays: 90,
+  isFirstLoad: true,
+  usageLoadingStarted: false,
+  smoothedAuditProgress: { checked: 0, total: 0, found: 0 },
+  usageRefreshKey: 0,
+};
+
+function appReducer(state: AppState, action: AppAction): AppState {
+  switch (action.type) {
+    case 'SET_TOKEN':
+      return { ...state, token: action.payload };
+    case 'SET_ENTERPRISE_URL':
+      return { ...state, enterpriseUrl: action.payload };
+    case 'SET_SELECTED_ORG':
+      return { ...state, selectedOrg: action.payload };
+    case 'SET_INACTIVE_DAYS':
+      return { ...state, inactiveDays: action.payload };
+    case 'CONNECT':
+      return { ...state, isConnected: true };
+    case 'RECONNECT':
+      return {
+        ...state,
+        usageRefreshKey: state.usageRefreshKey + 1,
+        isFirstLoad: true,
+        usageLoadingStarted: false,
+      };
+    case 'FIRST_LOAD_COMPLETE':
+      return { ...state, isFirstLoad: false, usageLoadingStarted: false };
+    case 'USAGE_LOADING_STARTED':
+      return { ...state, usageLoadingStarted: true };
+    case 'UPDATE_AUDIT_PROGRESS':
+      return {
+        ...state,
+        smoothedAuditProgress: {
+          checked: Math.max(state.smoothedAuditProgress.checked, action.payload.checked),
+          total: Math.max(state.smoothedAuditProgress.total, action.payload.total),
+          found: Math.max(state.smoothedAuditProgress.found, action.payload.found),
+        },
+      };
+    case 'RESET_AUDIT_PROGRESS':
+      return { ...state, smoothedAuditProgress: { checked: 0, total: 0, found: 0 } };
+    default:
+      return state;
+  }
+}
+
+export function useAppState() {
+  const [state, dispatch] = useReducer(appReducer, initialState);
+
+  const setToken = useCallback((token: string) => dispatch({ type: 'SET_TOKEN', payload: token }), []);
+  const setEnterpriseUrl = useCallback((url: string) => dispatch({ type: 'SET_ENTERPRISE_URL', payload: url }), []);
+  const setSelectedOrg = useCallback((org: string) => dispatch({ type: 'SET_SELECTED_ORG', payload: org }), []);
+  const setInactiveDays = useCallback((days: number) => dispatch({ type: 'SET_INACTIVE_DAYS', payload: days }), []);
+
+  return { state, dispatch, setToken, setEnterpriseUrl, setSelectedOrg, setInactiveDays };
+}