Merge pull request #236 from nih-sparc/Use-SSR-effectively-by-rending…

…-only-server-side

Use ssr effectively by rending only server side

components/Consortias/Consortias.vue

@@ -1,11 +1,15 @@
 <template>
   <div class="body1">
-    The SPARC Portal currently supports <b><span class="heading2">{{ consortias.length }}</span></b> consortia. Visit
+    The SPARC Portal currently supports <b><span class="heading2">{{ items?.length }}</span></b> consortia. Visit
     the consortia pages to find out more about them:
   </div>
   <div class="data-wrap py-16">
-    <nuxt-link v-for="item in consortias" :key="item.sys.id" class="consortia-item"
-      :to="`/about/consortia/${item.fields.slug}`">
+    <nuxt-link
+      v-for="item in items"
+      :key="item.sys.id"
+      class="consortia-item"
+      :to="`/about/consortia/${item.fields.slug}`"
+    >
       <img :src="logoUrl(item)" :alt="`Logo for ${item.fields.title}`" />
       <p class="mb-0 mt-8">
         {{ item.fields.title }}
@@ -19,20 +23,11 @@ import { pathOr } from 'ramda'
 
 export default {
   name: 'Consortias',
-  async setup() {
-    const config = useRuntimeConfig()
-    const { $contentfulClient } = useNuxtApp()
-    const consortias =
-      await $contentfulClient.getEntries({
-        content_type: config.public.ctf_consortia_content_type_id,
-        order: 'fields.displayOrder'
-      }).then(({ items }) => {
-        return items
-      }).catch(() => {
-        return []
-      })
-    return {
-      consortias
+
+  props: {
+    items: {
+      type: Array,
+      default: () => []
     }
   },
   methods: {

components/FeaturedData/FeaturedData.vue

@@ -6,124 +6,102 @@
         <el-option v-for="category in categories" :key="category" :label="category" :value="category" />
       </el-select>
     </div>
-    <gallery galleryItemType="featuredData" :card-width=Number(10) :items="selectedCategoryFeaturedData" :key="refreshKey" />
+    <client-only><gallery galleryItemType="featuredData" :card-width=Number(10) :items="selectedCategoryFeaturedData" /></client-only>
   </div>
 </template>
-<script>
-import Gallery from '@/components/Gallery/Gallery.vue'
+<script setup>
+import { ref, reactive, watch } from 'vue'
 import { getAlgoliaFacets, facetPropPathMapping } from '../../utils/algolia'
-import { ref } from 'vue'
-import { isEmpty, pathOr } from 'ramda'
+import { isEmpty } from 'ramda'
 
-export default {
-  name: 'FeaturedData',
-  components: {
-    Gallery
-  },
-  props: {
-    featuredData: {
-      type: Array,
-      default: () => []
-    }
-  },
-  async setup() {
-    const { $contentfulClient } = useNuxtApp()
-    let categories = []
-    await $contentfulClient.getContentType('featuredData').then(contentType => {
-      contentType.fields.forEach((field) => {
-        if (field.id === 'facetType') {
-          categories = field.items?.validations[0]['in']
-        }
-      })
-    })
-    const selectedCategory = ref(categories[0])
+const config = useRuntimeConfig()
+const { $algoliaClient } = useNuxtApp()
 
-    return {
-      categories,
-      selectedCategory,
-    }
+const props = defineProps({
+  featuredData: {
+    type: Array,
+    default: () => []
   },
+  categories: {
+    type: Array,
+    default: () => []
+  }
+})
 
-  data: () => {
-    return {
-      facets: [],
-      viewMore: false,
-      refreshKey: 0
-    }
-  },
+const selectedCategory = ref(null)
+const facets = ref([])
+const localFeaturedData = reactive([...props.featuredData])
+
+if (props.categories?.length > 0) {
+  selectedCategory.value = props.categories[0]
+}
 
-  computed: {
-    viewMoreText() {
-      return this.viewMore ? 'View Less' : 'View More'
-    },
-    selectedCategoryFeaturedData() {
-      return this.featuredData.filter(data => data.fields.facetType == this.selectedCategory)
+watch(
+  () => props.featuredData,
+  (newVal) => {
+    localFeaturedData.splice(0, localFeaturedData.length, ...newVal)
+  }
+)
+watch(
+  () => props.categories,
+  (newVal) => {
+    if (newVal?.length > 0 && !selectedCategory.value) {
+      selectedCategory.value = newVal[0]
     }
-  },
+  }
+)
 
-  watch: {
-    selectedCategory: {
-      handler: async function () {
-        const categoryKey = facetPropPathMapping.find(item => item.label == this.selectedCategory).facetPropPath
-        // Load facets so that we can determine the link for the featured data
-        const algoliaIndex = this.$algoliaClient.initIndex(this.$config.public.ALGOLIA_INDEX)
-        const facets = await getAlgoliaFacets(algoliaIndex, facetPropPathMapping)
-          .then(data => {
-            return data.find(
-              facet => facet.key == categoryKey
-            ).children
-          })
-        this.featuredData.forEach(({ fields }) => {
-          fields['linkWithFacets'] = this.getLink(fields, facets)
-        })
-        this.refreshKey += 1
-      },
-      immediate: true
-    },
-  },
+const selectedCategoryFeaturedData = ref([])
 
-  methods: {
-    /**
-     * Get image URL for the featured data
-     * @param {Object} item
-     * @returns {String}
-     */
-    imageUrl: function(item) {
-      return pathOr('', ['fields', 'image', 'fields', 'file', 'url'], item)
-    },
-    filterOrgans(contentfulFields, organFacets) {
-      const normStr = str => str.toLowerCase().trim()
-      let organs = organFacets.filter(
-        organ =>
-          normStr(organ.label).includes(normStr(contentfulFields.label)) ||
-          (contentfulFields.containsSearch && contentfulFields.containsSearch.some(keyword => normStr(organ.label).includes(normStr(keyword))))
-      )
-      organFacets.forEach(organFacet => {
-        if (organFacet == undefined || organFacet.children == undefined) {
-          return
-        }
-        if (organFacet.children.length == 0) {
-          return
-        }
-        const subOrgans = organFacet.children.filter(
-          subOrgan =>
-            normStr(subOrgan.label).includes(normStr(contentfulFields.label)) ||
-            (contentfulFields.containsSearch && contentfulFields.containsSearch.some(keyword => normStr(subOrgan.label).includes(normStr(keyword))))
-        )
-        organs = organs.concat(subOrgans)
-      })
-      return organs
-    },
-    getLink(contentfulFields, organFacets) {
-      if (isEmpty(organFacets)) {
-        return contentfulFields.link
-      }
-      var organIds = this.filterOrgans(contentfulFields, organFacets).map(organ => organ.id)
-      return organIds.length === 0
-        ? contentfulFields.link
-        : `${contentfulFields.link}&selectedFacetIds=${organIds.join(',')}`
-    }
+watch(selectedCategory, async (newCategory) => {
+  const categoryKey = facetPropPathMapping.find(item => item.label == newCategory)?.facetPropPath
+
+  if (categoryKey) {
+    // Load facets to determine links for the featured data
+    const algoliaIndex = $algoliaClient.initIndex(config.public.ALGOLIA_INDEX)
+    const facetsData = await getAlgoliaFacets(algoliaIndex, facetPropPathMapping)
+    facets.value = facetsData.find(facet => facet.key == categoryKey)?.children || []
+
+    // Update localFeaturedData with the links
+    localFeaturedData.forEach(({ fields }) => {
+      fields['linkWithFacets'] = getLink(fields, facets.value)
+    })
+    selectedCategoryFeaturedData.value = localFeaturedData.filter(data => data.fields.facetType == newCategory)
+  }
+},
+  { immediate: true }
+)
+
+const filterOrgans = (contentfulFields, organFacets) => {
+  const normStr = str => str.toLowerCase().trim()
+  let organs = organFacets.filter(
+    organ =>
+      normStr(organ.label).includes(normStr(contentfulFields.label)) ||
+      (contentfulFields.containsSearch &&
+        contentfulFields.containsSearch.some(keyword => normStr(organ.label).includes(normStr(keyword))))
+  )
+  organFacets.forEach(organFacet => {
+    if (!organFacet?.children?.length) return
+
+    const subOrgans = organFacet.children.filter(
+      subOrgan =>
+        normStr(subOrgan.label).includes(normStr(contentfulFields.label)) ||
+        (contentfulFields.containsSearch &&
+          contentfulFields.containsSearch.some(keyword => normStr(subOrgan.label).includes(normStr(keyword))))
+    )
+    organs = organs.concat(subOrgans)
+  })
+  return organs
+}
+
+const getLink = (contentfulFields, organFacets) => {
+  if (isEmpty(organFacets)) {
+    return contentfulFields.link
   }
+  const organIds = filterOrgans(contentfulFields, organFacets).map(organ => organ.id)
+  return organIds.length === 0
+    ? contentfulFields.link
+    : `${contentfulFields.link}&selectedFacetIds=${organIds.join(',')}`
 }
 </script>
 <style lang="scss" scoped>

components/Gallery/Gallery.vue

@@ -3,7 +3,7 @@
     <div class="resources-gallery-strip">
       <div class="card-line">
         <!--template needed in order to force windowedItems to recompute when items changes-->
-        <template v-if="items.length">
+        <template v-if="items?.length">
           <span v-for="(item, index) in windowedItems" :key="index" :class="['key-image-span']">
             <template v-if="item">
               <component v-if="galleryItemType === 'resources'" :is="galleryItemComponent" :width="cardWidth"
@@ -31,7 +31,7 @@
       </div>
     </div>
     <client-only>
-      <pagination v-if="items.length > 0" background :total-count="itemCount" :selected="currentIndex"
+      <pagination v-if="items?.length > 0" background :total-count="itemCount" :selected="currentIndex"
         :page-size="numberOfItemsVisible" :pager-count=7 @select-page="indicatorClicked" />
     </client-only>
   </div>
@@ -98,6 +98,11 @@ export default {
       maxWidth: 0
     }
   },
+  watch: {
+    items() {
+      this.currentIndex = 1
+    }
+  },
   mounted() {
     this.resizeObserver = new ResizeObserver(this.onResize).observe(this.$el)
   },
@@ -109,7 +114,7 @@ export default {
       return defaultTo('', galleryItemComponents[this.galleryItemType])
     },
     itemCount() {
-      return this.items.length
+      return this.items?.length
     },
     isPrevPossible() {
       return this.currentIndex > 0

components/NewsEventsResourcesPage/SubmitNewsSection.vue

@@ -1,35 +1,28 @@
 <template>
-  <paper
+  <Paper
     :text="parseMarkdown(searchPaperText)"
     :button-text="searchPaperNEButton"
     :button-link="{ name: 'contact-us', query: { type: 'news-event'} }"
     new-tab
   />
 </template>
 
-<script>
-import Paper from '@/components/Paper/Paper.vue'
-import marked from '@/mixins/marked/index'
+<script setup>
+import { useNuxtApp, useRuntimeConfig } from '#imports';
+import Paper from '@/components/Paper/Paper.vue';
+import { parseMarkdown } from '@/utils/formattingUtils.js'
 
-export default {
-  name: 'SubmitNewsSection',
+const config = useRuntimeConfig();
+const { $contentfulClient } = useNuxtApp();
 
-  mixins: [marked],
+const { data } = await useAsyncData('newsAndEventsPage', async () => {
+  const pageData = await $contentfulClient.getEntry(config.public.ctf_news_and_events_page_id);
+  return {
+    fields: pageData.fields || {},
+  }
+});
 
-  components: {
-    Paper
-  },
+const searchPaperNEButton = computed(() => data.value?.fields.searchPaperNeButton || '')
+const searchPaperText = computed(() => data.value?.fields.searchPaperText || '')
 
-  async setup() {
-    const config = useRuntimeConfig()
-    const { $contentfulClient } = useNuxtApp()
-    const response = await $contentfulClient.getEntry(config.public.ctf_news_and_events_page_id)
-    const searchPaperNEButton = response.fields.searchPaperNeButton
-    const searchPaperText = response.fields.searchPaperText
-    return {
-      searchPaperNEButton,
-      searchPaperText
-    }
-  }
-}
 </script>

components/Paper/Paper.vue

@@ -10,12 +10,12 @@
           </div>
         </div>
       </div>
-      <NuxtLink v-if="buttonText != '' && buttonLinkExternal == ''" class="margin-top-auto" :to="buttonLink"
+      <nuxt-link v-if="buttonText != '' && buttonLinkExternal == ''" class="margin-top-auto" :to="buttonLink"
         :target="newTab ? '_blank' : '_self'">
         <el-button class="secondary">
           {{ buttonText }}
         </el-button>
-      </NuxtLink>
+      </nuxt-link>
       <a v-if="buttonText != '' && buttonLinkExternal != ''" class="margin-top-auto" :href="buttonLinkExternal"
         target="_blank">
         <el-button class="secondary">

components/ProjectsAndDatasets/ProjectsAndDatasets.vue

@@ -7,7 +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"
+            v-if="projectOrResource?.fields"
             :title="projectOrResource.fields.title" 
             :description="projectOrResource.fields.shortDescription" 
             :banner="projectOrResource.fields.banner" 
@@ -22,7 +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"
+            v-if="projectOrResource?.fields"
             :title="projectOrResource.fields.name" 
             :description="projectOrResource.fields.description" 
             :banner="projectOrResource.fields.logo.fields.file.url" 
@@ -34,7 +34,7 @@
           </nuxt-link>
         </template>
       </div>
-      <div v-if="dataset.title" 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" 
@@ -91,7 +91,7 @@ export default {
       }
     },
     resourceLink() {
-      if (this.projectOrResource.fields.requiresDetailsPage) {
+      if (this.projectOrResource?.fields.requiresDetailsPage) {
         return {
           isInternal: true,
           path: "resources/" + pathOr("", ["sys","id"], this.projectOrResource)