Merge pull request #5 from cindywu/cindywu/move-add-item-to-uses

move add item to uses and clear input after submit

Author: cindywu

src/datamodel/item.ts

@@ -25,7 +25,7 @@ export function putItem(
   tx: WriteTransaction,
   { id, item }: { id: string; item: Item }
 ): Promise<void> {
-  console.log('creating item...')
+  console.log('creating item...', item)
   return tx.put(key(id), item);
 }
 

src/datamodel/subscriptions.ts

@@ -2,7 +2,7 @@ import type { Reflect } from "@rocicorp/reflect";
 import { useSubscribe } from "replicache-react";
 import { getClientState, clientStatePrefix } from "./client-state";
 import { getShape, shapePrefix } from "./shape";
-import { itemPrefix } from "./item";
+import { getItem, itemPrefix } from "./item";
 import type { M } from "./mutators";
 
 export function useItemIDs(reflect: Reflect<M>) {
@@ -19,6 +19,16 @@ export function useItemIDs(reflect: Reflect<M>) {
   );
 }
 
+export function useItemByID(reflect: Reflect<M>, id: string) {
+  return useSubscribe(
+    reflect,
+    async (tx) => {
+      return await getItem(tx, id);
+    },
+    null
+  );
+}
+
 export function useShapeIDs(reflect: Reflect<M>) {
   return useSubscribe(
     reflect,

src/frontend/nav.tsx

@@ -21,6 +21,7 @@ export function Nav({ reflect, online }: NavProps) {
   const urlBox = useRef<HTMLInputElement>(null);
   const userInfo = useUserInfo(reflect);
   const itemIDs = useItemIDs(reflect);
+  const inputElement = useRef<HTMLInputElement>(null);
 
   useEffect(() => {
     if (shareVisible) {
@@ -33,13 +34,21 @@ export function Nav({ reflect, online }: NavProps) {
   };
 
   function handleCreateItem(){
-    reflect.mutate.createItem(randomItem());
+    const thing : any = randomItem();
+    thing.item.name = inputElement?.current?.value;
+    reflect.mutate.createItem(thing);
   };
 
   return (
     <>
       <div>
         add item
+        <input
+          placeholder={"item name"}
+          ref={inputElement}
+          type="text"
+        >
+        </input>
         <button
           onClick={() => handleCreateItem()}
         >

src/frontend/uses.module.css

@@ -17,4 +17,25 @@
 .itemsList {
   padding: 2rem;
   text-align: left;
+}
+
+.addItem {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  padding: 1rem 3rem;
+  margin: 1rem;
+}
+
+.input {
+  padding: .5rem 1rem;
+  background-color: hsl(0, 0%, 70%);
+  outline: none;
+  border: 1px solid transparent;
+}
+
+.button {
+  padding: .5rem 1rem;
+  border: 1px solid transparent;
+  background-color: hsl(0, 0%, 40%);
 }

src/frontend/uses.tsx

@@ -1,14 +1,24 @@
-import React from 'react'
+import React, { useRef } from 'react'
 import styles from './uses.module.css'
-import { useItemIDs } from "../datamodel/subscriptions";
+import { useItemIDs, useItemByID } from "../datamodel/subscriptions";
+import { randomItem } from "../datamodel/item";
 
 type UsesProps = {
   reflect: any
 }
 
 export default function Uses({ reflect } : UsesProps) {
-
   const itemIDs = useItemIDs(reflect);
+  const inputElement = useRef<HTMLInputElement>(null);
+
+  function handleCreateItem(){
+    const thing : any = randomItem();
+    thing.item.name = inputElement?.current?.value;
+    reflect.mutate.createItem(thing);
+    if (inputElement && inputElement.current) {
+      inputElement.current.value = "";
+    }
+  };
 
   return (
     <div className={styles.container}>
@@ -18,12 +28,43 @@ export default function Uses({ reflect } : UsesProps) {
         {itemIDs && itemIDs.map((id) => {
           return (
             <div key={id}>
-              {id}
+              <Item
+                reflect={reflect}
+                itemID={id}
+              />
             </div>
           )
         })
         }
       </div>
+      <div className={styles.addItem}>
+        <input
+          placeholder={"item name"}
+          ref={inputElement}
+          type="text"
+          className={styles.input}
+        ></input>
+        <button
+          className={styles.button}
+          onClick={() => handleCreateItem()}
+        >+</button>
+      </div>
+    </div>
+  )
+}
+
+type ItemProps = {
+  reflect: any
+  itemID: string
+}
+
+function Item({ reflect, itemID }: ItemProps) {
+  const item = useItemByID(reflect, itemID);
+  return (
+    item &&
+    <div>
+      {item.name}
     </div>
   )
 }
+