Reem/sprint1/feature/base course page

frontend/src/App.js

@@ -38,8 +38,14 @@ 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';
+import CourseViewITE from './pages/CourseViewITE';
+import CourseViewInstructor from './pages/CourseViewInstructor';
+
 function App() {
   return (
     <div className="App">
@@ -69,8 +75,23 @@ function App() {
             element ={<AddPromotionCourse/>} />
 
             <Route 
-            exact path="api/courses/getCourse/:courseid"
-            element={<CourseView/>} />
+            exact path="/api/courses/getCourse/:courseid/guest"
+            element={<CourseViewGuest/>} />
+            {/* test Route */}
+            {/* <Route 
+            exact path="/api/teesst"
+            element={<TestCard/>}/> */}
+            <Route 
+            exact path="/api/courses/getCourse/:courseid/CTR"
+            element={<CourseViewCTR/>}/>
+            <Route 
+            exact path="/api/courses/getCourse/:courseid/ITE"
+            element={<CourseViewITE/>}/>
+
+           <Route 
+            exact path="/api/courses/getCourse/:courseid/Instructor"
+            element={<CourseViewInstructor/>}/>
+
 
             {/* Nada */}
 

frontend/src/components/Card.js → frontend/src/components/SubtitleCard.js

@@ -1,7 +1,7 @@
 import {StyleCard} from './styles/Card.style'
 
-export default function  Card({subtitle:{_id,title ,totalHours, tasks}}){
-
+export default function  SubtitleCard({subtitle:{_id,title ,totalHours, tasks}}){
+ 
 
     return (
         <StyleCard>

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;

frontend/src/pages/AddPromotionCourse.js

@@ -1,6 +1,6 @@
 import axios from "axios";
 import { useState } from "react"
-import {useParams} from "react-router-dom";
+import {useNavigate, useParams} from "react-router-dom";
 import "../index.css"
 
 
@@ -16,6 +16,9 @@ const AddPromotionCourse=()=>{
      //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);
 
      }
 

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 (
+
+        <div>
+            <div>
+
+               < StyledCourseHeader>
+               <h3> {course&&course.title} </h3>
+               <h6>Total Hours :{course&&course.totalhours}</h6>
+               <h6>Price:  {course&&coursePriceAfterDiscount}</h6>
+
+               </StyledCourseHeader>
+
+
+             </div>
+
+
+
+                    <Box
+                         //margin
+                        mt={1}
+                        ml={0}
+                        pl={0}
+
+
+
+
+                         display="flex"
+                        justifyContent="flex-start"
+                        alignItems="flex-start"
+
+                           >
+
+                         <Button  style={{ maxHeight: '50px', maxWidth: '100px', minHeight: '50px',  }} variant="contained"  sx={{ height: 40 }}>
+                         Request Access
+                           </Button>
+                    </Box>
+
+
+
+
+
+
+              <div>
+                 {/* subtitles */}
+
+                  {courseSubtitles.map((subtitle)=>(
+                        <SubtitleCard key={subtitle._id}  subtitle={subtitle}/> 
+                         ))}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+             </div>
+
+
+
+    </div>
+    )
+}
+
+export default CourseViewCTR;

frontend/src/pages/CourseView.js → frontend/src/pages/CourseViewGuest.js

@@ -5,7 +5,7 @@ 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 SubtitleCard from '../components/SubtitleCard'
 // import Card from '@mui/material/Card';
 // import CardActions from '@mui/material/CardActions';
 // import CardContent from '@mui/material/CardContent';
@@ -15,7 +15,7 @@ import Card from '../components/Card'
 
 
 
-const CourseView=()=>{
+const CourseViewGuest=()=>{
     // const useStyles=makeStyles({
     //     courseTitle:{
     //         fontSize:60,
@@ -126,6 +126,8 @@ const CourseView=()=>{
                 </Typography> */}
                < StyledCourseHeader>
                <h3> {course&&course.title} </h3>
+               <h6>Total Hours :{course&&course.totalhours}</h6>
+               <h6>Price:  {course&&coursePriceAfterDiscount}</h6>
 
                </StyledCourseHeader>
 
@@ -154,7 +156,7 @@ const CourseView=()=>{
 
 
                       {courseSubtitles.map((subtitle)=>(
-                        <Card key={subtitle._id}  subtitle={subtitle}/> 
+                        <SubtitleCard key={subtitle._id}  subtitle={subtitle}/> 
                          ))}
 
 
@@ -178,4 +180,4 @@ const CourseView=()=>{
     )
 }
 
-export default CourseView;
+export default CourseViewGuest;