Deploy to production

package.json

@@ -10,7 +10,7 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint",
+    "lint": "next lint --max-warnings=0",
     "test": "jest"
   },
   "dependencies": {

src/app/documentation-viewer/page.tsx

@@ -0,0 +1,16 @@
+import DocumentationViewer from "@/features/docs/view/DocumentationViewer"
+
+type SearchParams = { visualizer: string, url: string }
+
+export default async function Page({
+  searchParams
+}: {
+  searchParams: SearchParams
+}) {
+  return (
+    <DocumentationViewer
+      visualizer={parseInt(searchParams.visualizer)}
+      url={searchParams.url}
+    />
+  )
+}

src/common/loading/DelayedLoadingIndicator.tsx

@@ -0,0 +1,19 @@
+import { useState, useEffect } from "react"
+import LoadingIndicator from "./LoadingIndicator"
+
+const DelayedLoadingIndicator = ({
+  delay
+}: {
+  delay?: number
+}) => {
+  const [isVisible, setVisible] = useState(false)
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setVisible(true)
+    }, delay || 1000)
+    return () => clearTimeout(timer)
+  }, [delay, setVisible])
+  return <>{isVisible && <LoadingIndicator/>}</>
+}
+
+export default DelayedLoadingIndicator

src/common/loading/LoadingIndicator.tsx

@@ -0,0 +1,42 @@
+import { useState, useEffect } from "react" 
+import { Box, Typography } from "@mui/material"
+import { useTheme } from "@mui/material/styles"
+
+const LoadingIndicator = () => {
+  const theme = useTheme()
+  const [count, setCount] = useState(0)
+  useEffect(() => {
+    const timer = setInterval(() => {
+      if (count == 3) {
+        setCount(0)
+      } else {
+        setCount(count + 1)
+      }
+    }, 200)
+    return () => clearTimeout(timer)
+  }, [count, setCount])
+  return (
+    <Box style={{
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      height: "100%",
+      width: "100%",
+      background: theme.palette.background.default
+    }}>
+      {Array.from(Array(3).keys()).map((e) => {
+        return (
+          <Typography
+            key={count}
+            variant="h3"
+            sx={{ opacity: e + 1 == count ? 0.5 : 0.2 }}
+          >
+            •
+          </Typography>
+        )
+      })}
+    </Box>
+  )
+}
+
+export default LoadingIndicator

src/common/state/sidebarOpen.tsx

@@ -0,0 +1,5 @@
+import { useSessionStorage } from "usehooks-ts"
+
+export default function useSidebarOpen() {
+ return useSessionStorage("isSidebarOpen", true)
+}

src/common/state/useSidebarOpen.tsx

@@ -0,0 +1,5 @@
+import { useSessionStorage } from "usehooks-ts"
+
+export default function useSidebarOpen() {
+ return useSessionStorage("isSidebarOpen", true)
+}

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

@@ -1,15 +1,21 @@
-import Swagger from "./Swagger"
+"use client"
+
 import Redocly from "./Redocly"
+import Swagger from "./Swagger"
 import DocumentationVisualizer from "@/features/settings/domain/DocumentationVisualizer"
-import useDocumentationVisualizer from "@/features/settings/data/useDocumentationVisualizer"
 
