From 10fcc991bfa3ed1a228af2d5751e5c17f132635f Mon Sep 17 00:00:00 2001
From: Stephanie Smith <stephanie.c.smith@jpl.nasa.gov>
Date: Wed, 18 Sep 2024 10:24:42 -0700
Subject: [PATCH] using FetchAsteroidWatchWidget

---
 .../.storybook/_mock-components.js            |  3 +-
 .../PageAsteroidWatchContent.vue              | 49 +++++++------------
 2 files changed, 21 insertions(+), 31 deletions(-)

diff --git a/apps/vue-storybook/.storybook/_mock-components.js b/apps/vue-storybook/.storybook/_mock-components.js
index 076fa55a..d03d3db8 100644
--- a/apps/vue-storybook/.storybook/_mock-components.js
+++ b/apps/vue-storybook/.storybook/_mock-components.js
@@ -1,6 +1,7 @@
 // import and assign mock components
 import { action } from '@storybook/addon-actions'
 import DsnWidget from '@explorer-1/vue/src/components/DsnWidget/DsnWidget.vue'
+import AsteroidWatchWidget from '@explorer-1/vue/src/components/AsteroidWatchWidget/AsteroidWatchWidget.vue'
 
 export default (app) => {
   // nuxt-link mock component
@@ -26,5 +27,5 @@ export default (app) => {
   })
 
   // use static dsn widget instead of fetch
-  app.component('FetchDsnWidget', DsnWidget)
+  app.component('FetchAsteroidWatchWidget', AsteroidWatchWidget)
 }
diff --git a/packages/vue/src/templates/www/PageAsteroidWatchContent/PageAsteroidWatchContent.vue b/packages/vue/src/templates/www/PageAsteroidWatchContent/PageAsteroidWatchContent.vue
index d90c4a7e..d057a128 100755
--- a/packages/vue/src/templates/www/PageAsteroidWatchContent/PageAsteroidWatchContent.vue
+++ b/packages/vue/src/templates/www/PageAsteroidWatchContent/PageAsteroidWatchContent.vue
@@ -1,3 +1,21 @@
+<script setup lang="ts">
+import { reactive } from 'vue'
+import NavSecondary from './../../../components/NavSecondary/NavSecondary.vue'
+import LayoutHelper from './../../../components/LayoutHelper/LayoutHelper.vue'
+import DetailHeadline from './../../../components/DetailHeadline/DetailHeadline.vue'
+import HeroMedia from './../../../components/HeroMedia/HeroMedia.vue'
+import ShareButtons from './../../../components/ShareButtons/ShareButtons.vue'
+import BlockStreamfield from './../../../components/BlockStreamfield/BlockStreamfield.vue'
+
+interface PageAsteroidWatchContentProps {
+  data: any
+}
+const props = withDefaults(defineProps<PageAsteroidWatchContentProps>(), {
+  data: undefined
+})
+
+const { data } = reactive(props)
+</script>
 <template>
   <div
     v-if="data"
@@ -30,7 +48,7 @@
     </LayoutHelper>
 
     <template v-if="data.slug === 'next-five-approaches'">
-      <AsteroidWatchWidget class="lg:mb-18 mb-10" />
+      <FetchAsteroidWatchWidget class="lg:mb-18 mb-10" />
     </template>
 
     <!-- share buttons -->
@@ -48,32 +66,3 @@
     <BlockStreamfield :data="data.body" />
   </div>
 </template>
-<script>
-import { defineComponent } from 'vue'
-import NavSecondary from './../../../components/NavSecondary/NavSecondary.vue'
-import LayoutHelper from './../../../components/LayoutHelper/LayoutHelper.vue'
-import DetailHeadline from './../../../components/DetailHeadline/DetailHeadline.vue'
-import HeroMedia from './../../../components/HeroMedia/HeroMedia.vue'
-import ShareButtons from './../../../components/ShareButtons/ShareButtons.vue'
-import BlockStreamfield from './../../../components/BlockStreamfield/BlockStreamfield.vue'
-import AsteroidWatchWidget from './../../../components/AsteroidWatchWidget/AsteroidWatchWidget.vue'
-
-export default defineComponent({
-  name: 'PageAsteroidWatchContent',
-  components: {
-    NavSecondary,
-    LayoutHelper,
-    HeroMedia,
-    ShareButtons,
-    BlockStreamfield,
-    DetailHeadline,
-    AsteroidWatchWidget
-  },
-  props: {
-    data: {
-      type: Object,
-      required: false
-    }
-  }
-})
-</script>