From 861e6e846a7a663bded241750d9e2eb984cc3f76 Mon Sep 17 00:00:00 2001
From: Eric Gauzens <ericgauzens@hotmail.com>
Date: Mon, 19 Aug 2024 10:28:02 -0400
Subject: [PATCH] Refactored setup method, added fail message, and centered
 images

---
 components/PortalFeatures/PortalFeatures.vue  |  2 +-
 .../ProjectsAndDatasets.vue                   |  4 +-
 pages/about/[aboutDetailsId].vue              |  5 ++
 pages/about/index.vue                         |  8 ++-
 pages/apps/index.vue                          |  2 +-
 pages/index.vue                               | 50 ++++++++++++-------
 6 files changed, 48 insertions(+), 23 deletions(-)

diff --git a/components/PortalFeatures/PortalFeatures.vue b/components/PortalFeatures/PortalFeatures.vue
index ad4b4d1d..91ecdfb2 100644
--- a/components/PortalFeatures/PortalFeatures.vue
+++ b/components/PortalFeatures/PortalFeatures.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="section-container container pt-32 pb-56">
+  <div class="section-container container py-32">
     <div class="heading2 mb-32">{{ title }}</div>
     <div v-if="maxSet" class="max-set-row" :style="`grid-template-columns: repeat(${maxPerRow}, 1fr)`">
       <div 
diff --git a/components/ProjectsAndDatasets/ProjectsAndDatasets.vue b/components/ProjectsAndDatasets/ProjectsAndDatasets.vue
index dc9f8dc5..9e11b033 100644
--- a/components/ProjectsAndDatasets/ProjectsAndDatasets.vue
+++ b/components/ProjectsAndDatasets/ProjectsAndDatasets.vue
@@ -7,6 +7,7 @@
         <template v-if="isProject">
           <div class="body2 mb-16">Here is a project you might be interested in:</div>
           <projects-and-datasets-card 
+            v-if="projectOrResource.fields"
             :title="projectOrResource.fields.title" 
             :description="projectOrResource.fields.shortDescription" 
             :banner="projectOrResource.fields.banner" 
@@ -21,6 +22,7 @@
         <template v-else>
           <div class="body2 mb-16">Here is a resource you might be interested in:</div>
           <projects-and-datasets-card 
+            v-if="projectOrResource.fields"
             :title="projectOrResource.fields.name" 
             :description="projectOrResource.fields.description" 
             :banner="projectOrResource.fields.logo.fields.file.url" 
@@ -32,7 +34,7 @@
           </nuxt-link>
         </template>
       </div>
-      <div class="col p-16">
+      <div v-if="dataset.title" class="col p-16">
         <div class="body2 mb-16">{{ datasetSectionTitle }}</div>
         <projects-and-datasets-card 
           :title="dataset.title" 
