fix: avoid pushing undefined to blocks array in service

borjamrd · borjamrd · commit fa9c6282f9f9 · 2024-10-10T14:02:12.000+02:00
diff --git a/projects/ngx-notion-cms/src/lib/components/database-item/database-item.component.ts b/projects/ngx-notion-cms/src/lib/components/database-item/database-item.component.ts
@@ -47,9 +47,8 @@ export class DatabaseItemComponent implements OnInit {
                 if (response.data) {
                     const blocks = response.data;
                     blocks.forEach(block => {
-                        if (block.type === 'page') {
-                            this.imgSrc.set(getBlockImageURL(block.format!.page_cover!, block!))
-
+                        if (block?.type === 'page' && block.format?.page_cover) {
+                            this.imgSrc.set(getBlockImageURL(block.format.page_cover!, block!))
                         }
                     })
                 }
diff --git a/projects/ngx-notion-cms/src/lib/components/page-cover/page-cover.component.html b/projects/ngx-notion-cms/src/lib/components/page-cover/page-cover.component.html
@@ -1,20 +1,24 @@
 @let notionBlock = notionBlockSignal();
 
-<div class="flex flex-col gap-3 w-full">
-    @defer {
-        <div class="h-[160px] w-full relative">
-            <img
-                fill
-                class="object-cover rounded-3xl"
-                title="page_cover"
-                priority
-                [ngSrc]="imgSrc()" />
-        </div>
-    } @placeholder {
-        <div class="h-40 w-full bg-slate-100 rounded-3xl"></div>
-    }
+@if (notionBlock) {
+    <div class="flex flex-col gap-3 w-full">
+        @if (imgSrc()) {
+            @defer {
+                <div class="h-[160px] w-full relative">
+                    <img
+                        fill
+                        class="object-cover rounded-3xl"
+                        title="page_cover"
+                        priority
+                        [ngSrc]="imgSrc()" />
+                </div>
+            } @placeholder {
+                <div class="h-40 w-full bg-slate-100 rounded-3xl"></div>
+            }
+        }
 
-    <h1 class="text-3xl font-bold mb-5">
-        {{ (notionBlock.properties?.title)![0][0] }}
-    </h1>
-</div>
+        <h1 class="text-3xl font-bold mb-5">
+            {{ (notionBlock.properties?.title)![0][0] }}
+        </h1>
+    </div>
+}
diff --git a/projects/ngx-notion-cms/src/lib/components/page-cover/page-cover.component.ts b/projects/ngx-notion-cms/src/lib/components/page-cover/page-cover.component.ts
@@ -18,7 +18,7 @@ import { NgOptimizedImage } from '@angular/common'
 export class PageCoverComponent {
   notionBlockSignal = input.required<NotionBlock>({ 'alias': 'notionBlock' })
   imgSrc = computed(() => {
-    if (this.notionBlockSignal().format?.page_cover) {
+    if (this.notionBlockSignal().type && this.notionBlockSignal()?.format?.page_cover) {
       return getBlockImageURL(this.notionBlockSignal().format!.page_cover!, this.notionBlockSignal()!)
     }
     return ''
diff --git a/projects/ngx-notion-cms/src/lib/services/notion.service.ts b/projects/ngx-notion-cms/src/lib/services/notion.service.ts
@@ -24,7 +24,9 @@ export class NgxNotionService {
                     if (response.data) {
                         // eslint-disable-next-line @typescript-eslint/no-explicit-any
                         Object.values(response.data).forEach((key: any) => {
-                            blocks.push(key.value);
+                            if (key.value) {
+                                blocks.push(key.value);
+                            }
                         });
                         return {
                             data: blocks,
diff --git a/projects/ngx-notion-testbed-app/src/index.html b/projects/ngx-notion-testbed-app/src/index.html
@@ -6,6 +6,7 @@
         <base href="/" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <link rel="icon" type="image/x-icon" href="image.ico" />
+        <link rel="preconnect" href="https://www.notion.so" />
     </head>
     <body>
         <app-root></app-root>

Original file line number	Diff line number	Diff line change
`@@ -47,9 +47,8 @@ export class DatabaseItemComponent implements OnInit {`
`47`	`47`	`if (response.data) {`
`48`	`48`	`const blocks = response.data;`
`49`	`49`	`blocks.forEach(block => {`
`50`		`- if (block.type === 'page') {`
`51`		`- this.imgSrc.set(getBlockImageURL(block.format!.page_cover!, block!))`
`52`		`-`
	`50`	`+ if (block?.type === 'page' && block.format?.page_cover) {`
	`51`	`+ this.imgSrc.set(getBlockImageURL(block.format.page_cover!, block!))`
`53`	`52`	`}`
`54`	`53`	`})`
`55`	`54`	`}`
Original file line number	Diff line number	Diff line change
`@@ -18,7 +18,7 @@ import { NgOptimizedImage } from '@angular/common'`
`18`	`18`	`export class PageCoverComponent {`
`19`	`19`	`notionBlockSignal = input.required<NotionBlock>({ 'alias': 'notionBlock' })`
`20`	`20`	`imgSrc = computed(() => {`
`21`		`- if (this.notionBlockSignal().format?.page_cover) {`
	`21`	`+ if (this.notionBlockSignal().type && this.notionBlockSignal()?.format?.page_cover) {`
`22`	`22`	`return getBlockImageURL(this.notionBlockSignal().format!.page_cover!, this.notionBlockSignal()!)`
`23`	`23`	`}`
`24`	`24`	`return ''`