From 408a43577ebb2daa81ffe7a8911a46b87f6aa6fb Mon Sep 17 00:00:00 2001
From: Zeu Capua <coding@zeu.dev>
Date: Tue, 16 Jan 2024 10:55:09 -0800
Subject: [PATCH 1/2] =?UTF-8?q?=E2=99=BB=EF=B8=8Frefactor=20stores=20as=20?=
 =?UTF-8?q?generalized=20function?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/stores.svelte.ts  | 66 +++++++++------------------------------
 src/routes/+layout.svelte |  4 +--
 src/routes/+page.svelte   | 36 ++++++++++++++-------
 3 files changed, 40 insertions(+), 66 deletions(-)

diff --git a/src/lib/stores.svelte.ts b/src/lib/stores.svelte.ts
index 509db20..c799954 100644
--- a/src/lib/stores.svelte.ts
+++ b/src/lib/stores.svelte.ts
@@ -2,35 +2,30 @@
 const browser_exists = (typeof window !== "undefined") && (typeof (document) !== "undefined");
 const storage = browser_exists ? localStorage : null;
 
-// Color Theme (from DaisyUI)
-const initial_theme : string = getInitialTheme();
+// Generalized Local Storage
+function persisted<T>(key: string, initial_value: T) {
+  let value : T = $state(initial_value);
 
-function getInitialTheme() {
-  const initial_local = storage?.getItem("local_theme");
-  if (initial_local) { 
-    console.log("getInitial", initial_local);
-    return initial_local 
+  const initial_local = storage?.getItem(key);
+  if (initial_local) {
+    value = JSON.parse(initial_local).value as T;
   }
-  return "default";
-}
-
-function localTheme() {
-  let theme : string = $state(initial_theme);
 
-  function updateTheme(new_theme : string) {
+  function update(new_value : T) {
     if (browser_exists) {
-      theme = new_theme;
-      storage?.setItem("local_theme", theme);
+      value = new_value;
+      storage?.setItem(key, JSON.stringify({ value }));
     }
   }
 
   return {
-    get theme() { return theme; },
-    updateTheme
+    get value() { return value; },
+    update
   }
 }
 
-export const color_theme = localTheme();
+// Color Theme (from DaisyUI)
+export const color_theme = persisted<string>("local_theme", "default");
 
 // Task + Todo List
 export type Task = {
@@ -39,37 +34,4 @@ export type Task = {
   is_completed: boolean;
 }
 
-const initial_list : Task[] = getInitialList();
-
-function getInitialList() {
-  const initial_local = storage?.getItem("local_todo_list");
-  if (initial_local) { return JSON.parse(initial_local) as Task[]; }
-  return [];
-}
-
-function localTodoList() {
-  let tasks : Task[] = $state(initial_list);
-
-  function addTask(new_task : Task) {
-    tasks.push(new_task);
-  }
-
-  function removeTask(id : string) {
-    tasks = tasks.filter((t) => t.id !== id);
-  }
-
-  function update() {
-    if (browser_exists) {
-      storage?.setItem("local_todo_list", JSON.stringify(tasks));
-    }
-  }
-
-  return {
-    get tasks() { return tasks; },
-    addTask,
-    removeTask,
-    update
-  }
-}
-
-export const todo_list = localTodoList();
+export const todo_list = persisted<Task[]>("local_todo_list", []);
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 15bd16c..9443663 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -43,8 +43,8 @@
     "sunset",
   ];
 
-  let theme_input = $state(color_theme.theme);
-  $effect(() => color_theme.updateTheme(theme_input));
+  let theme_input = $state(color_theme.value);
+  $effect(() => color_theme.update(theme_input));
 </script>
 
 <svelte:head>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index c31e3c7..b2b72a7 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,12 +1,15 @@
 <script lang="ts">
   import { todo_list, type Task } from "$lib/stores.svelte";
 
+  $effect(() => console.log(todo_list));
+
+  // TODO: get better ID management
   let id = 0;
   let description = $state("");
 
   function randomizeId() {
     let random_id = id;
-    while (todo_list.tasks.find(t => t.id === `${random_id}`)) {
+    while (todo_list.value.find(t => t.id === `${random_id}`)) {
       random_id = Math.floor(Math.random() * 100);
     }
     id = random_id;
@@ -14,19 +17,28 @@
 
   function addTask() {
     randomizeId();
-    todo_list.addTask({
-      id: `${id}`, 
-      description, 
-      is_completed: false
-    });
+    todo_list.update(
+      [...todo_list.value, {
+        id: `${id}`,
+        description,
+        is_completed: false
+      }]
+    );
     description = "";
   }
 
-  $effect(() => todo_list.update());
+  function removeTask(id: string) {
+    todo_list.update(
+      todo_list.value.filter((t) => t.id !== id)
+    );
+  }
+
+  // update when tasks change (description, is_completed)
+  $effect(() => todo_list.update(todo_list.value));
 </script>
 
 <ul class="flex flex-col gap-8 overflow-y-scroll h-full max-h-[48rem] p-2">
-  {#each todo_list.tasks as task : Task}
+  {#each todo_list.value as task : Task}
     <li class="group flex gap-4 items-center">
       <input 
         type="checkbox" 
@@ -39,7 +51,7 @@
         class={`text-lg lg:text-xl input lg:input-lg w-full max-w-lg ${task.is_completed && "line-through"}`}
       />
       <button
-        onclick={() => todo_list.removeTask(task.id)}
+        onclick={() => removeTask(task.id)}
         class="lg:invisible lg:group-hover:visible btn btn-error"
       >
         <img 
@@ -53,12 +65,12 @@
  
 </ul>
 
-<form onsubmit={addTask} class="flex gap-4">
+<section class="flex gap-4">
   <input 
     type="text" 
     bind:value={description} 
     class="text-lg lg:text-xl input input-bordered lg:input-lg w-full max-w-lg"
   />
-  <button class="btn lg:btn-lg btn-primary">Add</button>
-</form>
+  <button onclick={addTask} class="btn lg:btn-lg btn-primary">Add</button>
+</section>
 
-- 
2.51.2


From 3e6bac65a9cc13718866d9dda2cf86856cc17a3a Mon Sep 17 00:00:00 2001
From: Zeu Capua <zeucapua@gmail.com>
Date: Wed, 17 Jan 2024 00:38:48 -0800
Subject: [PATCH 2/2] try catch error if local storage is undefiend when parsed

---
 src/lib/stores.svelte.ts | 12 +++++++++---
 src/routes/+page.svelte  |  2 +-
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/lib/stores.svelte.ts b/src/lib/stores.svelte.ts
index c799954..ef1c4f5 100644
--- a/src/lib/stores.svelte.ts
+++ b/src/lib/stores.svelte.ts
@@ -3,12 +3,18 @@ const browser_exists = (typeof window !== "undefined") && (typeof (document) !==
 const storage = browser_exists ? localStorage : null;
 
 // Generalized Local Storage
-function persisted<T>(key: string, initial_value: T) {
-  let value : T = $state(initial_value);
+function persisted<T>(key: string, default_value: T) {
+  let value : T = $state(default_value);
 
   const initial_local = storage?.getItem(key);
   if (initial_local) {
-    value = JSON.parse(initial_local).value as T;
+    try {
+      value = JSON.parse(initial_local).value as T;
+      if (!value) { update(default_value); }
+    } 
+    catch (e) {
+      update(default_value);
+    }
   }
 
   function update(new_value : T) {
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index b2b72a7..af7c3a1 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -4,7 +4,7 @@
   $effect(() => console.log(todo_list));
 
   // TODO: get better ID management
-  let id = 0;
+  let id = $state(0);
   let description = $state("");
 
   function randomizeId() {
-- 
2.51.2