From c52a622cfa032e405ee5f73b5c297eae2945aec6 Mon Sep 17 00:00:00 2001
From: dexagod <Ruben.Dedecker@Ugent.be>
Date: Tue, 6 Oct 2020 10:43:35 +0200
Subject: [PATCH] Show loading page. More robust error handling

---
 src/Components/CertificateViewComponent.js    | 20 ++++++++++++++----
 src/Components/MarriageViewComponent.js       | 17 +++++++++++----
 .../ProfileCardSelectorComponent.js           |  4 +++-
 src/Components/SubmissionViewComponent.js     | 21 +++++++++++++++++--
 4 files changed, 51 insertions(+), 11 deletions(-)

diff --git a/src/Components/CertificateViewComponent.js b/src/Components/CertificateViewComponent.js
index dc7e103..f39f441 100644
--- a/src/Components/CertificateViewComponent.js
+++ b/src/Components/CertificateViewComponent.js
@@ -8,7 +8,7 @@ import { generateCertificatePDF } from '../util/generatepdf'
 // @prefix dbo: <http://dbpedia.org/ontology/>. dbo:birthDate, dbo:birthPlace
 const CertificateViewComponent = (props) => {
 
-  const [state, setstate] = useState({})
+  const [state, setstate] = useState(undefined)
 
   useEffect(() => {
     let mounted = true
@@ -17,7 +17,9 @@ const CertificateViewComponent = (props) => {
       const certificate = await getCertificateData(proposal.certified_by);
       if (proposal && certificate) {
         setstate({ proposal, certificate })
-      } 
+      } else {
+        setstate(null)
+      }
       
     }
     fetchData()
@@ -26,10 +28,20 @@ const CertificateViewComponent = (props) => {
     }
   }, [])
 
-  if (!state.proposal || !state.certificate) {
+  if (state === undefined) {
     return (
       <div id="marriageViewContainer" className='container'> 
-        "Proposal or certificate could not be retrieved. This could be caused by incorrect permissions, or the resource not being available."
+        <h4> Marriage Certificate </h4>
+        <br />
+        <h6>Loading certificate.</h6>
+      </div>
+    )
+  } else if (!state || !state.proposal || !state.certificate) {
+    return (
+      <div id="marriageViewContainer" className='container'> 
+        <h4> Marriage Certificate </h4>
+        <br />
+        <h6>Proposal or certificate could not be retrieved. This could be caused by incorrect permissions, or the resource not being available.</h6>
       </div>
     )
   }
diff --git a/src/Components/MarriageViewComponent.js b/src/Components/MarriageViewComponent.js
index 7b873a6..d040f6b 100644
--- a/src/Components/MarriageViewComponent.js
+++ b/src/Components/MarriageViewComponent.js
@@ -24,7 +24,7 @@ const DEFAULTOFFICIAL = 'https://weddinator.inrupt.net/profile/card#me'
  */
 const MarriageViewComponent = (props) => {
 
-  const [contract, setcontract] = useState(null);
+  const [contract, setcontract] = useState(undefined);
   let allcontacts = [];
   if (contract){
     allcontacts =  contract.spouse.map(e => { e.type='spouse'; return e})
@@ -38,7 +38,7 @@ const MarriageViewComponent = (props) => {
   useEffect(() => {
     let mounted = true
     getContractData(props.contractId).then(contract => {
-      if (contract && mounted) setcontract(contract)
+      if (mounted) setcontract(contract || null)
     })
     return () => mounted = false;
   }, [props.contractId])
@@ -166,14 +166,23 @@ const MarriageViewComponent = (props) => {
     return "Loading"
   }
 
-  if (!contract) {
+
+  if (contract === undefined) {
+    return (
+      <div id="marriageViewContainer" className='container'>
+        <h4> Marriage Proposal </h4>
+        <br />
+        <h6>Loading Marriage proposal.</h6>
+      </div>
+    )
+  } else if (!contract) {
     return (
       <div id="marriageViewContainer" className='container'>
         <h4> Marriage Proposal </h4>
         <br />
         <h6>The requested proposal could not be retrieved. The resource has been removed or does not exist.</h6>
       </div>
-        )
+    )
   }
   return (
     <div id="marriageViewContainer" className='container'>
diff --git a/src/Components/ProfileCardSelectorComponent.js b/src/Components/ProfileCardSelectorComponent.js
index d38d90e..7a7be0b 100644
--- a/src/Components/ProfileCardSelectorComponent.js
+++ b/src/Components/ProfileCardSelectorComponent.js
@@ -41,7 +41,9 @@ const ProfileCardSelectorComponent = (props) => {
 
   function getWarnings(profile) {
     if(!profile || !isProfile(profile)) return webIdInput ? "Please enter a valid webId" : undefined
-    if (!isOfAge(profile) || !isComplete(profile))
+    if (!isComplete(profile))
+      return "The chosen profile is not complete. Please choose a webId with a completed profile, or wait for the profile to be completed by the owner."
+    if (!isOfAge(profile))
       return "The chosen profile is not complete or is not 18 years or older. Please select a person that is 18 years or older."
   }
 
diff --git a/src/Components/SubmissionViewComponent.js b/src/Components/SubmissionViewComponent.js
index 991815d..28228c4 100644
--- a/src/Components/SubmissionViewComponent.js
+++ b/src/Components/SubmissionViewComponent.js
@@ -21,7 +21,7 @@ const INVITATIONREFUSED = ns.demo('refused')
  */
 const SubmissionViewComponent = (props) => {
   
-  const [contract, setcontract] = useState(null);
+  const [contract, setcontract] = useState(undefined);
   let allcontacts = [];
   if (contract){
     allcontacts =  contract.spouse.map(e => { e.type='spouse'; return e})
@@ -37,7 +37,7 @@ const SubmissionViewComponent = (props) => {
   useEffect(() => {
     let mounted = true
     getContractData(props.contractId).then(contract => {
-      if (contract && mounted) setcontract(contract)
+      if (mounted) setcontract(contract || null)
     })
     return () => mounted = false;
   }, [props.contractId])
@@ -112,6 +112,23 @@ const SubmissionViewComponent = (props) => {
     props.setview(availableViews.official)
   }
 
+  if (contract === undefined) {
+    return (
+      <div id="marriageViewContainer" className='container'>
+        <h4> Marriage Proposal </h4>
+        <br />
+        <h6>Loading Marriage proposal.</h6>
+      </div>
+    )
+  } else if (!contract) {
+    return (
+      <div id="marriageViewContainer" className='container'>
+        <h4> Marriage Proposal </h4>
+        <br />
+        <h6>The requested proposal could not be retrieved. The resource has been removed or does not exist.</h6>
+      </div>
+    )
+  }
   return (
     <div id="marriageViewContainer" className='container'>
       <h4> Submission </h4>