Refactor ClientSplitView for consistency and readability

Author: ulrikandersen

src/features/sidebar/view/internal/ClientSplitView.tsx

@@ -1,70 +1,64 @@
-"use client";
+"use client"
 
-import { useEffect, useContext } from "react";
-import { Stack, useMediaQuery, useTheme } from "@mui/material";
-import { isMac, useKeyboardShortcut, SidebarTogglableContext } from "@/common";
-import { useSidebarOpen } from "../../data";
-import useDiffbarOpen from "../../data/useDiffbarOpen";
-import { useProjectSelection } from "@/features/projects/data";
-import PrimaryContainer from "./primary/Container";
-import SecondaryContainer from "./secondary/Container";
-import RightContainer from "./tertiary/RightContainer";
+import { useEffect, useContext } from "react"
+import { Stack, useMediaQuery, useTheme } from "@mui/material"
+import { isMac, useKeyboardShortcut, SidebarTogglableContext } from "@/common"
+import { useSidebarOpen } from "../../data"
+import useDiffbarOpen from "../../data/useDiffbarOpen"
+import { useProjectSelection } from "@/features/projects/data"
+import PrimaryContainer from "./primary/Container"
+import SecondaryContainer from "./secondary/Container"
+import RightContainer from "./tertiary/RightContainer"
 
 const ClientSplitView = ({
   sidebar,
   children,
-  sidebarRight,
+  sidebarRight
 }: {
-  sidebar: React.ReactNode;
-  children?: React.ReactNode;
-  sidebarRight?: React.ReactNode;
+  sidebar: React.ReactNode
+  children?: React.ReactNode
+  sidebarRight?: React.ReactNode
 }) => {
-  const [isSidebarOpen, setSidebarOpen] = useSidebarOpen();
-  const [isRightSidebarOpen, setRightSidebarOpen] = useDiffbarOpen();
-  const { specification } = useProjectSelection();
-  const isSidebarTogglable = useContext(SidebarTogglableContext);
-  const theme = useTheme();
+  const [isSidebarOpen, setSidebarOpen] = useSidebarOpen()
+  const [isRightSidebarOpen, setRightSidebarOpen] = useDiffbarOpen()
+  const { specification } = useProjectSelection()
+  const isSidebarTogglable = useContext(SidebarTogglableContext)
+  const theme = useTheme()
   // Determine if the screen size is small or larger
-  const isSM = useMediaQuery(theme.breakpoints.up("sm"));
+  const isSM = useMediaQuery(theme.breakpoints.up("sm"))
 
   useEffect(() => {
     if (!isSidebarTogglable && !isSidebarOpen) {
-      setSidebarOpen(true);
+      setSidebarOpen(true)
     }
-  }, [isSidebarOpen, isSidebarTogglable, setSidebarOpen]);
+  }, [isSidebarOpen, isSidebarTogglable, setSidebarOpen])
 
   // Close diff sidebar if no specification is selected
   useEffect(() => {
     if (!specification && isRightSidebarOpen) {
-      setRightSidebarOpen(false);
+      setRightSidebarOpen(false)
     }
-  }, [specification, isRightSidebarOpen, setRightSidebarOpen]);
-  useKeyboardShortcut(
-    (event) => {
-      const isActionKey = isMac() ? event.metaKey : event.ctrlKey;
-      if (isActionKey && event.key === ".") {
-        event.preventDefault();
-        if (isSidebarTogglable) {
-          setSidebarOpen(!isSidebarOpen);
-        }
+  }, [specification, isRightSidebarOpen, setRightSidebarOpen])
+  useKeyboardShortcut(event => {
+    const isActionKey = isMac() ? event.metaKey : event.ctrlKey
+    if (isActionKey && event.key === ".") {
+      event.preventDefault()
+      if (isSidebarTogglable) {
+        setSidebarOpen(!isSidebarOpen)
       }
-    },
-    [isSidebarTogglable, setSidebarOpen]
-  );
+    }
+  }, [isSidebarTogglable, setSidebarOpen])
 
-  useKeyboardShortcut(
-    (event) => {
-      const isActionKey = isMac() ? event.metaKey : event.ctrlKey;
-      if (isActionKey && event.key === "k") {
-        event.preventDefault();
-        setRightSidebarOpen(!isRightSidebarOpen);
-      }
-    },
-    [isRightSidebarOpen, setRightSidebarOpen]
-  );
+  useKeyboardShortcut(event => {
+    const isActionKey = isMac() ? event.metaKey : event.ctrlKey
+    if (isActionKey && event.key === "k") {
+      event.preventDefault()
+      setRightSidebarOpen(!isRightSidebarOpen)
+    }
+  }, [isRightSidebarOpen, setRightSidebarOpen])
 
-  const sidebarWidth = 320;
-  const diffWidth = 320;
+  const sidebarWidth = 320
+  const diffWidth = 320
 
   return (
     <Stack direction="row" spacing={0} sx={{ width: "100%", height: "100%" }}>
@@ -75,13 +69,7 @@ const ClientSplitView = ({
       >
         {sidebar}
       </PrimaryContainer>
-      <SecondaryContainer
-        isSM={isSM}
-        sidebarWidth={sidebarWidth}
-        offsetContent={isSidebarOpen}
-        diffWidth={diffWidth}
-        offsetDiffContent={isRightSidebarOpen}
-      >
+      <SecondaryContainer isSM={isSM} sidebarWidth={sidebarWidth} offsetContent={isSidebarOpen} diffWidth={diffWidth} offsetDiffContent={isRightSidebarOpen}>
         {children}
       </SecondaryContainer>
       <RightContainer
@@ -92,7 +80,7 @@ const ClientSplitView = ({
         {sidebarRight}
       </RightContainer>
     </Stack>
-  );
-};
+  )
+}
 
-export default ClientSplitView;
+export default ClientSplitView