back to reducers... user ticket post working

cdalton713 · Nov 28, 2020 · 8057b85 · 8057b85
1 parent d5b31c5
commit 8057b85
Show file tree

Hide file tree

Showing 7 changed files with 72 additions and 85 deletions.
diff --git a/client/src/api/reducers.js b/client/src/api/reducers.js
@@ -1,14 +1,24 @@
-import { workLogFields } from "../components/form/ManageTicketForm/fields";
+import {
+  fields,
+  workLogFields,
+} from "../components/form/ManageTicketForm/fields";
 
 export const dataFetchReducer = (state, action) => {
   switch (action.type) {
+    case "CLEAR_FORM":
+      const newData = state.data;
+      newData.map((o) => (o.value = ""));
+      return {
+        ...state,
+        data: newData,
+      };
     case "FETCH_INIT":
       return {
         ...state,
         isLoading: true,
         isError: false,
         allTickets: {},
-        workLogData: { ...workLogFields },
+        data: fields,
       };
     case "FETCH_SUCCESS":
       return {

diff --git a/client/src/components/form/ManageTicketForm/handlers.js b/client/src/components/form/ManageTicketForm/handlers.js
@@ -8,17 +8,18 @@ const postData = async (endpoint, data) => {
   return response;
 };
 
-export const handleFormSubmit = (e, data) => {
+export const handleFormSubmit = async (e, data, endpoint) => {
   const errors = _.find(data, ["error", true]);
   if (errors === undefined) {
     let d = data.map((o) => ({ [o.name]: o.value }));
     const dd = Object.assign({}, ...d);
 
-    const response = postData("/user", dd);
+    const response = await postData(endpoint, dd);
     addToast({
       title: "Ticket Submitted!",
       color: "success",
     });
+
     return response;
   } else {
     addToast({
@@ -30,19 +31,7 @@ export const handleFormSubmit = (e, data) => {
   }
 };
 
-export const handleFormFieldChange = (e, data, setData) => {
-  const target = e.target;
-  const value = target.value;
-  const name = target.name;
-
-  const newData = data;
-  const index = newData.findIndex((o) => o.name === name);
-
-  newData[index].value = value;
-  setData(newData);
-};
-
-export const handleFormFieldChangeDispatch = (e, data, dispatch) => {
+export const handleFormFieldChange = (e, data, dispatch) => {
   const target = e.target;
   const value = target.value;
   const name = target.name;
@@ -54,23 +43,15 @@ export const handleFormFieldChangeDispatch = (e, data, dispatch) => {
   dispatch({ type: "UPDATE_DATA", payload: newData });
 };
 
-export const handleDateChange = (date, name, data, dispatch) => {
-  const newData = data;
-  const index = newData.findIndex((o) => o.name === name);
-
-  newData[index].value = date.toJSON();
-  dispatch({ type: "UPDATE_DATA", payload: newData });
-};
-
-export const handleDateChangeDispatch = (date, name, data, setData) => {
+export const handleDateChange = (date, name, data, setData) => {
   const newData = data;
   const index = newData.findIndex((o) => o.name === name);
 
   newData[index].value = date.toJSON();
   setData(newData);
 };
 
-export const handleFormFieldBlurDispatch = (e, data, dispatch) => {
+export const handleFormFieldBlur = (e, data, dispatch) => {
   const name = e.target.name;
   const value = e.target.value;
 
@@ -86,20 +67,3 @@ export const handleFormFieldBlurDispatch = (e, data, dispatch) => {
 
   dispatch({ type: "UPDATE_DATA", payload: newData });
 };
-
-export const handleFormFieldBlur = (e, data, setData) => {
-  const name = e.target.name;
-  const value = e.target.value;
-
-  const newData = data;
-  const index = newData.findIndex((o) => o.name === name);
-
-  if (value === "") {
-    newData[index].error = true;
-    newData[index].error_msg = "required";
-  } else {
-    newData[index].error = false;
-  }
-
-  setData(newData);
-};
diff --git a/client/src/components/form/ManageTicketForm/userView.js b/client/src/components/form/ManageTicketForm/userView.js
@@ -20,41 +20,41 @@ import { selectOptions } from "../selectOptions";
 
 var _ = require("lodash");
 
-export const UserView = ({ data, setData }, ...props) => {
+export const UserView = ({ data, dispatch }, ...props) => {
   return (
     <>
       <EuiFlexGroup style={{ maxWidth: 1000 }}>
         <EuiFlexItem>
           <MyTextField
             name={"first_name"}
             data={data}
-            handleChange={(e) => handleFormFieldChange(e, data, setData)}
-            handleBlur={(e) => handleFormFieldBlur(e, data, setData)}
+            handleChange={(e) => handleFormFieldChange(e, data, dispatch)}
+            handleBlur={(e) => handleFormFieldBlur(e, data, dispatch)}
           />
         </EuiFlexItem>
         <EuiFlexItem>
           <MyTextField
             name={"last_name"}
             data={data}
-            handleChange={(e) => handleFormFieldChange(e, data, setData)}
-            handleBlur={(e) => handleFormFieldBlur(e, data, setData)}
+            handleChange={(e) => handleFormFieldChange(e, data, dispatch)}
+            handleBlur={(e) => handleFormFieldBlur(e, data, dispatch)}
           />
         </EuiFlexItem>
         <EuiFlexItem>
           <MyTextField
             name={"lsu_id"}
             data={data}
-            handleChange={(e) => handleFormFieldChange(e, data, setData)}
-            handleBlur={(e) => handleFormFieldBlur(e, data, setData)}
+            handleChange={(e) => handleFormFieldChange(e, data, dispatch)}
+            handleBlur={(e) => handleFormFieldBlur(e, data, dispatch)}
           />
         </EuiFlexItem>
         <EuiFlexItem>
           <MySelectField
             name={"department"}
             data={data}
             selectOptions={selectOptions.find((o) => o.name === "department")}
-            handleChange={(e) => handleFormFieldChange(e, data, setData)}
-            handleBlur={(e) => handleFormFieldBlur(e, data, setData)}
+            handleChange={(e) => handleFormFieldChange(e, data, dispatch)}
+            handleBlur={(e) => handleFormFieldBlur(e, data, dispatch)}
           />
         </EuiFlexItem>
       </EuiFlexGroup>
@@ -63,16 +63,16 @@ export const UserView = ({ data, setData }, ...props) => {
           <MyTextField
             name={"email"}
             data={data}
-            handleChange={(e) => handleFormFieldChange(e, data, setData)}
-            handleBlur={(e) => handleFormFieldBlur(e, data, setData)}
+            handleChange={(e) => handleFormFieldChange(e, data, dispatch)}
+            handleBlur={(e) => handleFormFieldBlur(e, data, dispatch)}
           />
         </EuiFlexItem>
         <EuiFlexItem grow={false} style={{ width: 200 }}>
           <MyTextField
             name={"phone_number"}
             data={data}
-            handleChange={(e) => handleFormFieldChange(e, data, setData)}
-            handleBlur={(e) => handleFormFieldBlur(e, data, setData)}
+            handleChange={(e) => handleFormFieldChange(e, data, dispatch)}
+            handleBlur={(e) => handleFormFieldBlur(e, data, dispatch)}
           />
         </EuiFlexItem>
       </EuiFlexGroup>
@@ -86,8 +86,8 @@ export const UserView = ({ data, setData }, ...props) => {
             name={"priority"}
             data={data}
             selectOptions={selectOptions.find((o) => o.name === "priority")}
-            handleChange={(e) => handleFormFieldChange(e, data, setData)}
-            handleBlur={(e) => handleFormFieldBlur(e, data, setData)}
+            handleChange={(e) => handleFormFieldChange(e, data, dispatch)}
+            handleBlur={(e) => handleFormFieldBlur(e, data, dispatch)}
           />
         </EuiFlexItem>
       </EuiFlexGroup>
@@ -96,32 +96,32 @@ export const UserView = ({ data, setData }, ...props) => {
           <MyTextField
             name={"manufacturer"}
             data={data}
-            handleChange={(e) => handleFormFieldChange(e, data, setData)}
-            handleBlur={(e) => handleFormFieldBlur(e, data, setData)}
+            handleChange={(e) => handleFormFieldChange(e, data, dispatch)}
+            handleBlur={(e) => handleFormFieldBlur(e, data, dispatch)}
           />
         </EuiFlexItem>
         <EuiFlexItem>
           <MyTextField
             name={"model"}
             data={data}
-            handleChange={(e) => handleFormFieldChange(e, data, setData)}
-            handleBlur={(e) => handleFormFieldBlur(e, data, setData)}
+            handleChange={(e) => handleFormFieldChange(e, data, dispatch)}
+            handleBlur={(e) => handleFormFieldBlur(e, data, dispatch)}
           />
         </EuiFlexItem>
         <EuiFlexItem>
           <MyTextField
             name={"operating_system"}
             data={data}
-            handleChange={(e) => handleFormFieldChange(e, data, setData)}
-            handleBlur={(e) => handleFormFieldBlur(e, data, setData)}
+            handleChange={(e) => handleFormFieldChange(e, data, dispatch)}
+            handleBlur={(e) => handleFormFieldBlur(e, data, dispatch)}
           />
         </EuiFlexItem>
         <EuiFlexItem>
           <MyTextField
             name={"operating_system_version"}
             data={data}
-            handleChange={(e) => handleFormFieldChange(e, data, setData)}
-            handleBlur={(e) => handleFormFieldBlur(e, data, setData)}
+            handleChange={(e) => handleFormFieldChange(e, data, dispatch)}
+            handleBlur={(e) => handleFormFieldBlur(e, data, dispatch)}
           />
         </EuiFlexItem>
       </EuiFlexGroup>
@@ -134,11 +134,11 @@ export const UserView = ({ data, setData }, ...props) => {
           <MySelectField
             name={"problem_category"}
             data={data}
-            handleChange={(e) => handleFormFieldChange(e, data, setData)}
+            handleChange={(e) => handleFormFieldChange(e, data, dispatch)}
             selectOptions={selectOptions.find(
               (o) => o.name === "problem_category"
             )}
-            handleBlur={(e) => handleFormFieldBlur(e, data, setData)}
+            handleBlur={(e) => handleFormFieldBlur(e, data, dispatch)}
           />
         </EuiFlexItem>
       </EuiFlexGrid>
@@ -157,8 +157,8 @@ export const UserView = ({ data, setData }, ...props) => {
             <EuiTextArea
               placeholder={"Computer crashes when..."}
               name={_.find(data, ["name", "description"]).name}
-              onChange={(e) => handleFormFieldChange(e, data, setData)}
-              onBlur={(e) => handleFormFieldBlur(e, data, setData)}
+              onChange={(e) => handleFormFieldChange(e, data, dispatch)}
+              onBlur={(e) => handleFormFieldBlur(e, data, dispatch)}
             />
           </EuiFormRow>
         </EuiFlexItem>

diff --git a/client/src/components/form/selectOptions.js b/client/src/components/form/selectOptions.js
@@ -2,21 +2,24 @@ export const selectOptions = [
   {
     name: "priority",
     options: [
-      { value: "low", text: "Low" },
-      { value: "medium", text: "Medium" },
-      { value: "high", text: "High" },
+      { value: "", text: "" },
+      { value: "1", text: "Low" },
+      { value: "2", text: "Medium" },
+      { value: "3", text: "High" },
     ],
   },
   {
     name: "problem_category",
     options: [
+      { value: "", text: "" },
       { value: "general_help", text: "General Help" },
       { value: "problem_2", text: "Problem 2" },
     ],
   },
   {
     name: "department",
     options: [
+      { value: "", text: "" },
       { value: "accounting", text: "Accounting" },
       {
         value: "administrative_foundation_se",

diff --git a/client/src/routes/admin/NewTechnicianFlyout.js b/client/src/routes/admin/NewTechnicianFlyout.js
@@ -33,7 +33,7 @@ export const NewTechnicianFlyout = (
   const showFlyout = () => setIsFlyoutVisible(true);
 
   const localFormSubmit = (e, data) => {
-    if (handleFormSubmit(e, data) != null) {
+    if (handleFormSubmit(e, data, "/user") != null) {
       setIsFlyoutVisible(false);
     }
   };

diff --git a/client/src/routes/admin/SelectTechnician.js b/client/src/routes/admin/SelectTechnician.js
@@ -15,11 +15,9 @@ import {
 } from "@elastic/eui";
 import { MySelectField } from "../../components/form/MySelectField";
 import {
-  handleDateChangeDispatch,
+  handleDateChange,
   handleFormFieldBlur,
-  handleFormFieldBlurDispatch,
   handleFormFieldChange,
-  handleFormFieldChangeDispatch,
 } from "../../components/form/ManageTicketForm/handlers";
 import { NewTechnicianFlyout } from "./NewTechnicianFlyout";
 import { Debug } from "../../components/debug/debug";
@@ -100,10 +98,10 @@ export const SelectTechnician = ({ technician, setTechnician }, ...props) => {
                   data={state.data}
                   selectOptions={state.selectTechnicianOptions}
                   handleChange={(e) => {
-                    handleFormFieldChangeDispatch(e, state.data, dispatch);
+                    handleFormFieldChange(e, state.data, dispatch);
                   }}
                   handleBlur={(e) =>
-                    handleFormFieldBlurDispatch(e, state.data, dispatch)
+                    handleFormFieldBlur(e, state.data, dispatch)
                   }
                 />
                 <EuiSpacer />

diff --git a/client/src/routes/user/user.js b/client/src/routes/user/user.js
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useReducer, useState } from "react";
 
 import {
   EuiPage,
@@ -31,12 +31,24 @@ import { UserView } from "../../components/form/ManageTicketForm/userView";
 import { fields } from "../../components/form/ManageTicketForm/fields";
 import { handleFormSubmit } from "../../components/form/ManageTicketForm/handlers";
 import { Debug } from "../../components/debug/debug";
+import { dataFetchReducer } from "../../api/reducers";
+import { selectTechnicianOptions_default } from "../../components/form/ManageTechnicianForm/fields";
 
 var _ = require("lodash");
 
 export const UserRoute = (props) => {
-  const [data, setData] = useState(fields);
+  const [state, dispatch] = useReducer(dataFetchReducer, {
+    isLoading: false,
+    isError: false,
+    data: fields,
+  });
 
+  const internalFormSubmit = async (e, data) => {
+    const response = await handleFormSubmit(e, data, "/ticket");
+    if (response.status === 201) {
+      dispatch({ type: "CLEAR_FORM" });
+    }
+  };
   return (
     <>
       <NavBar location={props.location} />
@@ -55,20 +67,20 @@ export const UserRoute = (props) => {
                 <h3>My Information</h3>
               </EuiTitle>
               <EuiForm>
-                <UserView data={data} setData={setData} />
+                <UserView data={state.data} dispatch={dispatch} />
                 <EuiSpacer />
                 <EuiFlexGroup gutterSize="s" alignItems="center">
                   <EuiFlexItem grow={false}>
                     <EuiButton
                       type={"submit"}
-                      onClick={(e) => handleFormSubmit(e, data)}
+                      onClick={(e) => internalFormSubmit(e, state.data)}
                     >
                       Submit
                     </EuiButton>
                   </EuiFlexItem>
                 </EuiFlexGroup>
               </EuiForm>
-              <Debug data={data} />
+              <Debug data={state.data} />
             </EuiPageContentBody>
           </EuiPageContent>
         </EuiPageBody>