From 8fb8361e8c51f7359f8015f86061d983edaefee9 Mon Sep 17 00:00:00 2001 From: Reem Date: Mon, 26 Dec 2022 10:54:04 +0200 Subject: [PATCH 01/10] .. --- frontend/src/pages/CourseViewPage.jsx | 139 ++++++++++++++++++++++++++ package.json | 5 +- 2 files changed, 143 insertions(+), 1 deletion(-) create mode 100644 frontend/src/pages/CourseViewPage.jsx diff --git a/frontend/src/pages/CourseViewPage.jsx b/frontend/src/pages/CourseViewPage.jsx new file mode 100644 index 0000000..9249b42 --- /dev/null +++ b/frontend/src/pages/CourseViewPage.jsx @@ -0,0 +1,139 @@ +import React from 'react' + +import axios from 'axios'; +import {useEffect, useState} from 'react'; +import { useParams } from 'react-router-dom'; +import HomeNavBar from '../components/HomeNavBar'; + +export default function CourseViewPage() { + + const [course,setCourse]=useState(null); + const [coursePriceAfterDiscount,setPrice]=useState(''); + const [courseSubtitles,setCourseSubtitles]=useState([]); + + ///api/courses + const {courseid}=useParams(); + + + + //Using useEffect to run only on 1st render to display the course's data + useEffect( ()=>{ + const getCourseanditsSubtitle=async()=>{ + + + try{ + //Sending a get request to the server to get course + const response= await axios.get('http://localhost:5000/api/courses/',{params :{id:courseid}}); + const coursedata=response.data; + setCourse(coursedata); + + //handling setting course price according to discount and its expiry date + //checking if expiry date has passed + //getting today's date (day 1) + let currentdate =new Date(); + let year=currentdate.getFullYear(); + let month=currentdate.getMonth()+1; //because it outputs a number from 0-11 ex:3-->April + let day =currentdate.getDate(); + let dateCformat=`${year}-${month}-${day}` //current date in appropriate format. + let dateC=new Date(dateCformat); + //console.log(dateCformat); + + //getting expiry date from DB "through server response" + const expirydate=coursedata.discountExpireAt; + const dateEformat=expirydate.substring(0,10); //Put it in appropriate format + const dateE=new Date(dateEformat); + //console.log(dateEformat); + + //Comparing current date with expiry date + console.log(dateC.getTime()<=dateE.getTime()); + if(dateC.getTime()<=dateE.getTime()){ + + const newPrice=course.discount*course.price; + setPrice(newPrice); + } + + else{ + setPrice(coursedata.price); + } + + + + //Sending a get request to server to get this course's Subtitles + const response2=await axios.get(`http://localhost:5000/api/courses/getSubtitlesforCourse/${courseid}`); + const subtitlesArray=response2.data; + setCourseSubtitles(subtitlesArray); + + + + + + } + //catching any request error + catch (error){ + + } + + } + + getCourseanditsSubtitle(); } + ,[courseid] ); + + + return ( +
+ {/* */} +
+
+ +
+ + + +
+
+
+ {/* */} + + {/* */} +
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
Over 36,500+ Courses
+

Find Interesting Online Courses

+
+
+ + +
+
+
+ + + + +
+ +); + + +} diff --git a/package.json b/package.json index b90cc31..e1e52bf 100644 --- a/package.json +++ b/package.json @@ -39,9 +39,12 @@ "react-icons": "^4.7.1", "sass": "^1.56.2", "styled": "^1.0.0" + }, "devDependencies": { "concurrently": "^7.5.0", - "nodemon": "^2.0.20" + "nodemon": "^2.0.20" + + } } From fee5310e734386bbb8d29057925dbb0fc4688bbf Mon Sep 17 00:00:00 2001 From: Reem Date: Mon, 26 Dec 2022 13:55:09 +0200 Subject: [PATCH 02/10] . --- frontend/src/pages/CourseViewPage.js | 116 --------------------------- 1 file changed, 116 deletions(-) delete mode 100644 frontend/src/pages/CourseViewPage.js diff --git a/frontend/src/pages/CourseViewPage.js b/frontend/src/pages/CourseViewPage.js deleted file mode 100644 index 7f1d771..0000000 --- a/frontend/src/pages/CourseViewPage.js +++ /dev/null @@ -1,116 +0,0 @@ -import React from 'react' - -import axios from 'axios'; -import {useEffect, useState} from 'react'; -import { useParams } from 'react-router-dom'; -import HomeNavBar from '../components/HomeNavBar'; - -export default function CourseViewPage() { - - const [course,setCourse]=useState(null); - const [coursePriceAfterDiscount,setPrice]=useState(''); - const [courseSubtitles,setCourseSubtitles]=useState([]); - - ///api/courses - const {courseid}=useParams(); - - - - //Using useEffect to run only on 1st render to display the course's data - useEffect( ()=>{ - const getCourseanditsSubtitle=async()=>{ - - - try{ - //Sending a get request to the server to get course - const response= await axios.get('http://localhost:5000/api/courses/',{params :{id:courseid}}); - const coursedata=response.data; - setCourse(coursedata); - - //handling setting course price according to discount and its expiry date - //checking if expiry date has passed - //getting today's date (day 1) - let currentdate =new Date(); - let year=currentdate.getFullYear(); - let month=currentdate.getMonth()+1; //because it outputs a number from 0-11 ex:3-->April - let day =currentdate.getDate(); - let dateCformat=`${year}-${month}-${day}` //current date in appropriate format. - let dateC=new Date(dateCformat); - //console.log(dateCformat); - - //getting expiry date from DB "through server response" - const expirydate=coursedata.discountExpireAt; - const dateEformat=expirydate.substring(0,10); //Put it in appropriate format - const dateE=new Date(dateEformat); - //console.log(dateEformat); - - //Comparing current date with expiry date - console.log(dateC.getTime()<=dateE.getTime()); - if(dateC.getTime()<=dateE.getTime()){ - - const newPrice=course.discount*course.price; - setPrice(newPrice); - } - - else{ - setPrice(coursedata.price); - } - - - - //Sending a get request to server to get this course's Subtitles - const response2=await axios.get(`http://localhost:5000/api/courses/getSubtitlesforCourse/${courseid}`); - const subtitlesArray=response2.data; - setCourseSubtitles(subtitlesArray); - - - - - - } - //catching any request error - catch (error){ - - } - - } - - getCourseanditsSubtitle(); } - ,[courseid] ); - - - return ( -
- {/* */} -
-
- -
- - - -
-
-
- {/* */} - - {/* */} -
-
-
-
- -
-
-
-
- - - - -
- -); - - -} From 9ee7ea930c69faf121d5803b4e34d4f18164542a Mon Sep 17 00:00:00 2001 From: Reem Date: Wed, 28 Dec 2022 00:46:12 +0200 Subject: [PATCH 03/10] changed CourseView.js --- frontend/src/pages/CourseView.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/frontend/src/pages/CourseView.js b/frontend/src/pages/CourseView.js index 22dc51a..1eb5c90 100644 --- a/frontend/src/pages/CourseView.js +++ b/frontend/src/pages/CourseView.js @@ -126,6 +126,8 @@ const CourseView=()=>{ */} < StyledCourseHeader>

