From 33cc2eb1a75d9ee866af27df6405127e20ace6c6 Mon Sep 17 00:00:00 2001
From: botmaster <pascal.achard@gmail.com>
Date: Fri, 9 Feb 2024 14:33:42 +0100
Subject: [PATCH 1/2] refactor: Refactor server API and TS types

---
 components/ArticleListActionBar.vue  |  6 +-
 components/MultiSelectTag.vue        |  8 +--
 pages/readings.vue                   | 29 ++++++---
 server/api/notion-page-image.post.ts |  4 +-
 server/api/notion-page-list.post.ts  | 94 +++++++++++-----------------
 5 files changed, 67 insertions(+), 74 deletions(-)

diff --git a/components/ArticleListActionBar.vue b/components/ArticleListActionBar.vue
index c5385e3..a219756 100644
--- a/components/ArticleListActionBar.vue
+++ b/components/ArticleListActionBar.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 // Define props
-import type { IOption } from '~/components/MultiSelectTag.vue';
+import type { IMultiSelectTagOption } from '~/components/MultiSelectTag.vue';
 
 defineProps<{
-  tags: IOption[]
+  tags: IMultiSelectTagOption[]
   pending: boolean
 }>();
 
@@ -13,7 +13,7 @@ const emit = defineEmits(['clearFilters']);
 const { t } = useI18n();
 
 // Define model
-const selectedOptions = defineModel<IOption[]>('selectedOptions', { required: true });
+const selectedOptions = defineModel<IMultiSelectTagOption[]>('selectedOptions', { required: true });
 const search = defineModel<string>('search', { required: true });
 const status = defineModel<string>('status', { required: true });
 const sort = defineModel<string>('sort', { required: true });
diff --git a/components/MultiSelectTag.vue b/components/MultiSelectTag.vue
index c68cdd3..74e2ace 100644
--- a/components/MultiSelectTag.vue
+++ b/components/MultiSelectTag.vue
@@ -2,7 +2,7 @@
 import { Combobox, ComboboxButton, ComboboxInput, ComboboxLabel, ComboboxOption, ComboboxOptions } from '@headlessui/vue';
 
 // Interfaces
