fix(materials): display custom error page when file or folder is miss…

…ing in course materials

client/app/bundles/course/material/files/components/BaseDownloadFilePage.tsx → client/app/bundles/course/material/BaseRetrieveMaterialPage.tsx

@@ -3,15 +3,15 @@ import { Typography } from '@mui/material';
 
 import Page from 'lib/components/core/layouts/Page';
 
-interface BaseDownloadFilePageProps {
+interface BaseRetrieveMaterialPageProps {
   illustration: ReactNode;
   title: string;
   description: string;
   children?: ReactNode;
 }
 
-const BaseDownloadFilePage = (
-  props: BaseDownloadFilePageProps,
+const BaseRetrieveMaterialPage = (
+  props: BaseRetrieveMaterialPageProps,
 ): JSX.Element => (
   <Page className="h-full m-auto flex flex-col items-center justify-center text-center">
     {props.illustration}
@@ -32,4 +32,4 @@ const BaseDownloadFilePage = (
   </Page>
 );
 
-export default BaseDownloadFilePage;
+export default BaseRetrieveMaterialPage;

client/app/bundles/course/material/files/DownloadingFilePage.tsx

@@ -10,7 +10,7 @@ import Link from 'lib/components/core/Link';
 import useEffectOnce from 'lib/hooks/useEffectOnce';
 import useTranslation from 'lib/hooks/useTranslation';
 
-import BaseDownloadFilePage from './components/BaseDownloadFilePage';
+import BaseRetrievingPage from '../BaseRetrieveMaterialPage';
 
 const DEFAULT_FILE_NAME = 'file';
 
@@ -51,7 +51,7 @@ const SuccessDownloadingFilePage = (
   const { t } = useTranslation();
 
   return (
-    <BaseDownloadFilePage
+    <BaseRetrievingPage
       description={t(translations.downloadingDescription)}
       illustration={
         <DownloadingOutlined className="text-[6rem]" color="success" />
@@ -61,7 +61,7 @@ const SuccessDownloadingFilePage = (
       <Link className="mt-10" href={props.url}>
         {t(translations.tryDownloadingAgain)}
       </Link>
-    </BaseDownloadFilePage>
+    </BaseRetrievingPage>
   );
 };
 
@@ -71,7 +71,7 @@ const ErrorStartingDownloadFilePage = (
   const { t } = useTranslation();
 
   return (
-    <BaseDownloadFilePage
+    <BaseRetrievingPage
       description={t(translations.clickToDownloadFileDescription)}
       illustration={
         <div className="relative">
@@ -93,7 +93,7 @@ const ErrorStartingDownloadFilePage = (
       >
         {props.name}
       </Button>
-    </BaseDownloadFilePage>
+    </BaseRetrievingPage>
   );
 };
 

client/app/bundles/course/material/files/ErrorRetrievingFilePage.tsx

@@ -5,7 +5,7 @@ import { Cancel, InsertDriveFileOutlined } from '@mui/icons-material';
 import Link from 'lib/components/core/Link';
 import useTranslation from 'lib/hooks/useTranslation';
 
-import BaseDownloadFilePage from './components/BaseDownloadFilePage';
+import BaseRetrievingPage from '../BaseRetrieveMaterialPage';
 
 const translations = defineMessages({
   problemRetrievingFile: {
@@ -30,7 +30,7 @@ const ErrorRetrievingFilePage = (): JSX.Element => {
   const workbinURL = `/courses/${params.courseId}/materials/folders/${params.folderId}`;
 
   return (
-    <BaseDownloadFilePage
+    <BaseRetrievingPage
       description={t(translations.problemRetrievingFileDescription)}
       illustration={
         <div className="relative">
@@ -47,7 +47,7 @@ const ErrorRetrievingFilePage = (): JSX.Element => {
       <Link className="mt-10" to={workbinURL}>
         {t(translations.goToTheWorkbin)}
       </Link>
-    </BaseDownloadFilePage>
+    </BaseRetrievingPage>
   );
 };
 

client/app/bundles/course/material/folderLoader.ts

@@ -0,0 +1,15 @@
+import { LoaderFunction, redirect } from 'react-router-dom';
+import { getIdFromUnknown } from 'utilities';
+
+import CourseAPI from 'api/course';
+
+const folderLoader: LoaderFunction = async ({ params }) => {
+  const folderId = getIdFromUnknown(params?.folderId);
+  if (!folderId) return redirect('/');
+
+  const { data } = await CourseAPI.folders.fetch(folderId);
+
+  return data;
+};
+
+export default folderLoader;

client/app/bundles/course/material/folders/handles.ts

@@ -7,17 +7,26 @@ const getFolderTitle = async (
   courseUrl: string,
   folderId: number,
 ): Promise<CrumbPath> => {
-  const { data } = await CourseAPI.folders.fetch(folderId);
+  try {
+    const { data } = await CourseAPI.folders.fetch(folderId);
+    const workbinUrl = `${courseUrl}/materials/folders/${data.breadcrumbs[0].id}`;
 
-  const workbinUrl = `${courseUrl}/materials/folders/${data.breadcrumbs[0].id}`;
-
-  return {
-    activePath: workbinUrl,
-    content: data.breadcrumbs.map((crumb) => ({
-      title: crumb.name,
-      url: `materials/folders/${crumb.id}`,
-    })),
-  };
+    return {
+      activePath: workbinUrl,
+      content: data.breadcrumbs.map((crumb) => ({
+        title: crumb.name,
+        url: `materials/folders/${crumb.id}`,
+      })),
+    };
+  } catch (error) {
+    return {
+      activePath: courseUrl,
+      content: {
+        title: 'Folder Not Found',
+        url: courseUrl,
+      },
+    };
+  }
 };
 
 /**

client/app/bundles/course/material/folders/pages/ErrorRetrievingFolderPage.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { defineMessages } from 'react-intl';
+import { useParams } from 'react-router-dom';
+import { Cancel, FolderOutlined } from '@mui/icons-material';
+
+import Link from 'lib/components/core/Link';
+import useTranslation from 'lib/hooks/useTranslation';
+
+import BaseRetrievePage from '../../BaseRetrieveMaterialPage';
+
+const translations = defineMessages({
+  problemRetrievingFolder: {
+    id: 'course.material.folders.ErrorRetrievingFolderPage.problemRetrievingFolder',
+    defaultMessage: 'Problem retrieving folder',
+  },
+  problemRetrievingFolderDescription: {
+    id: 'course.material.folders.ErrorRetrievingFolderPage.problemRetrievingFolderDescription',
+    defaultMessage:
+      "Either it no longer exists, you don't have the permission to access it, or something unexpected happened when we were trying to retrieve it.",
+  },
+  goToTheWorkbin: {
+    id: 'course.material.folders.ErrorRetrievingFolderPage.goToTheWorkbin',
+    defaultMessage: 'Go to the Workbin',
+  },
+});
+
+const ErrorRetrievingFolderPage = (): JSX.Element => {
+  const { t } = useTranslation();
+
+  const params = useParams();
+  const workbinURL = `/courses/${params.courseId}`;
+
+  return (
+    <BaseRetrievePage
+      description={t(translations.problemRetrievingFolderDescription)}
+      illustration={
+        <div className="relative">
+          <FolderOutlined className="text-[6rem]" color="disabled" />
+
+          <Cancel
+            className="absolute bottom-0 -right-2 text-[4rem] bg-white rounded-full"
+            color="error"
+          />
+        </div>
+      }
+      title={t(translations.problemRetrievingFolder)}
+    >
+      <Link className="mt-10" to={workbinURL}>
+        {t(translations.goToTheWorkbin)}
+      </Link>
+    </BaseRetrievePage>
+  );
+};
+
+export default ErrorRetrievingFolderPage;

client/app/routers/AuthenticatedApp.tsx

@@ -67,6 +67,7 @@ import LessonPlanShow from 'bundles/course/lesson-plan/pages/LessonPlanShow';
 import LevelsIndex from 'bundles/course/level/pages/LevelsIndex';
 import DownloadingFilePage from 'bundles/course/material/files/DownloadingFilePage';
 import ErrorRetrievingFilePage from 'bundles/course/material/files/ErrorRetrievingFilePage';
+import ErrorRetrievingFolderPage from 'bundles/course/material/folders/pages/ErrorRetrievingFolderPage';
 import FolderShow from 'bundles/course/material/folders/pages/FolderShow';
 import TimelineDesigner from 'bundles/course/reference-timelines/TimelineDesigner';
 import ResponseEdit from 'bundles/course/survey/pages/ResponseEdit';
@@ -127,6 +128,7 @@ import {
   forumTopicHandle,
 } from 'course/forum/handles';
 import { leaderboardHandle } from 'course/leaderboard/handles';
+import folderLoader from 'course/material/folderLoader';
 import { folderHandle } from 'course/material/folders/handles';
 import materialLoader from 'course/material/materialLoader';
 import { videoWatchHistoryHandle } from 'course/statistics/handles';
@@ -221,7 +223,9 @@ const authenticatedRouter: Translated<RouteObject[]> = (t) =>
               children: [
                 {
                   index: true,
+                  loader: folderLoader,
                   element: <FolderShow />,
+                  errorElement: <ErrorRetrievingFolderPage />,
                 },
                 {
                   path: 'files/:materialId',