React - Merging two Component Values - reactjs

Question

Building a simple ToDo list app in ReactJS. This page is where an existing task can be edited:
import React, {useState, useEffect} from "react";
import {PageLayout} from "../components/page-layout";
import {useParams, useNavigate} from 'react-router-dom';
import TaskDataService from "../services/TaskService";
import DatePicker from 'react-datepicker';
import FadeIn from 'react-fade-in';
import UserDataService from "../services/UserService";
export const Task = props => {
const {id} = useParams();
let navigate = useNavigate();
const initialTaskState = {
id: null,
familyId: "",
userId: "",
ownerId: "",
ownerName: "",
title: "",
description: "",
completed: false,
dueDate: new Date()
};
const [currentTask, setCurrentTask] = useState(initialTaskState);
const [message, setMessage] = useState("");
const [members, setMembers] = useState([]);
const [currentMember, setCurrentMember] = useState(null);
const [currentIndex, setCurrentIndex] = useState(-1);
const getTask = id => {
TaskDataService.get(id)
.then(response => {
setCurrentTask(response.data);
console.log(response.data);
})
.catch(e => {
console.log(e);
});
};
useEffect(() => {
retrieveMembers();
}, []);
useEffect(() => {
if (id)
getTask(id);
}, [id]);
const handleInputChange = event => {
const {name, value} = event.target;
setCurrentTask({...currentTask, [name]: value});
};
const setActiveMember = (member, index) => {
setCurrentMember(member);
setCurrentIndex(index);
};
const retrieveMembers = () => {
UserDataService.listMembers()
.then(response => {
setMembers(response.data);
console.log(response.data);
})
.catch(e => {
console.log(e);
});
};
const updateCompleted = status => {
var data = {
id: currentTask.id,
userId: currentTask.userId,
title: currentTask.title,
ownerId: currentMember.userId,
ownerName: currentMember.firstName,
description: currentTask.description,
completed: status,
dueDate: currentTask.dueDate
};
TaskDataService.update(currentTask.id, data)
.then(response => {
setCurrentTask({...currentTask, completed: status});
console.log(response.data);
})
.catch(e => {
console.log(e);
});
};
const updateTask = () => {
TaskDataService.update(currentTask.id, currentTask)
.then(response => {
console.log(response.data);
setMessage("The task was updated successfully!");
})
.catch(e => {
console.log(e);
});
};
const deleteTask = () => {
TaskDataService.remove(currentTask.id)
.then(response => {
console.log(response.data);
navigate("/tasks");
})
.catch(e => {
console.log(e);
});
};
return (
<PageLayout>
<FadeIn>
<div className="list row">
<div className="col-md-6">
{currentTask ? (
<div className="edit-form">
<h4>Task</h4>
<form>
<div className="form-group">
<label htmlFor="title" class="form-label">Title</label>
<input
type="text"
className="form-control"
id="title"
name="title"
value={currentTask.title}
onChange={handleInputChange}
/>
</div>
<div className="form-group">
<label htmlFor="description" class="form-label">Description</label>
<input
type="text"
className="form-control"
id="description"
name="description"
value={currentTask.description}
onChange={handleInputChange}
/>
</div>
<div className="form-group">
<label htmlFor="dueDate" class="form-label">Due Date</label>
<DatePicker
onChange={date => handleInputChange({
target: {
value: date.toISOString().split("T")[0],
name: 'dueDate'
}
})}
name="dueDate"
dateFormat="yyyy-MM-dd"
value={currentTask.dueDate.toString().split("T")[0]}
/>
</div>
<div className="form-group">
<label htmlFor="status" className="form-label">
<strong>Status:</strong>
</label>
{currentTask.completed ? " Done" : " Not Done"}
</div>
<ul className="list-group">
<label htmlFor="owner" className="form-label">Task Owner</label>
{members &&
members.map((member, index) => (
<li
className={
"list-group-item " + (index === currentIndex ? "active" : "")
}
onClick={=> setActiveMember(member, index)}
key={index}
>
{member.firstName} {member.lastName}
</li>
))}
</ul>
<div className="col-md-6">
{currentMember ? (
<div>
</div>
) : (
<div>
</div>
)}
</div>
</form>
{currentTask.completed ? (
<button
className="badge text-bg-warning mr-4"
onClick={() => updateCompleted(false)}
>
Not Done?
</button>
) : (
<button
className="badge text-bg-primary mr-2"
onClick={() => updateCompleted(true)}
>
Done!
</button>
)}
<button className="badge text-bg-danger mr-2" onClick={deleteTask}>
Delete
</button>
<button
type="submit"
className="badge text-bg-success"
onClick={updateTask}
>
Update
</button>
<p>{message}</p>
</div>
) : (
<div>
<br/>
<p>Please click on a Task...</p>
</div>
)}
</div>
</div>
</FadeIn>
</PageLayout>
);
};
My problem is with the member selection piece, where you can change ownership of the task:
<ul className="list-group">
<label htmlFor="owner" className="form-label">Task Owner</label>
{members &&
members.map((member, index) => (
<li
className={
"list-group-item " + (index === currentIndex ? "active" : "")
}
onClick={=> setActiveMember(member, index)}
key={index}
>
{member.firstName} {member.lastName}
</li>
))}
</ul>
...and the function where we actually update the task:
const updateTask = () => {
TaskDataService.update(currentTask.id, currentTask)
.then(response => {
console.log(response.data);
setMessage("The task was updated successfully!");
})
.catch(e => {
console.log(e);
});
};
Selecting a new owner from the list did not actually change the ownerId/ownerName value in the task. I have figured out that this is because the new owner values live in currentMember, while the task information lives in currentTask - so I need to figure out how to get information from the updated currentMember into the proper fields in currentTask. I've monkeyed around with configurations but can't find a way to do this. Any advice?

Answer 1

I figured it out. The key was to define the task structure in a variable so I could specify from where the ownerId value would be pulled.
Original:
const updateTask = () => {
TaskDataService.update(currentTask.id, currentTask)
.then(response => {
console.log(response.data);
setMessage("The task was updated successfully!");
})
.catch(e => {
console.log(e);
});
};
Updated:
const updateTask = () => {
var data = {
id: currentTask.id,
userId: currentTask.userId,
title: currentTask.title,
ownerId: currentMember.userId,
ownerName: currentMember.firstName,
description: currentTask.description,
dueDate: currentTask.dueDate
};
TaskDataService.update(currentTask.id, data)
.then(response => {
console.log(response.data);
setMessage("The task was updated successfully!");
})
.catch(e => {
console.log(e);
});
};