clear form on submit (#7)

Creighcl · Aug 24, 2021 · 7ed5b7d · 7ed5b7d
1 parent 269f6c3
commit 7ed5b7d
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 20 deletions.
diff --git a/src/app/item-add-form.js b/src/app/item-add-form.js
@@ -1,31 +1,21 @@
 import React, { useEffect, useState } from 'react';
-import Accordion from '@material-ui/core/Accordion';
-import AccordionSummary from '@material-ui/core/AccordionSummary';
-import AccordionDetails from '@material-ui/core/AccordionDetails';
-import Typography from '@material-ui/core/Typography';
-import Table from '@material-ui/core/Table';
-import TableHead from '@material-ui/core/TableHead';
-import TableBody from '@material-ui/core/TableBody';
-import TableFooter from '@material-ui/core/TableFooter';
-import TableRow from '@material-ui/core/TableRow';
-import TableCell from '@material-ui/core/TableCell';
 import Button from '@material-ui/core/Button';
-import DeleteForeverRoundedIcon from '@material-ui/icons/DeleteForeverRounded';
-import IconButton from '@material-ui/core/IconButton';
-import Card from '@material-ui/core/Card';
-import CardContent from '@material-ui/core/CardContent';
 import TextField from '@material-ui/core/TextField';
-
 import firebase from "firebase/app";
 import "firebase/auth";
-import numeral from 'numeral';
+
+const DEFAULT_FORM_STATE = {
+    nm: '',
+    qty: '',
+    ea: ''
+};
 
 const ItemAddForm = ({ projectKey = 'unspecified project' }) => {
-    const [state, setState] = useState({});
+    const [state, setState] = useState(DEFAULT_FORM_STATE);
 
     function onChange({ target: { name, value } }) {
         setState((prev) => ({
-            ...state,
+            ...prev,
             [name]: value
         }));
     }
@@ -34,7 +24,14 @@ const ItemAddForm = ({ projectKey = 'unspecified project' }) => {
         const { nm, qty, ea } = state;
         if (!nm || !qty || ! ea) return;
 
-        firebase.database().ref(`/open/${projectKey}/${nm}/`).set({ qty, ea });
+        firebase.database()
+            .ref(`/open/${projectKey}/${nm}/`)
+            .set({ qty, ea }, (error) => {
+                if (!error) {
+                  setState(DEFAULT_FORM_STATE);
+                }
+              });
+
     }
 
     return (

diff --git a/src/app/starter-component.js b/src/app/starter-component.js
@@ -42,6 +42,10 @@ const StarterComponent = () => {
         firebase.database().ref(`/open/${pkey}/${ikey}/`).set(null);
     }
 
+    function onNewProjectNameChange({ target: { value }}) {
+        setNewProjectName(value);
+    }
+
     useEffect(() => {
         // get all projects
         if (firebase.auth().currentUser !== null) {
@@ -122,7 +126,7 @@ const StarterComponent = () => {
             <Card style={ { marginTop: 48 } }>
                 <CardContent>
                     <Typography variant="h6">New Project</Typography>
-                    <TextField label="Project Name" variant="outlined" value={ newProjectName } onChange={ ({ target: { value }}) => setNewProjectName(value) } />
+                    <TextField label="Project Name" variant="outlined" value={ newProjectName } onChange={ onNewProjectNameChange } />
                     <Button variant="contained" color="primary" onClick={ createNewProject }>
                         Add New
                     </Button>