From 5961469bf45a5b7e35700ea32047e4693c0c6be5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mar=C3=ADa=20Valderrama?= <mavalroot@gmail.com>
Date: Mon, 13 May 2024 10:56:28 +0200
Subject: [PATCH] fix(icons-plugin): null insert error

---
 apps/icons-plugin/src/app/app.component.ts    | 29 +++++++++++--------
 .../icon-button/icon-button.component.ts      | 18 +++++-------
 .../icon-search/icon-search.component.ts      | 13 ++++-----
 apps/icons-plugin/src/plugin.ts               |  4 +++
 4 files changed, 33 insertions(+), 31 deletions(-)

diff --git a/apps/icons-plugin/src/app/app.component.ts b/apps/icons-plugin/src/app/app.component.ts
index 11b123c..6de3c76 100644
--- a/apps/icons-plugin/src/app/app.component.ts
+++ b/apps/icons-plugin/src/app/app.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, signal } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { FeatherIconNames, icons } from 'feather-icons';
 import { SafeHtmlPipe } from './pipes/safe-html.pipe';
@@ -21,37 +21,42 @@ import { IconSearchComponent } from './components/icon-search/icon-search.compon
         (searchIcons)="this.searchIcons($event)"
       ></app-icon-search>
     </div>
-    @for (key of iconKeys; track key) {
+    @for (key of iconKeys(); track key) {
     <app-icon-button
-      [icon]="icons[key]"
+      [icon]="icons()[key]"
       (insertIcon)="this.insertIcon(key)"
     ></app-icon-button>
     }
   </div>`,
 })
 export class AppComponent {
-  public icons = icons;
-  public iconKeys: FeatherIconNames[] = Object.keys(
-    icons
-  ) as FeatherIconNames[];
+  public icons = signal(icons);
+  public iconKeys = signal(Object.keys(icons) as FeatherIconNames[]);
 
   public insertIcon(key: FeatherIconNames): void {
-    this.sendMessage({ content: icons[key].toSvg(), name: icons[key].name });
+    if (key && this.icons()[key] && this.icons()[key].toSvg()) {
+      this.sendMessage({
+        content: this.icons()[key].toSvg(),
+        name: this.icons()[key].name || key,
+      });
+    }
   }
 
   public searchIcons(search: string): void {
     const allKeys = Object.keys(icons) as FeatherIconNames[];
 
     if (search === '') {
-      this.iconKeys = allKeys;
+      this.iconKeys.set(allKeys);
       return;
     }
 
-    this.iconKeys = allKeys.filter(
+    const filtered = allKeys.filter(
       (key) =>
-        this.icons[key].tags.some((t) => t.match(search)) ||
-        this.icons[key].name.match(search)
+        this.icons()[key].tags.some((t) => t.match(search)) ||
+        this.icons()[key].name.match(search)
     ) as FeatherIconNames[];
+
+    this.iconKeys.set(filtered);
   }
 
   private sendMessage(message: unknown): void {
diff --git a/apps/icons-plugin/src/app/components/icon-button/icon-button.component.ts b/apps/icons-plugin/src/app/components/icon-button/icon-button.component.ts
index fff16ff..68ee3b3 100644
--- a/apps/icons-plugin/src/app/components/icon-button/icon-button.component.ts
+++ b/apps/icons-plugin/src/app/components/icon-button/icon-button.component.ts
@@ -1,17 +1,16 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { Component, output, input } from '@angular/core';
 import { SafeHtmlPipe } from '../../pipes/safe-html.pipe';
 import { FeatherIcon } from 'feather-icons';
 
 @Component({
   selector: 'app-icon-button',
   standalone: true,
-  imports: [CommonModule, SafeHtmlPipe],
+  imports: [SafeHtmlPipe],
   styleUrl: './icon-button.component.css',
   template: `<button
     class="icon-button"
-    [attr.aria-label]="'Insert icon: ' + icon.name"
-    [title]="icon.name"
+    [attr.aria-label]="'Insert icon: ' + icon().name"
+    [title]="icon().name"
     (click)="onInsertIcon()"
     type="button"
   >
@@ -25,16 +24,13 @@ import { FeatherIcon } from 'feather-icons';
       stroke-width="2"
       stroke-linecap="round"
       stroke-linejoin="round"
-      [innerHtml]="icon.contents | safeHtml"
+      [innerHtml]="icon().contents | safeHtml"
     ></svg>
   </button>`,
 })
 export class IconButtonComponent {
-  @Input({ required: true })
-  public icon!: FeatherIcon;
-
-  @Output()
-  private insertIcon = new EventEmitter<void>();
+  public icon = input.required<FeatherIcon>();
+  public insertIcon = output<void>();
 
   public onInsertIcon(): void {
     this.insertIcon.emit();
diff --git a/apps/icons-plugin/src/app/components/icon-search/icon-search.component.ts b/apps/icons-plugin/src/app/components/icon-search/icon-search.component.ts
index 8f3abf0..a4fa234 100644
--- a/apps/icons-plugin/src/app/components/icon-search/icon-search.component.ts
+++ b/apps/icons-plugin/src/app/components/icon-search/icon-search.component.ts
@@ -1,23 +1,20 @@
-import { Component, EventEmitter, Output } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { Component, output, signal } from '@angular/core';
 import { icons } from 'feather-icons';
 
 @Component({
   selector: 'app-icon-search',
   standalone: true,
-  imports: [CommonModule],
+  imports: [],
   styleUrl: './icon-search.component.css',
   template: `<input
     type="search"
-    [placeholder]="'Search ' + iconsCount + ' icons'"
+    [placeholder]="'Search ' + iconsCount() + ' icons'"
     (input)="onSearchIcons($event)"
   />`,
 })
 export class IconSearchComponent {
-  @Output()
-  private searchIcons = new EventEmitter<string>();
-
-  public iconsCount = Object.keys(icons).length;
+  public searchIcons = output<string>();
+  public iconsCount = signal(Object.keys(icons).length);
 
   public onSearchIcons(event: Event): void {
     const target = event.target as HTMLInputElement;
diff --git a/apps/icons-plugin/src/plugin.ts b/apps/icons-plugin/src/plugin.ts
index f693ca7..33270d2 100644
--- a/apps/icons-plugin/src/plugin.ts
+++ b/apps/icons-plugin/src/plugin.ts
@@ -4,6 +4,10 @@ penpot.ui.open('Icons plugin', 'http://localhost:4202', {
 });
 
 penpot.ui.onMessage<{ content: string; name: string }>((message) => {
+  if (!message.content || !message.name) {
+    return;
+  }
+
   const svgIcon = message.content;
   const iconName = message.name;
   const icon = penpot.createShapeFromSvg(svgIcon);