From 8057b85b118dbf044657dc2db9f6efd0badb8488 Mon Sep 17 00:00:00 2001 From: Christian Dalton Date: Sat, 28 Nov 2020 12:41:57 -0600 Subject: [PATCH] back to reducers... user ticket post working --- client/src/api/reducers.js | 14 ++++- .../form/ManageTicketForm/handlers.js | 48 +++-------------- .../form/ManageTicketForm/userView.js | 54 +++++++++---------- client/src/components/form/selectOptions.js | 9 ++-- .../src/routes/admin/NewTechnicianFlyout.js | 2 +- client/src/routes/admin/SelectTechnician.js | 8 ++- client/src/routes/user/user.js | 22 ++++++-- 7 files changed, 72 insertions(+), 85 deletions(-) diff --git a/client/src/api/reducers.js b/client/src/api/reducers.js index 10d49e5..0f9d8ea 100644 --- 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 index 5765f2d..49aa420 100644 --- 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,15 +43,7 @@ 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); @@ -70,7 +51,7 @@ export const handleDateChangeDispatch = (date, name, data, setData) => { 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 index 4dd45e1..f424f45 100644 --- a/client/src/components/form/ManageTicketForm/userView.js +++ b/client/src/components/form/ManageTicketForm/userView.js @@ -20,7 +20,7 @@ import { selectOptions } from "../selectOptions"; var _ = require("lodash"); -export const UserView = ({ data, setData }, ...props) => { +export const UserView = ({ data, dispatch }, ...props) => { return ( <> @@ -28,24 +28,24 @@ export const UserView = ({ data, setData }, ...props) => { handleFormFieldChange(e, data, setData)} - handleBlur={(e) => handleFormFieldBlur(e, data, setData)} + handleChange={(e) => handleFormFieldChange(e, data, dispatch)} + handleBlur={(e) => handleFormFieldBlur(e, data, dispatch)} /> handleFormFieldChange(e, data, setData)} - handleBlur={(e) => handleFormFieldBlur(e, data, setData)} + handleChange={(e) => handleFormFieldChange(e, data, dispatch)} + handleBlur={(e) => handleFormFieldBlur(e, data, dispatch)} /> handleFormFieldChange(e, data, setData)} - handleBlur={(e) => handleFormFieldBlur(e, data, setData)} + handleChange={(e) => handleFormFieldChange(e, data, dispatch)} + handleBlur={(e) => handleFormFieldBlur(e, data, dispatch)} /> @@ -53,8 +53,8 @@ export const UserView = ({ data, setData }, ...props) => { 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)} /> @@ -63,16 +63,16 @@ export const UserView = ({ data, setData }, ...props) => { handleFormFieldChange(e, data, setData)} - handleBlur={(e) => handleFormFieldBlur(e, data, setData)} + handleChange={(e) => handleFormFieldChange(e, data, dispatch)} + handleBlur={(e) => handleFormFieldBlur(e, data, dispatch)} /> handleFormFieldChange(e, data, setData)} - handleBlur={(e) => handleFormFieldBlur(e, data, setData)} + handleChange={(e) => handleFormFieldChange(e, data, dispatch)} + handleBlur={(e) => handleFormFieldBlur(e, data, dispatch)} /> @@ -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)} /> @@ -96,32 +96,32 @@ export const UserView = ({ data, setData }, ...props) => { handleFormFieldChange(e, data, setData)} - handleBlur={(e) => handleFormFieldBlur(e, data, setData)} + handleChange={(e) => handleFormFieldChange(e, data, dispatch)} + handleBlur={(e) => handleFormFieldBlur(e, data, dispatch)} /> handleFormFieldChange(e, data, setData)} - handleBlur={(e) => handleFormFieldBlur(e, data, setData)} + handleChange={(e) => handleFormFieldChange(e, data, dispatch)} + handleBlur={(e) => handleFormFieldBlur(e, data, dispatch)} /> handleFormFieldChange(e, data, setData)} - handleBlur={(e) => handleFormFieldBlur(e, data, setData)} + handleChange={(e) => handleFormFieldChange(e, data, dispatch)} + handleBlur={(e) => handleFormFieldBlur(e, data, dispatch)} /> handleFormFieldChange(e, data, setData)} - handleBlur={(e) => handleFormFieldBlur(e, data, setData)} + handleChange={(e) => handleFormFieldChange(e, data, dispatch)} + handleBlur={(e) => handleFormFieldBlur(e, data, dispatch)} /> @@ -134,11 +134,11 @@ export const UserView = ({ data, setData }, ...props) => { 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)} /> @@ -157,8 +157,8 @@ export const UserView = ({ data, setData }, ...props) => { handleFormFieldChange(e, data, setData)} - onBlur={(e) => handleFormFieldBlur(e, data, setData)} + onChange={(e) => handleFormFieldChange(e, data, dispatch)} + onBlur={(e) => handleFormFieldBlur(e, data, dispatch)} /> diff --git a/client/src/components/form/selectOptions.js b/client/src/components/form/selectOptions.js index f26e365..172bce9 100644 --- a/client/src/components/form/selectOptions.js +++ b/client/src/components/form/selectOptions.js @@ -2,14 +2,16 @@ 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" }, ], @@ -17,6 +19,7 @@ export const selectOptions = [ { 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 index eed746e..72e0b8d 100644 --- 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 index 9cf44ef..a7e8ac7 100644 --- 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) } /> diff --git a/client/src/routes/user/user.js b/client/src/routes/user/user.js index 220b3a5..f7b6a65 100644 --- 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 ( <> @@ -55,20 +67,20 @@ export const UserRoute = (props) => {

My Information

- + handleFormSubmit(e, data)} + onClick={(e) => internalFormSubmit(e, state.data)} > Submit - +