From 88aea38e92af9c15b3809f5678721911a198921d Mon Sep 17 00:00:00 2001 From: querwurzel <> Date: Wed, 15 Nov 2023 21:53:48 +0100 Subject: [PATCH] hot-key for creation, refactoring --- frontend/src/api/client.ts | 4 +- .../components/CreatePaste/CreatePaste.tsx | 61 +++++++++++++------ .../src/components/ReadPaste/ReadPaste.tsx | 4 +- .../components/RecentPastes/RecentPastes.tsx | 46 +++++++------- .../components/SearchPastes/SearchPastes.tsx | 15 ++--- .../SearchPastes/searchPastes.module.css | 2 +- frontend/src/pages/Create.tsx | 6 +- frontend/src/pages/Read.tsx | 8 +-- 8 files changed, 78 insertions(+), 68 deletions(-) diff --git a/frontend/src/api/client.ts b/frontend/src/api/client.ts index e0839d8..76ac476 100644 --- a/frontend/src/api/client.ts +++ b/frontend/src/api/client.ts @@ -3,11 +3,9 @@ import {PasteListView} from './model/PasteListView'; import {PasteView} from './model/PasteView'; import {PasteSearchView} from './model/PasteSearchView'; -const HOST_DEVELOPMENT = 'localhost:3000'; - const apiBaseUrl = () => { switch (window.location.host) { - case HOST_DEVELOPMENT: + case 'localhost:3000': // development return 'http://localhost:8080'; default: return window.location.origin; diff --git a/frontend/src/components/CreatePaste/CreatePaste.tsx b/frontend/src/components/CreatePaste/CreatePaste.tsx index f5fbe1b..10a5b1a 100644 --- a/frontend/src/components/CreatePaste/CreatePaste.tsx +++ b/frontend/src/components/CreatePaste/CreatePaste.tsx @@ -1,4 +1,4 @@ -import {Component, createSignal, JSX, Show} from "solid-js"; +import {Component, createSignal, JSX, Show, onMount, onCleanup} from "solid-js"; import {createStore} from "solid-js/store"; import {PasteCreateCmd} from "../../api/model/PasteCreateCmd"; import {encrypt} from "../../crypto/CryptoUtil"; @@ -35,33 +35,54 @@ const CreatePaste: Component = ({onCreatePaste, initialPaste}) const [lastPasteUrl, setLastPasteUrl] = createSignal(); + onMount(() => { + window.addEventListener("keydown", globalSubmitPaste); + }) + + onCleanup(() => { + window.removeEventListener("keydown", globalSubmitPaste); + }) + let creationForm: HTMLFormElement let submitInput: HTMLInputElement - const updateFormField = (fieldName: keyof FormModel) => (event: Event) => { - const inputElement = event.currentTarget as HTMLInputElement; + function globalSubmitPaste(e: KeyboardEvent) { + if (e.altKey || e.shiftKey) { + return; + } - setForm({ - [fieldName]: inputElement.value - }); + if ((e.ctrlKey && e.code === 'Enter') || (e.metaKey && e.code === 'Enter')) { + creationForm.requestSubmit(); + } + } + + function updateFormField(fieldName: keyof FormModel): (event: Event) => void { + return (event: Event) => { + const inputElement = event.currentTarget as HTMLInputElement; + + setForm({ + [fieldName]: inputElement.value + }); + } }; - const resetCreateForm = () => { - creationForm?.reset(); + function resetCreatePaste() { + setForm({ + title: null, + password: null, + content: null, + expiry: null, + exposure: null + } as FormModel) + setLastPasteUrl(); + submitInput.style.backgroundColor = null; } - const resetStore = () => { - setLastPasteUrl(); - setForm({ - title: null, - password: null, - content: null, - expiry: null, - exposure: null - } as FormModel) + function resetCreateForm() { + creationForm?.reset(); } - const createPaste = (e: Event) => { + function createPaste(e: Event) { e.preventDefault(); const data: PasteCreateCmd = { @@ -79,14 +100,13 @@ const CreatePaste: Component = ({onCreatePaste, initialPaste}) onCreatePaste(data) .then(url => { resetCreateForm(); - resetStore(); setLastPasteUrl(url); }) .catch(e => submitInput.style.backgroundColor = 'red'); } return ( -
+
@@ -147,6 +167,7 @@ const CreatePaste: Component = ({onCreatePaste, initialPaste}) rows="20" cols="50" placeholder="Paste here" + name="content" onInput={updateFormField("content")}>{form.content} {form.content?.length || 0} / 4096
diff --git a/frontend/src/components/ReadPaste/ReadPaste.tsx b/frontend/src/components/ReadPaste/ReadPaste.tsx index fce4705..f9c7101 100644 --- a/frontend/src/components/ReadPaste/ReadPaste.tsx +++ b/frontend/src/components/ReadPaste/ReadPaste.tsx @@ -16,11 +16,11 @@ const ReadPaste: Component = ({paste, onClonePaste, onDeletePast const [clearText, setClearText] = createSignal(); + createEffect(on(clearText, () => linkifyContent())); + let keyInput: HTMLInputElement; let contentElement: HTMLPreElement; - createEffect(on(clearText, () => linkifyContent())); - onMount(() => { window.addEventListener("keydown", globalSelectContent); }) diff --git a/frontend/src/components/RecentPastes/RecentPastes.tsx b/frontend/src/components/RecentPastes/RecentPastes.tsx index 039227b..2f46d84 100644 --- a/frontend/src/components/RecentPastes/RecentPastes.tsx +++ b/frontend/src/components/RecentPastes/RecentPastes.tsx @@ -11,32 +11,10 @@ const RecentPastes: () => JSX.Element = () => { const [pastes, { mutate, refetch }] = createResource(ApiClient.findAll); - const appContext = AppContext; - - let refetchSchedule; - - function manualRefetch() { - restartSchedule(); - refetch(); - } - - function startSchedule() { - refetchSchedule = window.setInterval(refetch, 60_000); - } - - function stopSchedule() { - window.clearInterval(refetchSchedule); - } - - function restartSchedule() { - stopSchedule(); - startSchedule(); - } - onMount(() => { startSchedule(); - appContext.onPasteCreated((paste) => { + AppContext.onPasteCreated((paste) => { const newItem: PasteListView = { id: paste.id, title: paste.title, @@ -50,7 +28,7 @@ const RecentPastes: () => JSX.Element = () => { mutate(prev => [newItem].concat(prev)) }); - appContext.onPasteDeleted((paste) => { + AppContext.onPasteDeleted((paste) => { restartSchedule(); mutate(prev => prev.filter(item => item.id !== paste.id)); }); @@ -58,6 +36,26 @@ const RecentPastes: () => JSX.Element = () => { onCleanup(() => stopSchedule()); + let refetchSchedule; + + function manualRefetch() { + restartSchedule(); + refetch(); + } + + function startSchedule() { + refetchSchedule = window.setInterval(refetch, 60_000); + } + + function stopSchedule() { + window.clearInterval(refetchSchedule); + } + + function restartSchedule() { + stopSchedule(); + startSchedule(); + } + return (
diff --git a/frontend/src/components/SearchPastes/SearchPastes.tsx b/frontend/src/components/SearchPastes/SearchPastes.tsx index 3205b07..404bf92 100644 --- a/frontend/src/components/SearchPastes/SearchPastes.tsx +++ b/frontend/src/components/SearchPastes/SearchPastes.tsx @@ -14,20 +14,17 @@ const SearchPastes: Component = ({term, pastes, onSearchEnter let searchInput: HTMLInputElement; - const submitOnClick = (e: Event) => { + function submitOnClick(e: Event) { e.preventDefault(); + if (searchInput.value?.length >= 3) { onSearchEnter(searchInput.value); } } - const submitOnEnter = (e: Event) => { - e.preventDefault(); - - if (searchInput.value?.length >= 3) { - if (e instanceof KeyboardEvent && e.key === "Enter") { - onSearchEnter(searchInput.value); - } + function submitOnEnter(e: Event) { + if (e instanceof KeyboardEvent && e.key === "Enter") { + submitOnClick(e); } } @@ -35,7 +32,7 @@ const SearchPastes: Component = ({term, pastes, onSearchEnter <>
- +
diff --git a/frontend/src/components/SearchPastes/searchPastes.module.css b/frontend/src/components/SearchPastes/searchPastes.module.css index 48ef3f2..9773864 100644 --- a/frontend/src/components/SearchPastes/searchPastes.module.css +++ b/frontend/src/components/SearchPastes/searchPastes.module.css @@ -14,7 +14,7 @@ .searchForm input[type=search] { display: inline-block; width: 20rem; - margin: 0; + margin: .5rem; } .searchForm input[type=submit], diff --git a/frontend/src/pages/Create.tsx b/frontend/src/pages/Create.tsx index c3f645c..bb047b5 100644 --- a/frontend/src/pages/Create.tsx +++ b/frontend/src/pages/Create.tsx @@ -7,8 +7,6 @@ import CreatePaste from '../components/CreatePaste/CreatePaste'; const Create: () => JSX.Element = () => { - const appContext = AppContext; - const navigate = useNavigate(); const onCreatePaste = (cmd: PasteCreateCmd): Promise => { @@ -22,7 +20,7 @@ const Create: () => JSX.Element = () => { .catch(_ => {}); if (paste.isPublic) { - appContext.pushPasteCreated(paste); + AppContext.pushPasteCreated(paste); } if (!paste.isOneTime) { @@ -34,7 +32,7 @@ const Create: () => JSX.Element = () => { } return ( - + ) } diff --git a/frontend/src/pages/Read.tsx b/frontend/src/pages/Read.tsx index a89a9b8..38a671d 100644 --- a/frontend/src/pages/Read.tsx +++ b/frontend/src/pages/Read.tsx @@ -8,16 +8,14 @@ const NotFound = lazy(() => import('./404')); const Read: Component = (): JSX.Element => { - const appContext = AppContext; - const navigate = useNavigate(); const params = useParams<{id: string}>(); - const [paste] = createResource(() => params.id, (id) => appContext.popPasteCreated() || ApiClient.findOne(id)); + const [paste] = createResource(() => params.id, (id) => AppContext.popPasteCreated() || ApiClient.findOne(id)); const clonePaste = () => { - appContext.pushPasteCloned({ + AppContext.pushPasteCloned({ title: paste().title, content: paste().content }) @@ -27,7 +25,7 @@ const Read: Component = (): JSX.Element => { const deletePaste = () => { ApiClient.deletePaste(paste().id) .then(_ => { - appContext.pushPasteDeleted(paste()); + AppContext.pushPasteDeleted(paste()); navigate('/') }) .catch(() => {})