Uses Suspense when loading projects (#322)

* Moves MenuItemHover to client

* Removes unused SidebarContext

* Uses Suspense to load projects

* Moves ProjectsContextProvider to fix unit tests

* Moves contexts.ts to client-side

* Moves ProjectsContextProvider.tsx to client-side

* Fixes build errors

src/app/(authed)/(home)/[...slug]/page.tsx

@@ -1,15 +1,12 @@
 "use client"
 
-import { useContext, useEffect } from "react"
-import { ProjectsContainerContext } from "@/common"
-import DelayedLoadingIndicator from "@/common/ui/DelayedLoadingIndicator"
+import { useEffect } from "react"
 import ErrorMessage from "@/common/ui/ErrorMessage"
 import { updateWindowTitle } from "@/features/projects/domain"
 import { useProjectSelection } from "@/features/projects/data"
 import Documentation from "@/features/projects/view/Documentation"
 
 export default function Page() {
-  const { error, isLoading } = useContext(ProjectsContainerContext)
   const { project, version, specification, navigateToSelectionIfNeeded } = useProjectSelection()
   // Ensure the URL reflects the current selection of project, version, and specification.
   useEffect(() => {
@@ -32,10 +29,6 @@ export default function Page() {
     return <ErrorMessage text="The selected branch or tag was not found."/>
   } else if (project && !specification) {
     return <ErrorMessage text="The selected specification was not found."/>
-  } else if (isLoading) {
-    return <DelayedLoadingIndicator/>
-  } else if (error) {
-    return <ErrorMessage text={error.message}/>
   } else {
     // No project is selected so we will not show anything.
     return <></>

src/app/(authed)/layout.tsx

@@ -3,7 +3,8 @@ import { SessionProvider } from "next-auth/react"
 import { session, projectRepository } from "@/composition"
 import ErrorHandler from "@/common/ui/ErrorHandler"
 import SessionBarrier from "@/features/auth/view/SessionBarrier"
-import ServerSideCachedProjectsProvider from "@/features/projects/view/ServerSideCachedProjectsProvider"
+import ProjectsContextProvider from "@/features/projects/view/ProjectsContextProvider"
+import { SplitView } from "@/features/sidebar/view"
 
 export default async function Layout({ children }: { children: React.ReactNode }) {
   const isAuthenticated = await session.getIsAuthenticated()
@@ -15,11 +16,13 @@ export default async function Layout({ children }: { children: React.ReactNode }
     <ErrorHandler>
       <SessionProvider>
         <SessionBarrier>
-          <ServerSideCachedProjectsProvider projects={projects}>
-            {children}
-          </ServerSideCachedProjectsProvider>
+          <ProjectsContextProvider initialProjects={projects}>
+            <SplitView>
+              {children}
+            </SplitView>
+          </ProjectsContextProvider>
         </SessionBarrier>
       </SessionProvider>
     </ErrorHandler>
   )
-}
+}

src/common/contexts.ts

@@ -1,19 +1,14 @@
 "use client"
 
 import { createContext } from "react"
-import { Project, } from "@/features/projects/domain"
+import { Project } from "@/features/projects/domain"
 
-export const SidebarContext = createContext<{ isToggleable: boolean }>({ isToggleable: true })
-
-type ProjectsContainer = {
-  readonly projects: Project[]
-  readonly isLoading: boolean
-  readonly error?: Error
+type ProjectsContextValue = {
+  projects: Project[],
+  setProjects: (projects: Project[]) => void
 }
 
-export const ProjectsContainerContext = createContext<ProjectsContainer>({
-  isLoading: true,
-  projects: []
+export const ProjectsContext = createContext<ProjectsContextValue>({
+  projects: [],
+  setProjects: () => {}
 })
-
-export const ServerSideCachedProjectsContext = createContext<Project[] | undefined>(undefined)

src/common/ui/MenuItemHover.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import { SxProps } from "@mui/system"
 import { Box } from "@mui/material"
 import useMediaQuery from "@mui/material/useMediaQuery"

src/features/projects/data/index.ts

@@ -1,6 +1,5 @@
 export { default as GitHubProjectDataSource } from "./GitHubProjectDataSource"
 export * from "./GitHubProjectDataSource"
-export { default as useProjects } from "./useProjects"
 export { default as useProjectSelection } from "./useProjectSelection"
 export { default as GitHubLoginDataSource } from "./GitHubLoginDataSource"
 export { default as GitHubRepositoryDataSource } from "./GitHubRepositoryDataSource"

src/features/projects/data/useProjectSelection.ts

@@ -4,14 +4,14 @@ import { useRouter, usePathname } from "next/navigation"
 import { useContext } from "react"
 import useMediaQuery from "@mui/material/useMediaQuery"
 import { useTheme } from "@mui/material/styles"
-import { ProjectsContainerContext } from "@/common"
+import { ProjectsContext } from "@/common"
 import { Project, ProjectNavigator, getProjectSelectionFromPath } from "../domain"
 import { useSidebarOpen } from "@/features/sidebar/data"
 
 export default function useProjectSelection() {
   const router = useRouter()
   const pathname = usePathname()
-  const { projects } = useContext(ProjectsContainerContext)
+  const { projects } = useContext(ProjectsContext)
   const selection = getProjectSelectionFromPath({ projects, path: pathname })
   const pathnameReader = {
     get pathname() {

src/features/projects/view/ProjectsContextProvider.tsx

@@ -0,0 +1,22 @@
+"use client"
+
+import { useState } from "react"
+import { ProjectsContext } from "@/common"
+import { Project } from "@/features/projects/domain"
+
+const ProjectsContextProvider = ({
+  initialProjects,
+  children
+}: {
+  initialProjects?: Project[],
+  children?: React.ReactNode
+}) => {
+  const [projects, setProjects] = useState<Project[]>(initialProjects || [])
+  return (
+    <ProjectsContext.Provider value={{ projects, setProjects }}>
+      {children}
+    </ProjectsContext.Provider>
+  )
+}
+
+export default ProjectsContextProvider

src/features/sidebar/view/SecondarySplitHeader.tsx

@@ -1,12 +1,12 @@
 "use client"
 
-import { useState, useEffect, useContext } from "react"
+import { useState, useEffect } from "react"
 import { useSessionStorage } from "usehooks-ts"
 import { Box, IconButton, Stack, Tooltip, Divider, Collapse } from "@mui/material"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { faBars, faChevronLeft } from "@fortawesome/free-solid-svg-icons"
 import { useTheme } from "@mui/material/styles"
-import { SidebarContext, isMac as checkIsMac } from "@/common"
+import { isMac as checkIsMac } from "@/common"
 import { useSidebarOpen } from "@/features/sidebar/data"
 import ToggleMobileToolbarButton from "./internal/secondary/ToggleMobileToolbarButton"
 
@@ -23,15 +23,13 @@ const Header = ({
 }) => {
   const [isSidebarOpen, setSidebarOpen] = useSidebarOpen()
   const [isMac, setIsMac] = useState(false)
-  const { isToggleable: isSidebarToggleable } = useContext(SidebarContext)
   const [isMobileToolbarVisible, setMobileToolbarVisible] = useSessionStorage("isMobileToolbarVisible", true)
   useEffect(() => {
     // checkIsMac uses window so we delay the check.
     setIsMac(checkIsMac())
   }, [isMac, setIsMac])
   const openCloseKeyboardShortcut = `(${isMac ? "⌘" : "^"} + .)`
   const theme = useTheme()
-
   return (
     <Box
       sx={{
@@ -48,7 +46,7 @@ const Header = ({
         margin: "auto",
         height: HEIGHT_HEADER
       }}>
-        {isSidebarToggleable && !isSidebarOpen &&
+        {!isSidebarOpen &&
           <Tooltip title={`Show Projects ${openCloseKeyboardShortcut}`}>
             <IconButton
               size="medium"
@@ -64,7 +62,7 @@ const Header = ({
             </IconButton>
           </Tooltip>
         }
-        {isSidebarToggleable && isSidebarOpen &&
+        {isSidebarOpen &&
           <Tooltip title={`Hide Projects ${openCloseKeyboardShortcut}`}>
             <IconButton
               size="small"
@@ -104,7 +102,6 @@ const Header = ({
         </Collapse>
       }
       {showDivider && <Divider />}
-
     </Box>
   )
 }

src/features/sidebar/view/SplitView.tsx

@@ -1,52 +1,22 @@
-"use client"
+import ClientSplitView from "./internal/ClientSplitView"
+import { projectDataSource } from "@/composition"
+import BaseSidebar from "./internal/sidebar/Sidebar"
+import ProjectList from "./internal/sidebar/projects/ProjectList"
 
-import { useEffect } from "react"
-import { Stack } from "@mui/material"
-import { isMac, useKeyboardShortcut } from "@/common"
-import { useSidebarOpen } from "../data"
-import PrimaryContainer from "./internal/primary/Container"
-import SecondaryContainer from "./internal/secondary/Container"
-import Sidebar from "./internal/sidebar/Sidebar"
-
-const SplitView = ({
-  canToggleSidebar: _canToggleSidebar,
-  children
-}: {
-  canToggleSidebar?: boolean
-  children?: React.ReactNode
-}) => {
-  const [isSidebarOpen, setSidebarOpen] = useSidebarOpen()
-  const canToggleSidebar = _canToggleSidebar !== undefined ? _canToggleSidebar : true
-  useEffect(() => {
-    // Show the sidebar if no project is selected.
-    if (!canToggleSidebar) {
-      setSidebarOpen(true)
-    }
-  }, [canToggleSidebar, setSidebarOpen])
-  useKeyboardShortcut(event => {
-    const isActionKey = isMac() ? event.metaKey : event.ctrlKey
-    if (isActionKey && event.key === ".") {
-      event.preventDefault()
-      if (canToggleSidebar) {
-        setSidebarOpen(!isSidebarOpen)
-      }
-    }
-  }, [canToggleSidebar, setSidebarOpen])
-  const sidebarWidth = 320
+const SplitView = ({ children }: { children?: React.ReactNode }) => {
   return (
-    <Stack direction="row" spacing={0} sx={{ width: "100%", height: "100%" }}>
-      <PrimaryContainer
-        width={sidebarWidth}
-        isOpen={isSidebarOpen}
-        onClose={() => setSidebarOpen(false)}
-      >
-        <Sidebar/>
-      </PrimaryContainer>
-      <SecondaryContainer sidebarWidth={sidebarWidth} offsetContent={isSidebarOpen}>
-        {children}
-      </SecondaryContainer>
-    </Stack>
+    <ClientSplitView sidebar={<Sidebar/>}>
+      {children}
+    </ClientSplitView>
   )
 }
 
 export default SplitView
+
+const Sidebar = () => {
+  return (
+    <BaseSidebar>
+      <ProjectList projectDataSource={projectDataSource} />
+    </BaseSidebar>
+  )
+}