diff --git a/src/App.tsx b/src/App.tsx index ced7b8f..9085304 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,8 +1,11 @@ -import { createEffect, createSignal, For } from "solid-js"; +import { createEffect, createSignal, For, type JSX } from "solid-js"; import UrlForm from "./components/UrlForm"; import UrlItem from "./components/UrlItem"; import transition from "./transition"; +export type EventParameter = Parameters< + JSX.EventHandler +>[0]; const URI_LIST = "text/uri-list"; function loadUrls(): URL[] { @@ -23,36 +26,39 @@ export default function App() { function handleDragEnter(event: DragEvent) { const data = event.dataTransfer; - if (!data) return; + if (data === null) return; const isLink = data.types.includes(URI_LIST); if (!isLink) return; event.preventDefault(); } - function handleDrop(event: DragEvent) { - const data = event.dataTransfer; - if (!data) return; - event.preventDefault(); - const lines = data.getData(URI_LIST); + function handleDataTransfer(data: DataTransfer) { + const lines = data.getData(URI_LIST) || data.getData("text"); + console.debug("Dop", lines); if (lines.length === 0) return; - const urls = lines.split("\n").reduce((urls, line) => { - if (line.startsWith("#")) return urls; - - // console.debug("url line", line); + for (const line of lines.split("\n")) { + if (line.startsWith("#")) continue; + console.debug("Run", line); const url = URL.parse(line); - if (url !== null) urls.push(url); - - return urls; - }, new Array()); + console.debug("Adding", url); + if (url === null) continue; - console.debug("Dropped urls", urls); + addUrl(url); + } } - function handleUrlSubmit(url: URL) { - console.debug("Submitted url", url); + document.addEventListener("paste", (event: ClipboardEvent) => { + console.debug("Paste", event.clipboardData?.getData("text")); + if (event.clipboardData !== null) { + handleDataTransfer(event.clipboardData); + event.preventDefault(); + } + }); + + function addUrl(url: URL) { //TODO use map to deduplicate and reduce garbage transition(() => { setUrls((urls) => { @@ -66,6 +72,39 @@ export default function App() { }); } + function removeUrl(url: URL) { + transition(() => { + setUrls((urls) => { + //TODO rework this janky delete + const index = urls.findIndex((otherUrl) => otherUrl.href === url.href); + + urls.splice(index, 1); + return [...urls]; + }); + }); + } + + function handleDrop(event: DragEvent) { + const data = event.dataTransfer; + if (!data) return; + event.preventDefault(); + handleDataTransfer(data); + } + + function handleDelete( + event: EventParameter, + ) { + console.debug("k", event.key, event.target); + if ( + (event.key !== "Delete" && event.key !== "Backspace") || + !(event.target instanceof HTMLAnchorElement) + ) + return; + + const url = new URL(event.target.href); + removeUrl(url); + } + return (

Shore

Add Destination

- +

Destinations

-
    +
      {(url) => (
    • diff --git a/src/components/UrlForm.tsx b/src/components/UrlForm.tsx index 45719b2..dd78ef0 100644 --- a/src/components/UrlForm.tsx +++ b/src/components/UrlForm.tsx @@ -1,5 +1,5 @@ -import { createResource, type Resource } from "solid-js"; import Plus from "lucide-solid/icons/plus"; +import type { EventParameter } from "~/App"; const URL_INPUT = "url"; @@ -26,12 +26,10 @@ export type UrlFormProperties = { // } export default function UrlForm({ onSubmit }: UrlFormProperties) { - function handleSubmit(event: SubmitEvent) { + function handleSubmit(event: EventParameter) { event.preventDefault(); const form = event.currentTarget; - if (!(form instanceof HTMLFormElement)) - throw new Error("Expected to handle form submit event"); const input = form.elements.namedItem(URL_INPUT); if (!(input instanceof HTMLInputElement))