From 5e9debc620a777e58afa04de8eb5187b332c5857 Mon Sep 17 00:00:00 2001
From: b1ek <me@blek.codes>
Date: Mon, 11 Nov 2024 23:14:40 +1000
Subject: [PATCH] add new post interface

---
 front/src/api/DataRow.ts                      |  9 ++++++++
 front/src/components/NewPost.tsx              |  0
 front/src/components/display/NewPost.tsx      | 23 +++++++++++++++++++
 front/src/components/display/SearchBar.tsx    |  5 ++--
 ...earchBar.module.scss => input.module.scss} |  2 +-
 front/src/pages/index.tsx                     | 18 ++++++++++++---
 6 files changed, 51 insertions(+), 6 deletions(-)
 delete mode 100644 front/src/components/NewPost.tsx
 create mode 100644 front/src/components/display/NewPost.tsx
 rename front/src/components/display/{SearchBar.module.scss => input.module.scss} (96%)

diff --git a/front/src/api/DataRow.ts b/front/src/api/DataRow.ts
index c8d7c75..9479f3f 100644
--- a/front/src/api/DataRow.ts
+++ b/front/src/api/DataRow.ts
@@ -25,4 +25,13 @@ export class DataRow {
         const raw = await req.json<any[]>();
         return raw.map(this.reviveJSON);
     }
+
+    static async create(data: string): Promise<void> {
+        await ky('/api/data', {
+            method: 'PUT',
+            json: {
+                data
+            }
+        });
+    }
 }
\ No newline at end of file
diff --git a/front/src/components/NewPost.tsx b/front/src/components/NewPost.tsx
deleted file mode 100644
index e69de29..0000000
diff --git a/front/src/components/display/NewPost.tsx b/front/src/components/display/NewPost.tsx
new file mode 100644
index 0000000..d63a4cf
--- /dev/null
+++ b/front/src/components/display/NewPost.tsx
@@ -0,0 +1,23 @@
+import { useState } from 'preact/hooks';
+import styles from './input.module.scss';
+import { DataRow } from '../../api/DataRow';
+
+export type NewPostProps = {
+    onCreate: () => void
+};
+export function NewPost({ onCreate }: NewPostProps) {
+
+    const [ data, setData ] = useState('');
+
+    async function create() {
+        await DataRow.create(data);
+        onCreate();
+    }
+
+    return (
+        <div className={styles.input}>
+            <input type='text' value={data} onChange={e => setData(e.currentTarget.value)} placeholder={'new post'} />
+            <button onClick={create}>create</button>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/front/src/components/display/SearchBar.tsx b/front/src/components/display/SearchBar.tsx
index 41a0610..9912e4d 100644
--- a/front/src/components/display/SearchBar.tsx
+++ b/front/src/components/display/SearchBar.tsx
@@ -1,8 +1,9 @@
 import { useState } from "preact/hooks";
-import styles from './SearchBar.module.scss';
 import { SearchIcon } from "./SearchIcon";
 import { TargetedEvent } from "preact/compat";
 
+import styles from './input.module.scss';
+
 export type SearchBarProps = {
     default?: string,
     placeholder?: string,
@@ -18,7 +19,7 @@ export function SearchBar({ default: def, placeholder, onChange, onSearch }: Sea
     }
 
     return (
-        <div className={styles.search}>
+        <div className={styles.input}>
             <SearchIcon />
             <input type='text' value={query} onChange={updateValue} placeholder={placeholder} />
             <button onClick={onSearch ? () => onSearch(query) : undefined}>go</button>
diff --git a/front/src/components/display/SearchBar.module.scss b/front/src/components/display/input.module.scss
similarity index 96%
rename from front/src/components/display/SearchBar.module.scss
rename to front/src/components/display/input.module.scss
index 52918c4..a2ec470 100644
--- a/front/src/components/display/SearchBar.module.scss
+++ b/front/src/components/display/input.module.scss
@@ -1,4 +1,4 @@
-.search {
+.input {
     margin: 1rem 0;
 
     border: 1px solid gray;
diff --git a/front/src/pages/index.tsx b/front/src/pages/index.tsx
index 71dfcfc..402c26a 100644
--- a/front/src/pages/index.tsx
+++ b/front/src/pages/index.tsx
@@ -8,6 +8,7 @@ import { DraggablePostsList } from "../components/DraggablePostsList";
 import { DataRowSelection } from "../api/DataRowSelection";
 import { SearchBar } from "../components/display/SearchBar";
 import delay from "delay";
+import { NewPost } from "../components/display/NewPost";
 
 export function Index() {
     const [ data, setData ] = useState(null as null | DataRow[]);
@@ -59,17 +60,26 @@ export function Index() {
         }
     }
 
-    async function search(query: string) {
+    async function reload() {
         setFetching(true);
-
+        
         setHasMore(true);
-        setFilter(query);
         setData(null);
         await delay(0); // stupid thing won't work w/o delay
 
         setFetching(false);
     }
 
+    async function search(query: string) {
+        setFilter(query);
+        reload();
+    }
+
+    async function clearSelection() {
+        setSelected(dataRowSelection.set([]));
+        await dataRowSelection.save();
+    }
+
     return (
         <div className={style.index}>
             {
@@ -77,12 +87,14 @@ export function Index() {
                     ?
                         <div className={style.selection}>
                             <h2>Selection</h2>
+                            <button onClick={clearSelection}>clear selection</button>
                             <DraggablePostsList rows={selected} setRows={saveSelection} />
                         </div>
                     : null
             }
             
             <SearchBar onSearch={search} placeholder="filter" />
+            <NewPost onCreate={reload} />
             
             <InfiniteScroller
                 pageStart={0}