From 2e389309ceba4d118c4d21cee706760257ca6c96 Mon Sep 17 00:00:00 2001
From: Bradley Shellnut <bradleyshellnut@protonmail.com>
Date: Mon, 29 Aug 2022 16:41:11 -0500
Subject: [PATCH] Adding a dialog to the root layout.

---
 src/lib/components/random/index.svelte        |  6 +--
 src/lib/components/search/random/index.svelte |  4 +-
 src/lib/stores/boredState.ts                  |  4 +-
 src/lib/types.ts                              |  1 +
 src/lib/util/manipulateCollection.ts          |  7 ++-
 src/routes/+layout.svelte                     | 52 ++++++++++++++++++-
 src/routes/+page.svelte                       |  4 +-
 7 files changed, 63 insertions(+), 15 deletions(-)

diff --git a/src/lib/components/random/index.svelte b/src/lib/components/random/index.svelte
index 4877383..c0d3834 100644
--- a/src/lib/components/random/index.svelte
+++ b/src/lib/components/random/index.svelte
@@ -7,7 +7,7 @@
 
   async function getRandomCollectionGame() {
     if ($collectionStore.length > 0) {
-      boredState.set({ loading: true });
+      boredState.set({ loading: true, dialogOpen: false });
       let randomNumber: number = Math.round(Math.random() * $collectionStore.length - 1);
       if ($collectionStore.at(randomNumber)) {
         gameStore.removeAll();
@@ -19,11 +19,11 @@
         const responseData = await response.json();
         console.log('responseData', responseData);
         gameStore.add(responseData?.game);
-        boredState.set({ loading: false });
+        boredState.set({ loading: false, dialogOpen: false });
       } else {
         toast.send('Error!', { duration: 3000, type: ToastType.ERROR, dismissible: true });
       }
-      boredState.set({ loading: false });
+      boredState.set({ loading: false, dialogOpen: false });
     } else {
       toast.send('No items in your collection!', {
         duration: 3000,
diff --git a/src/lib/components/search/random/index.svelte b/src/lib/components/search/random/index.svelte
index e0fc8a3..4c49dba 100644
--- a/src/lib/components/search/random/index.svelte
+++ b/src/lib/components/search/random/index.svelte
@@ -4,7 +4,7 @@
 
   async function handleSubmit(event: SubmitEvent) {
     // submitting = true;
-    boredState.set({ loading: true });
+    boredState.set({ loading: true, dialogOpen: false });
     const form = event.target as HTMLFormElement;
     console.log('form', form);
     const response = await fetch('/api/games', {
@@ -14,7 +14,7 @@
     });
     const responseData = await response.json();
     // submitting = false;
-    boredState.set({ loading: false });
+    boredState.set({ loading: false, dialogOpen: false });
     gameStore.removeAll();
     gameStore.addAll(responseData?.games);
     // games = responseData?.games;
diff --git a/src/lib/stores/boredState.ts b/src/lib/stores/boredState.ts
index 78f10d3..046f2a1 100644
--- a/src/lib/stores/boredState.ts
+++ b/src/lib/stores/boredState.ts
@@ -4,7 +4,7 @@ import { writable } from 'svelte/store';
 
 // Custom store
 const state = () => {
-  const { subscribe, set, update } = writable<BoredStore>({ loading: false });
+  const { subscribe, set, update } = writable<BoredStore>({ loading: false, dialogOpen: false });
 
   // function remove(id: string) {
   // 	update((store) => {
@@ -20,7 +20,7 @@ const state = () => {
   // }
 
   function clear() {
-    set({ loading: false });
+    set({ loading: false, dialogOpen: false });
   }
 
   return { subscribe, set, update, clear };
diff --git a/src/lib/types.ts b/src/lib/types.ts
index 6944ee8..3c34514 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -1,5 +1,6 @@
 export type BoredStore = {
   loading: boolean;
+  dialogOpen: boolean;
 };
 
 export enum ToastType {
diff --git a/src/lib/util/manipulateCollection.ts b/src/lib/util/manipulateCollection.ts
index b0f40c1..5df7fab 100644
--- a/src/lib/util/manipulateCollection.ts
+++ b/src/lib/util/manipulateCollection.ts
@@ -1,9 +1,8 @@
 import { collectionStore } from '$lib/stores/collectionStore';
 import { toast } from '$lib/components/toast/toast';
 import { ToastType, type GameType, type SavedGameType } from '$lib/types';
-import { browser } from '$app/environment';
 
-function convertToSavedGame(game: GameType): SavedGameType {
+function convertToSavedGame(game: GameType | SavedGameType): SavedGameType {
   return {
     id: game.id,
     name: game.name,
@@ -11,12 +10,12 @@ function convertToSavedGame(game: GameType): SavedGameType {
   };
 }
 
-export function addToCollection(game: GameType) {
+export function addToCollection(game: GameType | SavedGameType) {
   collectionStore.add(convertToSavedGame(game));
   toast.send("Added to collection", { duration: 3000, type: ToastType.INFO });
 }
 
-export function removeFromCollection(game: GameType) {
+export function removeFromCollection(game: GameType | SavedGameType) {
   collectionStore.remove(game.id);
   toast.send("Removed from collection", { duration: 3000, type: ToastType.INFO });
 }
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 1ef1433..914f023 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,8 +1,15 @@
 <script lang="ts">
   import { browser } from '$app/environment';
+  import { fade } from 'svelte/transition';
   import { navigating } from '$app/stores';
   import debounce from 'just-debounce-it';
   import { Toy } from '@leveluptuts/svelte-toy';
+  import {
+    Dialog,
+    DialogOverlay,
+    DialogTitle,
+    DialogDescription
+  } from '@rgossiaux/svelte-headlessui';
   import Header from '$lib/components/header/Header.svelte';
   import Loading from '$lib/components/loading.svelte';
   import Transition from '$lib/components/transition/index.svelte';
@@ -17,11 +24,11 @@
   $: {
     if ($navigating) {
       debounce(() => {
-        boredState.set({ loading: true });
+        boredState.set({ loading: true, dialogOpen: false });
       }, 250);
     }
     if (!$navigating) {
-      boredState.set({ loading: false });
+      boredState.set({ loading: false, dialogOpen: false });
     }
   }
 
@@ -74,10 +81,51 @@
       <div class="background" />
     </Portal>
   {/if}
+  {#if $boredState?.dialogOpen}
+    <div transition:fade>
+      <Dialog
+        open={$boredState?.dialogOpen}
+        on:close={() => boredState.set({ loading: false, dialogOpen: false })}
+        static
+      >
+        <DialogOverlay
+          style={'position: fixed; inset: 0; z-index: 100; background-color: rgb(0 0 0); opacity: 0.3;'}
+        />
+        <div class="dialog">
+          <DialogTitle>Deactivate account</DialogTitle>
+          <DialogDescription>This will permanently deactivate your account</DialogDescription>
+
+          <p>
+            Are you sure you want to deactivate your account? All of your data will be permanently
+            removed. This action cannot be undone.
+          </p>
+
+          <button on:click={() => boredState.set({ loading: false, dialogOpen: false })}
+            >Deactivate</button
+          >
+          <button on:click={() => boredState.set({ loading: false, dialogOpen: false })}
+            >Cancel</button
+          >
+        </div>
+      </Dialog>
+    </div>
+  {/if}
   <Toast />
 </Transition>
 
 <style lang="scss">
+  :global(.dialog) {
+    position: fixed;
+    top: 25%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 101;
+    border-radius: 10px;
+    background-color: var(--primary);
+    padding: 2rem;
+    /* max-width: 400px; */
+  }
+
   .loading {
     position: fixed;
     top: 50%;
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 867e7f0..2c4a893 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -8,7 +8,7 @@
   import { boredState } from '$root/lib/stores/boredState';
 
   async function handleSearch(event: SubmitEvent) {
-    boredState.set({ loading: true });
+    boredState.set({ loading: true, dialogOpen: false });
     const form = event.target as HTMLFormElement;
     console.log('form', form);
     const response = await fetch('/api/game', {
@@ -17,7 +17,7 @@
       body: new FormData(form)
     });
     const responseData = await response.json();
-    boredState.set({ loading: false });
+    boredState.set({ loading: false, dialogOpen: false });
     gameStore.removeAll();
     gameStore.addAll(responseData?.games);
   }