diff --git a/src/App.tsx b/src/App.tsx index 5450249..a5b0f74 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,21 +1,18 @@ -import React, { useEffect, useState } from 'react'; -import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom"; -import "./index.css"; +import { useEffect, useState } from "react"; +import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; import io from "socket.io-client"; import Login from "./pages/Login"; import Courses from "./pages/Courses"; -import CourseDetails from './pages/CourseDetails'; -import MyCourses from './pages/MyCourses'; +import CourseDetails from "./pages/CourseDetails"; +import MyCourses from "./pages/MyCourses"; import { Toaster } from "react-hot-toast"; const socket = io("https://api.dsep.samagra.io"); -// const socket = io("http://localhost:3000"); function App() { - const [theme, setTheme] = useState("light"); // detects browser's default darkmode setting - let mediaQueryObj = window.matchMedia('(prefers-color-scheme: dark)'); + let mediaQueryObj = window.matchMedia("(prefers-color-scheme: dark)"); let isDarkMode = mediaQueryObj.matches; // updates state to dark if default darkmode enabled in browser @@ -25,19 +22,23 @@ function App() { } }, []); - const toggleTheme = () => { - setTheme((curr) => curr === "dark" ? "light" : "dark"); - } - return ( -
- {/* */} +
} /> - } /> - } /> - } /> + } + /> + } + /> + } + />
@@ -45,4 +46,4 @@ function App() { ); } -export default App; \ No newline at end of file +export default App; diff --git a/src/components/BurgerMenu/index.tsx b/src/components/BurgerMenu/index.tsx new file mode 100644 index 0000000..2106a15 --- /dev/null +++ b/src/components/BurgerMenu/index.tsx @@ -0,0 +1,29 @@ +import React from "react"; +import { Menu } from "../../scripts/burgerMenu"; +import Filters from "../Filters"; + +const Burger: React.FC<{ applyFilter: any; mode: any }> = ({ + applyFilter, + mode, +}) => { + return ( +
+
+
+
+ + + +
+
+
+
+ +
+
+
+
+ ); +}; + +export default Burger; diff --git a/src/components/CourseCard.tsx b/src/components/CourseCard.tsx index 16bfc71..0e7d942 100644 --- a/src/components/CourseCard.tsx +++ b/src/components/CourseCard.tsx @@ -5,18 +5,34 @@ import { CourseType } from "../types/courses"; import Rating from "./Ratings"; import { Button, Card, Col, Row } from "react-bootstrap"; import { find, map } from "lodash"; -import { FaBookmark, FaCalendar ,FaCreditCard,FaEye,FaUser} from "react-icons/fa"; -import { BiListPlus} from "react-icons/bi"; +import { + FaBookmark, + FaCalendar, + FaCreditCard, + FaEye, + FaUser, +} from "react-icons/fa"; +import { BiListPlus } from "react-icons/bi"; import moment from "moment"; -const CourseCard: FC<{ course: CourseType;isMyCourse?:boolean }> = ({ course,isMyCourse }) => { -console.log("mnop:",{course}) + +const CourseCard: FC<{ course: CourseType; isMyCourse?: boolean }> = ({ + course, + isMyCourse, +}) => { const imageUrl = useMemo( () => course?.descriptor?.images?.[0]?.url ?? Books, [course, Books] ); - const normalisedTags = useMemo(() => map(course?.tags[0]?.list, (tag) => ({ name: tag?.descriptor?.name, value: tag?.value })), [course]) - const [offeringInstitue,credits,instructors] = useMemo( + const normalisedTags = useMemo( + () => + map(course?.tags[0]?.list, (tag) => ({ + name: tag?.descriptor?.name, + value: tag?.value, + })), + [course] + ); + const [offeringInstitue, credits, instructors] = useMemo( () => [ find(normalisedTags, { name: "offeringInstitue" })?.value, find(normalisedTags, { name: "credits" })?.value, @@ -25,25 +41,20 @@ console.log("mnop:",{course}) [normalisedTags] ); return ( - - - + + + - - - + + + - +
{offeringInstitue}
 - - {course?.descriptor?.name} - + {course?.descriptor?.name} @@ -58,44 +69,65 @@ console.log("mnop:",{course}) cupiditate officia sapiente in magni? - {isMyCourse ? ( - - - - - - - - ):( - - - - - - - + {isMyCourse ? ( + + + + + + + + ) : ( +
+ + + +
)} - - - -
- Credits :{credits} -
-
- {moment(course?.time?.range?.start).format('Do MMM, YYYY')} -
-
- {instructors} -
- + + +
+ + Credits: {credits} +
+
+ + + {moment(course?.time?.range?.start ?? Date.now()).format( + "Do MMM, YYYY" + )} + +
+
+ + {instructors} +
diff --git a/src/components/CourseDetails/CourseAbout.tsx b/src/components/CourseDetails/CourseAbout.tsx index 34add72..8cf8602 100644 --- a/src/components/CourseDetails/CourseAbout.tsx +++ b/src/components/CourseDetails/CourseAbout.tsx @@ -12,7 +12,14 @@ const CourseAbout: FC<{ course: CourseType }> = ({ course }) => { () => course?.descriptor?.images?.[0]?.url ?? Books, [course, Books] ); - const normalisedTags = useMemo(() => map(course?.tags[0]?.list, (tag) => ({ name: tag?.descriptor?.name, value: tag?.value })), [course]) + const normalisedTags = useMemo( + () => + map(course?.tags[0]?.list, (tag) => ({ + name: tag?.descriptor?.name, + value: tag?.value, + })), + [course] + ); const [offeringInstitue, instructors] = useMemo( () => [ find(normalisedTags, { name: "offeringInstitue" })?.value, @@ -26,35 +33,39 @@ const CourseAbout: FC<{ course: CourseType }> = ({ course }) => { {/* */} - + - - {offeringInstitue} - - - {course?.descriptor?.name} - - - By: {instructors} - - - - - - -

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut nam ipsum in est nostrum sunt impedit atque laborum officia quaerat? -

-

- Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quod atque eos, quidem ex sed nam sunt voluptas officiis reiciendis delectus quo, assumenda veritatis deserunt possimus explicabo molestiae aut! Cumque pariatur ab enim fugit eius, quae voluptatum itaque totam vero tempora consequuntur harum modi architecto veniam voluptates. Rem quam veniam debitis. -

- - + + {offeringInstitue} + + + {course?.descriptor?.name} + + + By: {instructors} + + + + + + +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut nam + ipsum in est nostrum sunt impedit atque laborum officia quaerat? +

+

+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quod + atque eos, quidem ex sed nam sunt voluptas officiis reiciendis + delectus quo, assumenda veritatis deserunt possimus explicabo + molestiae aut! Cumque pariatur ab enim fugit eius, quae voluptatum + itaque totam vero tempora consequuntur harum modi architecto + veniam voluptates. Rem quam veniam debitis. +

+ + - - ); }; diff --git a/src/components/CourseDetails/CourseSummary.tsx b/src/components/CourseDetails/CourseSummary.tsx index 3f0f1c4..294ef12 100644 --- a/src/components/CourseDetails/CourseSummary.tsx +++ b/src/components/CourseDetails/CourseSummary.tsx @@ -20,7 +20,14 @@ const CourseSummary: FC<{ course: CourseType }> = ({ course }) => { const haveVideo = useMemo(() => false, []); - const normalisedTags = useMemo(() => map(course?.tags[0]?.list, (tag) => ({ name: tag?.descriptor?.name, value: tag?.value })), [course]) + const normalisedTags = useMemo( + () => + map(course?.tags[0]?.list, (tag) => ({ + name: tag?.descriptor?.name, + value: tag?.value, + })), + [course] + ); const [courseUrl, enrollementEndDate] = useMemo( () => [ @@ -31,62 +38,40 @@ const CourseSummary: FC<{ course: CourseType }> = ({ course }) => { ); return ( - - + - {/* {haveVideo ? ( -
- - - -
- ) : ( -
-
- CourseImage -
-
- )} */} - - {/*
Course Status : Upcoming
*/} - {/*
-

Course Type : Elective

-
*/}

Duration : - - {`${course?.time?.duration?.split("P")[1]}eek`} - + {`${course?.time?.duration?.split("P")[1]}eek`}

- Start Date : - {startDate ?? "N/A"} + Start Date : {startDate ?? "N/A"}

- End Date : - {endDate ?? "N/A"} + End Date : {endDate ?? "N/A"}

Enrollment Ends : - - {moment(enrollementEndDate).format("DD MMMM,YYYY") ?? "N/A"} + + {moment(enrollementEndDate ?? Date.now()).format( + "DD MMMM,YYYY" + ) ?? "N/A"}

diff --git a/src/components/CourseDetails/TabBar.tsx b/src/components/CourseDetails/TabBar.tsx index 425273c..dbe6c8f 100644 --- a/src/components/CourseDetails/TabBar.tsx +++ b/src/components/CourseDetails/TabBar.tsx @@ -5,7 +5,7 @@ const TabBar = () => {