feat: add project not found page (#1762)

* feat(images): no-file image add

* fix(store): projectNotFound slice and type add

* feat(projectNotFound): project not found component display if api throw 404

* fix(mainView): show projectNotFound page if state is true

* fix(api): show project not found page if api throws 404

* fix(submissionInstancePage): update submission instance page route

src/frontend/src/api/CreateProjectService.ts

@@ -286,6 +286,9 @@ const GetIndividualProjectDetails = (url: string) => {
         dispatch(CreateProjectActions.SetIndividualProjectDetails(modifiedResponse));
         dispatch(CreateProjectActions.SetIndividualProjectDetailsLoading(false));
       } catch (error) {
+        if (error.response.status === 404) {
+          dispatch(CommonActions.SetProjectNotFound(true));
+        }
         dispatch(CreateProjectActions.SetIndividualProjectDetailsLoading(false));
       } finally {
         dispatch(CreateProjectActions.SetIndividualProjectDetailsLoading(false));

src/frontend/src/api/Project.ts

@@ -53,6 +53,9 @@ export const ProjectById = (projectId: string) => {
         );
         dispatch(ProjectActions.SetProjectDetialsLoading(false));
       } catch (error) {
+        if (error.response.status === 404) {
+          dispatch(CommonActions.SetProjectNotFound(true));
+        }
         dispatch(ProjectActions.SetProjectDetialsLoading(false));
         dispatch(
           CommonActions.SetSnackBar({
@@ -221,6 +224,9 @@ export const GetProjectDashboard = (url: string) => {
         dispatch(ProjectActions.SetProjectDashboardDetail(response.data));
         dispatch(ProjectActions.SetProjectDashboardLoading(false));
       } catch (error) {
+        if (error.response.status === 404) {
+          dispatch(CommonActions.SetProjectNotFound(true));
+        }
         dispatch(ProjectActions.SetProjectDashboardLoading(false));
       } finally {
         dispatch(ProjectActions.SetProjectDashboardLoading(false));

src/frontend/src/components/ProjectSubmissions/SubmissionsTable.tsx

@@ -434,7 +434,9 @@ const SubmissionsTable = ({ toggleView }) => {
                   <AssetModules.VisibilityOutlinedIcon
                     className="fmtm-text-[#545454] hover:fmtm-text-primaryRed"
                     onClick={() => {
-                      navigate(`/project/${projectId}/tasks/${taskUId}/submission/${row?.meta?.instanceID}`);
+                      navigate(
+                        `/project-submissions/${projectId}/tasks/${taskUId}/submission/${row?.meta?.instanceID}`,
+                      );
                     }}
                   />{' '}
                   <span className="fmtm-text-primaryRed fmtm-border-[1px] fmtm-border-primaryRed fmtm-mx-1"></span>{' '}

src/frontend/src/routes.jsx

@@ -81,7 +81,7 @@ const routes = createBrowserRouter([
         ),
       },
       {
-        path: '/project/:projectId/tasks/:taskId/submission/:instanceId',
+        path: '/project-submissions/:projectId/tasks/:taskId/submission/:instanceId',
         element: (
           <ProtectedRoute>
             <Suspense fallback={<div></div>}>

src/frontend/src/store/slices/CommonSlice.ts

@@ -15,6 +15,7 @@ const initialState: CommonStateTypes = {
       step: 1,
     },
   },
+  projectNotFound: false,
 };
 
 const CommonSlice = createSlice({
@@ -33,6 +34,9 @@ const CommonSlice = createSlice({
     SetCurrentStepFormStep(state, action) {
       state.currentStepFormStep[action.payload.flag] = { step: action.payload.step };
     },
+    SetProjectNotFound(state, action) {
+      state.projectNotFound = action.payload;
+    },
   },
 });
 

src/frontend/src/store/types/ICommon.ts

@@ -7,6 +7,7 @@ export type CommonStateTypes = {
       step: number;
     };
   };
+  projectNotFound: boolean;
 };
 
 type snackbarTypes = {

src/frontend/src/views/MainView.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import windowDimention from '@/hooks/WindowDimension';
 import PrimaryAppBar from '@/utilities/PrimaryAppBar';
 import CoreModules from '@/shared/CoreModules';
@@ -8,6 +8,7 @@ import Loader from '@/utilities/AppLoader';
 import MappingHeader from '@/utilities/MappingHeader';
 import { useLocation, useSearchParams } from 'react-router-dom';
 import { useAppSelector } from '@/types/reduxTypes';
+import ProjectNotFound from './ProjectNotFound';
 
 const MainView = () => {
   const dispatch = CoreModules.useAppDispatch();
@@ -17,6 +18,7 @@ const MainView = () => {
   const checkTheme = useAppSelector((state) => state.theme.hotTheme);
   const theme = CoreModules.createTheme(checkTheme);
   const stateSnackBar = useAppSelector((state) => state.common.snackbar);
+  const projectNotFound = useAppSelector((state) => state.common.projectNotFound);
 
   const handleClose = (event: React.SyntheticEvent, reason: string) => {
     if (reason === 'clickaway') {
@@ -34,6 +36,11 @@ const MainView = () => {
 
   const popupInParams = searchParams.get('popup');
 
+  useEffect(() => {
+    if (!projectNotFound) return;
+    dispatch(CommonActions.SetProjectNotFound(false));
+  }, [pathname]);
+
   return (
     <CoreModules.ThemeProvider theme={theme}>
       <CustomizedSnackbars
@@ -56,25 +63,29 @@ const MainView = () => {
                 <PrimaryAppBar />
               </div>
             )}
-            <CoreModules.Stack
-              className={`${
-                pathname.includes('/project/') && windowSize.width < 640 ? '' : 'fmtm-p-6'
-              } fmtm-bg-[#f5f5f5]`}
-              sx={{
-                height: popupInParams
-                  ? '100vh'
-                  : pathname.includes('project/') && windowSize.width <= 640
+            {projectNotFound ? (
+              <ProjectNotFound />
+            ) : (
+              <CoreModules.Stack
+                className={`${
+                  pathname.includes('/project/') && windowSize.width < 640 ? '' : 'fmtm-p-6'
+                } fmtm-bg-[#f5f5f5]`}
+                sx={{
+                  height: popupInParams
                     ? '100vh'
-                    : windowSize.width <= 599
-                      ? '90vh'
-                      : '92vh',
-                overflow: 'auto',
-                // p: '1.3rem',
-              }}
-            >
-              <CoreModules.Outlet />
-              {/* Footer */}
-            </CoreModules.Stack>
+                    : pathname.includes('project/') && windowSize.width <= 640
+                      ? '100vh'
+                      : windowSize.width <= 599
+                        ? '90vh'
+                        : '92vh',
+                  overflow: 'auto',
+                  // p: '1.3rem',
+                }}
+              >
+                <CoreModules.Outlet />
+                {/* Footer */}
+              </CoreModules.Stack>
+            )}
           </CoreModules.Stack>
         </CoreModules.Container>
       </CoreModules.Paper>

src/frontend/src/views/ProjectNotFound.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import NoFileImage from '@/assets/images/no-file.png';
+import Button from '@/components/common/Button';
+import { useNavigate } from 'react-router-dom';
+
+const ProjectNotFound = () => {
+  const navigate = useNavigate();
+  return (
+    <div className="md:fmtm-px-[2rem] lg:fmtm-px-[4.5rem] fmtm-h-full">
+      <div className="fmtm-flex fmtm-flex-col fmtm-items-center fmtm-h-[90%] fmtm-justify-center">
+        <div className="fmtm-mb-[5rem]">
+          <img src={NoFileImage} alt="Project Not Found Photo" className="fmtm-w-[12rem] lg:fmtm-w-[15.625rem]" />
+        </div>
+        <div className="fmtm-flex fmtm-flex-col fmtm-gap-3">
+          <h2 className="fmtm-text-[1.5rem] md:fmtm-text-[2rem] lg:fmtm-text-[2.5rem] fmtm-text-primaryRed fmtm-font-barlow fmtm-font-bold fmtm-text-center">
+            PROJECT NOT FOUND
+          </h2>
+          <p className="fmtm-text-sm sm:fmtm-text-base fmtm-text-center fmtm-text-[#68707F]">
+            There is no project to show, please create a project by clicking the button below.{' '}
+          </p>
+        </div>
+        <Button
+          btnText="Create Project"
+          onClick={() => navigate('/create-project')}
+          btnType="primary"
+          className="fmtm-mx-auto fmtm-rounded-none fmtm-py-2 fmtm-mt-8"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default ProjectNotFound;