1- import React , { useEffect , useState } from 'react'
2- import { useHistory , useParams } from 'react-router-dom'
3- import RequestService from 'services/request.service'
4- import { Assignment , Course } from 'devu-shared-modules'
5- //import {useHistory} from "react-router-dom";
6- import PageWrapper from 'components/shared/layouts/pageWrapper'
7- import { wordPrintDate } from 'utils/date.utils'
1+ import React , { useEffect , useState } from 'react' ;
2+ import { useHistory , useParams } from 'react-router-dom' ;
3+ import RequestService from 'services/request.service' ;
4+ import { Assignment , Course } from 'devu-shared-modules' ;
5+ import PageWrapper from 'components/shared/layouts/pageWrapper' ;
6+
7+ import Card from '@mui/material/Card' ;
8+ import CardContent from '@mui/material/CardContent' ;
9+ import Typography from '@mui/material/Typography' ;
10+ import List from '@mui/material/List' ;
11+ import ListItem from '@mui/material/ListItem' ;
12+ import ListItemButton from '@mui/material/ListItemButton' ;
13+ import ListItemText from '@mui/material/ListItemText' ;
14+
15+ import styles from './courseDetailPage.scss' ;
16+ //import { SET_ALERT } from '../../../redux/types/active.types';
17+ import { useAppSelector } from "../../../redux/hooks" ;
18+ import AddAssignmentModal from '../forms/assignments/assignmentFormPage' ;
19+ import { prettyPrintSemester } from 'utils/semester.utils' ;
20+ import { wordPrintDate } from 'utils/date.utils' ;
821
22+ const CourseDetailPage = ( ) => {
23+ const { courseId } = useParams < { courseId : string } > ( ) ;
24+ const [ courseInfo , setCourseInfo ] = useState < Course | null > ( null ) ;
25+ const [ categoryMap , setCategoryMap ] = useState < Record < string , Assignment [ ] > > ( { } ) ;
26+ const history = useHistory ( ) ;
27+ const role = useAppSelector ( ( store ) => store . roleMode ) ;
928
10- import Card from '@mui/material/Card'
11- import CardContent from '@mui/material/CardContent'
12- import Typography from '@mui/material/Typography'
13- import List from '@mui/material/List'
14- import ListItem from '@mui/material/ListItem'
15- import ListItemButton from '@mui/material/ListItemButton'
16- import ListItemText from '@mui/material/ListItemText'
17- //import Button from '@mui/material/Button'
18-
19-
20-
21- import styles from './courseDetailPage.scss'
22- //import {SET_ALERT} from "../../../redux/types/active.types";
23- import { useAppSelector } from "../../../redux/hooks" ; //useActionless,
24- import { prettyPrintSemester } from "../../../utils/semester.utils" ;
25-
26- //import TextField from "../../shared/inputs/textField";
27- //import {useActionless, useAppSelector} from "redux/hooks";
28-
29+ const [ openModal , setOpenModal ] = useState ( false ) ;
2930
31+ const handleCloseModal = ( ) => {
32+ setOpenModal ( false ) ;
33+ } ;
3034
35+ // const[User, setUser]= useState < User <string>,preferredName>>({})
3136
37+ // const role = useAppSelector((store) => store.roleMode)
38+ /* const fetchUserinfo = async () => {
39+ RequestService.get< typeof User>('api/users')
40+ .then((User) =>{
41+ setUser(User)
3242
33- const CourseDetailPage = ( ) => {
34- const { courseId } = useParams < { courseId : string } > ( )
35- const [ courseInfo , setCourseInfo ] = useState < Course | null > ( null )
36- const [ categoryMap , setCategoryMap ] = useState < Record < string , Assignment [ ] > > ( { } )
37- //const [setAlert] = useActionless(SET_ALERT)
38- const role = useAppSelector ( ( store ) => store . roleMode ) ;
39- const history = useHistory ( )
43+ })
44+ */
4045
4146
4247 const fetchCourseInfo = async ( ) => {
43- RequestService . get < Course > ( `/api/courses/${ courseId } )
44- . then ( ( course ) => {
45- setCourseInfo ( course )
46-
47- } )
48- RequestService . get < Assignment [ ] > ( `/api/course/${ courseId } )
49- . then ( ( assignments ) => {
50- console . log ( assignments )
51- let categoryMap : Record < string , Assignment [ ] > = { }
52- assignments . forEach ( ( assignment : Assignment ) => {
48+ RequestService . get < Course > ( `/api/courses/${ courseId } ) . then ( ( course ) => {
49+ setCourseInfo ( course ) ;
50+ } ) ;
51+
52+ RequestService . get < Assignment [ ] > ( `/api/course/${ courseId } ) . then ( ( assignments ) => {
53+ let categoryMap : Record < string , Assignment [ ] > = { } ;
54+ assignments . forEach ( ( assignment : Assignment ) => {
5355 if ( assignment . categoryName in categoryMap ) {
54- categoryMap [ assignment . categoryName ] . push ( assignment )
55- }
56- else {
57- categoryMap [ assignment . categoryName ] = [ assignment ]
56+ categoryMap [ assignment . categoryName ] . push ( assignment ) ;
57+ } else {
58+ categoryMap [ assignment . categoryName ] = [ assignment ] ;
5859 }
59- } )
60- setCategoryMap ( categoryMap )
61- } )
62-
63-
64- }
65-
60+ } ) ;
61+ setCategoryMap ( categoryMap ) ;
62+ } ) ;
63+ } ;
6664
6765 useEffect ( ( ) => {
68- fetchCourseInfo ( )
66+ fetchCourseInfo ( ) ;
67+ } , [ ] ) ;
6968
70- } , [ ] )
71- return (
69+ return (
7270 < PageWrapper >
73- { courseInfo ? (
74- < div >
75-
71+ < div className = { styles . courseDetailPage } >
72+ { courseInfo ? (
73+ < div >
74+ { /* Course Title */ }
7675 < div className = { styles . header } >
7776 < h1 className = { styles . class_title } > { courseInfo . number } : { courseInfo . name } </ h1 >
7877 { role . isInstructor ( ) && (
@@ -102,22 +101,22 @@ const CourseDetailPage = () => {
102101 } } > Gradebook
103102 </ button >
104103 </ div >
104+ < AddAssignmentModal open = { openModal } onClose = { handleCloseModal } />
105105 </ div >
106106 </ div >
107107 < div className = { styles . subheader } > < h3 > Assignments</ h3 >
108108 { role . isInstructor ( ) && (
109109 < button className = 'btnPrimary' id = { styles . parallel_button } onClick = { ( ) => {
110- history . push ( `/course/${ courseId } )
111- } } > add assignment
110+ setOpenModal ( true ) } } > add assignment
112111 </ button >
113112 ) }
114113 </ div >
115114
116-
117115
118116
119117
120- < div className = { styles . coursesContainer } >
118+
119+ < div className = { styles . coursesContainer } >
121120 { Object . keys ( categoryMap ) . map ( ( category , index ) => (
122121
123122 < Card key = { index } className = { styles . courseCard } style = { { borderRadius : '15px' , height : 'fit-content' , boxShadow : 'none' , backgroundColor : 'var(--primary)' } } >
@@ -148,7 +147,6 @@ const CourseDetailPage = () => {
148147 </ React . Fragment >
149148 }
150149 />
151-
152150 </ ListItemButton >
153151 </ ListItem >
154152 ) ) }
@@ -163,16 +161,12 @@ const CourseDetailPage = () => {
163161 </ div >
164162
165163
166-
167-
168- ) : (
164+ ) : (
169165 < h1 > Error fetching Course Information</ h1 >
170- ) }
171-
172-
173- </ PageWrapper >
174- )
175- }
176-
166+ ) }
167+ </ div >
168+ </ PageWrapper >
169+ ) ;
170+ } ;
177171
178- export default CourseDetailPage
172+ export default CourseDetailPage ;
0 commit comments