course update system

src/App.js

@@ -30,6 +30,7 @@ import AllTransaction from "./Pages/Dashboard/AllTransaction/AllTransaction";
 import Dashboard from "./Pages/Dashboard/Dashboard/Dashboard";
 import DashboardHome from "./Pages/Dashboard/DashboardHome/DashboardHome";
 import ManageCourses from "./Pages/Dashboard/ManageCourses/ManageCourses";
+import UpdateCourse from "./Pages/Dashboard/ManageCourses/UpdateCourse";
 import ManageOrders from "./Pages/Dashboard/ManageOrders/ManageOrders";
 import ManagePlaces from "./Pages/Dashboard/ManagePlaces/ManagePlaces";
 import Orders from "./Pages/Dashboard/Orders/Orders";
@@ -117,6 +118,16 @@ function App() {
                 </RequireAdmin>
               }
             ></Route>
+            <Route path="manageCourses">
+              <Route
+                path="update/:courseId"
+                element={
+                  <RequireAdmin>
+                    <UpdateCourse />
+                  </RequireAdmin>
+                }
+              />
+            </Route>
             <Route
               path="managePlaces"
               element={

src/Pages/Dashboard/ManageCourses/ManageCourses.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Button, Table } from 'react-bootstrap';
 import { useQuery } from 'react-query';
+import { Link } from 'react-router-dom';
 import { toast } from 'react-toastify';
 import Loading from '../../../Components/Shared/Loading/Loading';
 
@@ -45,18 +46,17 @@ const ManageCourses = () => {
         return <Loading />;
       }
     return (
-        <div>
+      <div>
       <div className=" manage-course">
         <div className="container">
-          <h1 className="text-dark fw-bold pt-5 pb-3 fs-1">
-            Remove Courses
-          </h1>
+          <h1 className="text-dark fw-bold pt-5 pb-3 fs-1">Remove Courses</h1>
           <Table striped hover responsive variant="dark">
             <thead>
               <tr className="bg-dark text-white">
                 <th>Index</th>
                 <th>course Name</th>
                 <th>course Category</th>
+                <th>Update</th>
                 <th>Delete</th>
               </tr>
             </thead>
@@ -66,6 +66,11 @@ const ManageCourses = () => {
                   <td>{index + 1}</td>
                   <td>{course.name}</td>
                   <td>{course.category}</td>
+                  <td>
+                    <Link to={`update/${course._id}`}>
+                      <Button className="px-3 btn-success">Update</Button>
+                    </Link>
+                  </td>
                   <td>
                     <Button
                       className="px-3 btn-danger"

src/Pages/Dashboard/ManageCourses/UpdateCourse.js

@@ -0,0 +1,97 @@
+import axios from 'axios';
+import React, { useEffect, useState } from 'react';
+import { Col, Row } from 'react-bootstrap';
+import { useForm } from 'react-hook-form';
+import { useParams } from 'react-router-dom';
+import { toast } from 'react-toastify';
+
+const UpdateCourse = () => {
+    const { courseId } = useParams();
+    console.log(courseId);
+    const { register, handleSubmit, reset } = useForm();
+    const [course, setCourse] = useState({});
+
+    useEffect(() => {
+      axios.get(`https://tech-specter.onrender.com/course/${courseId}`).then((res) => {
+        setCourse(res.data);
+      });
+    }, [courseId]);
+
+    const onSubmit = (data) => {
+      axios.put(`https://tech-specter.onrender.com/course/${courseId}`, data).then((res) => {
+        if (res.data.modifiedCount) {
+          toast("Updated Successfully");
+          reset();
+        }
+      });
+    };
+
+    return (
+      <div className="container add-product">
+        <Row>
+          <Col md="6">
+            <img
+              style={{ width: "100%", height: "auto" }}
+              className="vert-move mt-1"
+              src="https://i.ibb.co/GRjJqPC/14245130-My-April8.jpg"
+              alt=""
+            />
+          </Col>
+          <Col md="6">
+            <div className="card py-2">
+              <h2 className="text-secondary fw-bold text-center banner-title">
+                Update Course
+              </h2>
+              <form onSubmit={handleSubmit(onSubmit)}>
+                <input
+                  className="form-control w-75"
+                  {...register("name")}
+                  defaultValue={course.name}
+                  placeholder="name"
+                />{" "}
+                <br />
+                <input
+                  className="form-control w-75"
+                  type="number"
+                  {...register("price")}
+                  defaultValue={course.price}
+                  placeholder="price"
+                />{" "}
+                <br />
+                <input
+                  className="form-control w-75"
+                  type="text"
+                  {...register("image")}
+                  defaultValue={course.image}
+                  placeholder="image"
+                />{" "}
+                <br />
+                <select
+                  {...register("category")}
+                  className="form-control md-form w-75"
+                  defaultValue={course.category}
+                >
+                  <option disabled>Select Category:</option>
+                  <option value="development">development</option>
+                  <option value="design">design</option>
+                  <option value="marketing">marketing</option>
+                </select>
+                <br />
+                <input
+                  className="form-control w-75"
+                  type="text"
+                  {...register("description")}
+                  defaultValue={course.description}
+                  placeholder="description"
+                />{" "}
+                <br />
+                <input className="form-control submit-btn" type="submit" />
+              </form>
+            </div>
+          </Col>
+        </Row>
+      </div>
+    );
+  };
+
+  export default UpdateCourse;