-export interface IOption {
+export interface IMultiSelectTagOption {
   id: string
   name: string
   color: 'blue' | 'brown' | 'default' | 'gray' | 'green' | 'orange' | 'pink' | 'purple' | 'red' | 'yellow'
@@ -10,11 +10,11 @@ export interface IOption {
 
 // Props
 const props = defineProps<{
-  options: IOption[]
+  options: IMultiSelectTagOption[]
 }>();
 
 // Model
-const selectedOptions = defineModel<IOption[]>({ required: true });
+const selectedOptions = defineModel<IMultiSelectTagOption[]>({ required: true });
 
 const query = ref('');
 
@@ -29,7 +29,7 @@ const filteredOption = computed(() =>
     ),
 );
 
-function displayValue(options: IOption[]) {
+function displayValue(options: IMultiSelectTagOption[]) {
   return options.map(option => option.name).join(', ');
 }
 </script>
diff --git a/pages/readings.vue b/pages/readings.vue
index 81e1b1c..bc3b127 100644
--- a/pages/readings.vue
+++ b/pages/readings.vue
@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { useRouteQuery } from '@vueuse/router';
 
+import type { PartialDatabaseObjectResponse } from '@notionhq/client/build/src/api-endpoints';
 import type { IPage } from '~/types/types';
-import type { SanitizedResponse } from '~/server/api/notion-page-list.post';
-import type { IOption } from '~/components/MultiSelectTag.vue';
+import type { INotionArticle } from '~/server/api/notion-page-list.post';
+import type { IMultiSelectTagOption } from '~/components/MultiSelectTag.vue';
 
 const config = useRuntimeConfig();
 const { locale: currentLocale, t } = useI18n();
@@ -21,14 +22,14 @@ const DEFAULT_LIMIT = 12;
 
 const observerRoot = ref<HTMLElement | null>(null);
 
-const pageListCollection = ref<SanitizedResponse[]>([]);
+const pageListCollection = ref<INotionArticle[]>([]);
 const cursor = ref<string | null>(null);
 const pageSize = useRouteQuery('pageSize', DEFAULT_LIMIT, { transform: Number });
 const status = useRouteQuery('status', '', { transform: String });
 const search = useRouteQuery('search', '', { transform: String });
 const sort = useRouteQuery('sort', 'Created time', { transform: String });
 const isLoadingMore = ref(false);
-const selectedTags = ref<IOption[]>([]);
+const selectedTags = ref<IMultiSelectTagOption[]>([]);
 
 // Fetch database info
 const { data: database } = await useAsyncData('database-info', () =>
@@ -40,9 +41,17 @@ const { data: database } = await useAsyncData('database-info', () =>
   }));
 
 // Computed - Get "tags" multi-select value from dbResponse
-const tagList = computed<IOption[]>(() => {
-  // @ts-expect-error - TS doesn't know "Tags" exists
-  return database.value?.properties.Tags.multi_select.options || [];
+const tagList = computed<IMultiSelectTagOption[]>(() => {
+  const data = database.value as PartialDatabaseObjectResponse;
+  const selectProperty = data.properties.Tags as {
+    type: 'multi_select'
+    multi_select: {
+      options: Array<IMultiSelectTagOption>
+    }
+    id: string
+    name: string
+  };
+  return selectProperty.multi_select.options || [];
 });
 
 // Fetch page list
@@ -120,10 +129,10 @@ watch(
 
     if (isLoadingMore.value) {
       isLoadingMore.value = false;
-      pageListCollection.value = [...pageListCollection.value, ...newVal.results as SanitizedResponse[]];
+      pageListCollection.value = [...pageListCollection.value, ...newVal.results as INotionArticle[]];
     }
     else {
-      pageListCollection.value = newVal.results as SanitizedResponse[];
+      pageListCollection.value = newVal.results as INotionArticle[];
     }
   },
   { immediate: true },
@@ -232,7 +241,7 @@ watch(
         <!-- Action bar       -->
         <ArticleListActionBar
           v-model:selected-options="selectedTags" v-model:search="search" v-model:status="status"
-          v-model:sort="sort" :tags="tagList" :pending @clear-filters="clearFilters"
+          v-model:sort="sort" :tags="tagList" :pending="pending" @clear-filters="clearFilters"
         />
 
         <!--  Article list      -->
diff --git a/server/api/notion-page-image.post.ts b/server/api/notion-page-image.post.ts
index 21f11db..dd82a6f 100644
--- a/server/api/notion-page-image.post.ts
+++ b/server/api/notion-page-image.post.ts
@@ -32,7 +32,9 @@ export default defineEventHandler(async (event) => {
   });
 
   // Récupérer l'url du premier block image
-  const imageBlock = blockResponse.results.find(block => block.type === 'image');
+  const imageBlock = blockResponse.results.find((block: any) => block.type === 'image') as {
+    image: { type: 'external' | 'file', external: { url: string }, file: { url: string } }
+  } | undefined;
   if (!imageBlock)
     return '';
 
diff --git a/server/api/notion-page-list.post.ts b/server/api/notion-page-list.post.ts
index cd45026..26392c9 100644
--- a/server/api/notion-page-list.post.ts
+++ b/server/api/notion-page-list.post.ts
@@ -1,6 +1,6 @@
-import { Client, isFullPage } from '@notionhq/client';
+import { Client } from '@notionhq/client';
 
-export interface SanitizedResponse {
+export interface INotionArticle {
   title: string
   description?: string
   tags: string[]
@@ -21,16 +21,6 @@ const config = useRuntimeConfig();
 // Initialize Notion Client
 const notion = new Client({ auth: config.notionApiKey });
 
-// Fetch the image url for a page
-async function getImageUrl(pageId: string) {
-  return await $fetch('/api/notion-page-image', {
-    body: {
-      page_id: pageId,
-    },
-    method: 'POST',
-  });
-}
-
 // Define the event handler
 export default defineEventHandler(async (event) => {
   const body = await readBody(event);
@@ -54,50 +44,8 @@ export default defineEventHandler(async (event) => {
     },
   );
 
-  await Promise.all(response.results.map(async (item) => {
-    item.imageUrl = await getImageUrl(item.id);
-  }));
-
-  // Sanitize the response
-  const results = response.results.map<SanitizedResponse | undefined>((result) => {
-    if (!isFullPage(result))
-      console.error('Notion response is not a full page or database');
-
-    // Check if result has the necessary properties
-    if ('id' in result && 'properties' in result) {
-      const id = result.id;
-      const properties = result.properties;
-
-      // Check if properties have the necessary sub-properties
-      const title = properties.Name.title[0]?.plain_text || '';
-      const description = properties.Description?.rich_text?.[0]?.plain_text || '';
-      const tags = properties.Tags?.multi_select?.map(tag => tag.name) || [];
-      const image = result.imageUrl || properties.Image?.url || '';
-      const url = properties.URL?.url || '';
-      const date = properties.Date?.date?.start || '';
-      const score = properties.Score?.select?.name;
-      const status = {
-        name: properties.Status?.select?.name,
-        color: properties.Status?.select?.color,
-        id: properties.Status?.select?.id,
-      };
-
-      return {
-        title,
-        description,
-        tags,
-        image,
-        url,
-        date,
-        score,
-        status,
-        id,
-      };
-    }
-
-    // Return undefined if result does not have the necessary properties
-    return undefined;
-  }).filter(Boolean); // Filter out undefined values
+  // Transform the pages
+  const results = await Promise.all(response.results.map(transformPage));
 
   // return
   return {
@@ -105,3 +53,37 @@ export default defineEventHandler(async (event) => {
     results,
   };
 });
+
+// Fetch the image url for a page
+async function getImageUrl(pageId: string) {
+  return await $fetch('/api/notion-page-image', {
+    body: {
+      page_id: pageId,
+    },
+    method: 'POST',
+  });
+}
+
+// function - transform a page to add imageUrl and sanitize the response
+// @note - page is type any because I don't know how to type it.
+// @param page - the page to transform
+// @returns the transformed page
+//
+async function transformPage(page: any): Promise<INotionArticle> {
+  const imageUrl = await getImageUrl(page.id);
+  return {
+    title: page.properties.Name.title[0]?.plain_text || '',
+    description: page.properties.Description?.rich_text?.[0]?.plain_text || '',
+    tags: page.properties.Tags?.multi_select?.map((tag: any) => tag.name) || [],
+    image: imageUrl || page.properties.Image?.url || '',
+    url: page.properties.URL?.url || '',
+    date: page.properties.Date?.date?.start || '',
+    score: page.properties.Score?.select?.name,
+    status: {
+      name: page.properties.Status?.select?.name,
+      color: page.properties.Status?.select?.color,
+      id: page.properties.Status?.select?.id,
+    },
+    id: page.id,
+  };
+}

From 9e44e78b9d7b6c672353a336aaafc3692e817bd7 Mon Sep 17 00:00:00 2001
From: botmaster <pascal.achard@gmail.com>
Date: Fri, 9 Feb 2024 15:23:10 +0100
Subject: [PATCH 2/2] refactor: Create Notion client singleton

---
 server/NotionClient.ts                 | 22 ++++++++++++++++++++++
 server/api/notion-database-info.get.ts |  7 ++-----
 server/api/notion-page-image.post.ts   |  6 ++----
 server/api/notion-page-list.post.ts    |  6 ++----
 4 files changed, 28 insertions(+), 13 deletions(-)
 create mode 100644 server/NotionClient.ts

diff --git a/server/NotionClient.ts b/server/NotionClient.ts
new file mode 100644
index 0000000..12c7fa8
--- /dev/null
+++ b/server/NotionClient.ts
@@ -0,0 +1,22 @@
+import { Client } from '@notionhq/client';
+
+export class NotionClient {
+  private static instance: NotionClient;
+  private readonly client: Client;
+
+  private constructor() {
+    const config = useRuntimeConfig();
+    this.client = new Client({ auth: config.notionApiKey });
+  }
+
+  public static getInstance(): NotionClient {
+    if (!NotionClient.instance)
+      NotionClient.instance = new NotionClient();
+
+    return NotionClient.instance;
+  }
+
+  public getClient() {
+    return this.client;
+  }
+}
diff --git a/server/api/notion-database-info.get.ts b/server/api/notion-database-info.get.ts
index 66e9c55..48cda37 100644
--- a/server/api/notion-database-info.get.ts
+++ b/server/api/notion-database-info.get.ts
@@ -1,10 +1,7 @@
-import { Client } from '@notionhq/client';
-
-// Get the runtime config
-const config = useRuntimeConfig();
+import { NotionClient } from '~/server/NotionClient';
 
 // Initialize Notion Client
-const notion = new Client({ auth: config.notionApiKey });
+const notion = NotionClient.getInstance().getClient();
 
 export default defineEventHandler(async (event) => {
   // Get Query
diff --git a/server/api/notion-page-image.post.ts b/server/api/notion-page-image.post.ts
index dd82a6f..078ef32 100644
--- a/server/api/notion-page-image.post.ts
+++ b/server/api/notion-page-image.post.ts
@@ -1,9 +1,7 @@
-import { Client } from '@notionhq/client';
-
-const config = useRuntimeConfig();
+import { NotionClient } from '~/server/NotionClient';
 
 // Initialize Notion Client
-const notion = new Client({ auth: config.notionApiKey });
+const notion = NotionClient.getInstance().getClient();
 
 // Cache the image url
 const imageUrlCache = new Map<string, string>();
diff --git a/server/api/notion-page-list.post.ts b/server/api/notion-page-list.post.ts
index 26392c9..6ac3ede 100644
--- a/server/api/notion-page-list.post.ts
+++ b/server/api/notion-page-list.post.ts
@@ -1,4 +1,4 @@
-import { Client } from '@notionhq/client';
+import { NotionClient } from '~/server/NotionClient';
 
 export interface INotionArticle {
   title: string
@@ -16,10 +16,8 @@ export interface INotionArticle {
   }
 }
 
-const config = useRuntimeConfig();
-
 // Initialize Notion Client
-const notion = new Client({ auth: config.notionApiKey });
+const notion = NotionClient.getInstance().getClient();
 
 // Define the event handler
 export default defineEventHandler(async (event) => {