Show loading page. More robust error handling

IDLabResearch · Oct 6, 2020 · c52a622 · c52a622
1 parent bcd33b5
commit c52a622
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>