add new post interface

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
+            }
+        });
+    }
 }

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>
+    )
+}

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>

front/src/components/display/input.module.scss

@@ -1,4 +1,4 @@
-.search {
+.input {
     margin: 1rem 0;
 
     border: 1px solid gray;

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}