Merge pull request #1 from zeucapua/refactor-store

♻️ refactor local storage store

src/lib/stores.svelte.ts

···
 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, default_value: T) {
+  let value : T = $state(default_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) {
+    try {
+      value = JSON.parse(initial_local).value as T;
+      if (!value) { update(default_value); }
+    } 
+    catch (e) {
+      update(default_value);
+    }
   }
-  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 = {
···
   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", []);

src/routes/+layout.svelte

···
     "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>

src/routes/+page.svelte

···
 <script lang="ts">
   import { todo_list, type Task } from "$lib/stores.svelte";
 
-  let id = 0;
+  $effect(() => console.log(todo_list));
+
+  // TODO: get better ID management
+  let id = $state(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;
···
 
   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" 
···
         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 
···
  
 </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>