{course&&course.title}

+
Total Hours :{course&&course.totalhours}
+
Price: {course&&coursePriceAfterDiscount}
From 8dbaad49478665da4a549cfff6b5f450b857e1a2 Mon Sep 17 00:00:00 2001 From: Reem Date: Wed, 28 Dec 2022 10:24:16 +0200 Subject: [PATCH 04/10] Testing mui Card+CourseViewGuest --- frontend/src/App.js | 9 +- frontend/src/components/Card.js | 2 +- frontend/src/components/SubtitleCard.js | 40 ++++++ frontend/src/pages/CourseViewGuest.js | 183 ++++++++++++++++++++++++ 4 files changed, 232 insertions(+), 2 deletions(-) create mode 100644 frontend/src/components/SubtitleCard.js create mode 100644 frontend/src/pages/CourseViewGuest.js diff --git a/frontend/src/App.js b/frontend/src/App.js index eeb16b7..71350c4 100644 --- a/frontend/src/App.js +++ b/frontend/src/App.js @@ -40,6 +40,9 @@ import Signup from './pages/Signup'; import AddPromotionCourse from './pages/AddPromotionCourse'; import CourseView from './pages/CourseView'; import CourseViewPage from './pages/CourseViewPage'; +//test +import TestCard from './pages/TestCard'; + function App() { return (
@@ -69,8 +72,12 @@ function App() { element ={} /> } /> + {/* test Route */} + }/> {/* Nada */} diff --git a/frontend/src/components/Card.js b/frontend/src/components/Card.js index 44e2b34..0ad1c94 100644 --- a/frontend/src/components/Card.js +++ b/frontend/src/components/Card.js @@ -1,7 +1,7 @@ import {StyleCard} from './styles/Card.style' export default function Card({subtitle:{_id,title ,totalHours, tasks}}){ - + return ( diff --git a/frontend/src/components/SubtitleCard.js b/frontend/src/components/SubtitleCard.js new file mode 100644 index 0000000..bc21539 --- /dev/null +++ b/frontend/src/components/SubtitleCard.js @@ -0,0 +1,40 @@ +import {StyleCard} from './styles/Card.style' + +export default function SubtitleCard({subtitle:{_id,title ,totalHours, tasks}}){ + + + return ( + +
+ +
{title}
+
total hours :{totalHours}
+

+
Exercises:
+ {tasks.map((task)=>( + +
+ + + +
+
  • {task.title}
    • +
    + + +
    + + + + ))} + + + + + +
    + + +     + ) +} \ No newline at end of file diff --git a/frontend/src/pages/CourseViewGuest.js b/frontend/src/pages/CourseViewGuest.js new file mode 100644 index 0000000..b152f7e --- /dev/null +++ b/frontend/src/pages/CourseViewGuest.js @@ -0,0 +1,183 @@ +import axios from 'axios'; +import {useEffect, useState} from 'react'; +import { useParams } from 'react-router-dom'; +import { makeStyles } from '@mui/styles'; +import {Typography} from '@mui/material'; +import { blue } from '@mui/material/colors'; +import {StyledCourseHeader} from '../components/styles/CourseHeader.style' +import SubtitleCard from '../components/SubtitleCard' +// import Card from '@mui/material/Card'; +// import CardActions from '@mui/material/CardActions'; +// import CardContent from '@mui/material/CardContent'; + + +//stylings custom css + + + +const CourseViewGuest=()=>{ + // const useStyles=makeStyles({ + // courseTitle:{ + // fontSize:60, + // color:blue, + + + + // } + // }) + + //styles + // const classes=useStyles(); + + const [course,setCourse]=useState(null); + const [coursePriceAfterDiscount,setPrice]=useState(''); + const [courseSubtitles,setCourseSubtitles]=useState([]); + + ///api/courses + const {courseid}=useParams(); + + + + //Using useEffect to run only on 1st render to display the course's data + useEffect( ()=>{ + const getCourseanditsSubtitle=async()=>{ + + + try{ + //Sending a get request to the server to get course + const response= await axios.get('http://localhost:5000/api/courses/',{params :{id:courseid}}); + const coursedata=response.data; + setCourse(coursedata); + + //handling setting course price according to discount and its expiry date + //checking if expiry date has passed + //getting today's date (day 1) + let currentdate =new Date(); + let year=currentdate.getFullYear(); + let month=currentdate.getMonth()+1; //because it outputs a number from 0-11 ex:3-->April + let day =currentdate.getDate(); + let dateCformat=`${year}-${month}-${day}` //current date in appropriate format. + let dateC=new Date(dateCformat); + //console.log(dateCformat); + + //getting expiry date from DB "through server response" + const expirydate=coursedata.discountExpireAt; + const dateEformat=expirydate.substring(0,10); //Put it in appropriate format + const dateE=new Date(dateEformat); + //console.log(dateEformat); + + //Comparing current date with expiry date + console.log(dateC.getTime()<=dateE.getTime()); + if(dateC.getTime()<=dateE.getTime()){ + + const newPrice=course.discount*course.price; + setPrice(newPrice); + } + + else{ + setPrice(coursedata.price); + } + + + + //Sending a get request to server to get this course's Subtitles + const response2=await axios.get(`http://localhost:5000/api/courses/getSubtitlesforCourse/${courseid}`); + const subtitlesArray=response2.data; + setCourseSubtitles(subtitlesArray); + + + + + + } + //catching any request error + catch (error){ + + } + + } + + getCourseanditsSubtitle(); } + ,[courseid] ); + + + + + + return ( + +
    +
    + {/* we check that course is not null before getting its attributes using boolean operator && AND + {course&&course.title} + + Total Hours :{course&&course.totalhours} + + + Price: {course&&coursePriceAfterDiscount} + */} + < StyledCourseHeader> +

    {course&&course.title}

    +
    Total Hours :{course&&course.totalhours}
    +
    Price: {course&&coursePriceAfterDiscount}
    + + + + +
    + + + + + + +
    + {/* subtitles */} + + + {/* {courseSubtitles.map((subtitle)=>( +
    +
    {subtitle.title}
    +
    total hours :{subtitle.totalHours}
    + {subtitle.tasks.map((task)=>( +
    +

    {task.title}

    +
    + + ))} */} + + + {courseSubtitles.map((subtitle)=>( + + ))} + + + + + + + + + + + + + + +
    + + + +
    + ) +} + +export default CourseViewGuest; \ No newline at end of file From b48d5b5558c606bf84bd4c3f8b5f44198581aacd Mon Sep 17 00:00:00 2001 From: Reem Date: Wed, 28 Dec 2022 11:20:02 +0200 Subject: [PATCH 05/10] CourseViewCorporateTrainee (Request Access) --- frontend/src/App.js | 16 ++- frontend/src/pages/CourseViewCTR.js | 182 ++++++++++++++++++++++++++++ 2 files changed, 192 insertions(+), 6 deletions(-) create mode 100644 frontend/src/pages/CourseViewCTR.js diff --git a/frontend/src/App.js b/frontend/src/App.js index 71350c4..1aeec34 100644 --- a/frontend/src/App.js +++ b/frontend/src/App.js @@ -38,10 +38,11 @@ import Policy from './pages//PaymentPolicy' import Signup from './pages/Signup'; import AddPromotionCourse from './pages/AddPromotionCourse'; -import CourseView from './pages/CourseView'; -import CourseViewPage from './pages/CourseViewPage'; +import CourseViewGuest from './pages/CourseViewGuest'; + //test import TestCard from './pages/TestCard'; +import CourseViewCTR from './pages/CourseViewCTR'; function App() { return ( @@ -72,12 +73,15 @@ function App() { element ={} /> } /> + exact path="/api/courses/getCourse/:courseid/guest" + element={} /> {/* test Route */} - }/> + element={}/> */} + }/> {/* Nada */} diff --git a/frontend/src/pages/CourseViewCTR.js b/frontend/src/pages/CourseViewCTR.js new file mode 100644 index 0000000..1af0b45 --- /dev/null +++ b/frontend/src/pages/CourseViewCTR.js @@ -0,0 +1,182 @@ +import axios from 'axios'; +import {useEffect, useState} from 'react'; +import { useParams } from 'react-router-dom'; +import { makeStyles } from '@mui/styles'; +import {Typography} from '@mui/material'; +import { blue } from '@mui/material/colors'; +import {StyledCourseHeader} from '../components/styles/CourseHeader.style' +import SubtitleCard from '../components/SubtitleCard' +// import Card from '@mui/material/Card'; +// import CardActions from '@mui/material/CardActions'; +// import CardContent from '@mui/material/CardContent'; +import Box from '@mui/material/Box'; +import Button from '@mui/material/Button'; +import { spacing } from '@mui/system'; +import { positions } from '@mui/system'; + + + +//stylings custom css + + + +const CourseViewCTR=()=>{ + // const useStyles=makeStyles({ + // courseTitle:{ + // fontSize:60, + // color:blue, + + + + // } + // }) + + //styles + // const classes=useStyles(); + + const [course,setCourse]=useState(null); + const [coursePriceAfterDiscount,setPrice]=useState(''); + const [courseSubtitles,setCourseSubtitles]=useState([]); + + ///api/courses + const {courseid}=useParams(); + + + + //Using useEffect to run only on 1st render to display the course's data + useEffect( ()=>{ + const getCourseanditsSubtitle=async()=>{ + + + try{ + //Sending a get request to the server to get course + const response= await axios.get('http://localhost:5000/api/courses/',{params :{id:courseid}}); + const coursedata=response.data; + setCourse(coursedata); + + //handling setting course price according to discount and its expiry date + //checking if expiry date has passed + //getting today's date (day 1) + let currentdate =new Date(); + let year=currentdate.getFullYear(); + let month=currentdate.getMonth()+1; //because it outputs a number from 0-11 ex:3-->April + let day =currentdate.getDate(); + let dateCformat=`${year}-${month}-${day}` //current date in appropriate format. + let dateC=new Date(dateCformat); + //console.log(dateCformat); + + //getting expiry date from DB "through server response" + const expirydate=coursedata.discountExpireAt; + const dateEformat=expirydate.substring(0,10); //Put it in appropriate format + const dateE=new Date(dateEformat); + //console.log(dateEformat); + + //Comparing current date with expiry date + console.log(dateC.getTime()<=dateE.getTime()); + if(dateC.getTime()<=dateE.getTime()){ + + const newPrice=course.discount*course.price; + setPrice(newPrice); + } + + else{ + setPrice(coursedata.price); + } + + + + //Sending a get request to server to get this course's Subtitles + const response2=await axios.get(`http://localhost:5000/api/courses/getSubtitlesforCourse/${courseid}`); + const subtitlesArray=response2.data; + setCourseSubtitles(subtitlesArray); + + + + + + } + //catching any request error + catch (error){ + + } + + } + + getCourseanditsSubtitle(); } + ,[courseid] ); + + + + + + return ( + +
    +
    + + < StyledCourseHeader> +

    {course&&course.title}

    +
    Total Hours :{course&&course.totalhours}
    +
    Price: {course&&coursePriceAfterDiscount}
    + + + + +
    + + + + + + + + + + + + + +
    + {/* subtitles */} + + {courseSubtitles.map((subtitle)=>( + + ))} + + + + + + + + + + + + + + +
    + + + +
    + ) +} + +export default CourseViewCTR; \ No newline at end of file From 2acfe9245b546dd7077c367348c47682364ab1be Mon Sep 17 00:00:00 2001 From: Reem Date: Wed, 28 Dec 2022 11:20:27 +0200 Subject: [PATCH 06/10] TestCard --- frontend/src/pages/TestCard.js | 48 ++++++++++++++++++++++++++++++++++ 1 file changed, 48 insertions(+) create mode 100644 frontend/src/pages/TestCard.js diff --git a/frontend/src/pages/TestCard.js b/frontend/src/pages/TestCard.js new file mode 100644 index 0000000..48d4bc7 --- /dev/null +++ b/frontend/src/pages/TestCard.js @@ -0,0 +1,48 @@ +import Card from '@mui/material/Card'; +import CardActions from '@mui/material/CardActions'; +import CardContent from '@mui/material/CardContent'; +//import CardMedia from '@mui/material/CardMedia'; +import Button from '@mui/material/Button'; +import Typography from '@mui/material/Typography'; +import { shadows } from '@mui/system'; +import { Box } from '@mui/system'; +import { useNavigate } from 'react-router-dom'; +import {Link} from 'react-router-dom'; + +export default function ImgMediaCard() { + const navigate=useNavigate(); + const handleClick=()=>{ + navigate('/api/courses/addPromotion/:courseid'); + navigate(0); + } + + return ( + + + + {/* + Lizard + */} + {/* */} + + Lizard + + {/* */} +
      +
    • Reem
      • +
    + + Lizards are a widespread group of squamate reptiles, with over 6,000 + species, ranging across all continents except Antarctica + +     + + + + + +     + + + ); +} \ No newline at end of file From 6f3545e104832ea047db03a503825a373ab831e5 Mon Sep 17 00:00:00 2001 From: Reem Date: Wed, 28 Dec 2022 11:20:59 +0200 Subject: [PATCH 07/10] .. --- frontend/src/components/Card.js | 40 ------ frontend/src/pages/CourseView.js | 183 -------------------------- frontend/src/pages/CourseViewPage.jsx | 139 ------------------- 3 files changed, 362 deletions(-) delete mode 100644 frontend/src/components/Card.js delete mode 100644 frontend/src/pages/CourseView.js delete mode 100644 frontend/src/pages/CourseViewPage.jsx diff --git a/frontend/src/components/Card.js b/frontend/src/components/Card.js deleted file mode 100644 index 0ad1c94..0000000 --- a/frontend/src/components/Card.js +++ /dev/null @@ -1,40 +0,0 @@ -import {StyleCard} from './styles/Card.style' - -export default function Card({subtitle:{_id,title ,totalHours, tasks}}){ - - - return ( - -
    - -
    {title}
    -
    total hours :{totalHours}
    -

    -
    Exercises:
    - {tasks.map((task)=>( - -
    - - - -
    -
  • {task.title}
    • -
    - - -
    - - - - ))} - - - - - -
    - - -     - ) -} \ No newline at end of file diff --git a/frontend/src/pages/CourseView.js b/frontend/src/pages/CourseView.js deleted file mode 100644 index 1eb5c90..0000000 --- a/frontend/src/pages/CourseView.js +++ /dev/null @@ -1,183 +0,0 @@ -import axios from 'axios'; -import {useEffect, useState} from 'react'; -import { useParams } from 'react-router-dom'; -import { makeStyles } from '@mui/styles'; -import {Typography} from '@mui/material'; -import { blue } from '@mui/material/colors'; -import {StyledCourseHeader} from '../components/styles/CourseHeader.style' -import Card from '../components/Card' -// import Card from '@mui/material/Card'; -// import CardActions from '@mui/material/CardActions'; -// import CardContent from '@mui/material/CardContent'; - - -//stylings custom css - - - -const CourseView=()=>{ - // const useStyles=makeStyles({ - // courseTitle:{ - // fontSize:60, - // color:blue, - - - - // } - // }) - - //styles - // const classes=useStyles(); - - const [course,setCourse]=useState(null); - const [coursePriceAfterDiscount,setPrice]=useState(''); - const [courseSubtitles,setCourseSubtitles]=useState([]); - - ///api/courses - const {courseid}=useParams(); - - - - //Using useEffect to run only on 1st render to display the course's data - useEffect( ()=>{ - const getCourseanditsSubtitle=async()=>{ - - - try{ - //Sending a get request to the server to get course - const response= await axios.get('http://localhost:5000/api/courses/',{params :{id:courseid}}); - const coursedata=response.data; - setCourse(coursedata); - - //handling setting course price according to discount and its expiry date - //checking if expiry date has passed - //getting today's date (day 1) - let currentdate =new Date(); - let year=currentdate.getFullYear(); - let month=currentdate.getMonth()+1; //because it outputs a number from 0-11 ex:3-->April - let day =currentdate.getDate(); - let dateCformat=`${year}-${month}-${day}` //current date in appropriate format. - let dateC=new Date(dateCformat); - //console.log(dateCformat); - - //getting expiry date from DB "through server response" - const expirydate=coursedata.discountExpireAt; - const dateEformat=expirydate.substring(0,10); //Put it in appropriate format - const dateE=new Date(dateEformat); - //console.log(dateEformat); - - //Comparing current date with expiry date - console.log(dateC.getTime()<=dateE.getTime()); - if(dateC.getTime()<=dateE.getTime()){ - - const newPrice=course.discount*course.price; - setPrice(newPrice); - } - - else{ - setPrice(coursedata.price); - } - - - - //Sending a get request to server to get this course's Subtitles - const response2=await axios.get(`http://localhost:5000/api/courses/getSubtitlesforCourse/${courseid}`); - const subtitlesArray=response2.data; - setCourseSubtitles(subtitlesArray); - - - - - - } - //catching any request error - catch (error){ - - } - - } - - getCourseanditsSubtitle(); } - ,[courseid] ); - - - - - - return ( - -
    -
    - {/* we check that course is not null before getting its attributes using boolean operator && AND - {course&&course.title} - - Total Hours :{course&&course.totalhours} - - - Price: {course&&coursePriceAfterDiscount} - */} - < StyledCourseHeader> -

    {course&&course.title}

    -
    Total Hours :{course&&course.totalhours}
    -
    Price: {course&&coursePriceAfterDiscount}
    - - - - -
    - - - - - - -
    - {/* subtitles */} - - - {/* {courseSubtitles.map((subtitle)=>( -
    -
    {subtitle.title}
    -
    total hours :{subtitle.totalHours}
    - {subtitle.tasks.map((task)=>( -
    -

    {task.title}

    -
    - - ))} */} - - - {courseSubtitles.map((subtitle)=>( - - ))} - - - - - - - - - - - - - - -
    - - - -
    - ) -} - -export default CourseView; \ No newline at end of file diff --git a/frontend/src/pages/CourseViewPage.jsx b/frontend/src/pages/CourseViewPage.jsx deleted file mode 100644 index 9249b42..0000000 --- a/frontend/src/pages/CourseViewPage.jsx +++ /dev/null @@ -1,139 +0,0 @@ -import React from 'react' - -import axios from 'axios'; -import {useEffect, useState} from 'react'; -import { useParams } from 'react-router-dom'; -import HomeNavBar from '../components/HomeNavBar'; - -export default function CourseViewPage() { - - const [course,setCourse]=useState(null); - const [coursePriceAfterDiscount,setPrice]=useState(''); - const [courseSubtitles,setCourseSubtitles]=useState([]); - - ///api/courses - const {courseid}=useParams(); - - - - //Using useEffect to run only on 1st render to display the course's data - useEffect( ()=>{ - const getCourseanditsSubtitle=async()=>{ - - - try{ - //Sending a get request to the server to get course - const response= await axios.get('http://localhost:5000/api/courses/',{params :{id:courseid}}); - const coursedata=response.data; - setCourse(coursedata); - - //handling setting course price according to discount and its expiry date - //checking if expiry date has passed - //getting today's date (day 1) - let currentdate =new Date(); - let year=currentdate.getFullYear(); - let month=currentdate.getMonth()+1; //because it outputs a number from 0-11 ex:3-->April - let day =currentdate.getDate(); - let dateCformat=`${year}-${month}-${day}` //current date in appropriate format. - let dateC=new Date(dateCformat); - //console.log(dateCformat); - - //getting expiry date from DB "through server response" - const expirydate=coursedata.discountExpireAt; - const dateEformat=expirydate.substring(0,10); //Put it in appropriate format - const dateE=new Date(dateEformat); - //console.log(dateEformat); - - //Comparing current date with expiry date - console.log(dateC.getTime()<=dateE.getTime()); - if(dateC.getTime()<=dateE.getTime()){ - - const newPrice=course.discount*course.price; - setPrice(newPrice); - } - - else{ - setPrice(coursedata.price); - } - - - - //Sending a get request to server to get this course's Subtitles - const response2=await axios.get(`http://localhost:5000/api/courses/getSubtitlesforCourse/${courseid}`); - const subtitlesArray=response2.data; - setCourseSubtitles(subtitlesArray); - - - - - - } - //catching any request error - catch (error){ - - } - - } - - getCourseanditsSubtitle(); } - ,[courseid] ); - - - return ( -
    - {/* */} -
    -
    - -
    - - - -
    -
    -
    - {/* */} - - {/* */} -
    -
    -
    -
    - -
    -
    -
    -
    - -
    -
    -
    -
    -
    -
    Over 36,500+ Courses
    -

    Find Interesting Online Courses

    -
    -
    - - -
    -
    -
    - - - - -
    - -); - - -} From 39706c73604613a851a49888008185caf0c9d2b2 Mon Sep 17 00:00:00 2001 From: Reem Date: Wed, 28 Dec 2022 11:51:45 +0200 Subject: [PATCH 08/10] CourseView Individual Trainee (Enroll) --- frontend/src/App.js | 4 + frontend/src/components/styles/Card.style.js | 2 + frontend/src/pages/CourseViewITE.js | 182 +++++++++++++++++++ 3 files changed, 188 insertions(+) create mode 100644 frontend/src/pages/CourseViewITE.js diff --git a/frontend/src/App.js b/frontend/src/App.js index 1aeec34..00256c0 100644 --- a/frontend/src/App.js +++ b/frontend/src/App.js @@ -43,6 +43,7 @@ import CourseViewGuest from './pages/CourseViewGuest'; //test import TestCard from './pages/TestCard'; import CourseViewCTR from './pages/CourseViewCTR'; +import CourseViewITE from './pages/CourseViewITE'; function App() { return ( @@ -82,6 +83,9 @@ function App() { }/> + }/> {/* Nada */} diff --git a/frontend/src/components/styles/Card.style.js b/frontend/src/components/styles/Card.style.js index 887ddf1..fd2330a 100644 --- a/frontend/src/components/styles/Card.style.js +++ b/frontend/src/components/styles/Card.style.js @@ -12,6 +12,8 @@ box-shadow :0 0 5px rgba (0,0,0,0.15); margin:5px 5px 5px; padding :0px; position :relative; +width: 900px; + h6{ margin :5px 5px 10px; diff --git a/frontend/src/pages/CourseViewITE.js b/frontend/src/pages/CourseViewITE.js new file mode 100644 index 0000000..eb369c7 --- /dev/null +++ b/frontend/src/pages/CourseViewITE.js @@ -0,0 +1,182 @@ +import axios from 'axios'; +import {useEffect, useState} from 'react'; +import { useParams } from 'react-router-dom'; +import { makeStyles } from '@mui/styles'; +import {Typography} from '@mui/material'; +import { blue } from '@mui/material/colors'; +import {StyledCourseHeader} from '../components/styles/CourseHeader.style' +import SubtitleCard from '../components/SubtitleCard' +// import Card from '@mui/material/Card'; +// import CardActions from '@mui/material/CardActions'; +// import CardContent from '@mui/material/CardContent'; +import Box from '@mui/material/Box'; +import Button from '@mui/material/Button'; +import { spacing } from '@mui/system'; +import { positions } from '@mui/system'; + + + +//stylings custom css + + + +const CourseViewITE=()=>{ + // const useStyles=makeStyles({ + // courseTitle:{ + // fontSize:60, + // color:blue, + + + + // } + // }) + + //styles + // const classes=useStyles(); + + const [course,setCourse]=useState(null); + const [coursePriceAfterDiscount,setPrice]=useState(''); + const [courseSubtitles,setCourseSubtitles]=useState([]); + + ///api/courses + const {courseid}=useParams(); + + + + //Using useEffect to run only on 1st render to display the course's data + useEffect( ()=>{ + const getCourseanditsSubtitle=async()=>{ + + + try{ + //Sending a get request to the server to get course + const response= await axios.get('http://localhost:5000/api/courses/',{params :{id:courseid}}); + const coursedata=response.data; + setCourse(coursedata); + + //handling setting course price according to discount and its expiry date + //checking if expiry date has passed + //getting today's date (day 1) + let currentdate =new Date(); + let year=currentdate.getFullYear(); + let month=currentdate.getMonth()+1; //because it outputs a number from 0-11 ex:3-->April + let day =currentdate.getDate(); + let dateCformat=`${year}-${month}-${day}` //current date in appropriate format. + let dateC=new Date(dateCformat); + //console.log(dateCformat); + + //getting expiry date from DB "through server response" + const expirydate=coursedata.discountExpireAt; + const dateEformat=expirydate.substring(0,10); //Put it in appropriate format + const dateE=new Date(dateEformat); + //console.log(dateEformat); + + //Comparing current date with expiry date + console.log(dateC.getTime()<=dateE.getTime()); + if(dateC.getTime()<=dateE.getTime()){ + + const newPrice=course.discount*course.price; + setPrice(newPrice); + } + + else{ + setPrice(coursedata.price); + } + + + + //Sending a get request to server to get this course's Subtitles + const response2=await axios.get(`http://localhost:5000/api/courses/getSubtitlesforCourse/${courseid}`); + const subtitlesArray=response2.data; + setCourseSubtitles(subtitlesArray); + + + + + + } + //catching any request error + catch (error){ + + } + + } + + getCourseanditsSubtitle(); } + ,[courseid] ); + + + + + + return ( + +
    +
    + + < StyledCourseHeader> +

    {course&&course.title}

    +
    Total Hours :{course&&course.totalhours}
    +
    Price: {course&&coursePriceAfterDiscount}
    + + + + +
    + + + + + + + + + + + + + +
    + {/* subtitles */} + + {courseSubtitles.map((subtitle)=>( + + ))} + + + + + + + + + + + + + + +
    + + + +
    + ) +} + +export default CourseViewITE; \ No newline at end of file From bd4ef0ec247ff10cc04137ec94cc5c0ba7caae90 Mon Sep 17 00:00:00 2001 From: Reem Date: Wed, 28 Dec 2022 20:35:02 +0200 Subject: [PATCH 09/10] Instructor CourseView partial implementation --- frontend/src/App.js | 6 + frontend/src/pages/AddPromotionCourse.js | 7 +- frontend/src/pages/CourseViewInstructor.js | 192 +++++++++++++++++++++ 3 files changed, 204 insertions(+), 1 deletion(-) create mode 100644 frontend/src/pages/CourseViewInstructor.js diff --git a/frontend/src/App.js b/frontend/src/App.js index 00256c0..4c7c75a 100644 --- a/frontend/src/App.js +++ b/frontend/src/App.js @@ -44,6 +44,7 @@ import CourseViewGuest from './pages/CourseViewGuest'; import TestCard from './pages/TestCard'; import CourseViewCTR from './pages/CourseViewCTR'; import CourseViewITE from './pages/CourseViewITE'; +import CourseViewInstructor from './pages/CourseViewInstructor'; function App() { return ( @@ -87,6 +88,11 @@ function App() { exact path="/api/courses/getCourse/:courseid/ITE" element={}/> + }/> + + {/* Nada */} { //getting courseid from react route const courseid=useParams().courseid; + //useNavigate + const navigate=useNavigate(); + //handling Submitting const handleSubmit=async(e)=>{ @@ -35,6 +38,8 @@ const AddPromotionCourse=()=>{ //Redirecting //Navigating to Instructor course view Page + navigate(`/api/courses/getCourse/${courseid}/Instructor`); + navigate(0); } diff --git a/frontend/src/pages/CourseViewInstructor.js b/frontend/src/pages/CourseViewInstructor.js new file mode 100644 index 0000000..445ca04 --- /dev/null +++ b/frontend/src/pages/CourseViewInstructor.js @@ -0,0 +1,192 @@ +import axios from 'axios'; +import {useEffect, useState} from 'react'; +import { useNavigate, useParams } from 'react-router-dom'; +import { makeStyles } from '@mui/styles'; +import {Typography} from '@mui/material'; +import { blue } from '@mui/material/colors'; +import {StyledCourseHeader} from '../components/styles/CourseHeader.style' +import SubtitleCard from '../components/SubtitleCard' +// import Card from '@mui/material/Card'; +// import CardActions from '@mui/material/CardActions'; +// import CardContent from '@mui/material/CardContent'; +import Box from '@mui/material/Box'; +import Button from '@mui/material/Button'; +import { spacing } from '@mui/system'; +import { positions } from '@mui/system'; + + + +//stylings custom css + + + +const CourseViewInstructor=()=>{ + // const useStyles=makeStyles({ + // courseTitle:{ + // fontSize:60, + // color:blue, + + + + // } + // }) + + //styles + // const classes=useStyles(); + + const [course,setCourse]=useState(null); + const [coursePriceAfterDiscount,setPrice]=useState(''); + const [courseSubtitles,setCourseSubtitles]=useState([]); + + ///api/courses + const {courseid}=useParams(); + + //useNavigate + const navigate=useNavigate(); + + + //Button Clicking + const handleAddPromotion=()=>{ + navigate(`/api/courses/addPromotion/${courseid}`); + navigate(0); + } + + + + //Using useEffect to run only on 1st render to display the course's data + useEffect( ()=>{ + const getCourseanditsSubtitle=async()=>{ + + + try{ + //Sending a get request to the server to get course + const response= await axios.get('http://localhost:5000/api/courses/',{params :{id:courseid}}); + const coursedata=response.data; + setCourse(coursedata); + + //handling setting course price according to discount and its expiry date + //checking if expiry date has passed + //getting today's date (day 1) + let currentdate =new Date(); + let year=currentdate.getFullYear(); + let month=currentdate.getMonth()+1; //because it outputs a number from 0-11 ex:3-->April + let day =currentdate.getDate(); + let dateCformat=`${year}-${month}-${day}` //current date in appropriate format. + let dateC=new Date(dateCformat); + //console.log(dateCformat); + + //getting expiry date from DB "through server response" + const expirydate=coursedata.discountExpireAt; + const dateEformat=expirydate.substring(0,10); //Put it in appropriate format + const dateE=new Date(dateEformat); + //console.log(dateEformat); + + //Comparing current date with expiry date + console.log(dateC.getTime()<=dateE.getTime()); + if(dateC.getTime()<=dateE.getTime()){ + + const newPrice=course.discount*course.price; + setPrice(newPrice); + } + + else{ + setPrice(coursedata.price); + } + + + + //Sending a get request to server to get this course's Subtitles + const response2=await axios.get(`http://localhost:5000/api/courses/getSubtitlesforCourse/${courseid}`); + const subtitlesArray=response2.data; + setCourseSubtitles(subtitlesArray); + + + + + + } + //catching any request error + catch (error){ + + } + + } + + getCourseanditsSubtitle(); } + ,[courseid] ); + + + + + + return ( + +
    +
    + + < StyledCourseHeader> +

    {course&&course.title}

    +
    Total Hours :{course&&course.totalhours}
    +
    Price: {course&&coursePriceAfterDiscount}
    + + + + +
    + + + + + + + + + + + + + +
    + {/* subtitles */} + + {course&&courseSubtitles.map((subtitle)=>( + + ))} + + + + + + + + + + + + + + +
    + + + +
    + ) +} + +export default CourseViewInstructor; \ No newline at end of file From 783ccecd28baa7e6fa1590717f7ed3a0065a349c Mon Sep 17 00:00:00 2001 From: Reem Date: Wed, 28 Dec 2022 21:22:43 +0200 Subject: [PATCH 10/10] fixed bug --- frontend/src/pages/CourseViewInstructor.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/pages/CourseViewInstructor.js b/frontend/src/pages/CourseViewInstructor.js index 445ca04..82fea6b 100644 --- a/frontend/src/pages/CourseViewInstructor.js +++ b/frontend/src/pages/CourseViewInstructor.js @@ -164,7 +164,7 @@ const CourseViewInstructor=()=>{
    {/* subtitles */} - {course&&courseSubtitles.map((subtitle)=>( + {course && courseSubtitles.map((subtitle)=>( ))}