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

@@ -24,4 +24,5 @@ export enum AppPath {
 
   // 404 page not found
   NotFoundWildcard = '*',
+  NotFound = '/not-found',
 }

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 =

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 =