hot-key for creation, refactoring

querwurzel · Nov 15, 2023 · 88aea38 · 88aea38
1 parent a289e77
commit 88aea38
Show file tree

Hide file tree

Showing 8 changed files with 78 additions and 68 deletions.
diff --git 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
@@ -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<CreatePasteProps> = ({onCreatePaste, initialPaste})
 
   const [lastPasteUrl, setLastPasteUrl] = createSignal<string>();
 
+  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<CreatePasteProps> = ({onCreatePaste, initialPaste})
     onCreatePaste(data)
       .then(url => {
         resetCreateForm();
-        resetStore();
         setLastPasteUrl(url);
       })
       .catch(e => submitInput.style.backgroundColor = 'red');
   }
 
   return (
-    <form ref={creationForm} onSubmit={createPaste} onReset={resetStore} autocomplete="off" class={styles.createForm}>
+    <form ref={creationForm} onSubmit={createPaste} onReset={resetCreatePaste} autocomplete="off" class={styles.createForm}>
       <fieldset>
         <div>
           <label for="expiry">Expires in: </label>
@@ -147,6 +167,7 @@ const CreatePaste: Component<CreatePasteProps> = ({onCreatePaste, initialPaste})
                     rows="20"
                     cols="50"
                     placeholder="Paste here"
+                    name="content"
                     onInput={updateFormField("content")}>{form.content}</textarea>
           <span>{form.content?.length || 0} / 4096</span>
         </div>

diff --git a/frontend/src/components/ReadPaste/ReadPaste.tsx b/frontend/src/components/ReadPaste/ReadPaste.tsx
@@ -16,11 +16,11 @@ const ReadPaste: Component<ReadPasteProps> = ({paste, onClonePaste, onDeletePast
 
   const [clearText, setClearText] = createSignal<string>();
 
+  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
@@ -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,14 +28,34 @@ 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));
     });
   })
 
   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 (
     <div class={styles.recentPastes}>
 

diff --git a/frontend/src/components/SearchPastes/SearchPastes.tsx b/frontend/src/components/SearchPastes/SearchPastes.tsx
@@ -14,28 +14,25 @@ const SearchPastes: Component<SearchPastesProps> = ({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);
     }
   }
 
   return (
     <>
       <form autocomplete="off" class={styles.searchForm} onSubmit={submitOnClick}>
         <fieldset>
-          <input ref={searchInput} onKeyUp={submitOnEnter} value={term} type="search" required minlength="3" maxlength="25" placeholder="Search for pastes" autofocus />
+          <input ref={searchInput} onKeyUp={submitOnEnter} name="term" value={term} type="search" required minlength="3" maxlength="25" placeholder="Search for pastes" autofocus />
           <input type="submit" value="Search"/>
           <input type="reset" value="Reset"/>
         </fieldset>

diff --git 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
@@ -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<string> => {
@@ -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 (
-    <CreatePaste initialPaste={appContext.popPasteCloned()} onCreatePaste={onCreatePaste} />
+    <CreatePaste initialPaste={AppContext.popPasteCloned()} onCreatePaste={onCreatePaste} />
   )
 }
 

diff --git 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(() => {})