diff --git a/src/components/ImageCard.tsx b/src/components/ImageCard.tsx index e7cb7e2..a1fda18 100644 --- a/src/components/ImageCard.tsx +++ b/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) } diff --git a/src/components/cardSelector/ImageCardButton.tsx b/src/components/cardSelector/ImageCardButton.tsx index d5491ef..be6ae0a 100644 --- a/src/components/cardSelector/ImageCardButton.tsx +++ b/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 diff --git a/src/components/cardSelector/ImportButton.tsx b/src/components/cardSelector/ImportButton.tsx index 7226b8c..b2ab086 100644 --- a/src/components/cardSelector/ImportButton.tsx +++ b/src/components/cardSelector/ImportButton.tsx @@ -1,6 +1,7 @@ -import images from "../../signals/images" -import notes from "../../signals/notes" -import { Card } from "../../types" +import images, { ImageCardType } from "../../signals/images" +import notes, { NoteCardType } from "../../signals/notes" +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 | Card<'images'>> = convertBase64ToJson(content) + const data: Record> = 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) - } - - if (item.type == 'notes') { - const { id, ...rest } = item - notes.addNote(rest) + const { id, ...rest } = item + console.log(id, rest) + switch (item.type) { + case CardTypes: + console.log("adding image: ", rest) + images.addImage(rest as ImageCardType) + break; + case 'notes': + notes.addNote(rest as NoteCardType) + break; + case 'texts': + texts.addText(rest as TextCardType) + break; + default: + break; } } - updateLocalStorage('notes', notes.notes.value) - updateLocalStorage('images', images.images.value) - notes.notes.notify() - images.images.notify() + console.log("images: ", images.images.value) + + updateLocalStorage('notes', notes.notes).notify() + updateLocalStorage('images', images.images).notify() + updateLocalStorage('texts', texts.texts).notify() } } input.click() diff --git a/src/components/cardSelector/TextButton.tsx b/src/components/cardSelector/TextButton.tsx index bcc28c9..5c2bc80 100644 --- a/src/components/cardSelector/TextButton.tsx +++ b/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 ( diff --git a/src/signals/images.ts b/src/signals/images.ts index e8c82c8..68da6d3 100644 --- a/src/signals/images.ts +++ b/src/signals/images.ts @@ -15,6 +15,7 @@ function addImage(data: Omit) { ...data, id: crypto.randomUUID(), } + console.log("adding image: ", newCard) images.value[newCard.id] = newCard images.notify() focusedItem.value = newCard.id diff --git a/src/types/Card.ts b/src/types/Card.ts index c2dad2e..660253a 100644 --- a/src/types/Card.ts +++ b/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 { diff --git a/src/utils/localStorage.ts b/src/utils/localStorage.ts index fcd9549..26d064a 100644 --- a/src/utils/localStorage.ts +++ b/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 + collection: Signal>> ) { - 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 }