EDIT - Run prettier

Signed-off-by: Damian Krysta <damian@krysta.dev>

ui/package.json

@@ -6,9 +6,9 @@
     "@emotion/react": "^11.1.5",
     "@emotion/styled": "^11.1.5",
     "@fontsource/roboto": "^4.2.1",
+    "@mui/material": "^5.0.1",
     "@mui/icons-material": "^5.0.1",
     "@mui/lab": "^5.0.0-alpha.48",
-    "@mui/material": "^5.0.1",
     "@mui/styles": "^5.0.1",
     "@react-hook/resize-observer": "^1.2.0",
     "@types/jest": "^26.0.20",

ui/src/App.tsx

@@ -11,7 +11,14 @@ import { useSnackbars } from "./snackbars";
 import { Camera, Session } from "./types";
 import ListActivity from "./List";
 import AppBar from "@mui/material/AppBar";
-import {Routes, Route, Link, useSearchParams, useResolvedPath, useMatch} from "react-router-dom";
+import {
+  Routes,
+  Route,
+  Link,
+  useSearchParams,
+  useResolvedPath,
+  useMatch,
+} from "react-router-dom";
 import LiveActivity, { MultiviewChooser } from "./Live";
 import Drawer from "@mui/material/Drawer";
 import List from "@mui/material/List";
@@ -40,10 +47,12 @@ function App() {
     (m: boolean) => !m,
     true
   );
-  let resolved = useResolvedPath('live');
+  let resolved = useResolvedPath("live");
   let match = useMatch({ path: resolved.pathname, end: true });
   const [activity, setActivity] = useState<Activity>(match ? "live" : "list");
-  const [multiviewLayoutIndex, setMultiviewLayoutIndex] = useState(Number.parseInt(searchParams.get('layout') || '0', 10));
+  const [multiviewLayoutIndex, setMultiviewLayoutIndex] = useState(
+    Number.parseInt(searchParams.get("layout") || "0", 10)
+  );
   const [session, setSession] = useState<Session | null>(null);
   const [cameras, setCameras] = useState<Camera[] | null>(null);
   const [timeZoneName, setTimeZoneName] = useState<string | null>(null);
@@ -86,14 +95,28 @@ function App() {
   };
 
   function fetchedCameras(cameras: Camera[] | null) {
-    if (cameras !== null && cameras.length >0) {
+    if (cameras !== null && cameras.length > 0) {
       return (
         <>
-          <Route path="" element={ <ListActivity cameras={cameras}
+          <Route
-                                                 showSelectors={showListSelectors}
+            path=""
-                                                 timeZoneName={timeZoneName!}
+            element={
-          />} />
+              <ListActivity
-          <Route path="live" element={<LiveActivity cameras={cameras} layoutIndex={multiviewLayoutIndex} />} />
+                cameras={cameras}
+                showSelectors={showListSelectors}
+                timeZoneName={timeZoneName!}
+              />
+            }
+          />
+          <Route
+            path="live"
+            element={
+              <LiveActivity
+                cameras={cameras}
+                layoutIndex={multiviewLayoutIndex}
+              />
+            }
+          />
         </>
       );
     }
@@ -150,8 +173,8 @@ function App() {
           <MultiviewChooser
             layoutIndex={multiviewLayoutIndex}
             onChoice={(value) => {
-              setMultiviewLayoutIndex(value)
+              setMultiviewLayoutIndex(value);
-              setSearchParams({layout: value.toString()}, )
+              setSearchParams({ layout: value.toString() });
             }}
           />
         );
@@ -181,13 +204,25 @@ function App() {
         }}
       >
         <List>
-          <ListItem button key="list" onClick={() => clickActivity("list")} component={Link} to="/">
+          <ListItem
+            button
+            key="list"
+            onClick={() => clickActivity("list")}
+            component={Link}
+            to="/"
+          >
             <ListItemIcon>
               <ListIcon />
             </ListItemIcon>
             <ListItemText primary="List view" />
           </ListItem>
-          <ListItem button key="live" onClick={() => clickActivity("live")} component={Link} to="/live">
+          <ListItem
+            button
+            key="live"
+            onClick={() => clickActivity("live")}
+            component={Link}
+            to="/live"
+          >
             <ListItemIcon>
               <Videocam />
             </ListItemIcon>
@@ -217,9 +252,7 @@ function App() {
           </p>
         </Container>
       )}
