I have a checklist. I want to check a box on the checklist and then have the react state update and then send a put request to my rails backend to have the checklist object saved in the backend. I am having several problems
-
I am having trouble getting react to render the checkboxes as checked when the corresponding value is true and unchecked when the corresponding value is false
-
my checkboxes will update the state (or at least create a pending update) when i check the boxes but do nothing when I uncheck them
-
my data always gets sent to my backend as false for all checklist values even if some of them are checked
here is my checklist code
import React, { useState } from 'react'
import checklist from '../reducers/checklist'
export default function Checklist(props) {
const [completed_app, setCompleted_app] = useState(props.completed_app ? props.completed_app : false)
const [edcon_call, setEdcon_call] = useState(props.edcon_call ? true : false)
const [enrollment, setEnrollment] = useState(props.enrollment ? true : false)
const [inform_team, setInform_team] = useState(props.inform_team ? true : false)
const [parent_call, setParent_call] = useState(props.parent_call ? true : false)
const [parents, setParents] = useState(props.parents ? true : false)
const [recieve_testing, setRecieve_testing] = useState(props.recieve_testing ? true : false)
const [review_testing, setReview_testing] = useState(props.review_testing ? true : false)
const [staffing, setStaffing] = useState(props.staffing ? true : false)
const [steps_to_enroll, setSteps_to_enroll] = useState(props.steps_to_enroll ? true : false)
const [submitted_docs, setSubmitted_docs] = useState(props.submitted_docs ? true : false)
const [team_assigned, setTeam_assigned] = useState(props.team_assigned? true : false)
const [telos_hq, setTelos_hq] = useState(props.telos_hq ? true : false)
const [tour_scheduled, setTour_scheduled] = useState(props.tour_scheduled ? true : false)
const [vetting, setVetting] = useState(props.vetting? true : false)
const [w_therapist_call, setW_therapist_call] = useState(props.w_therapist_call ? true : false)
const checklistObj = {
completed_app,
edcon_call,
enrollment,
inform_team,
parent_call,
parents,
recieve_testing,
review_testing,
staffing,
steps_to_enroll,
submitted_docs,
team_assigned,
telos_hq,
tour_scheduled,
vetting,
w_therapist_call,
}
const updateCheck = (item) => {
switch(item){
case 'recieve_testing':
setRecieve_testing(!recieve_testing)
break;
case 'review_testing':
setReview_testing(!review_testing)
break;
case 'edcon_call':
setEdcon_call(!edcon_call)
break;
case 'w_therapist_call':
setW_therapist_call(!w_therapist_call)
break;
case 'staffing':
setStaffing(!staffing)
break;
case 'parent_call':
setParent_call(!parent_call)
break;
case 'tour_scheduled':
setTour_scheduled(!tour_scheduled)
break;
case 'steps_to_enroll':
setSteps_to_enroll(!steps_to_enroll)
break;
case 'completed_app':
setCompleted_app(!completed_app)
break;
case 'submitted_docs':
setSubmitted_docs(!submitted_docs)
break;
case 'inform_team':
setInform_team(!inform_team)
break;
case 'team_assigned':
setTeam_assigned(!team_assigned)
break;
case 'telos_hq':
setTelos_hq(!telos_hq)
break;
}
}
async function updateChecklistUi(item, referral_id, id){
await updateCheck(item)
if (props.color === "orange" || props.color === "yellow"){
if (
recieve_testing === true &&
review_testing === true &&
edcon_call === true &&
w_therapist_call === true &&
staffing === true
) {setVetting(true)}
} else if (props.color === "green") {
if (
recieve_testing === true &&
review_testing === true &&
edcon_call === true &&
w_therapist_call === true
) {setVetting(true)}
}
if (
parent_call === true &&
tour_scheduled === true &&
steps_to_enroll === true &&
completed_app === true &&
submitted_docs === true
){ setParents(true)}
if (
inform_team === true &&
team_assigned === true &&
telos_hq === true
){setEnrollment(true)}
await props.setChecklist(checklistObj)
console.log('beforeAxios:',checklistObj)
await props.updateChecklist(referral_id, id, checklistObj)
}
return (
<section>
{console.log('props',props)}
<h3><strong>Checklist</strong></h3>
<h5>Vetting</h5>
<input
type='checkbox'
name='recieve_testing'
checked={!!recieve_testing}
onChange={(e) => updateChecklistUi(e.target.name, props.referal_id, props.id)}
/>
<lable for='recieve_testing'>Recieve testing</lable>
<br/>
<input
type='checkbox'
name='review_testing'
checked={!!review_testing}
onChange={(e) => updateChecklistUi(e.target.name, props.referal_id, props.id)}
/>
<lable for='review_testing'>Review testing</lable>
<br/>
<input
type='checkbox'
name='edcon_call'
checked={!!edcon_call}
onChange={(e) => updateChecklistUi(e.target.name, props.referal_id, props.id)}
/>
<lable for='ed_con_call'>Call with Education Consultant</lable>
<br/>
<input
type='checkbox'
name='w_therapist_call'
checked={!!w_therapist_call}
onChange={(e) => updateChecklistUi(e.target.name, props.referal_id, props.id)}
/>
<lable for='w_therapist_call'>Call with Wilderness Therapist</lable>
<br/>
{props.color == 'yellow' || props.color == 'orange' ?
<>
<input
type='checkbox'
name='staffing'
checked={!!staffing}
onChange={(e) => updateChecklistUi(e.target.name, props.referal_id, props.id)}
/>
<lable for='staffing'>Staffing with team</lable>
<br/>
</> :
null
}
<h5>Parents</h5>
<input
type='checkbox'
name='parent_call'
checked={!!parent_call}
onChange={(e) => updateChecklistUi(e.target.name, props.referal_id, props.id)}
/>
<lable for='parent_call'>Call with Parents</lable>
<br/>
<input
type='checkbox'
name='tour_scheduled'
checked={!!tour_scheduled}
onChange={(e) => updateChecklistUi(e.target.name, props.referal_id, props.id)}
/>
<lable for='tour_scheduled'>Schedule Tour</lable>
<br/>
<input
type='checkbox'
name='steps_to_enroll'
checked={!!steps_to_enroll}
onChange={(e) => updateChecklistUi(e.target.name, props.referal_id, props.id)}
/>
<lable for='steps_to_enroll'>Steps to Enrollment Complete</lable>
<br/>
<input
type='checkbox'
name='completed_app'
checked={!!completed_app}
onChange={(e) => updateChecklistUi(e.target.name, props.referal_id, props.id)}
/>
<lable for='completed_app'>Application Completed</lable>
<br/>
<input
type='checkbox'
name='submitted_docs'
checked={!!submitted_docs}
onChange={(e) => updateChecklistUi(e.target.name, props.referal_id, props.id)}
/>
<lable for='submitted_docs'>Documents Submitted</lable>
<br/>
<h5>Enrollment Process</h5>
<input
type='checkbox'
name='inform_team'
checked={!!inform_team}
onChange={(e) => updateChecklistUi(e.target.name, props.referal_id, props.id)}
/>
<lable for='inform_team'>Team Informed of Enrollment</lable>
<br/>
<input
type='checkbox'
name='team_assigned'
checked={!!team_assigned}
onChange={(e) => updateChecklistUi(e.target.name, props.referal_id, props.id)}
/>
<lable for='team_assigned'>Team Assigned</lable>
<br/>
<input
type='checkbox'
name='telos_hq'
checked={!!telos_hq}
onChange={(e) => updateChecklistUi(e.target.name, props.referal_id, props.id)}
/>
<lable for='telos_hq'>Loaded onto TelosHQ</lable>
</section>
)
}
here is referral where my checklist component is rendered:
import React, { useState, useEffect } from 'react';
import { Button } from '@material-ui/core';
import AddReferal from './AddReferal';
import { useHistory } from 'react-router';
import Checklist from './Checklist';
import Axios from 'axios';
export default function Referral(props) {
const history = useHistory()
const [editing, setEditing] = useState(false)
const [checklist, setChecklist] = useState({})
const { f_name,
l_name,
source,
ed_con,
therapist,
w_therapist,
created_at,
status,
color,
result,
id
} = props.location.state.referral
useEffect(()=> {
Axios.get(`/api/referals/${id}/checklists`)
.then(res => {
console.log(res.data)
setChecklist(res.data)
})
.catch(err => {
console.log(err)
})
},[])
const updateChecklist = (referralId, id, checklistObj) => {
Axios.put(`/api/referals/${referralId}/checklists/${id}`, checklistObj)
.then(res => {
console.log(res.data)
setChecklist(res.data)
})
.catch(err => {
console.log(err.message)
})
}
return (
<div style={styles.page}>
<div style={styles.sideBySide}>
<div>
<h1><strong>{f_name} {l_name}</strong></h1>
<p>Source: {source} </p>
<p>Educational Consultant: {ed_con}</p>
<p>Wilderness Therapist: {w_therapist}</p>
<p>TelosU Therapist: {therapist}</p>
<p>Created at: {created_at}</p>
<Button onClick={() => setEditing(!editing)}>Edit</Button>
<Button onClick={() => props.deleteReferral(id, history)}>Delete</Button>
</div>
<Checklist
{...checklist}
color={color}
setChecklist={setChecklist}
updateChecklist={updateChecklist}
/>
</div>
{editing &&
<AddReferal
initF_name={f_name}
initL_name={l_name}
initSource={source}
initEd_con={ed_con}
initTherapist={therapist}
initW_therapist={w_therapist}
initStatus={status}
initColor={color}
initResult={result}
editId = {id}/>}
</div>
)
}
const styles = {
sideBySide: {
display: 'flex',
justifyContent:'space-between',
alignItems: 'center',
},
page: {
maxWidth:'95vw'
}
}
Here is my checklist controller
class Api::ChecklistsController < ApplicationController
before_action :set_checklist, only: [:update, :show]
def index
referal = Referal.find(params[:referal_id])
render json: referal.checklist
end
def show
end
def update
@checklist.update(checklist_params)
if @checklist.save
render json: @checklist
else
render json: {errors: @checklist.errors, status: 422}
end
end
private
def set_checklist
@checklist = Checklist.find(params[:id])
end
def checklist_params
params.require(:checklist).permit(
:completed_app,
:edcon_call,
:enrollment,
:inform_team,
:parent_call,
:parents,
:recieve_testing,
:review_testing,
:staffing,
:steps_to_enroll,
:submitted_docs,
:team_assigned,
:telos_hq,
:tour_scheduled,
:vetting,
:w_therapist_call
)
end
end
checklist is part of a has_one relationship with referrals so it is created in the referrals controller (i know referral is misspelled on the backend) with all values defaulted to false.
Any help would be much appreciated!
