Capstone Frontend - Add course #4
Conversation
There was a problem hiding this comment.
Hi @BenjaminSemah 😊,
Good job so far! 👏
You have done well reaching this point of the milestone, but there are some issues that you still need to work on to go to the next milestone but you are almost there!
Highlights
- Descriptive pull request ✔️
- No linter errors ✔️
- Add course work in a good way ✔️
Required Changes ♻️
Check the comments under the review.
Cheers and Happy coding!👏👏👏
Feel free to leave any questions or comments in the PR thread if something is not 100% clear.
Please, remember to tag me in your question so I can receive the notification.
src/components/AddCourseForm.js
Outdated
| import React, { useState } from 'react'; | ||
| import { useDispatch } from 'react-redux'; | ||
| import { addCourse } from '../redux/coursesSlice'; | ||
|
|
||
| export default function AddCourseForm() { | ||
| const dispatch = useDispatch(); | ||
|
|
||
| const [courseData, setCourseData] = useState( | ||
| { | ||
| name: '', | ||
| description: '', | ||
| location: '', | ||
| size: '', | ||
| price: '', | ||
| image: '', | ||
| }, | ||
| ); | ||
|
|
||
| const handleFormChange = (event) => { | ||
| setCourseData((prevData) => { | ||
| const { name, value } = event.target; | ||
| return { | ||
| ...prevData, | ||
| [name]: value, | ||
| }; | ||
| }); | ||
| }; | ||
|
|
||
| const handleFormSubmit = (event) => { | ||
| event.preventDefault(); | ||
| dispatch(addCourse(courseData)); | ||
| }; |
There was a problem hiding this comment.
- It will be better to navigate to home page after add course to could be see the added course.
- It will be done like this by using
useNavigatehook
InsideAddCourseForm.jsfile
import { useNavigate } from 'react-router-dom';
export default function AddCourseForm() {
const dispatch = useDispatch();
const navigate = useNavigate();
const [courseData, setCourseData] = useState({
name: '',
description: '',
location: '',
size: '',
price: '',
image: '',
});
const handleFormSubmit = (event) => {
event.preventDefault();
dispatch(addCourse(courseData));
navigate('/');
};There was a problem hiding this comment.
RESOLVED ✅
- Navigation has been included in the
handleFormSubmitfunction. - App now navigates to homepage after new course has been created.
src/pages/addCourse/AddCourse.css
Outdated
| body { | ||
| background-color: #97bf0f; | ||
| } |
There was a problem hiding this comment.
- Please remove style from background and add style for your page because this affect in other pages style.
For example, it affect in home page style and it should be the same style as behance design.
There was a problem hiding this comment.
RESOLVED ✅
- Background color has been removed from body.
- Background color now applies to only the
add-coursepage.
There was a problem hiding this comment.
Hi @BenjaminSemah 😊,
STATUS: APPROVED! 🥇 💯
Your project is complete! There is nothing else to say other than... it's time to merge it 
🚀
Congratulations! 🎉
Highlights
✅ No linter errors.
✅ Descriptive pull request
✅ Project has met all the technical aspects you needed for this project. Keep rocking!
Cheers and Happy coding!👏👏👏
Feel free to leave any questions or comments in the PR thread if something is not 100% clear.
Please, remember to tag me in your question so I can receive the notification.
Code Review by @omarsalem7
What does this PR do?
This PR is raised for the addCourse page
Description of tasks completed
addCoursemethod using redux toolkit (Thunk)add-courseroute to addCourse form pageHow should it be tested
Clone the repository
Navigate to the folder
Checkout the branch
Thanks for reviewing my PR 😊