-const DocumentationViewer = ({ url }: { url: string }) => {
-  const [documentationVisualizer] = useDocumentationVisualizer()
-  switch (documentationVisualizer) {
-  case DocumentationVisualizer.SWAGGER:
-    return <Swagger url={url} />
+const DocumentationViewer = ({
+  visualizer,
+  url
+}: {
+  visualizer: DocumentationVisualizer,
+  url: string
+}) => {
+  switch (visualizer) {
   case DocumentationVisualizer.REDOCLY:
     return <Redocly url={url} />
+  case DocumentationVisualizer.SWAGGER:
+    return <Swagger url={url} />
   }
 }
 

src/features/docs/view/LoadingWrapper.tsx

@@ -0,0 +1,32 @@
+import { ReactNode } from "react"
+import { Box } from "@mui/material"
+import LoadingIndicator from "@/common/loading/LoadingIndicator"
+
+const LoadingWrapper = ({
+  showLoadingIndicator,
+  children
+}: {
+  showLoadingIndicator: boolean,
+  children: ReactNode
+}) => {
+  return (
+    <Box sx={{ width: "100%", height: "100%", position: "relative", overflow: "scroll" }}>
+      {showLoadingIndicator &&
+        <Box sx={{ width: "100%", height: "100%", position: "absolute" }}>
+          <LoadingIndicator/>
+        </Box>
+      }
+      <Box sx={{
+        width: "100%",
+        height: "100%",
+        position: "absolute",
+        background: "white",
+        opacity: showLoadingIndicator ? 0 : 1
+      }}>
+        {children}
+      </Box>
+    </Box>
+  )
+}
+
+export default LoadingWrapper

src/features/docs/view/Redocly.tsx

@@ -0,0 +1,18 @@
+import { useState } from "react"
+import { RedocStandalone } from "redoc"
+import LoadingWrapper from "./LoadingWrapper"
+
+const Redocly = ({ url }: { url: string }) => {
+  const [isLoading, setLoading] = useState(true)
+  return (
+    <LoadingWrapper showLoadingIndicator={isLoading}>
+      <RedocStandalone
+        specUrl={url}
+        options={{ hideLoading: true }}
+        onLoaded={() => setLoading(false)}
+      />
+    </LoadingWrapper>
+  )
+}
+
+export default Redocly

src/features/docs/view/Swagger.tsx

@@ -0,0 +1,15 @@
+import { useState } from "react"
+import SwaggerUI from "swagger-ui-react"
+import "swagger-ui-react/swagger-ui.css"
+import LoadingWrapper from "./LoadingWrapper"
+
+const Swagger = ({ url }: { url: string }) => {
+  const [isLoading, setLoading] = useState(true)
+  return (
+    <LoadingWrapper showLoadingIndicator={isLoading}>
+      <SwaggerUI url={url} onComplete={() => setLoading(false)} />
+    </LoadingWrapper>
+  )
+}
+
+export default Swagger

src/features/projects/view/Documentation.tsx

@@ -0,0 +1,16 @@
+import DocumentationViewer from "@/features/docs/view/DocumentationViewer"
+import DocumentationIframe from "./DocumentationIframe"
+import DocumentationVisualizer from "@/features/settings/domain/DocumentationVisualizer"
+import useDocumentationVisualizer from "@/features/settings/data/useDocumentationVisualizer"
+
+const Documentation = ({ url }: { url: string }) => {
+  const [visualizer] = useDocumentationVisualizer()
+  switch (visualizer) {
+  case DocumentationVisualizer.REDOCLY:
+    return <DocumentationIframe visualizer={visualizer} url={url} />
+  case DocumentationVisualizer.SWAGGER:
+    return <DocumentationViewer visualizer={visualizer} url={url} />
+  }
+}
+
+export default Documentation

src/features/projects/view/DocumentationIframe.tsx

@@ -0,0 +1,28 @@
+import { Box } from "@mui/material"
+import DelayedLoadingIndicator from "@/common/loading/DelayedLoadingIndicator"
+import DocumentationVisualizer from "@/features/settings/domain/DocumentationVisualizer"
+
+const DocumentationIframe = ({
+  visualizer,
+  url
+}: {
+  visualizer: DocumentationVisualizer,
+  url: string
+}) => {
+  const searchParams = new URLSearchParams()
+  searchParams.append("visualizer", visualizer.toString())
+  searchParams.append("url", url)
+  return (
+    <Box sx={{ width: "100%", height: "100%", position: "relative" }}>
+      <Box sx={{ width: "100%", height: "100%", position: "absolute" }}>
+        <DelayedLoadingIndicator/>
+      </Box>
+      <iframe
+        src={`/documentation-viewer?${searchParams.toString()}`}
+        style={{ width: "100%", height: "100%", position: "absolute" }}
+      />
+    </Box>
+  )
+}
+
+export default DocumentationIframe

src/features/projects/view/MainContent.tsx

@@ -1,9 +1,9 @@
 import Project from "../domain/Project"
 import Version from "../domain/Version"
 import OpenApiSpecification from "../domain/OpenApiSpecification"
-import DelayedLoading from "./DelayedLoading"
+import DelayedLoadingIndicator from "@/common/loading/DelayedLoadingIndicator"
 import ErrorMessage from "./ErrorMessage"
-import DocumentationViewer from "./docs/DocumentationViewer"
+import Documentation from "./Documentation"
 
 const MainContent = ({
   isLoading,
@@ -19,9 +19,9 @@ const MainContent = ({
   specification?: OpenApiSpecification  
 }) => {
   if (project && version && specification) {
-    return <DocumentationViewer url={specification.url}/>
+    return <Documentation url={specification.url}/>
   } else if (isLoading) {
-    return <DelayedLoading/>
+    return <DelayedLoadingIndicator/>
   } else if (error) {
     return <ErrorMessage text={error.message}/>
   } else if (!project) {

src/features/projects/view/client/ProjectsPage.tsx

@@ -1,19 +1,20 @@
 "use client"
 
-import { useState, useEffect } from "react"
+import { useEffect } from "react"
 import { useRouter } from "next/navigation"
 import { useTheme } from "@mui/material/styles"
 import useMediaQuery from "@mui/material/useMediaQuery"
 import SidebarContainer from "@/features/sidebar/view/client/SidebarContainer"
 import Project from "../../domain/Project"
 import ProjectList from "../ProjectList"
 import MainContent from "../MainContent"
-import MobileToolbar from "../MobileToolbar"
-import TrailingToolbarItem from "../TrailingToolbarItem"
+import MobileToolbar from "../toolbar/MobileToolbar"
+import TrailingToolbarItem from "../toolbar/TrailingToolbarItem"
 import getSelection from "../../domain/getSelection"
 import projectNavigator from "../../domain/projectNavigator"
 import updateWindowTitle from "../../domain/updateWindowTitle"
 import useProjects from "../../data/useProjects"
+import useSidebarOpen from "@/common/state/useSidebarOpen"
 
 export default function ProjectsPage({
   projects: serverProjects,
@@ -28,9 +29,9 @@ export default function ProjectsPage({
 }) {
   const router = useRouter()
   const theme = useTheme()
+  const [isSidebarOpen, setSidebarOpen] = useSidebarOpen()
   const isDesktopLayout = useMediaQuery(theme.breakpoints.up("sm"))
   const { projects: clientProjects, error, isLoading: isClientLoading } = useProjects()
-  const [forceCloseSidebar, setForceCloseSidebar] = useState(false)
   const projects = isClientLoading ? (serverProjects || []) : clientProjects
   const { project, version, specification } = getSelection({
     projects,
@@ -57,8 +58,16 @@ export default function ProjectsPage({
     }
     projectNavigator.navigateIfNeeded(router, urlSelection, selection)
   }, [router, projectId, versionId, specificationId, project, version, specification])
+  useEffect(() => {
+    // Show the sidebar if no project is selected.
+    if (projectId === undefined) {
+      setSidebarOpen(true)
+    }
+  }, [projectId, setSidebarOpen])
   const selectProject = (project: Project) => {
-    setForceCloseSidebar(!isDesktopLayout)
+    if (!isDesktopLayout) {
+      setSidebarOpen(false)
+    }
     const version = project.versions[0]
     const specification = version.specifications[0]
     projectNavigator.navigate(router, project.id, version.id, specification.id)
@@ -71,12 +80,9 @@ export default function ProjectsPage({
   }
   return (
     <SidebarContainer
-      canCloseDrawer={
-        project !== undefined &&
-        version !== undefined &&
-        specification !== undefined
-      }
-      forceClose={forceCloseSidebar}
+      isCloseSidebarEnabled={projectId !== undefined}
+      isSidebarOpen={isSidebarOpen}
+      onToggleSidebarOpen={setSidebarOpen}
       sidebar={
         <ProjectList
           isLoading={serverProjects === undefined && isClientLoading}