enable strict mode and update types (#4)

projects/lib/src/lib/banner/banner.component.ts

@@ -6,14 +6,15 @@ import {
   CookieConsentOptions,
   CookieSelection,
 } from '../cookie-consent.types';
+import { loadCookieSelection } from '../utils/localstorage';
 
 @Component({
   selector: 'cc-banner',
   template: ` <div
     class="rounded-md w-full max-w-5xl shadow-lg space-y-3 p-4 cc-banner"
   >
     <div class="flex justify-between items-center">
-      <h3 class="text-lg font-semibold cc-title">{{ options.title }}</h3>
+      <h3 class="text-lg font-semibold cc-title">{{ options?.title }}</h3>
 
       <button
         (click)="acceptAll()"
@@ -22,13 +23,13 @@ import {
         type="button"
         class="hidden md:inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm focus:outline-none cc-button cc-button-primary"
       >
-        {{ options.acceptAllLabel }}
+        {{ options?.acceptAllLabel }}
       </button>
     </div>
-    <p class="max-w-4xl cc-message">{{ options.message }}</p>
+    <p class="max-w-4xl cc-message">{{ options?.message }}</p>
     <div class="flex flex-wrap sm: space-x-2">
       <a
-        *ngFor="let link of options.links"
+        *ngFor="let link of options?.links"
         class="inline-flex items-center space-x-1 cc-link"
         [href]="link.url"
         target="_blank"
@@ -59,7 +60,7 @@ import {
         'max-h-0': !expanded,
         'max-h-huge': expanded
       }"
-      [formGroup]="formGroup"
+      [formGroup]="formGroup!"
     >
       <div
         class="space-y-4 lg:space-y-0 py-4 lg:grid lg:grid-cols-2 cc-cookie-list"
@@ -109,7 +110,7 @@ import {
             clip-rule="evenodd"
           />
         </svg>
-        <span>{{ options.showLessLabel }}</span>
+        <span>{{ options?.showLessLabel }}</span>
       </button>
     </form>
     <div
@@ -120,14 +121,14 @@ import {
         type="button"
         class="inline-flex justify-center items-center md:px-4 py-3 md:py-2 border border-transparent text-sm font-medium rounded-md shadow-sm focus:outline-none cc-button cc-button-primary"
       >
-        {{ options.acceptAllLabel }}
+        {{ options?.acceptAllLabel }}
       </button>
       <button
         (click)="secondaryAction()"
         type="button"
         class="inline-flex justify-center items-center md:px-4 py-3 md:py-2 border text-sm font-medium rounded-md focus:outline-none cc-button cc-button-secondary"
       >
-        {{ expanded ? options.acceptSelectionLabel : options.showMoreLabel }}
+        {{ expanded ? options?.acceptSelectionLabel : options?.showMoreLabel }}
       </button>
     </div>
   </div>`,
@@ -137,26 +138,25 @@ export class BannerComponent implements OnInit {
   @HostBinding('class') class =
     'fixed max-h-screen overflow-y-auto bottom-0 left-0 right-0 p-1 md:p-4 cc-banner-container';
   select$ = new Subject<CookieSelection>();
-  formGroup: FormGroup;
+  formGroup: FormGroup | null = null;
   expanded = false;
   cookies: (Cookie & { name: string })[] = [];
-  public options: CookieConsentOptions;
+  public options: CookieConsentOptions | null = null;
   constructor() {}
 
   ngOnInit(): void {
-    const cookies = {};
+    const cookies: { [name: string]: FormControl } = {};
     const state: CookieSelection =
-      JSON.parse(
-        localStorage.getItem(this.options.cookieConsentLocalStorageKey)
-      ) || {};
-    Object.keys(this.options.cookies).forEach((c) => {
-      const cookie = this.options.cookies[c];
+      loadCookieSelection(this.options!.cookieConsentLocalStorageKey!) || {};
+    Object.keys(this.options!.cookies).forEach((c) => {
+      const cookie = this.options!.cookies[c]!;
       cookies[c] = new FormControl({
-        value: state[c] || cookie.value || false,
-        disabled: cookie.disabled,
+        value: state[c] || cookie?.value || false,
+        disabled: cookie?.disabled,
       });
       this.cookies.push({ ...cookie, name: c });
     });
+    console.log({ bla: this.cookies, cookies });
     this.formGroup = new FormGroup(cookies);
   }
 
@@ -171,8 +171,8 @@ export class BannerComponent implements OnInit {
   secondaryAction() {
     if (this.expanded) {
       const result: CookieSelection = {};
-      Object.keys(this.formGroup.controls).forEach(
-        (c) => (result[c] = this.formGroup.get(c).value)
+      Object.keys(this.formGroup!.controls).forEach(
+        (c) => (result[c] = this.formGroup!.get(c)!.value)
       );
       this.select$.next(result);
     } else {

projects/lib/src/lib/cookie-consent.service.ts

@@ -21,20 +21,21 @@ import {
   CookieSelection,
   CookieSelectionOption,
 } from './cookie-consent.types';
+import { loadCookieSelection } from './utils/localstorage';
 
 @Injectable({
   providedIn: 'root',
 })
 export class CookieConsentService implements OnDestroy {
   private destroy$ = new Subject();
-  private ref: ComponentRef<BannerComponent>;
-  private _cookieSelection$ = new BehaviorSubject<CookieSelection>(null);
+  private ref: ComponentRef<BannerComponent> | null = null;
+  private _cookieSelection$ = new BehaviorSubject<CookieSelection | null>(null);
 
-  get cookieSelection$(): Observable<CookieSelection> {
+  get cookieSelection$(): Observable<CookieSelection | null> {
     return this._cookieSelection$.asObservable();
   }
 
-  get cookieSelectionSnapshot(): CookieSelection {
+  get cookieSelectionSnapshot(): CookieSelection | null {
     return this._cookieSelection$.getValue();
   }
 
@@ -48,8 +49,9 @@ export class CookieConsentService implements OnDestroy {
     if (!isPlatformBrowser(this.platformId)) {
       return;
     }
-    const state = JSON.parse(
-      localStorage.getItem(this.options.cookieConsentLocalStorageKey)
+
+    const state = loadCookieSelection(
+      this.options.cookieConsentLocalStorageKey!
     );
     this._cookieSelection$.next(state);
     if (!state) {
@@ -87,7 +89,7 @@ export class CookieConsentService implements OnDestroy {
     this.ref.instance.select$
       .pipe(
         tap((selection) => this.saveSelection(selection)),
-        tap(() => this.ref.destroy()),
+        tap(() => this.ref?.destroy()),
         tap(() => (this.ref = null)),
         takeUntil(this.destroy$)
       )
@@ -96,7 +98,7 @@ export class CookieConsentService implements OnDestroy {
 
   private saveSelection(selection: CookieSelection | null) {
     localStorage.setItem(
-      this.options.cookieConsentLocalStorageKey,
+      this.options.cookieConsentLocalStorageKey!,
       JSON.stringify(selection)
     );
     this._cookieSelection$.next(selection);

projects/lib/src/lib/utils/localstorage.ts

@@ -0,0 +1,19 @@
+import { CookieSelection } from '../cookie-consent.types';
+
+export function loadCookieSelection(
+  cookieConsentLocalStorageKey: string
+): CookieSelection | null {
+  const consentString = loadCookieSelectionFromStorage(
+    cookieConsentLocalStorageKey
+  );
+  if (consentString) {
+    return JSON.parse(consentString);
+  }
+  return null;
+}
+
+function loadCookieSelectionFromStorage(
+  cookieConsentLocalStorageKey: string
+): string | null {
+  return localStorage.getItem(cookieConsentLocalStorageKey);
+}

tsconfig.json

@@ -5,7 +5,7 @@
     "baseUrl": "./",
     "outDir": "./dist/out-tsc",
     "forceConsistentCasingInFileNames": true,
-    "strict": false,
+    "strict": true,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,
     "sourceMap": true,