Disallow creating an event without a name or category (#6)

neerajsamtani · Dec 22, 2023 · f9526da · f9526da
1 parent c19a0e5
commit f9526da
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 12 deletions.
diff --git a/client/src/CreateEventModal.jsx b/client/src/CreateEventModal.jsx
@@ -25,10 +25,12 @@ export default function CreateEventModal({ show, onHide }) {
   }, [selectedLineItems, show])
 
   const name = useField("text")
-  const category = useField("text")
+  const category = useField("text", "All")
   const date = useField("date")
   const isDuplicateTransaction = useField("checkbox")
 
+  const disableSubmit = name.value === "" || category.value === "" || category.value === "All"
+
   const [notification, setNotification] = useState(
     {
       heading: "Notification",
@@ -37,6 +39,14 @@ export default function CreateEventModal({ show, onHide }) {
     }
   )
 
+  const closeModal = () => {
+    name.setEmpty()
+    category.setEmpty()
+    date.setEmpty()
+    isDuplicateTransaction.setCustomValue(false);
+    onHide()
+  }
+
   const createEvent = (name, category) => {
     var REACT_APP_API_ENDPOINT = String(process.env.REACT_APP_API_ENDPOINT);
     var newEvent = {
@@ -52,20 +62,16 @@ export default function CreateEventModal({ show, onHide }) {
         console.log(response.data);
       })
       .then(() => {
-        name.setEmpty()
-        category.setEmpty()
-        date.setEmpty()
+        closeModal()
         lineItemsDispatch({
           type: 'remove_line_items',
           lineItemIds: selectedLineItemIds
         })
-        isDuplicateTransaction.setCustomValue(false);
         setNotification({
           ...notification,
           showNotification: true
         })
         // TODO: Uncheck all checkboxes
-        onHide();
       })
       .catch(error => console.log(error));
   }
@@ -75,7 +81,7 @@ export default function CreateEventModal({ show, onHide }) {
       <Notification notification={notification} setNotification={setNotification} />
       <Modal
         show={show}
-        onHide={onHide}
+        onHide={closeModal}
         size="lg"
         aria-labelledby="contained-modal-title-vcenter"
         centered
@@ -123,8 +129,8 @@ export default function CreateEventModal({ show, onHide }) {
           </Form>
         </Modal.Body>
         <Modal.Footer>
-          <Button onClick={onHide} variant="secondary">Cancel</Button>
-          <Button onClick={() => createEvent(name, category)} variant="primary">Submit</Button>
+          <Button onClick={closeModal} variant="secondary">Cancel</Button>
+          <Button onClick={() => createEvent(name, category)} variant="primary" disabled={disableSubmit}>Submit</Button>
         </Modal.Footer>
       </Modal>
     </Fragment>

diff --git a/client/src/hooks/useField.jsx b/client/src/hooks/useField.jsx
@@ -1,7 +1,7 @@
 import { useState } from 'react'
 
-export const useField = (type) => {
-    const [value, setValue] = useState('')
+export const useField = (type, defaultState = "") => {
+    const [value, setValue] = useState(defaultState)
 
     const setEmpty = () => {
         setValue('')
@@ -22,4 +22,4 @@ export const useField = (type) => {
         setCustomValue,
         setEmpty
     }
-}
+}