Created NotionPages store

client/components/global/NotionPage.vue

@@ -1,5 +1,8 @@
 <template>
-  <notion-renderer :block-map="blockMap"/>
+  <notion-renderer v-if="!loading" :block-map="blockMap"/>
+  <div class="p-6 flex items-center justify-center" v-else>
+    <loader class="w-6 h-6"/>
+  </div>
 </template>
 
 <script>
@@ -9,21 +12,14 @@ export default {
   name: 'NotionPage',
   components: {NotionRenderer},
   props: {
-    pageId: {
-      type: String,
+    blockMap: {
+      type: Object
+    },
+    loading: {
+      type: Boolean,
       required: true
     }
   },
-
-  async setup(props) {
-    const apiUrl = useAppConfig().notion.worker
-    const {data} = await useFetch(`${apiUrl}/page/${props.pageId}`)
-
-    return {
-      apiUrl: useAppConfig().notion.worker,
-      blockMap: data,
-    }
-  }
 }
 </script>
 

client/pages/integrations.vue

@@ -5,30 +5,25 @@
         <h1 class="sm:text-5xl mb-4">
           Integrations
         </h1>
-        <NotionPage class="mb-8 integration-page" page-id="492c2bbb31404481b9faaaf407e59640" />
+        <NotionPage :block-map="blockMap" :loading="loading"  />
       </div>
     </div>
-    <open-form-footer />
+    <open-form-footer/>
   </div>
 </template>
 
-<script>
-export default {
-  layout: 'default',
+<script setup>
+// metaTitle: { type: String, default: 'Integrations' },
+// metaDescription: { type: String, default: 'You can connect your OpnForms to other services via our two integrations: Zapier and Webhooks. Use our integrations to automate your various workflows.' }
 
-  props: {
-    metaTitle: { type: String, default: 'Integrations' },
-    metaDescription: { type: String, default: 'You can connect your OpnForms to other services via our two integrations: Zapier and Webhooks. Use our integrations to automate your various workflows.' }
-  },
+import {useNotionPagesStore} from "~/stores/notion_pages.js";
+import {computed} from "vue";
 
-  data: () => ({
-  }),
+const notionPageStore = useNotionPagesStore()
+await notionPageStore.load('492c2bbb31404481b9faaaf407e59640')
 
-  computed: {},
-
-  mounted () {
-  }
-}
+const loading = computed(() => notionPageStore.loading)
+const blockMap = computed(() => notionPageStore.getByKey('492c2bbb31404481b9faaaf407e59640'))
 </script>
 
 <style lang="scss">

client/pages/privacy-policy.vue

@@ -5,25 +5,23 @@
         <h1 class="sm:text-5xl">
           Privacy Policy
         </h1>
-        <NotionPage page-id="9c97349ceda7455aab9b341d1ff70f79" />
+        <NotionPage :block-map="blockMap" :loading="loading"  />
       </div>
     </div>
     <open-form-footer />
   </div>
 </template>
 
-<script>
+<script setup>
 
-export default {
-  layout: 'default',
+// metaTitle: 'Privacy Policy',
 
-  data: () => ({
-    metaTitle: 'Privacy Policy',
-  }),
+import {useNotionPagesStore} from "~/stores/notion_pages.js";
+import {computed} from "vue";
 
-  computed: {},
+const notionPageStore = useNotionPagesStore()
+await notionPageStore.load('9c97349ceda7455aab9b341d1ff70f79')
 
-  mounted () {
-  }
-}
+const loading = computed(() => notionPageStore.loading)
+const blockMap = computed(() => notionPageStore.getByKey('9c97349ceda7455aab9b341d1ff70f79'))
 </script>

client/pages/terms-conditions.vue

@@ -5,24 +5,22 @@
         <h1 class="sm:text-5xl">
           Terms & Conditions
         </h1>
-        <NotionPage page-id="246420da2834480ca04047b0c5a00929" />
+        <NotionPage :block-map="blockMap" :loading="loading"  />
       </div>
     </div>
-    <open-form-footer />
+    <open-form-footer/>
   </div>
 </template>
 
-<script>
-export default {
-  layout: 'default',
+<script setup>
+// metaTitle: 'Terms & Conditions',
 
-  data: () => ({
-    metaTitle: 'Terms & Conditions',
-  }),
+import {useNotionPagesStore} from "~/stores/notion_pages.js";
+import {computed} from "vue";
 
-  computed: {},
+const notionPageStore = useNotionPagesStore()
+await notionPageStore.load('246420da2834480ca04047b0c5a00929')
 
-  mounted () {
-  }
-}
+const loading = computed(() => notionPageStore.loading)
+const blockMap = computed(() => notionPageStore.getByKey('246420da2834480ca04047b0c5a00929'))
 </script>

client/stores/notion_pages.js

@@ -0,0 +1,27 @@
+import {defineStore} from 'pinia'
+import {useContentStore} from "~/composables/stores/useContentStore.js";
+
+export const useNotionPagesStore = defineStore('notion_pages', () => {
+
+  const contentStore = useContentStore()
+
+  const load = (pageId) => {
+    contentStore.startLoading()
+
+    const apiUrl = useAppConfig().notion.worker
+    return useOpnApi(`${apiUrl}/page/${pageId}`)
+      .then(({data})=> {
+        const val = data.value
+        val['id'] = pageId
+        contentStore.save(val)
+      })
+      .finally(() => {
+        contentStore.stopLoading()
+      })
+  }
+
+  return {
+    ...contentStore,
+    load
+  }
+})