Skip to content

Commit

Permalink
Merge pull request #393 from shapehq/bugfix/delays-error-messages-unt…
Browse files Browse the repository at this point in the history
…il-data-refreshed-mpabarca

Fix: Delays error messages until data is refreshed
  • Loading branch information
mpabarca authored Oct 14, 2024
2 parents ef70276 + 14d9711 commit eea56a3
Show file tree
Hide file tree
Showing 4 changed files with 43 additions and 35 deletions.
47 changes: 18 additions & 29 deletions src/app/(authed)/(project-doc)/[...slug]/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,44 +4,33 @@ import { Box, Stack } from "@mui/material"
import { useTheme } from "@mui/material/styles"
import TrailingToolbarItem from "@/features/projects/view/toolbar/TrailingToolbarItem"
import MobileToolbar from "@/features/projects/view/toolbar/MobileToolbar"
import { useProjectSelection } from "@/features/projects/data"
import NotFound from "@/features/projects/view/NotFound"
import dynamic from "next/dynamic"
import SecondaryHeaderPlaceholder from "@/features/sidebar/view/SecondarySplitHeaderPlaceholder"

const SecondarySplitHeader = dynamic(() => import("@/features/sidebar/view/SecondarySplitHeader"),
{
loading: () => <SecondaryHeaderPlaceholder />,
ssr: false,
}
)
import { useContext } from "react"
import { ProjectsContext } from "@/common"
import LoadingIndicator from "@/common/ui/LoadingIndicator"
import SecondarySplitHeader from "@/features/sidebar/view/SecondarySplitHeader"

export default function Page({ children }: { children: React.ReactNode }) {
const { project } = useProjectSelection()
const { refreshed } = useContext(ProjectsContext)

const theme = useTheme()

return (
<Stack sx={{ height: "100%" }}>
{!project &&
<>
<SecondarySplitHeader>
<TrailingToolbarItem/>
</SecondarySplitHeader>
<main style={{ flexGrow: "1", overflowY: "auto" }}>
<NotFound />
</main>
</>
}
{project &&
<>
<SecondarySplitHeader mobileToolbar={<MobileToolbar/>}>
<TrailingToolbarItem/>
</SecondarySplitHeader>
{!refreshed ? <SecondaryHeaderPlaceholder/> :
<SecondarySplitHeader mobileToolbar={<MobileToolbar/>}>
<TrailingToolbarItem/>
</SecondarySplitHeader>
}
<Box sx={{ height: "0.5px", background: theme.palette.divider }} />
<main style={{ flexGrow: "1", overflowY: "auto" }}>
{children}
</main>
{refreshed ?
<main style={{ flexGrow: "1", overflowY: "auto" }}>
{children}
</main> :
<LoadingIndicator />
}
</>
}
</Stack>
)
}
10 changes: 5 additions & 5 deletions src/app/(authed)/(project-doc)/[...slug]/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ 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"
import NotFound from "@/features/projects/view/NotFound"

export default function Page() {
const { project, version, specification, navigateToSelectionIfNeeded } = useProjectSelection()
Expand All @@ -23,17 +24,16 @@ export default function Page() {
specification
})
}, [project, version, specification])

return (
<>
{project && version && specification &&
<Documentation url={specification.url} />
}
{project && !version &&
<ErrorMessage text="The selected branch or tag was not found."/>
}
{project && !specification &&
<ErrorMessage text="The selected specification was not found."/>
{project && (!version || !specification) &&
<ErrorMessage text={`The selected ${!version ? "branch or tag" : "specification"} was not found.`}/>
}
{!project && <NotFound/>}
</>
)
}
2 changes: 2 additions & 0 deletions src/common/context/ProjectsContext.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,13 @@ import { Project } from "@/features/projects/domain"
export const SidebarTogglableContext = createContext<boolean>(true)

type ProjectsContextValue = {
refreshed: boolean,
projects: Project[],
setProjects: (projects: Project[]) => void
}

export const ProjectsContext = createContext<ProjectsContextValue>({
refreshed: false,
projects: [],
setProjects: () => {}
})
19 changes: 18 additions & 1 deletion src/features/projects/view/ProjectsContextProvider.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,26 @@ const ProjectsContextProvider = ({
initialProjects?: Project[],
children?: React.ReactNode
}) => {
const [refreshed, setRefreshed] = useState<boolean>(false)
const [projects, setProjects] = useState<Project[]>(initialProjects || [])

const hasProjectChanged = (value: Project[]) => value.some((project, index) => {
// Compare by project id and version (or any other key fields)
return project.id !== projects[index]?.id || project.versions !== projects[index]?.versions
})

const setProjectsAndRefreshed = (value: Project[]) => {
setProjects(value)
// If any project has changed, update the state and mark as refreshed
if (hasProjectChanged(value)) setRefreshed(true)

}
return (
<ProjectsContext.Provider value={{ projects, setProjects }}>
<ProjectsContext.Provider value={{
refreshed,
projects,
setProjects: setProjectsAndRefreshed
}}>
{children}
</ProjectsContext.Provider>
)
Expand Down

0 comments on commit eea56a3

Please sign in to comment.