I have a function called newRecord which resets the form among other things...
After creating a new record, I try to call the function but it throws an error and says the function does not exist. Whenever I remove the call to the function, everything works perfectly...
Here is the code for the whole page.
Any idea why I cannot access the function? TIA
import React from 'react'
import UserList from './UserList';
import { useState, useEffect } from 'react';
import axios from '../api/axios';
import TextField from '@mui/material/TextField';
import InputMask from "react-input-mask"
import TFSelect from "./TFSelect"
const Users = ({setPageLoading}) => {
const [users, setUsers] = useState([]);
const [filter, setFilter] = useState('employees/*/where active=1 and hidden=0 order by first_name');
const [fetchError, setFetchError] = useState(null);
const [isLoading, setIsLoading] = useState(true);
const [search, setSearch] = useState('');
const [phone, set_phone] = useState('');
const [first_name, set_first_name] = useState('');
const [last_name, set_last_name] = useState('');
const [email, set_email] = useState('');
const [display_name, set_display_name] = useState('');
const [pin, set_pin] = useState('');
const [address, set_address] = useState('');
const [address2, set_address2] = useState('');
const [city, set_city] = useState('PAHRUMP');
const [state, set_state] = useState('NV');
const [zip, set_zip] = useState('89048');
const [active, set_active] = useState(1);
const [supervisor, set_supervisor] = useState(0);
const [administrator, set_administrator] = useState(0);
const [cs, set_cs] = useState(0);
const [shoppe, set_shoppe] = useState(0);
const [can_start_drawer, set_can_start_drawer] = useState(0);
const [can_increase_drawer, set_can_increase_drawer] = useState(0);
const [can_strip_drawer, set_can_strip_drawer] = useState(0);
const [can_audit_drawer, set_can_audit_drawer] = useState(0);
const [can_close_drawer, set_can_close_drawer] = useState(0);
const [can_assign_drawer, set_can_assign_drawer] = useState(0);
const [can_approve_time_corrections, set_can_approve_time_corrections] = useState(0);
const [can_open_drawer, set_can_open_drawer] = useState(0);
const [can_change_message, set_can_change_message] = useState(0);
const [can_void_sale, set_can_void_sale] = useState(0);
const [can_refund, set_can_refund] = useState(0);
const [can_override_drawer_assignment, set_can_override_drawer_assignment] = useState(0);
const [can_view_history, set_can_view_history] = useState(0);
const [can_view_summary, set_can_view_summary] = useState(0);
const [can_end_of_day, set_can_end_of_day] = useState(0);
const [currentRecord, setCurrentRecord] = useState(false);
const [errMsg, setErrMsg] = useState('');
const [successMsg, setSuccessMsg] = useState('');
function newRecord() {
setCurrentRecord(false)
set_first_name("")
set_last_name("")
set_email("")
set_display_name("")
set_phone("")
set_pin("")
set_address("")
set_address2("")
set_city("")
set_state("")
set_zip("")
set_active(1)
set_supervisor(0)
set_administrator(0)
set_cs(0)
set_shoppe(0)
set_can_start_drawer(0)
set_can_increase_drawer(0)
set_can_strip_drawer(0)
set_can_assign_drawer(0)
set_can_audit_drawer(0)
set_can_close_drawer(0)
set_can_approve_time_corrections(0)
set_can_open_drawer(0)
set_can_change_message(0)
set_can_void_sale(0)
set_can_refund(0)
set_can_override_drawer_assignment(0)
set_can_view_history(0)
set_can_view_summary(0)
set_can_end_of_day(0)
document.getElementById('first-name').focus()
}
useEffect(() => {
setIsLoading(true)
setPageLoading(true)
setSearch('')
const fetchUsers = () => {
axios.get(filter, {
headers: {
'Accept': 'application/json',
}
})
.then(response => {
setUsers(response.data)
setFetchError(null)
})
.catch(err => setFetchError(err.message))
.finally(() => { setIsLoading(false); setPageLoading(false)})
};
setTimeout(() => fetchUsers(), 300);
}, [filter])
let d = new Date();
d.setDate(d.getDate() - 15);
d = d.toISOString().split('T')[0];
const handleSubmit = async (e) => {
e.preventDefault();
setPageLoading(true)
if (currentRecord) { // Updating Existing Record
const listItems = users.map((user) => user.id === currentRecord ? { ...user, first_name, last_name, email, display_name, phone, address, address2, city, state, zip, active, supervisor, administrator, cs, shoppe, can_start_drawer, can_increase_drawer, can_strip_drawer, can_assign_drawer, can_audit_drawer, can_close_drawer, can_approve_time_corrections, can_open_drawer, can_change_message, can_void_sale, can_refund, can_override_drawer_assignment, can_view_history, can_view_summary, can_end_of_day } : user);
setUsers(listItems);
}
else { // Creating new Record
const newRecord = { first_name, last_name, email, display_name, phone, address, address2, city, state, zip, active, supervisor, administrator, cs, shoppe, can_start_drawer, can_increase_drawer, can_strip_drawer, can_assign_drawer, can_audit_drawer, can_close_drawer, can_approve_time_corrections, can_open_drawer, can_change_message, can_void_sale, can_refund, can_override_drawer_assignment, can_view_history, can_view_summary, can_end_of_day, pin };
try {
const response = await axios.post('/employees', newRecord);
const allRecords = [...users, response.data];
setUsers(allRecords);
setErrMsg(false)
setSuccessMsg("Data sucessfully saved...")
newRecord()
setTimeout(
function() {
setSuccessMsg(false)
}, 5000);
} catch (err) {
setSuccessMsg(false)
if (!err?.response) {
setErrMsg('Sorry, There was no response from the server... Please try again later.');
} else if (err.response?.status === 401) {
setErrMsg('Sorry, an error occured and your data has not been saved... Please try again later.');
} else {
setErrMsg('An unknown errror has occured... Please try again later.');
}
}
finally {
setPageLoading(false)
}
}
}
return (
<div>
<div className='text-center'>
<div className="btn-group" role="group" aria-label="Basic radio toggle button group">
<input type="radio" className="btn-check" name="btnradio" id="btnradio1" defaultChecked onClick={() => { setFilter('employees/*/where active=1 and hidden=0') }} />
<label className="btn btn-outline-secondary" htmlFor="btnradio1">Active</label>
<input type="radio" className="btn-check" name="btnradio" id="btnradio2" onClick={() => { setFilter(`employees/*/where employees.id not in (select c.employee_id from punches c where c.timestamp>"${d}") AND employees.active=1 AND employees.hidden=0`) }} />
<label className="btn btn-outline-secondary" htmlFor="btnradio2">Inactive</label>
<input type="radio" className="btn-check" name="btnradio" id="btnradio3" onClick={() => { setFilter('employees/*/where active=0 and hidden=0') }} />
<label className="btn btn-outline-secondary" htmlFor="btnradio3">Disabled</label>
<input type="radio" className="btn-check" name="btnradio" id="btnradio4" onClick={() => { setFilter('employees/*/where hidden=0') }} />
<label className="btn btn-outline-secondary" htmlFor="btnradio4">All</label>
</div>
</div>
<div className="row mt-3">
<div className="col-md-4 mb-2">
<TextField
value={search}
onChange={(e) => setSearch(e.target.value)}
fullWidth
label="Search / Filter Users"
variant="outlined"
size="small"
id='search'
role='searchbox'
autoComplete="off" />
</div>
<div className="col-md-8 mb-2">
<div className="row">
<div className="col-md-4 mb-4">
<button onClick={ newRecord } className="w-100 btn btn-outline-primary">Create New User</button>
</div>
</div>
</div>
</div>
<div className='row'>
<div className="col-4">
{isLoading && <p>Loading Users...</p>}
{fetchError && <p style={{ color: "red" }}>{`Error: ${fetchError}`}</p>}
{!fetchError && !isLoading && <UserList users={users.filter(item => ((item.first_name " " item.last_name).toLowerCase()).includes(search.toLowerCase()))} set_first_name={set_first_name} set_last_name={set_last_name} set_email={set_email} set_display_name={set_display_name} set_phone={set_phone} set_pin={set_pin} set_address={set_address} set_address2={set_address2} set_city={set_city} set_state={set_state} set_zip={set_zip} set_active={set_active} set_supervisor={set_supervisor} set_administrator={set_administrator} set_cs={set_cs} set_shoppe={set_shoppe} set_can_start_drawer={set_can_start_drawer} set_can_increase_drawer={set_can_increase_drawer} set_can_strip_drawer={set_can_strip_drawer} set_can_audit_drawer={set_can_audit_drawer} set_can_close_drawer={set_can_close_drawer} set_can_assign_drawer={set_can_assign_drawer} set_can_approve_time_corrections={set_can_approve_time_corrections} set_can_open_drawer={set_can_open_drawer} set_can_change_message={set_can_change_message} set_can_void_sale={set_can_void_sale} set_can_refund={set_can_refund} set_can_override_drawer_assignment={set_can_override_drawer_assignment} set_can_view_history={set_can_view_history} set_can_view_summary={set_can_view_summary} set_can_end_of_day={set_can_end_of_day} setCurrentRecord={setCurrentRecord}/>}
</div>
<div className="col-8">
{errMsg ? <div className="row"><div className="col-12 mb-4 alert alert-danger fw-bold">{errMsg}</div></div> : ""}
{successMsg ? <div className="row"><div className="col-12 mb-4 alert alert-success fw-bold">{successMsg}</div></div> : ""}
<form onSubmit={handleSubmit}>
<div className='row'>
<div className='col-md-2 mb-3'>
<TFSelect handlerFunction={set_active} name={active} display={"Active"} />
</div>
<div className='col-md-2 mb-3'>
<TFSelect handlerFunction={set_shoppe} name={shoppe} display={"POS Access"} />
</div>
<div className='col-md-2 mb-3'>
<TFSelect handlerFunction={set_supervisor} name={supervisor} display={"Supervisor"} />
</div>
<div className='col-md-2 mb-3'>
<TFSelect handlerFunction={set_administrator} name={administrator} display={"Administrator"} />
</div>
<div className='col-md-2 mb-5'>
<TFSelect handlerFunction={set_cs} name={cs} display={"CS"} />
</div>
</div>
<div className='row'>
<div className='col-md-4 mb-3'>
<TextField id="first-name" required value={first_name} onChange={(e) => set_first_name(e.target.value)} fullWidth label="First Name" variant="outlined" size="small" autoComplete="off" />
</div>
<div className='col-md-4 mb-3'>
<TextField required value={last_name} onChange={(e) => set_last_name(e.target.value)} fullWidth label="Last Name" variant="outlined" size="small" autoComplete="off" />
</div>
<div className='col-md-4 mb-3'>
<TextField required value={display_name} onChange={(e) => set_display_name(e.target.value)} fullWidth label="Display Name" variant="outlined" size="small" autoComplete="off" />
</div>
</div>
<div className='row'>
<div className='col-md-4 mb-3'>
<TextField value={address} onChange={(e) => set_address(e.target.value)} fullWidth label="Address" variant="outlined" size="small" autoComplete="off" />
</div>
<div className='col-md-2 mb-3'>
<TextField value={address2} onChange={(e) => set_address2(e.target.value)} fullWidth label="Address 2" variant="outlined" size="small" autoComplete="off" />
</div>
<div className='col-md-2 mb-3'>
<TextField value={city} onChange={(e) => set_city(e.target.value)} fullWidth label="City" variant="outlined" size="small" autoComplete="off" />
</div>
<div className='col-md-2 mb-3'>
<TextField value={state} onChange={(e) => set_state(e.target.value)} fullWidth label="State" variant="outlined" size="small" autoComplete="off" />
</div>
<div className='col-md-2 mb-3'>
<TextField value={zip} onChange={(e) => set_zip(e.target.value)} fullWidth label="ZIP" variant="outlined" size="small" autoComplete="off" />
</div>
</div>
<div className='row'>
<div className='col-md-4 mb-3'>
<TextField value={email} onChange={(e) => set_email(e.target.value)} fullWidth label="Email Address" variant="outlined" size="small" autoComplete="off" />
</div>
<div className='col-md-4 mb-3'>
<InputMask mask="(999) 999-9999" alwaysShowMask={false} value={phone} disabled={false} onChange={(e) => set_phone(e.target.value)} maskChar=" ">
{() => <TextField fullWidth label="Phone Number" variant="outlined" size="small" autoComplete="off" />}
</InputMask>
</div>
<div className='col-md-4 mb-5'>
<TextField value={pin} onChange={(e) => set_pin(e.target.value)} fullWidth label="PIN" variant="outlined" size="small" autoComplete="off" />
</div>
</div>
<div className='row'>
<div className='col-md-2 mb-3'>
<TFSelect handlerFunction={set_can_start_drawer} name={can_start_drawer} display={"Start Drawer"} />
</div>
<div className='col-md-2 mb-3'>
<TFSelect handlerFunction={set_can_increase_drawer} name={can_increase_drawer} display={"Increase Cash"} />
</div>
<div className='col-md-2 mb-3'>
<TFSelect handlerFunction={set_can_strip_drawer} name={can_strip_drawer} display={"Decrease Cash"} />
</div>
<div className='col-md-2 mb-3'>
<TFSelect handlerFunction={set_can_audit_drawer} name={can_audit_drawer} display={"Count Drawer"} />
</div>
<div className='col-md-2 mb-3'>
<TFSelect handlerFunction={set_can_close_drawer} name={can_close_drawer} display={"Close Drawer"} />
</div>
<div className='col-md-2 mb-3'>
<TFSelect handlerFunction={set_can_assign_drawer} name={can_assign_drawer} display={"Assign Drawer"} />
</div>
</div>
<div className='row'>
<div className='col-md-2 mb-3'>
<TFSelect handlerFunction={set_can_approve_time_corrections} name={can_approve_time_corrections} display={"Approve Time Corrections"} />
</div>
<div className='col-md-2 mb-3'>
<TFSelect handlerFunction={set_can_open_drawer} name={can_open_drawer} display={"No Sale"} />
</div>
<div className='col-md-2 mb-3'>
<TFSelect handlerFunction={set_can_change_message} name={can_change_message} display={"Change Display Message"} />
</div>
<div className='col-md-2 mb-3'>
<TFSelect handlerFunction={set_can_void_sale} name={can_void_sale} display={"Void Sale"} />
</div>
<div className='col-md-2 mb-3'>
<TFSelect handlerFunction={set_can_refund} name={can_refund} display={"Issue Refunds"} />
</div>
<div className='col-md-2 mb-3'>
<TFSelect handlerFunction={set_can_override_drawer_assignment} name={can_override_drawer_assignment} display={"Use All Drawers"} />
</div>
</div>
<div className='row'>
<div className='col-md-2 mb-3'>
<TFSelect handlerFunction={set_can_view_history} name={can_view_history} display={"View History"} />
</div>
<div className='col-md-2 mb-3'>
<TFSelect handlerFunction={set_can_view_summary} name={can_view_summary} display={"View Summary"} />
</div>
<div className='col-md-2 mb-5'>
<TFSelect handlerFunction={set_can_end_of_day} name={can_end_of_day} display={"End of Day"} />
</div>
</div>
<div className="row">
<div className="col-md-4">
<button type="submit" className="btn btn-primary w-100">{ currentRecord ? "Update User" : "Save New User"}</button>
</div>
</div>
</form>
</div>
</div>
</div>
)
}
export default Users
CodePudding user response：
You have a function called newRecord, then you create an object constant called newRecord then try to call the newRecord function. Use a separate name for the object, for example newRecordObj:
const newRecordObj = { first_name, last_name, email, display_name, phone, address, address2, city, state, zip, active, supervisor, administrator, cs, shoppe, can_start_drawer, can_increase_drawer, can_strip_drawer, can_assign_drawer, can_audit_drawer, can_close_drawer, can_approve_time_corrections, can_open_drawer, can_change_message, can_void_sale, can_refund, can_override_drawer_assignment, can_view_history, can_view_summary, can_end_of_day, pin };
try {
const response = await axios.post('/employees', newRecordObj);
...
...