From b49449360d61512acd71839fc90ca009bde6c3eb Mon Sep 17 00:00:00 2001 From: reglim Date: Wed, 22 Mar 2023 17:30:55 +0100 Subject: [PATCH] Fix: Links to Docs page didn't work The docs page was way too complicated anyway, so I simlified it a bit. --- web/src/pages/Docs.tsx | 131 +++++++++++++++++------------------------ 1 file changed, 55 insertions(+), 76 deletions(-) diff --git a/web/src/pages/Docs.tsx b/web/src/pages/Docs.tsx index c9c37b112..a21722fb7 100644 --- a/web/src/pages/Docs.tsx +++ b/web/src/pages/Docs.tsx @@ -4,10 +4,9 @@ and we need to use some of it's members, which is unsafe */ -import React, { useCallback, useEffect, useRef, useState } from 'react' +import React, { useEffect, useRef, useState } from 'react' import { useParams, useSearchParams } from 'react-router-dom' import DocumentControlButtons from '../components/DocumentControlButtons' -import { useProjects } from '../data-providers/ProjectDataProvider' import ProjectVersion from '../models/ProjectVersion' import ProjectRepository from '../repositories/ProjectRepository' @@ -15,7 +14,7 @@ import styles from './../style/pages/Docs.module.css' import LoadingPage from './LoadingPage' import NotFound from './NotFound' -export default function Docs(): JSX.Element { +export default function Docs (): JSX.Element { const projectParam = useParams().project ?? '' const versionParam = useParams().version ?? 'latest' const pageParam = useParams().page ?? 'index.html' @@ -28,7 +27,6 @@ export default function Docs(): JSX.Element { const [versions, setVersions] = useState([]) const [loadingFailed, setLoadingFailed] = useState(false) - const { projectsWithHiddenVersions: projects } = useProjects() const iFrameRef = useRef(null) document.title = `${project} | docat` @@ -37,97 +35,79 @@ export default function Docs(): JSX.Element { setLoadingFailed(true) } - const updateRoute = useCallback( - ( - project: string, - version: string, - page: string, - hideControls: boolean - ): void => { - const newState = `/#/${project}/${version}/${page}${ - hideControls ? '?hide-ui=true' : '' - }` - - // skip updating the route if the new state is the same as the current one - if (window.location.hash === newState.substring(1)) { - return - } - - window.history.pushState({}, '', newState) - }, - [] - ) + const getVersionToUse = (allVersions: ProjectVersion[]): string => { + if (version === 'latest') { + // latest version -> check if there is a latest tag + const versionWithLatestTag = allVersions.find((v) => + (v.tags ?? []).includes('latest') + ) - updateRoute(project, version, page, hideUi) + // if there is a latest tag, use it, + // otherwise use the latest version by sorting + const latestVersion = + versionWithLatestTag != null + ? versionWithLatestTag.name + : allVersions[allVersions.length - 1].name - useEffect(() => { - if (project === '' || project === 'none') { - setVersions([]) - return + return latestVersion } - if (projects == null || projects.length === 0) { - return + // custom version -> check if it exists + const versionsAndTags = allVersions.map((v) => [v.name, ...v.tags]).flat() + + if (!versionsAndTags.includes(version)) { + return '' } - try { - const matchingProjects = projects.filter((p) => p.name === project) + return version + } - if (matchingProjects.length !== 1) { - setLoadingFailed(true) - return - } + useEffect(() => { + const url = `/#/${project}/${version}/${page}${hideUi ? '?hide-ui=true' : ''}` - let res = matchingProjects[0].versions + // skip updating the route if the new state is the same as the current one + if (window.location.hash === url.substring(1)) { + return + } - if (res == null || res.length === 0) { - setLoadingFailed(true) - return - } + window.history.pushState({}, '', url) + }, [project, version, page, hideUi]) - res = res.sort((a, b) => ProjectRepository.compareVersions(a, b)) - setVersions(res) + useEffect(() => { + void (async (): Promise => { + try { + let allVersions = await ProjectRepository.getVersions(project) + + if (allVersions.length === 0) { + setLoadingFailed(true) + return + } - if (version !== 'latest') { - // custom version -> check if it exists - const versionsAndTags = res.map((v) => [v.name, ...v.tags]).flat() + allVersions = allVersions.sort((a, b) => ProjectRepository.compareVersions(a, b)) + const versionToUse = getVersionToUse(allVersions) - if (!versionsAndTags.includes(version)) { + if (versionToUse === '') { // version does not exist -> fail setLoadingFailed(true) console.log("Version doesn't exist") + return } - return + setVersion(versionToUse) + setVersions(allVersions) + setLoadingFailed(false) + } catch (e) { + console.error(e) + setLoadingFailed(true) } - - // latest version -> check if there is a latest tag - const versionWithLatestTag = res.find((v) => - (v.tags ?? []).includes('latest') - ) - - // if there is a latest tag, use it, - // otherwise use the latest version by sorting - const latestVersion = - versionWithLatestTag != null - ? versionWithLatestTag.name - : res[res.length - 1].name - - setVersion(latestVersion) - updateRoute(project, latestVersion, page, hideUi) - } catch (e) { - console.error(e) - setLoadingFailed(true) - } - }, [project, projects, version, page, hideUi, updateRoute]) + })() + }, [project]) const handleVersionChange = (v: string): void => { setVersion(v) - updateRoute(project, v, page, hideUi) } const handleHideControls = (): void => { - updateRoute(project, version, page, true) setHideUi(true) } @@ -150,7 +130,6 @@ export default function Docs(): JSX.Element { } setPage(page) - updateRoute(project, version, page, hideUi) // make all links in iframe open in new tab // @ts-expect-error - ts does not find the document on the iframe @@ -163,14 +142,14 @@ export default function Docs(): JSX.Element { }) } - if (versions == null || versions.length === 0) { - return - } - if (loadingFailed) { return } + if (versions.length === 0) { + return + } + return ( <>