fix: make SSR compatible (#367)

scttcper · Feb 9, 2021 · 3980d31 · 3980d31
1 parent b57f51b
commit 3980d31
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 17 deletions.
diff --git a/src/lib/picker/emoji-frequently.service.ts b/src/lib/picker/emoji-frequently.service.ts
@@ -1,4 +1,5 @@
-import { Injectable } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+import { Inject, Injectable, PLATFORM_ID } from '@angular/core';
 
 import { EmojiData } from '@ctrl/ngx-emoji-mart/ngx-emoji';
 
@@ -26,9 +27,13 @@ export class EmojiFrequentlyService {
     'heart',
     'poop',
   ];
-
+  constructor(@Inject(PLATFORM_ID) private platformId: string) {}
   init() {
-    this.frequently = JSON.parse(localStorage.getItem(`${this.NAMESPACE}.frequently`) || 'null');
+    this.frequently = JSON.parse(
+      (isPlatformBrowser(this.platformId) &&
+        localStorage.getItem(`${this.NAMESPACE}.frequently`)) ||
+        'null',
+    );
     this.initialized = true;
   }
   add(emoji: EmojiData) {
@@ -43,8 +48,10 @@ export class EmojiFrequentlyService {
     }
     this.frequently[emoji.id] += 1;
 
-    localStorage.setItem(`${this.NAMESPACE}.last`, emoji.id);
-    localStorage.setItem(`${this.NAMESPACE}.frequently`, JSON.stringify(this.frequently));
+    if (isPlatformBrowser(this.platformId)) {
+      localStorage.setItem(`${this.NAMESPACE}.last`, emoji.id);
+      localStorage.setItem(`${this.NAMESPACE}.frequently`, JSON.stringify(this.frequently));
+    }
   }
   get(perLine: number, totalLines: number) {
     if (!this.initialized) {
@@ -69,7 +76,8 @@ export class EmojiFrequentlyService {
       .reverse();
     const sliced = sorted.slice(0, quantity);
 
-    const last = localStorage.getItem(`${this.NAMESPACE}.last`);
+    const last =
+      isPlatformBrowser(this.platformId) && localStorage.getItem(`${this.NAMESPACE}.last`);
 
     if (last && !sliced.includes(last)) {
       sliced.pop();

diff --git a/src/lib/picker/picker.component.ts b/src/lib/picker/picker.component.ts
@@ -1,14 +1,17 @@
+import { isPlatformBrowser } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
   ElementRef,
   EventEmitter,
+  Inject,
   Input,
   NgZone,
   OnDestroy,
   OnInit,
   Output,
+  PLATFORM_ID,
   QueryList,
   Renderer2,
   ViewChild,
@@ -29,8 +32,6 @@ import { SearchComponent } from './search.component';
 import * as icons from './svgs';
 import { measureScrollbar } from './utils';
 
-
-
 const I18N: any = {
   search: 'Search',
   emojilist: 'List of emoji',
@@ -151,6 +152,7 @@ export class PickerComponent implements OnInit, OnDestroy {
     private renderer: Renderer2,
     private ref: ChangeDetectorRef,
     private frequently: EmojiFrequentlyService,
+    @Inject(PLATFORM_ID) private platformId: string,
   ) {}
 
   ngOnInit() {
@@ -160,8 +162,10 @@ export class PickerComponent implements OnInit, OnDestroy {
     this.i18n = { ...I18N, ...this.i18n };
     this.i18n.categories = { ...I18N.categories, ...this.i18n.categories };
     this.skin =
-      JSON.parse(localStorage.getItem(`${this.NAMESPACE}.skin`) || 'null') ||
-      this.skin;
+      JSON.parse(
+        (isPlatformBrowser(this.platformId) && localStorage.getItem(`${this.NAMESPACE}.skin`)) ||
+          'null',
+      ) || this.skin;
 
     const allCategories = [...categories];
 
@@ -266,14 +270,16 @@ export class PickerComponent implements OnInit, OnDestroy {
       // component and going down to the children.
       this.ref.detectChanges();
 
-      this.ngZone.runOutsideAngular(() => {
-        // The `updateCategoriesSize` doesn't change properties that are used
-        // in templates, thus this is run in the context of the root zone to avoid
-        // running change detection.
-        requestAnimationFrame(() => {
-          this.updateCategoriesSize();
+      // tslint:disable-next-line: no-unused-expression
+      isPlatformBrowser(this.platformId) &&
+        this.ngZone.runOutsideAngular(() => {
+          // The `updateCategoriesSize` doesn't change properties that are used
+          // in templates, thus this is run in the context of the root zone to avoid
+          // running change detection.
+          requestAnimationFrame(() => {
+            this.updateCategoriesSize();
+          });
         });
-      });
     });
 
     this.ngZone.runOutsideAngular(() => {