Fix crash of ParcelDetails when seen by someone who is not the user

src/components/Parcels/ParcelDetails.js

@@ -16,6 +16,9 @@ import StatusTable from './StatusTable';
 import styles from './ParcelDetails.module.css';
 import AddressPanel from '../Address/AddressPanel';
 import AdminPanel from './AdminPanel';
+import { useInvestigation } from '../../helpers/hooks';
+import Loader from '../Loader';
+import PageNotFound from '../../containers/PageNotFound';
 
 function ParcelDetails(props) {
   const { investigationId, parcelId } = props;
@@ -49,14 +52,9 @@ function ParcelDetails(props) {
   const [alert, setAlert] = useState();
 
   const dispatch = useDispatch();
-  const userInvestigations = useSelector(
-    (state) => state.myInvestigations.data
-  );
   const user = useSelector((state) => state.user);
 
-  const investigation = userInvestigations.find(
-    (investigation) => investigation.id === Number(investigationId)
-  );
+  const { investigation, fetching } = useInvestigation(investigationId);
 
   useEffect(() => {
     if (investigation) {
@@ -77,8 +75,12 @@ function ParcelDetails(props) {
     }
   }, [dispatch, investigation, parcel]);
 
+  if (fetching) {
+    return <Loader message="Loading parcel..." />;
+  }
+
   if (!parcel) {
-    return <p>Parcel not found !</p>;
+    return <PageNotFound />;
   }
 
   function handleCloseModal() {

src/components/Parcels/ParcelHeader.js

@@ -14,6 +14,12 @@ function ParcelHeader(props) {
   const { shipmentId, investigationId, _id } = parcel;
   const history = useHistory();
 
+  const investigationSummary = investigation
+    ? `${investigation.name} - ${dateFormatter(
+        investigation.startDate
+      )} - ${investigation.visitId.toUpperCase()}`
+    : parcel.investigationName;
+
   const deleteParcel = useFetcher(ParcelResource.deleteShape());
 
   return (
@@ -25,8 +31,7 @@ function ParcelHeader(props) {
         <h4 className={styles.investigation}>
           Investigation{' '}
           <Link to={`/investigation/${investigationId}/shipping`}>
-            {investigation.name} - {dateFormatter(investigation.startDate)} -{' '}
-            {investigation.visitId.toUpperCase()}
+            {investigationSummary}
           </Link>
         </h4>
       </div>