Reduces re-renderings when loading documentation

next.config.js

@@ -2,7 +2,7 @@
 const nextConfig = {
   eslint: {
     // Allows production builds to successfully complete even if it has linting errors.
-    // This is only OK bevause we do linting as part of our CI setup.
+    // This is only OK because we do linting as part of our CI setup.
     ignoreDuringBuilds: true,
   }
 }

src/features/projects/domain/projectNavigator.ts

@@ -34,26 +34,7 @@ const projectNavigator = {
     router: IProjectRouter
   ) {
     router.push(`/${selection.project.id}/${selection.version.id}/${specificationId}`)
-  },
-  navigateToCurrentSelection(
-    candidateSelection: {
-      projectId?: string,
-      versionId?: string,
-      specificationId?: string
-    },
-    actualSelection: ProjectPageSelection,
-    router: IProjectRouter
-  ) {
-    if (
-      actualSelection.project.id != candidateSelection.projectId ||
-      actualSelection.version.id != candidateSelection.versionId ||
-      actualSelection.specification.id != candidateSelection.specificationId
-    ) {
-      router.replace(
-        `/${actualSelection.project.id}/${actualSelection.version.id}/${actualSelection.specification.id}`
-      )
-    }
-  }
+  } 
 }
 
 export default projectNavigator

src/features/projects/view/ProjectList.tsx

@@ -3,18 +3,20 @@ import ProjectListItem from "./ProjectListItem"
 import ProjectListItemPlaceholder from "./ProjectListItemPlaceholder"
 import IProject from "../domain/IProject"
 
