You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
135 lines
3.1 KiB
JavaScript
135 lines
3.1 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { Button, Modal, Form } from 'react-bootstrap';
|
|
import Swal from 'sweetalert2';
|
|
|
|
export default function EditCourse({ course, fetchData }) {
|
|
|
|
//state for courseId for the fetch URL
|
|
const [courseId, setCourseId] = useState('');
|
|
|
|
//Forms state
|
|
//Add state for the forms of course
|
|
const [name, setName] = useState('');
|
|
const [description, setDescription] = useState('')
|
|
const [price, setPrice] = useState('')
|
|
|
|
//state for editCourse Modals to open/close
|
|
const [showEdit, setShowEdit] = useState(false)
|
|
|
|
//function for opening the modal
|
|
const openEdit = (courseId) => {
|
|
//to still get the actual data from the form
|
|
fetch(`${process.env.REACT_APP_API_URL}/courses/${ courseId }`)
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
//populate all the input values with course info that we fetched
|
|
setCourseId(data._id);
|
|
setName(data.name);
|
|
setDescription(data.description);
|
|
setPrice(data.price)
|
|
})
|
|
|
|
//Then, open the modal
|
|
setShowEdit(true)
|
|
}
|
|
|
|
const closeEdit = () => {
|
|
setShowEdit(false);
|
|
setName('')
|
|
setDescription('')
|
|
setPrice(0)
|
|
}
|
|
|
|
|
|
//function to update the course
|
|
const editCourse = (e, courseId) => {
|
|
e.preventDefault();
|
|
|
|
fetch(`${process.env.REACT_APP_API_URL}/courses/${ courseId }`, {
|
|
method: 'PUT',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
Authorization: `Bearer ${localStorage.getItem('token')}`
|
|
},
|
|
body: JSON.stringify({
|
|
name: name,
|
|
description: description,
|
|
price: price
|
|
})
|
|
})
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
console.log(data)
|
|
|
|
if(data === true) {
|
|
Swal.fire({
|
|
title: 'Success!',
|
|
icon: 'success',
|
|
text: 'Course Successfully Updated'
|
|
})
|
|
closeEdit();
|
|
fetchData();
|
|
|
|
} else {
|
|
Swal.fire({
|
|
title: 'Error!',
|
|
icon: 'error',
|
|
text: 'Please try again'
|
|
})
|
|
closeEdit();
|
|
fetchData();
|
|
}
|
|
})
|
|
}
|
|
|
|
|
|
return(
|
|
<>
|
|
<Button variant="primary" size="sm" onClick={() => openEdit(course)}> Edit </Button>
|
|
|
|
{/*Edit Modal Forms*/}
|
|
<Modal show={showEdit} onHide={closeEdit}>
|
|
<Form onSubmit={e => editCourse(e, courseId)}>
|
|
<Modal.Header closeButton>
|
|
<Modal.Title>Edit Course</Modal.Title>
|
|
</Modal.Header>
|
|
|
|
<Modal.Body>
|
|
<Form.Group>
|
|
<Form.Label>Name</Form.Label>
|
|
<Form.Control
|
|
type="text"
|
|
value={name}
|
|
onChange={e => setName(e.target.value)}
|
|
required/>
|
|
</Form.Group>
|
|
|
|
<Form.Group>
|
|
<Form.Label>Description</Form.Label>
|
|
<Form.Control
|
|
type="text"
|
|
value={description}
|
|
onChange={e => setDescription(e.target.value)}
|
|
required/>
|
|
</Form.Group>
|
|
|
|
<Form.Group>
|
|
<Form.Label>Price</Form.Label>
|
|
<Form.Control
|
|
type="number"
|
|
value={price}
|
|
onChange={e => setPrice(e.target.value)}
|
|
required/>
|
|
</Form.Group>
|
|
</Modal.Body>
|
|
|
|
<Modal.Footer>
|
|
<Button variant="secondary" onClick={closeEdit}>Close</Button>
|
|
<Button variant="success" type="submit">Submit</Button>
|
|
</Modal.Footer>
|
|
</Form>
|
|
|
|
</Modal>
|
|
</>
|
|
)
|
|
} |