refactor(partners): move partners fetch to plugin

Author: smarroufin

components/organisms/sections/PartnersSection.vue

@@ -6,7 +6,7 @@
         <Markdown use="category-title" unwrap="p" />
       </h2>
     </div>
-    <div v-if="partners && partners.length" class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
+    <div v-if="partners" class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
       <LogoCard v-for="partner in partners" :key="partner.id" :item="partner">
         <template #footer>
           <PartnerServices :services="partner.profile.services" class="text-sm mt-4" />
@@ -17,9 +17,9 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, useContext, ref, onMounted } from '@nuxtjs/composition-api'
+import { defineComponent, ref, onMounted } from '@nuxtjs/composition-api'
 import { scrollToHeading } from '@docus/theme/runtime'
-import { $fetch } from 'ohmyfetch'
+import { usePartners } from '~/plugins/partners'
 
 export default defineComponent({
   props: {
@@ -33,17 +33,20 @@ export default defineComponent({
     }
   },
   setup(props) {
-    const { $config } = useContext()
-    const partners = ref(null)
+    const { fetch: fetchPartners } = usePartners()
+    const partners = ref([])
 
-    const fetch = async () => {
-      const apiURL = $config.apiNuxtlabsURL || 'https://api.nuxtlabs.com'
+    onMounted(async () => {
+      if (window.location.hash) {
+        const hash = window.location.hash.replace('#', '')
+
+        // do not remove setTimeout (wrong scroll pos)
+        setTimeout(() => {
+          scrollToHeading(hash, '--docs-scroll-margin-block')
+        }, 300)
+      }
 
-      const results = await $fetch(`${apiURL}/api/partners`, {
-        params: {
-          type: props.category
-        }
-      })
+      const results = await fetchPartners(props.category)
       // mapping for LogoCard
       partners.value = results.map(partner => ({
         ...partner,
@@ -55,19 +58,6 @@ export default defineComponent({
         title: partner.name,
         description: partner.profile.shortDescription
       }))
-    }
-
-    onMounted(() => {
-      fetch()
-
-      if (window.location.hash) {
-        const hash = window.location.hash.replace('#', '')
-
-        // do not remove setTimeout (wrong scroll pos)
-        setTimeout(() => {
-          scrollToHeading(hash, '--docs-scroll-margin-block')
-        }, 300)
-      }
     })
 
     return {

plugins/partners.js

@@ -0,0 +1,18 @@
+import { useContext } from '@nuxtjs/composition-api'
+import { $fetch } from 'ohmyfetch'
+
+export function usePartners() {
+  const { $config } = useContext()
+
+  const apiURL = $config.apiNuxtlabsURL || 'https://api.nuxtlabs.com'
+
+  const fetch = async type => {
+    return await $fetch(`${apiURL}/api/partners`, {
+      params: type ? { type } : {}
+    })
+  }
+
+  return {
+    fetch
+  }
+}