From a902b7c6fe6b03722ba7f2a5a4ad57888f1bb45a Mon Sep 17 00:00:00 2001
From: Pepe <94927052+PepeGonzale@users.noreply.github.com>
Date: Wed, 6 Sep 2023 16:46:40 +0200
Subject: [PATCH] Display a 404 on people/:id and company/:id when id does not
 exist (#1468)

* Display 404 while person or company not found

* Display 404 while person or company not found

* Issue solved
---
 front/src/modules/types/AppPath.ts        |  1 +
 front/src/pages/companies/CompanyShow.tsx | 14 +++++++++++---
 front/src/pages/people/PersonShow.tsx     | 14 ++++++++++++--
 3 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/front/src/modules/types/AppPath.ts b/front/src/modules/types/AppPath.ts
index 0dffdab63..f881040ec 100644
--- a/front/src/modules/types/AppPath.ts
+++ b/front/src/modules/types/AppPath.ts
@@ -24,4 +24,5 @@ export enum AppPath {
 
   // 404 page not found
   NotFoundWildcard = '*',
+  NotFound = '/not-found',
 }
diff --git a/front/src/pages/companies/CompanyShow.tsx b/front/src/pages/companies/CompanyShow.tsx
index 70dbc69d6..91fcd5624 100644
--- a/front/src/pages/companies/CompanyShow.tsx
+++ b/front/src/pages/companies/CompanyShow.tsx
@@ -1,10 +1,12 @@
-import { useParams } from 'react-router-dom';
+import { useEffect } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
 import { useTheme } from '@emotion/react';
 
 import { ActivityTargetableEntityType } from '@/activities/types/ActivityTargetableEntity';
 import { CompanyTeam } from '@/companies/components/CompanyTeam';
 import { useCompanyQuery } from '@/companies/hooks/useCompanyQuery';
 import { useFavorites } from '@/favorites/hooks/useFavorites';
+import { AppPath } from '@/types/AppPath';
 import { DropdownRecoilScopeContext } from '@/ui/dropdown/states/recoil-scope-contexts/DropdownRecoilScopeContext';
 import { GenericEditableField } from '@/ui/editable-field/components/GenericEditableField';
 import { EditableFieldDefinitionContext } from '@/ui/editable-field/contexts/EditableFieldDefinitionContext';
@@ -34,11 +36,17 @@ import { companyShowFieldDefinition } from './constants/companyShowFieldDefiniti
 export function CompanyShow() {
   const companyId = useParams().companyId ?? '';
   const { insertCompanyFavorite, deleteCompanyFavorite } = useFavorites();
-
+  const navigate = useNavigate();
   const theme = useTheme();
-  const { data } = useCompanyQuery(companyId);
+  const { data, loading } = useCompanyQuery(companyId);
   const company = data?.findUniqueCompany;
 
+  useEffect(() => {
+    if (!loading && !company) {
+      navigate(AppPath.NotFound);
+    }
+  }, [loading, company, navigate]);
+
   if (!company) return <></>;
 
   const isFavorite =
diff --git a/front/src/pages/people/PersonShow.tsx b/front/src/pages/people/PersonShow.tsx
index 5f243cbcf..d5624d211 100644
--- a/front/src/pages/people/PersonShow.tsx
+++ b/front/src/pages/people/PersonShow.tsx
@@ -1,4 +1,5 @@
-import { useParams } from 'react-router-dom';
+import { useEffect } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
 import { getOperationName } from '@apollo/client/utilities';
 import { useTheme } from '@emotion/react';
 
@@ -6,6 +7,7 @@ import { ActivityTargetableEntityType } from '@/activities/types/ActivityTargeta
 import { useFavorites } from '@/favorites/hooks/useFavorites';
 import { GET_PERSON } from '@/people/graphql/queries/getPerson';
 import { usePersonQuery } from '@/people/hooks/usePersonQuery';
+import { AppPath } from '@/types/AppPath';
 import { DropdownRecoilScopeContext } from '@/ui/dropdown/states/recoil-scope-contexts/DropdownRecoilScopeContext';
 import { GenericEditableField } from '@/ui/editable-field/components/GenericEditableField';
 import { EditableFieldDefinitionContext } from '@/ui/editable-field/contexts/EditableFieldDefinitionContext';
@@ -37,13 +39,21 @@ import { personShowFieldDefinition } from './constants/personShowFieldDefinition
 export function PersonShow() {
   const personId = useParams().personId ?? '';
   const { insertPersonFavorite, deletePersonFavorite } = useFavorites();
+  const navigate = useNavigate();
 
   const theme = useTheme();
-  const { data } = usePersonQuery(personId);
+
+  const { data, loading } = usePersonQuery(personId);
   const person = data?.findUniquePerson;
 
   const [uploadPicture] = useUploadPersonPictureMutation();
 
+  useEffect(() => {
+    if (!loading && !person) {
+      navigate(AppPath.NotFound);
+    }
+  }, [loading, person, navigate]);
+
   if (!person) return <></>;
 
   const isFavorite =