studio/docs
Archived
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🐛(frontend) fix 404 page when reload 403 page

Browse Source 
When users were reloading a 403 page, they were
redirected to the 404 page because of Nextjs
routing mechanism. This commit fixes this issue by
removing the 403 page from the pages directory
and creating a component that is used directly
in the layout when a 403 error is detected.
This commit is contained in:
Anthony LC
2025-09-17 14:48:10 +02:00
parent 1e39d17914
commit d8c9283dd1
8 changed files with 121 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
src/frontend/apps/impress/src/pages/docs/[id]/403.tsx → src/frontend/apps/impress/src/features/docs/doc-management/components/DocPage403.tsx
View File

@@ -1,50 +1,23 @@
import { Button } from '@openfun/cunningham-react';
import Head from 'next/head';
import Image from 'next/image';
import { useRouter } from 'next/router';
import { useTranslation } from 'react-i18next';
import styled from 'styled-components';
import img403 from '@/assets/icons/icon-403.png';
import { Box, Icon, Loading, StyledLink, Text } from '@/components';
import { DEFAULT_QUERY_RETRY } from '@/core';
import { KEY_DOC, useDoc } from '@/docs/doc-management';
import { ButtonAccessRequest } from '@/docs/doc-share';
import { useDocAccessRequests } from '@/docs/doc-share/api/useDocAccessRequest';
import { MainLayout } from '@/layouts';
import { NextPageWithLayout } from '@/types/next';
const StyledButton = styled(Button)`
width: fit-content;
`;
export function DocLayout() {
const {
query: { id },
} = useRouter();
if (typeof id !== 'string') {
return null;
}
return (
<>
<Head>
<meta name="robots" content="noindex" />
</Head>
<MainLayout>
<DocPage403 id={id} />
</MainLayout>
</>
);
}
interface DocProps {
id: string;
}
const DocPage403 = ({ id }: DocProps) => {
export const DocPage403 = ({ id }: DocProps) => {
const { t } = useTranslation();
const {
data: requests,
@@ -54,39 +27,19 @@ const DocPage403 = ({ id }: DocProps) => {
docId: id,
page: 1,
});
const { replace } = useRouter();
const hasRequested = !!requests?.results.find(
(request) => request.document === id,
);
const { error: docError, isLoading: isLoadingDoc } = useDoc(
{ id },
{
staleTime: 0,
queryKey: [KEY_DOC, { id }],
retry: (failureCount, error) => {
if (error.status == 403) {
return false;
} else {
return failureCount < DEFAULT_QUERY_RETRY;
}
},
},
);
if (!isLoadingDoc && docError?.status !== 403) {
void replace(`/docs/${id}`);
return <Loading />;
}
if (isLoadingDoc || isLoadingRequest) {
if (isLoadingRequest) {
return <Loading />;
}
return (
<>
<Head>
<meta name="robots" content="noindex" />
<title>
{t('Access Denied - Error 403')} - {t('Docs')}
</title>
@@ -152,13 +105,3 @@ const DocPage403 = ({ id }: DocProps) => {
</>
);
};
const Page: NextPageWithLayout = () => {
return null;
};
Page.getLayout = function getLayout() {
return <DocLayout />;
};
export default Page;

1
src/frontend/apps/impress/src/features/docs/doc-management/components/index.ts
View File

@@ -1,2 +1,3 @@
export * from './DocPage403';
export * from './ModalRemoveDoc';
export * from './SimpleDocItem';

9
src/frontend/apps/impress/src/pages/docs/[id]/index.tsx
View File

@@ -10,6 +10,7 @@ import { DEFAULT_QUERY_RETRY } from '@/core';
import { DocEditor } from '@/docs/doc-editor';
import {
Doc,
DocPage403,
KEY_DOC,
useCollaboration,
useDoc,
@@ -118,7 +119,7 @@ const DocPage = ({ id }: DocProps) => {
}, [addTask, doc?.id, queryClient]);
if (isError && error) {
if ([403, 404, 401].includes(error.status)) {
if ([404, 401].includes(error.status)) {
let replacePath = `/${error.status}`;
if (error.status === 401) {
@@ -129,8 +130,6 @@ const DocPage = ({ id }: DocProps) => {
});
}
setAuthUrl();
} else if (error.status === 403) {
replacePath = `/docs/${id}/403`;
}
void replace(replacePath);
@@ -138,6 +137,10 @@ const DocPage = ({ id }: DocProps) => {
return <Loading />;
}
if (error.status === 403) {
return <DocPage403 id={id} />;
}
return (
<Box $margin="large">
<TextErrors