-      <Routes>
+      <Routes>{fetchedCameras(cameras)}</Routes>
-        {fetchedCameras(cameras)}
-      </Routes>
     </>
   );
 }

ui/src/Live/Multiview.tsx

@@ -4,11 +4,11 @@
 
 import Select, { SelectChangeEvent } from "@mui/material/Select";
 import MenuItem from "@mui/material/MenuItem";
-import React, {useReducer} from "react";
+import React, { useReducer } from "react";
 import { Camera } from "../types";
 import { makeStyles } from "@mui/styles";
 import { Theme } from "@mui/material/styles";
-import {useSearchParams} from "react-router-dom";
+import { useSearchParams } from "react-router-dom";
 
 export interface Layout {
   className: string;
@@ -96,7 +96,7 @@ export const MultiviewChooser = (props: MultiviewChooserProps) => {
           typeof e.target.value === "string"
             ? parseInt(e.target.value)
             : e.target.value
-        )
+        );
       }}
       size="small"
       sx={{
@@ -130,7 +130,6 @@ interface SelectOp {
   cameraIndex: number | null;
 }
 
-
 function selectedReducer(old: SelectedCameras, op: SelectOp): SelectedCameras {
   let selected = [...old]; // shallow clone.
   if (op.cameraIndex !== null) {
@@ -156,7 +155,9 @@ const Multiview = (props: MultiviewProps) => {
 
   const [selected, updateSelected] = useReducer(
     selectedReducer,
-    searchParams.has('cams') ? JSON.parse(searchParams.get('cams') || "") : Array(MAX_CAMERAS).fill(null)
+    searchParams.has("cams")
+      ? JSON.parse(searchParams.get("cams") || "")
+      : Array(MAX_CAMERAS).fill(null)
   );
 
   const outerRef = React.useRef<HTMLDivElement>(null);
@@ -179,16 +180,19 @@ const Multiview = (props: MultiviewProps) => {
         cameraIndex={e}
         renderCamera={props.renderCamera}
         onSelect={(cameraIndex) => {
-          updateSelected({selectedIndex: i, cameraIndex})
+          updateSelected({ selectedIndex: i, cameraIndex });
-          searchParams.set('cams',  JSON.stringify(selectedReducer(selected, {selectedIndex: i, cameraIndex})))
+          searchParams.set(
-          setSearchParams(searchParams)
+            "cams",
+            JSON.stringify(
+              selectedReducer(selected, { selectedIndex: i, cameraIndex })
+            )
+          );
+          setSearchParams(searchParams);
         }}
       />
     );
   });
 
-
-
   return (
     <div className={classes.root} ref={outerRef}>
       <div className="mid">
@@ -219,7 +223,7 @@ const Monoview = (props: MonoviewProps) => {
 
   const chooser = (
     <Select
-      value={props.cameraIndex == null ? null: props.cameraIndex}
+      value={props.cameraIndex == null ? null : props.cameraIndex}
       onChange={handleChange}
       displayEmpty
       size="small"

ui/src/index.tsx

@@ -14,7 +14,7 @@ import ErrorBoundary from "./ErrorBoundary";
 import { SnackbarProvider } from "./snackbars";
 import AdapterDateFns from "@mui/lab/AdapterDateFns";
 import "./index.css";
-import {HashRouter} from "react-router-dom";
+import { HashRouter } from "react-router-dom";
 
 const theme = createTheme({
   palette: {
@@ -35,7 +35,7 @@ ReactDOM.render(
         <ErrorBoundary>
           <LocalizationProvider dateAdapter={AdapterDateFns}>
             <SnackbarProvider autoHideDuration={5000}>
-              <HashRouter >
+              <HashRouter>
                 <App />
               </HashRouter>
             </SnackbarProvider>

ui/src/testutil.tsx

@@ -14,9 +14,7 @@ export function renderWithCtx(
     return (
       <ThemeProvider theme={createTheme()}>
         <SnackbarProvider autoHideDuration={5000}>
-          <MemoryRouter>
+          <MemoryRouter>{children}</MemoryRouter>
-            {children}
-          </MemoryRouter>
         </SnackbarProvider>
       </ThemeProvider>
     );