-interface ProjectListProps<ProjectType extends IProject> {
+interface ProjectListProps {
   readonly isLoading: boolean
-  readonly projects: ProjectType[]
+  readonly projects: IProject[]
   readonly selectedProjectId?: string
+  readonly onSelectProject: (project: IProject) => void
 }
 
-const ProjectList = <ProjectType extends IProject>(
+const ProjectList = (
   {
     isLoading,
     projects,
-    selectedProjectId
-  }: ProjectListProps<ProjectType>
+    selectedProjectId,
+    onSelectProject
+  }: ProjectListProps
 ) => {
   const loadingItemCount = 6
   if (isLoading || projects.length > 0) {
@@ -33,6 +35,7 @@ const ProjectList = <ProjectType extends IProject>(
             key={project.id}
             project={project}
             isSelected={project.id === selectedProjectId}
+            onSelectProject={onSelectProject}
           />
         ))}
       </List>

src/features/projects/view/ProjectListItem.tsx

@@ -1,24 +1,24 @@
-import { useRouter } from "next/navigation"
 import { ListItem, ListItemButton, ListItemText, Typography } from "@mui/material"
 import IProject from "../domain/IProject"
 import ProjectAvatar from "./ProjectAvatar"
 
 interface ProjectListItemProps<ProjectType extends IProject> {
   readonly project: ProjectType
   readonly isSelected: boolean
+  readonly onSelectProject: (project: IProject) => void
 }
 
 const ProjectListItem = <ProjectType extends IProject>(
   {
     project,
-    isSelected
+    isSelected,
+    onSelectProject
   }: ProjectListItemProps<ProjectType>
 ) => {
-  const router = useRouter()
   return (
     <ListItem disablePadding>
       <ListItemButton
-        onClick={() => router.push(`/${project.id}`)}
+        onClick={() => onSelectProject(project)}
         selected={isSelected}
         sx={{
           paddingLeft: "15px",

src/features/projects/view/ProjectsPage.tsx

@@ -5,9 +5,10 @@ import SidebarContainer from "@/common/SidebarContainer"
 import ProjectList from "./ProjectList"
 import ProjectsPageSecondaryContent from "./ProjectsPageSecondaryContent"
 import ProjectsPageTrailingToolbarItem from "./ProjectsPageTrailingToolbarItem"
-import useProjects from "../data/useProjects"
+import IProject from "../domain/IProject"
 import { getProjectPageState } from "../domain/ProjectPageState"
 import projectNavigator from "../domain/projectNavigator"
+import useProjects from "../data/useProjects"
 
 interface ProjectsPageProps {
   readonly projectId?: string
@@ -28,14 +29,10 @@ export default function ProjectsPage(
     selectedVersionId: versionId,
     selectedSpecificationId: specificationId
   })
-  // Ensure the URL reflects the current selection of project, version, and specification.
-  if (stateContainer.selection) {
-    const candidateSelection = { projectId, versionId, specificationId }
-    projectNavigator.navigateToCurrentSelection(
-      candidateSelection,
-      stateContainer.selection,
-      router
-    )
+  const handleProjectSelected = (project: IProject) => {
+    const version = project.versions[0]
+    const specification = version.specifications[0]
+    router.push(`/${project.id}/${version.id}/${specification.id}`)
   }
   return (
     <SidebarContainer
@@ -44,6 +41,7 @@ export default function ProjectsPage(
           isLoading={isLoading}
           projects={projects}
           selectedProjectId={stateContainer.selection?.project.id}
+          onSelectProject={handleProjectSelected}
         />
       }
       secondary={

src/features/projects/view/docs/DocumentationViewer.tsx

@@ -1,27 +1,14 @@
-import { useEffect } from "react"
-import { Events } from "@/common/events/BaseEvent"
-import { subscribe, unsubscribe } from "@/common/events/utils"
-import { useForceUpdate } from "@/common/useForceUpdate"
-import { settingsStore } from "@/common/client/startup"
 import Swagger from "./Swagger"
 import Redocly from "./Redocly"
 import DocumentationVisualizer from "@/features/settings/domain/DocumentationVisualizer"
+import useDocumentationVisualizer from "@/features/settings/data/useDocumentationVisualizer"
 
-const DocumentationViewer: React.FC<{ url: string }> = ({ url }) => {
-  const forceUpdate = useForceUpdate()
-  const visualizer = settingsStore.documentationVisualizer
-
-  useEffect(() => {
-    subscribe(Events.SETTINGS_CHANGED, forceUpdate)
-    return () => {
-      unsubscribe(Events.SETTINGS_CHANGED, forceUpdate)
-    }
-  })
-
-  switch (visualizer.toString()) {
-  case DocumentationVisualizer.SWAGGER.toString():
+const DocumentationViewer = ({ url }: { url: string }) => {
+  const [documentationVisualizer] = useDocumentationVisualizer()
+  switch (documentationVisualizer) {
+  case DocumentationVisualizer.SWAGGER:
     return <Swagger url={url} />
-  case DocumentationVisualizer.REDOCLY.toString():
+  case DocumentationVisualizer.REDOCLY:
     return <Redocly url={url} />
   }
 }

src/features/settings/data/useDocumentationVisualizer.ts

@@ -0,0 +1,6 @@
+import { useLocalStorage } from "usehooks-ts"
+import DocumentationVisualizer from "@/features/settings/domain/DocumentationVisualizer"
+
+export default function useDocumentationVisualizer() {
+  return useLocalStorage("documentationVisualizer", DocumentationVisualizer.SWAGGER)
+}

src/features/settings/view/DocumentationVisualizationPicker.tsx

@@ -1,32 +1,28 @@
-import { useState } from "react"
 import { ToggleButtonGroup, ToggleButton } from "@mui/material"
 import DocumentationVisualizer from "../domain/DocumentationVisualizer"
-import { settingsStore } from "@/common/client/startup"
+import useDocumentationVisualizer from "@/features/settings/data/useDocumentationVisualizer"
 
 const DocumentationVisualizationPicker: React.FC = () => {
-  const [value, setValue] = useState(settingsStore.documentationVisualizer)
+  const [value, setValue] = useDocumentationVisualizer()
   const handleChange = (
     _event: React.MouseEvent<HTMLElement>,
     documentationVisualizer: DocumentationVisualizer
   ) => {
     setValue(documentationVisualizer)
-    setTimeout(() => {
-      settingsStore.documentationVisualizer = documentationVisualizer
-    })
   }
   return (
     <ToggleButtonGroup
       exclusive
-      value={value.toString()}
+      value={value}
       onChange={handleChange}
       fullWidth={true}
       color="secondary"
       aria-label="Viewer"
     >
-      <ToggleButton value={DocumentationVisualizer.SWAGGER.toString()}>
+      <ToggleButton value={DocumentationVisualizer.SWAGGER}>
         Swagger
       </ToggleButton>
-      <ToggleButton value={DocumentationVisualizer.REDOCLY.toString()}>
+      <ToggleButton value={DocumentationVisualizer.REDOCLY}>
         Redocly
       </ToggleButton>
     </ToggleButtonGroup>