Comprehensive review changes

webclient/src/containers/Layout/useLeftNav.ts

@@ -1,68 +1,69 @@
-import { useEffect, useState } from 'react';
+import { useMemo, useState } from 'react';
 import { useNavigate, generatePath } from 'react-router-dom';
 
 import { useWebClient } from '@app/hooks';
 import { RoomsSelectors, ServerSelectors, useAppSelector } from '@app/store';
 import { App } from '@app/types';
 
+export interface LeftNavOption {
+  label: string;
+  route: App.RouteEnum;
+}
+
 interface LeftNavState {
   anchorEl: Element | null;
   showCardImportDialog: boolean;
-  options: string[];
+  options: LeftNavOption[];
 }
 
 export interface LeftNav {
-  joinedRooms: any[];
+  joinedRooms: ReturnType<typeof RoomsSelectors.getJoinedRooms>;
   isConnected: boolean;
   state: LeftNavState;
   handleMenuOpen: (event: React.MouseEvent) => void;
-  handleMenuItemClick: (option: string) => void;
+  handleMenuItemClick: (option: LeftNavOption) => void;
   handleMenuClose: () => void;
   leaveRoom: (event: React.MouseEvent, roomId: number) => void;
   openImportCardWizard: () => void;
   closeImportCardWizard: () => void;
 }
 
+const BASE_OPTIONS: LeftNavOption[] = [
+  { label: 'Account', route: App.RouteEnum.ACCOUNT },
+  { label: 'Replays', route: App.RouteEnum.REPLAYS },
+];
+
+const MODERATOR_OPTIONS: LeftNavOption[] = [
+  { label: 'Administration', route: App.RouteEnum.ADMINISTRATION },
+  { label: 'Logs', route: App.RouteEnum.LOGS },
+];
+
 export function useLeftNav(): LeftNav {
   const joinedRooms = useAppSelector((state) => RoomsSelectors.getJoinedRooms(state));
   const isConnected = useAppSelector(ServerSelectors.getIsConnected);
   const isModerator = useAppSelector(ServerSelectors.getIsUserModerator);
   const navigate = useNavigate();
   const webClient = useWebClient();
-  const [state, setState] = useState<LeftNavState>({
-    anchorEl: null,
-    showCardImportDialog: false,
-    options: [],
-  });
+  const [anchorEl, setAnchorEl] = useState<Element | null>(null);
+  const [showCardImportDialog, setShowCardImportDialog] = useState(false);
 
-  useEffect(() => {
-    let options: string[] = [
-      'Account',
-      'Replays',
-    ];
+  const options = useMemo<LeftNavOption[]>(
+    () => (isModerator ? [...BASE_OPTIONS, ...MODERATOR_OPTIONS] : BASE_OPTIONS),
+    [isModerator],
+  );
 
-    if (isModerator) {
-      options = [
-        ...options,
-        'Administration',
-        'Logs',
-      ];
-    }
-
-    setState((s) => ({ ...s, options }));
-  }, [isModerator]);
+  const state: LeftNavState = { anchorEl, showCardImportDialog, options };
 
   const handleMenuOpen = (event: React.MouseEvent) => {
-    setState((s) => ({ ...s, anchorEl: event.target as Element }));
+    setAnchorEl(event.target as Element);
   };
 
-  const handleMenuItemClick = (option: string) => {
-    const route = App.RouteEnum[option.toUpperCase()];
-    navigate(generatePath(route));
+  const handleMenuItemClick = (option: LeftNavOption) => {
+    navigate(generatePath(option.route));
   };
 
   const handleMenuClose = () => {
-    setState((s) => ({ ...s, anchorEl: null }));
+    setAnchorEl(null);
   };
 
   const leaveRoom = (event: React.MouseEvent, roomId: number) => {
@@ -71,12 +72,12 @@ export function useLeftNav(): LeftNav {
   };
 
   const openImportCardWizard = () => {
-    setState((s) => ({ ...s, showCardImportDialog: true }));
+    setShowCardImportDialog(true);
     handleMenuClose();
   };
 
   const closeImportCardWizard = () => {
-    setState((s) => ({ ...s, showCardImportDialog: false }));
+    setShowCardImportDialog(false);
   };
 
   return {