Skip to content

Commit

Permalink
match the submitted data to the back-end route
Browse files Browse the repository at this point in the history
  • Loading branch information
@elaineZhang67
elaineZhang67 committed Nov 27, 2023
1 parent cdee814 commit 58d8dce
Show file tree
Hide file tree
Showing 2 changed files with 83 additions and 37 deletions.
4 changes: 2 additions & 2 deletions back-end/routes/addEventMemberRoute.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,13 @@ const router = express.Router();

// Hardcoded user data to simulate a database
let friendData = [{
"id":1,
"id":"507f1f77bcf86cd799439011",
"name":"Gaby Coupar",
"avatar":"https://robohash.org/temporererumomnis.png?size=50x50\u0026set=set1",
"phone":"435-715-2899",
"email":"[email protected]"
}, {
"id": 2,
"id": "507f1f77bcf86cd799439012",
"name": "Andy Gaber",
"avatar": "https://robohash.org/quaeetcorrupti.png?size=50x50&set=set1",
"phone":"425-712-2309",
Expand Down
116 changes: 81 additions & 35 deletions front-end/src/components/AddEvent.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,12 @@ function AddEvent({addEvent, onClose}){
const[searchPerformed, setSearchPerformed] = useState(false);
const[selectedMember, setselectedMember] = useState([])
const[loading, setLoading] = useState(false)
const [errors, setErrors] = useState({
eventName: false,
Date: false,
Description: false,
Members: false
});
const[eventData, seteventData] = useState({
eventName: '',
Date: '',
Expand All @@ -17,13 +23,13 @@ function AddEvent({addEvent, onClose}){
})

const backupData_friends = [{
"id":1,
"id":"507f1f77bcf86cd799439011",
"name":"Gaby Coupar",
"avatar":"https://robohash.org/temporererumomnis.png?size=50x50\u0026set=set1",
"phone":"435-715-2899",
"email":"[email protected]"
}, {
"id": 2,
"id": "507f1f77bcf86cd799439012",
"name": "Andy Gaber",
"avatar": "https://robohash.org/quaeetcorrupti.png?size=50x50&set=set1",
"phone":"425-712-2309",
Expand All @@ -34,22 +40,59 @@ function AddEvent({addEvent, onClose}){
const{name, value} = e.target;
seteventData(prev => ({...prev,[name]:value}))
}
const handleAddEvent = async () =>{

const validateForm = () => {
const newErrors = {};
let isValid = true;

// Validate Event Name
if (!eventData.eventName) {
newErrors.eventName = true;
isValid = false;
}

// Validate Date
if (!eventData.Date) {
newErrors.Date = true;
isValid = false;
}

// Validate Description
if (!eventData.Description) {
newErrors.Description = true;
isValid = false;
}
if (selectedMember.length === 0) {
alert('Please select at least one member.');
newErrors.Members = true;
isValid = false;
}

setErrors(newErrors);
return isValid;
};

const handleAddEvent = async () => {
if (!validateForm()) {
return; // Stop the function if validation fails
}
const submitData = {
eventName: eventData.eventName,
eventDate: eventData.Date,
eventDescription: eventData.Description,
members: selectedMember
}
try{
const response = await axios.post("http://localhost:3001/addEvent")
console.log(response.data)
}catch(error){
seteventData(submitData)
console.error('Failed to submit event:', error);
Date: eventData.Date,
Description: eventData.Description,
Members: selectedMember.map(member => member.id) // mapping to member IDs
};

try {
console.log('Submitting data:', submitData);
const response = await axios.post("http://localhost:3001/addEvent", submitData);
console.log(`Event added:`, response.data);
onClose(); // Optionally close the form upon successful submission
} catch (error) {
console.error('Failed to submit event:', error.response ? error.response.data : error);
}
}

//fetch friends' data for the member list
async function friendsCL(){
setLoading(true);
Expand All @@ -73,7 +116,7 @@ function AddEvent({addEvent, onClose}){
const handleSearchChange = (e) =>{
setSearchQuery(e.target.value)
}
const filteredFriends = searchQuery?friendsList.filter(friend => friend.name.toLowerCase().includes(searchQuery.toLowerCase())): friendsList;
const filteredFriends = searchQuery?friendsList.filter(friend => friend.name.toLowerCase().includes(searchQuery.toLowerCase())): [];


const handleSelectedMember = (memberId) =>{
Expand All @@ -86,10 +129,6 @@ function AddEvent({addEvent, onClose}){
}
}

const handleDeleteMember = (memberId) =>{

}

useEffect(()=>{
seteventData(prev => ({
...prev,
Expand All @@ -101,41 +140,44 @@ function AddEvent({addEvent, onClose}){
<div className="add-event">
<div className="add-event-content">
<span className="close" onClick={onClose}>&times;</span>
<form onSubmit={e => {e.handleAddEvent();}}>
<form onSubmit={(e) => {e.preventDefault();handleAddEvent();}}>
<div className="EventName">
<input
type="text"
placeholder="Event Name"
className="mt-4 block w-full p-2 border border-gray-300 rounded-md"
className={`mt-4 block w-full rounded-md px-3 py-2 ${errors.eventName ? 'bg-red-100 border-red-500' : 'bg-white border-gray-300'}`}
name = "eventName"
value={eventData.eventName}
onChange={handleInputChange}
onChange={(e) => { handleInputChange(e)}}
/>
{errors.eventName && <p className="text-red-500 text-sm mt-1 error-message">Event Name is required.</p>}
</div>
<div className="EventDate">
<input
type="date"
placeholder="Event Date"
className="block w-full p-2 border border-gray-300 rounded-md"
className={`mt-4 block w-full rounded-md px-3 py-2 ${errors.Date ? 'bg-red-100 border-red-500' : 'bg-white border-gray-300'}`}
name = "Date"
onChange={handleInputChange}
onChange={(e) => { handleInputChange(e)}}
value={eventData.Date}
/>
{errors.Date && <p className="text-red-500 text-sm mt-1 error-message">Event Date is required.</p>}
</div>
<div className="EventDescription">
<input
type="text"
placeholder="Event Description"
className="block w-full p-2 border border-gray-300 rounded-md"
className={`mt-4 block w-full rounded-md px-3 py-2 ${errors.Description ? 'bg-red-100 border-red-500' : 'bg-white border-gray-300'}`}
name = "Description"
onChange={handleInputChange}
onChange={(e) => { handleInputChange(e)}}
value={eventData.Description}
/>
{errors.Description && <p className="text-red-500 text-sm mt-1 error-message">Event Description is required.</p>}
</div>

</form>

<button className="mt-4 px-4 py-2 bg-gray-400 text-white rounded-md" onClick={() => {

<button type = 'button' className="mt-4 px-4 py-2 bg-gray-400 text-white rounded-md" onClick={() => {
setselectedFriends(true)
}}
>
Expand All @@ -151,9 +193,10 @@ function AddEvent({addEvent, onClose}){
className="member-name"
onChange={handleSearchChange}
/>
<button onClick={friendsCL}>Search</button>
{loading ? (<p>Loading...</p>
): filteredFriends.length>0?(
<button type='button' onClick={friendsCL}>Search</button>
{loading ? (<p>Loading...</p>
) : searchPerformed ? (
filteredFriends.length>0?(
filteredFriends.map(friend =>(
<div className="flex items-center justify-between p-2 friend" key={friend.id}>
<img src={friend.avatar}></img>
Expand All @@ -169,15 +212,18 @@ function AddEvent({addEvent, onClose}){
))
) : searchPerformed?(
<p>No Friend Found</p>
): null}
): null
): null
}
</div>
<button onClick={() => setselectedFriends(false)}>done</button>
</div>
)}

<div className="formBtn">
<button onClick={() => onClose()}>Add</button>
</div>
<div className="formBtn">
<button type="submit">Add</button>
</div>
</form>
</div>
</div>
);
Expand Down

0 comments on commit 58d8dce

Please sign in to comment.