Created NotionPages store

This commit is contained in:
Julien Nahum 2024-01-02 17:06:55 +01:00
parent d1d8e62abb
commit b3740dc1c3
5 changed files with 66 additions and 52 deletions

View File

@ -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>

View File

@ -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/>
</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">

View File

@ -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>

View File

@ -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/>
</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>

27
client/stores/notion_pages.js vendored Normal file
View File

@ -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
}
})