diff --git a/pages/about/[aboutDetailsId].vue b/pages/about/[aboutDetailsId].vue
index 5f594d7d..466777ee 100644
--- a/pages/about/[aboutDetailsId].vue
+++ b/pages/about/[aboutDetailsId].vue
@@ -129,4 +129,9 @@ export default {
 :deep(img) {
   max-width: 100%;
 }
+:deep(img) {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
 </style>
diff --git a/pages/about/index.vue b/pages/about/index.vue
index 21d94bbe..331f0db3 100644
--- a/pages/about/index.vue
+++ b/pages/about/index.vue
@@ -16,7 +16,7 @@
     <div class="container">
       <paper class="row mt-32" :text="parseMarkdown(sparcPortal)" button-text="View The Roadmap"
         button-link-external="https://docs.sparc.science/docs/sparc-portal-roadmap" />
-      <div :v-if="whoWeSpport?.length > 0" class="who-we-support-container p-24 mt-32">
+      <div :v-if="whoWeSupport?.length > 0" class="who-we-support-container p-24 mt-32">
         <div class="heading2">Who We Support</div>
         <Consortias />
         <nuxt-link to="/about/projects">
@@ -283,6 +283,11 @@ export default {
   width: 100%;
   display: flex;
 }
+:deep(img) {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
 .who-we-support-item {
   color: #000;
   text-decoration: none;
@@ -298,7 +303,6 @@ export default {
   img {
     background: #fff;
     border-radius: 50%;
-    display: block;
     margin-bottom: 8px;
     width: 128px;
     border: solid 1px #c0c4cc;
diff --git a/pages/apps/index.vue b/pages/apps/index.vue
index c73a3604..d3dc4215 100644
--- a/pages/apps/index.vue
+++ b/pages/apps/index.vue
@@ -16,7 +16,7 @@
       </p>
     </page-hero>
     <portal-features :features="appEntries" :title="appsSectionTitle" :icon-is-top-element="false" :max-per-row="3" />
-    <div class="container" :style="'text-align: center; margin-top: 1rem;'" v-html="parseMarkdown(footer)" />
+    <div class="container" :style="'text-align: center; margin-top: 1rem; margin-bottom: 2rem;'" v-html="parseMarkdown(footer)" />
   </div>
 </template>
 
diff --git a/pages/index.vue b/pages/index.vue
index 1e1bf3c4..fc7122c5 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -43,7 +43,7 @@ import HomepageNews from '@/components/HomepageNews/HomepageNews.vue'
 import PortalFeatures from '@/components/PortalFeatures/PortalFeatures.vue'
 import ProjectsAndDatasets from '@/components/ProjectsAndDatasets/ProjectsAndDatasets.vue'
 import StayConnected from '@/components/StayConnected/StayConnected.vue'
-
+import { failMessage } from '@/utils/notification-messages'
 import marked from '@/mixins/marked/index'
 import getHomepageFields from '@/utils/homepageFields'
 import { useMainStore } from '../store/index.js'
@@ -120,27 +120,41 @@ export default {
         }
       ]
     })
-    return Promise.all([
-      $contentfulClient.getEntry(config.public.ctf_home_page_id)
-    ]).then(async ([homepage]) => {
+    try {
+      const homepage = await $contentfulClient.getEntry(config.public.ctf_home_page_id)
+
       let fields = getHomepageFields(homepage.fields)
       const datasetSectionTitle = homepage.fields.datasetSectionTitle
-      const url = `${config.public.portal_api}/get_featured_dataset`
-      await $axios.get(url).then(({data}) => {
-        const datasets = data?.datasets
-        fields = { ...fields, 'featuredDataset': { 'title': datasets[0].name, 'description': datasets[0].description, 'banner': datasets[0].banner, 'id': datasets[0].id }, 'datasetSectionTitle': datasetSectionTitle }
-      })
-      if (pathOr(undefined, ["featuredProject","fields","institution"], fields) != undefined) {
-        const institutionId = pathOr("", ["featuredProject","fields","institution","sys","id"], fields)
-        await $contentfulClient.getEntry(institutionId).then(( response ) => {
-          fields.featuredProject.fields = { ...fields.featuredProject.fields, 'banner': response.fields.logo.fields?.file.url }
-        })
+
+      const { data } = await $axios.get(`${config.public.portal_api}/get_featured_dataset`)
+      const datasets = data?.datasets
+      if (datasets != undefined && datasets.length > 0) {
+        const featuredDataset = {
+          title: datasets[0].name,
+          description: datasets[0].description,
+          banner: datasets[0].banner,
+          id: datasets[0].id,
+        }
+        fields = { ...fields, featuredDataset, datasetSectionTitle }
+      }
+
+      const institutionId = pathOr(undefined, ["featuredProject", "fields", "institution", "sys", "id"], fields)
+
+      if (institutionId) {
+        const institutionResponse = await $contentfulClient.getEntry(institutionId)
+        fields.featuredProject.fields.banner = institutionResponse.fields.logo.fields?.file.url
+      }
+
+      if (datasets == undefined || datasets.length <= 0 || homepage == undefined || fields == undefined) {
+        failMessage("Some services are temporarily unavailable, which may cause certain pages to load incompletely.")
       }
+
       return fields
-    }).catch(e => {
-      console.error(e);
-      return { contentfulError: true }
-    })
+    } catch (error) {
+      console.error(error)
+      failMessage("Some services are temporarily unavailable, which may cause certain pages to load incompletely.")
+      return
+    }
   },
   
   watch: {