Comprehensive review changes

webclient/src/containers/Layout/Layout.tsx

@@ -1,12 +1,21 @@
+import { ReactNode } from 'react';
+
 import LeftNav from './LeftNav';
 
 import './Layout.css'
 
-function Layout(props:LayoutProps) {
+interface LayoutProps {
+  showNav?: boolean;
+  children: ReactNode;
+  className?: string;
+  noHeightLimit?: boolean;
+}
+
+function Layout(props: LayoutProps) {
   const { children, className, showNav = true, noHeightLimit = false } = props;
-  const containerClasses = ['layout']
-  if (noHeightLimit === true) {
-    containerClasses.push('layout--no-height-limit')
+  const containerClasses = ['layout'];
+  if (noHeightLimit) {
+    containerClasses.push('layout--no-height-limit');
   }
 
   return (
@@ -29,11 +38,4 @@ function BottomBar() {
   )
 }
 
-interface LayoutProps {
-    showNav?: boolean;
-    children: any;
-    className?: string;
-    noHeightLimit?: boolean
-}
-
 export default Layout;

webclient/src/containers/Layout/LeftNav.css

@@ -38,9 +38,6 @@
   margin-left: 10px;
 }
 
-.LeftNav-nav {
-}
-
 .LeftNav-nav__links {
   display: flex;
   flex-flow: column;
@@ -102,27 +99,7 @@
   justify-content: center;
 }
 
-.LeftNav-nav__action {
-
-}
-
 .LeftNav-nav__action button {
   color: white;
 }
 
-.temp-subnav__rooms {
-  display: flex;
-  align-items: center;
-  font-size: 10px;
-  padding: 5px;
-}
-
-.temp-chip {
-  margin-left: 5px;
-  text-decoration: none;
-}
-
-
-.temp-chip > div {
-  cursor: inherit;
-}

webclient/src/containers/Layout/LeftNav.tsx

@@ -109,8 +109,8 @@ const LeftNav = () => {
                     }}
                   >
                     {state.options.map((option) => (
-                      <MenuItem key={option} onClick={() => handleMenuItemClick(option)}>
-                        {option}
+                      <MenuItem key={option.label} onClick={() => handleMenuItemClick(option)}>
+                        {option.label}
                       </MenuItem>
                     ))}
 

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 {