begin refactoring card types

src/components/ImageCard.tsx

@@ -27,7 +27,7 @@ export function ImageCard({ key: itemKey, data: item }: ImageCard.ImageCardProps
 
   function debounceLSUpdate(time?: number) {
     debounce(() => {
-      updateLocalStorage("images", images.images.value)
+      updateLocalStorage("images", images.images).notify()
     }, time)
   }
 

src/components/cardSelector/ImageCardButton.tsx

@@ -47,7 +47,7 @@ export function ImageCardButton() {
           })
 
           try {
-            updateLocalStorage("images", images.images.value)
+            updateLocalStorage("images", images.images).notify()
           } catch (e: unknown) {
             if (e instanceof DOMException) {
               if (e.name !== 'QuotaExceededError') return

src/components/cardSelector/ImportButton.tsx

@@ -1,6 +1,7 @@
-import images from "../../signals/images"
+import images, { ImageCardType } from "../../signals/images"
-import notes from "../../signals/notes"
+import notes, { NoteCardType } from "../../signals/notes"
-import { Card } from "../../types"
+import texts, { TextCardType } from "../../signals/texts"
+import { Card, CardTypes } from "../../types"
 import { convertBase64ToJson } from "../../utils/convertBase64ToJson"
 import { updateLocalStorage } from "../../utils/localStorage"
 import { Tooltip } from "./Tooltip"
@@ -9,6 +10,12 @@ import { defaultClassName } from "./utils"
 export function ImportButton() {
 
   function _handleImport() {
+    // guard clause to prevent overwriting existing cards
+    if (images.images.value || notes.notes.value) {
+      const isConfirmed = confirm("Are you sure you want to overwrite your existing cards?")
+      if (!isConfirmed) return
+    }
+
     const input = document.createElement('input')
     input.type = 'file'
     input.accept = ".json"
@@ -21,24 +28,33 @@ export function ImportButton() {
         let content = readerEvent.target?.result;
         // get only the base64 parts and not any identifiers
         content = (content as string).split(',')[1]
-        const data: Record<string, Card<'notes'> | Card<'images'>> = convertBase64ToJson(content)
+        const data: Record<string, Card<CardTypes>> = convertBase64ToJson(content)
+        console.log(data)
         for (let key in data) {
           const item = data[key]
-          if (item.type == 'images') {
           const { id, ...rest } = item
-            images.addImage(rest)
+          console.log(id, rest)
-          }
+          switch (item.type) {
-
+            case CardTypes:
-          if (item.type == 'notes') {
+              console.log("adding image: ", rest)
-            const { id, ...rest } = item
+              images.addImage(rest as ImageCardType)
-            notes.addNote(rest)
+              break;
+            case 'notes':
+              notes.addNote(rest as NoteCardType)
+              break;
+            case 'texts':
+              texts.addText(rest as TextCardType)
+              break;
+            default:
+              break;
           }
         }
 
-        updateLocalStorage('notes', notes.notes.value)
+        console.log("images: ", images.images.value)
-        updateLocalStorage('images', images.images.value)
+
-        notes.notes.notify()
+        updateLocalStorage('notes', notes.notes).notify()
-        images.images.notify()
+        updateLocalStorage('images', images.images).notify()
+        updateLocalStorage('texts', texts.texts).notify()
       }
     }
     input.click()

src/components/cardSelector/TextButton.tsx

@@ -21,7 +21,7 @@ export function TextButton() {
         h: 100
       }
     })
-    updateLocalStorage("texts", texts.texts.value)
+    updateLocalStorage("texts", texts.texts).notify()
   }
 
   return (

src/signals/images.ts

@@ -15,6 +15,7 @@ function addImage(data: Omit<ImageCardType, "id">) {
     ...data,
     id: crypto.randomUUID(),
   }
+  console.log("adding image: ", newCard)
   images.value[newCard.id] = newCard
   images.notify()
   focusedItem.value = newCard.id

src/types/Card.ts

@@ -1,7 +1,12 @@
-export type CardTypes = "notes" | "images" | "texts"
 export type positionCoords = { x: number; y: number }
 export type dimensionCoords = { w: number; h: number }
 
+export enum CardTypes {
+  NOTES = "notes",
+  IMAGES = "images",
+  TEXTS = "texts",
+}
+
 type Base64 = string
 
 export interface Card<Ttype extends CardTypes> {

src/utils/localStorage.ts

@@ -1,8 +1,18 @@
-import { CardTypes } from "../types"
+import { Signal } from "kaioken"
+import { Card, CardTypes } from "../types"
 
 export function updateLocalStorage(
   location: CardTypes,
-  collection: unknown[] | Record<string, unknown>
+  collection: Signal<Record<string, Card<CardTypes>>>
 ) {
-  localStorage.setItem(location, JSON.stringify(collection))
+  try {
+    localStorage.setItem(location, JSON.stringify(collection.value))
+  } catch (e) {
+    // throw new Error("Could not update local storage")
+    throw new DOMException(
+      "Could not update local storage",
+      "LocalStorageError"
+    )
+  }
+  return collection
 }