fix some responsness issues

Nahid4306053 · Dec 13, 2023 · 00313a4 · 00313a4
1 parent 01cf73d
commit 00313a4
Show file tree

Hide file tree

Showing 33 changed files with 690 additions and 461 deletions.
diff --git a/public/Data/Blog.json b/public/Data/Blog.json
@@ -1,23 +1 @@
-[
-  {
-    "title": "Unlocking Creativity: A Guide to Overcoming Creative Blocks",
-    "author": "Jane Doe",
-    "banner": "image1.jpg",
-    "date": "February 15, 2023",
-    "description": "In this insightful post, Jane Doe explores practical tips and strategies to overcome creative blocks and unleash your full creative potential."
-  },
-  {
-    "title": "The Impact of Technology on Education: Navigating the Digital Frontier",
-    "author": "John Smith",
-    "banner": "image2.jpg",
-    "date": "March 8, 2023",
-    "description": "John Smith delves into the transformative role of technology in education, discussing its implications on teaching methods, student engagement, and the future of learning."
-  },
-  {
-    "title": "Mindfulness in the Workplace: Fostering Well-being for Increased Productivity",
-    "author": "Sarah Johnson",
-    "banner": "image3.jpg",
-    "date": "April 20, 2023",
-    "description": "Sarah Johnson shares her insights on incorporating mindfulness practices into the workplace, exploring the benefits for both employees and organizations in achieving a healthier and more productive work environment."
-  }
-]
+
diff --git a/src/Hooks/FetchCourseData.jsx b/src/Hooks/FetchCourseData.jsx
@@ -6,7 +6,7 @@ export default function usefetchcourseData() {
   const [Courses, setcourses] = useState();
    const fetchcourses = async (page,limit,category) => {
       try {
-
+        setloading(true) 
         const snapshort = await axios.get(
           `${import.meta.env.VITE_API_URL}/course/all?${
             page ? "page=" + page + "&" : ""

diff --git a/src/Hooks/FetchSingelUserWithCourse.jsx b/src/Hooks/FetchSingelUserWithCourse.jsx
@@ -1,22 +1,26 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import axios from "axios";
-import React, { useEffect, useState } from "react";
+import  { useEffect, useState } from "react";
 
 export default function useFetchSingelUserWithCourse(id,role) {
+  const [loading,setloading] = useState(true);
   const [userwithCourse, setuserwithCourse] = useState();
   useEffect(() => {
     const fetchUseWithCourse = async () => {
       try {
+        setloading(true)
         const snapshort = await axios.get(
           `${import.meta.env.VITE_API_URL}/user/singel/${id}?role=${role}`,
           { withCredentials: true }
         );
         setuserwithCourse(snapshort.data);
-
+        setloading(false)
       } catch (err) {
         console.log(err);
+        setloading(false)
       }
     };
     fetchUseWithCourse()
   }, []);
-  return {userwithCourse}
+  return {userwithCourse , loading}
 }
diff --git a/src/Hooks/FetchsingelCourse.jsx b/src/Hooks/FetchsingelCourse.jsx
@@ -3,22 +3,26 @@ import  { useEffect, useState } from "react";
 
 export default function useFetchSingelCourse(id) {
   const [coursedata, setCoursedata] = useState();
-
+  const [loading,setloading] = useState(true)
   useEffect(() => {
     if (id) {
       const fetchData = async () => {
         try {
+          setloading(true)
           const response = await axios.get(
             `${import.meta.env.VITE_API_URL}/course/singel/${id}`,
             { withCredentials: true }
           ); 
           if (response.data) {
+
             setCoursedata(response.data.data);
           } else {
             setCoursedata(null);
             console.log(response.data.error);
           }
+          setloading(false)
         } catch (err) {
+          setloading(false)
           setCoursedata(null);
           console.log(err);
         }
@@ -27,5 +31,5 @@ export default function useFetchSingelCourse(id) {
     }
   }, [id]);
 
-  return { coursedata };
+  return { coursedata ,loading};
 }
diff --git a/src/Hooks/GetAllFollow.jsx b/src/Hooks/GetAllFollow.jsx
@@ -1,20 +1,25 @@
 import axios from "axios";
-import React, { useState } from "react";
+import  { useState } from "react";
 
 export default function useGetAllFollow() {
+  const[loading,setloading] = useState(true)
   const [Follows, setFollow] = useState();
   const fetchFollow = async (page, limit) => {
     try {
+      setloading(true);
       const snapshort = await axios.get(
         `${import.meta.env.VITE_API_URL}/user/follows?${
           page ? "page=" + page + "&" : ""
         }${limit ? "limit=" + limit  : ""}`,
         { withCredentials: true }
       );
       setFollow(snapshort.data.data);
+      setloading(false);
     } catch (err) {
+      setloading(false);
       console.log(err);
     }
   };
-  return { Follows, fetchFollow };
+
+  return { Follows, fetchFollow,loading };
 }
diff --git a/src/Hooks/fetchUserData.jsx b/src/Hooks/fetchUserData.jsx
@@ -6,6 +6,7 @@ export default function usefetchUserData() {
   const [users, setusers] = useState();
    const fetchUsers = async (role, page, limit) => {
       try {
+        setloading(true) 
         const snapshort = await axios.get(
           `${import.meta.env.VITE_API_URL}/user/all?${role ? "role=" + role + "&" : "" }${
             page ? "page=" + page + "&" : ""

diff --git a/src/Routes/Routes.jsx b/src/Routes/Routes.jsx
@@ -17,7 +17,7 @@ import Courses from "../pages/courses";
 import Users from "../components/Dashborder/pages/Users";
 import Students from "../components/Dashborder/Students";
 import InstructorTable from "../components/Dashborder/pages/InstructorTable";
-import CourseTablerow from "../components/Dashborder/CourseTablerow";
+// import CourseTablerow from "../components/Dashborder/CourseTablerow";
 import CourseTable from "../components/Dashborder/pages/CourseTable";
 import Authntication from "../Context/Authntication";
 import Notice from "../components/Dashborder/pages/Notice";

diff --git a/src/components/Blogs.jsx b/src/components/Blogs.jsx
@@ -0,0 +1,62 @@
+export default function Blogs() {
+  const data = [
+    {
+      title: "Unlocking Creativity: A Guide to Overcoming Creative Blocks",
+      author: "Jane Doe",
+      banner: "https://i.ibb.co/XkqVpKX/1682708266984.jpg",
+      date: "February 15, 2023",
+      description:
+        "In this insightful post, Jane Doe explores practical tips and strategies to overcome creative blocks and unleash your full creative potential.",
+    },
+    {
+      title:
+        "The Impact of Technology on Education: Navigating the Digital Frontier",
+      author: "John Smith",
+      banner: "https://i.ibb.co/WVRBfYB/1694618553933.jpg",
+      date: "March 8, 2023",
+      description:
+        "John Smith delves into the transformative role of technology in education, discussing its implications on teaching methods, student engagement, and the future of learning.",
+    },
+    {
+      title:
+        "Mindfulness in the Workplace: Fostering Well-being for Increased Productivity",
+      author: "Sarah Johnson",
+      banner: "https://i.ibb.co/vcGZbVd/mediation-importance-1.png",
+      date: "April 20, 2023",
+      description:
+        "Sarah Johnson shares her insights on incorporating mindfulness practices into the workplace, exploring the benefits for both employees and organizations in achieving a healthier and more productive work environment.",
+    },
+  ];
+  return (
+    <div className="container mx-auto mt-16 mb-32">
+      <div className=" capitalize container mx-auto text-center  mb-20 space-y-4">
+        <h3 className="text-xl text-sky-500">
+        Explore the Best in Tech, Today.
+        </h3>
+        <h1 className="text-5xl mb-5 font-bold">Our Tech Odyssey</h1>
+      </div>
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-14">
+        {data.map((ele, ind) => {
+          return (
+            <div key={ind} className="card  rounded-md bg-base-100 shadow-xl">
+              <figure>
+                <img className=" h-60 w-full object-cover" src={ele.banner} alt="Shoes" />
+              </figure>
+              <div className="card-body">
+                <div className="time mb-4 flex justify-between items-center">
+                    <span>{ele.date}</span>
+                    <span className="opacity-75 flex gap-2"><i className="fa-solid  text-sm fa-user-tie"></i> <span>{ele.author}</span></span>
+                 </div>    
+                <h2 className="card-title">{ele.title.slice(0,50)+".."}</h2>
+                <p className="text-base">{ele.description.slice(0,100)+".."}</p>
+                <div className="card-actions mt-5 justify-end">
+                   <button className="btn btn-info text-white rounded-none">Read more </button>
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/Card.jsx b/src/components/Card.jsx
@@ -48,7 +48,7 @@ export default function Card({
         >
           {coursetitle.slice(0,50)+"..."}
         </Link>
-        <p className="leading-8">{description.slice(0, 100) + " [...]"}</p>
+        <p className="leading-8">{description.slice(0, 100) + "..."}</p>
         <hr className="my-3 border-gray-300" />
         <div className="flex justify-between">
           <p className="text-lg text-sky-500 ">${coursefee}</p>

diff --git a/src/components/Dashborder/DashborderSearchBox.jsx b/src/components/Dashborder/DashborderSearchBox.jsx
@@ -2,7 +2,7 @@ import React from "react";
 
 export default function DashborderSearchBox() {
   return (
-    <div className="header sticky flex   bg-slate-200 left-0 z-1 top-0  p-5 w-full">
+    <div className="header sticky flex   bg-sky-100 left-0 z-1 top-0  p-5 w-full">
       <div className="form-control w-full">
         <div className="input-group">
           <input

diff --git a/src/components/Dashborder/DashborderSidebar.jsx b/src/components/Dashborder/DashborderSidebar.jsx
@@ -1,47 +1,94 @@
-
-import TabItem from "./TabItem";
 import { useAuth } from "../../Context/Authntication";
+import TabItem from "./TabItem";
 
 export default function DashborderSidebar() {
-  const {user} = useAuth()
-//  console.log(user.avatar)
+  const { user } = useAuth();
+  //  console.log(user.avatar)
   return (
     <div className="overflow-hidden dashborder-layout-left  col-span-3 md:col-span-2 lg:col-span-3 bg-slate-200">
       <div className="h-[25%] dashborder-layout-left-header border-b border-slate-300 py-5 flex items-center">
         <div className="avatra p-2 mx-auto mt-5 overflow-hidden">
           <div className="rounded-full overflow-hidden h-[50px] w-[50px] lg:h-[100px] lg:w-[100px] ring-4">
-           {user && <img className="h-full w-full object-cover" src={user.avatar} alt="avatar" />}
+            {user && (
+              <img
+                className="h-full w-full object-cover"
+                src={user.avatar}
+                alt="avatar"
+              />
+            )}
           </div>
         </div>
       </div>
       <div className="h-[75%] Sidebar_tab custom-scrollber overflow-auto  text-neutral lg:text-lg  md:text-2xl text-lg">
+        <TabItem path="/dashborder/profile" label={"My Profile"}>
+          <i className="fa-regular fa-user"></i>
+        </TabItem>
 
-         <TabItem path="/dashborder/profile" label={'My Profile'}><i className="fa-regular fa-user"></i></TabItem>
-
-         {user.role === "student" &&
-         <TabItem path="/dashborder/whichlist-courses" label={'Whichlist Courses'}> <i className="fa-duotone fa-bookmark"></i></TabItem>}
-
-        {(user.role === ("student" || "instructor")) && <TabItem path="/dashborder/my-courses" label={'My Courses'}><i className="fa-duotone fa-book"></i></TabItem>
-         }
-          {(user.role === ("student" ||  "instructor") ) &&
-         <TabItem path="/dashborder/follow" label={user.role === "student" ? 'Following instructor' :"My Followers"}><i className="fa-solid fa-heart"></i></TabItem>}
-
-         <TabItem path="/dashborder/notice" label={'Emergency Notice'}> <i className="fa-solid fa-light-emergency"></i></TabItem> 
-         {user.role === "admin" && 
-         <TabItem path="/dashborder/users" label={'Users'}> <i className="fa-duotone fa-users"></i></TabItem>    } 
-         {user.role === "admin" && 
-         <TabItem path="/dashborder/students" label={'Students'}> <i className="fa-solid fa-graduation-cap"></i></TabItem>}
+        {user.role === "student" && (
+          <TabItem
+            path="/dashborder/whichlist-courses"
+            label={"Whichlist Courses"}
+          >
+            {" "}
+            <i className="fa-duotone fa-bookmark"></i>
+          </TabItem>
+        )}
 
-         {user.role === "admin" && 
-         <TabItem path="/dashborder/instructors" label={'Instructors'}> <i className="fa-solid fa-person-chalkboard"></i></TabItem>}
-         {user.role === "admin" && 
-         <TabItem path="/dashborder/coursetable" label={'Manage Courses'}> <i className="fa-light fa-book-open"></i></TabItem> }
-         {user.role === "admin" && 
-         <TabItem path="/dashborder/events" label={'Events'}><i className="fa-duotone fa-calendar-days"></i></TabItem>}
-        {user.role === "admin" && 
-         <TabItem path="/dashborder/gallerys" label={'Gallery'}><i className="fa-sharp fa-light fa-gallery-thumbnails"></i></TabItem>}
+        {(user.role === "student" || user.role === "instructor") && (
+          <TabItem path="/dashborder/my-courses" label={"My Courses"}>
+            <i className="fa-duotone fa-book"></i>
+          </TabItem>
+        )}
+        {(user.role === "student" || user.role === "instructor") && (
+          <TabItem
+            path="/dashborder/follow"
+            label={
+              user.role === "student" ? "Following instructor" : "My Followers"
+            }
+          >
+            <i className="fa-solid fa-heart"></i>
+          </TabItem>
+        )}
 
+        <TabItem path="/dashborder/notice" label={"Emergency Notice"}>
+          {" "}
+          <i className="fa-solid fa-light-emergency"></i>
+        </TabItem>
+        {user.role === "admin" && (
+          <TabItem path="/dashborder/users" label={"Users"}>
+            {" "}
+            <i className="fa-duotone fa-users"></i>
+          </TabItem>
+        )}
+        {user.role === "admin" && (
+          <TabItem path="/dashborder/students" label={"Students"}>
+            {" "}
+            <i className="fa-solid fa-graduation-cap"></i>
+          </TabItem>
+        )}
 
+        {user.role === "admin" && (
+          <TabItem path="/dashborder/instructors" label={"Instructors"}>
+            {" "}
+            <i className="fa-solid fa-person-chalkboard"></i>
+          </TabItem>
+        )}
+        {user.role === "admin" && (
+          <TabItem path="/dashborder/coursetable" label={"Manage Courses"}>
+            {" "}
+            <i className="fa-light fa-book-open"></i>
+          </TabItem>
+        )}
+        {user.role === "admin" && (
+          <TabItem path="/dashborder/events" label={"Events"}>
+            <i className="fa-duotone fa-calendar-days"></i>
+          </TabItem>
+        )}
+        {user.role === "admin" && (
+          <TabItem path="/dashborder/gallerys" label={"Gallery"}>
+            <i className="fa-sharp fa-light fa-gallery-thumbnails"></i>
+          </TabItem>
+        )}
       </div>
     </div>
   );

diff --git a/src/components/Dashborder/Handlecorseinfo.jsx b/src/components/Dashborder/Handlecorseinfo.jsx
@@ -9,6 +9,7 @@ import { useModal } from "../../Context/ModalContext";
 import usefetchUserData from "../../Hooks/fetchUserData";
 import UploadImg from "../../Utils/UploadIMG";
 import Input from "../../components/InputBox";
+import toast from "react-hot-toast";
 export default function Handlecorseinfo({ data, render }) {
   const {
     _id,
@@ -48,7 +49,7 @@ export default function Handlecorseinfo({ data, render }) {
   };
   const handleselectedInstructors = (Techer) => {
     if (selectedInstructors.includes(Techer.target.value)) {
-      alert("This Instructors already selected");
+      toast.error("This Instructors already selected");
     } else {
       setSelectedInstructors((old) => [...old, Techer.target.value]);
     }