1- import React , { useState } from 'react'
1+ import React , { useState , useEffect } from 'react'
22// import { useHistory } from 'react-router-dom'
3- import { ExpressValidationError } from 'devu-shared-modules'
3+ import { ExpressValidationError , Assignment } from 'devu-shared-modules'
44import 'react-datepicker/dist/react-datepicker.css'
55// import PageWrapper from 'components/shared/layouts/pageWrapper'
66
@@ -9,6 +9,8 @@ import { useActionless } from 'redux/hooks'
99// import TextField from 'components/shared/inputs/textField'
1010// import Button from '../../../shared/inputs/button'
1111// import DragDropFile from 'components/utils/dragDropFile'
12+ import { Option } from 'components/shared/inputs/dropdown'
13+
1214
1315import { SET_ALERT } from 'redux/types/active.types'
1416
@@ -17,6 +19,7 @@ import { useParams } from 'react-router-dom'
1719
1820import formStyles from './assignmentFormPage.scss'
1921import Modal from 'components/shared/layouts/modal'
22+ import TextDropdown from 'components/shared/inputs/textDropDown'
2023
2124interface Props {
2225 open : boolean ;
@@ -29,6 +32,8 @@ const AddAssignmentModal = ({ open, onClose }: Props) => {
2932 const [ endDate , setEndDate ] = useState ( '' )
3033 const [ dueDate , setDueDate ] = useState ( '' )
3134 const [ startDate , setStartDate ] = useState ( '' )
35+ const [ categoryOptions , setAllCategoryOptions ] = useState < Option < String > [ ] > ( [ ] )
36+ const [ assignments , setAssignments ] = useState < Assignment [ ] > ( [ ] )
3237
3338 const [ formData , setFormData ] = useState ( {
3439 courseId : courseId ,
@@ -47,6 +52,20 @@ const AddAssignmentModal = ({ open, onClose }: Props) => {
4752 setFormData ( prevState => ( { ...prevState , [ key ] : value } ) )
4853 }
4954
55+ const handleCategoryChange = ( value : Option < String > ) => {
56+ setFormData ( prevState => ( { ...prevState , categoryName : value . label } ) )
57+ } ;
58+
59+ const handleCategoryCreate = ( value : string ) => {
60+ const newOption : Option = { value : value , label : value }
61+ setAllCategoryOptions ( prevState => {
62+ const newArr : Option < String > [ ] = ( prevState ) ;
63+ newArr . push ( newOption ) ;
64+ return newArr ;
65+ } )
66+ setFormData ( prevState => ( { ...prevState , categoryName : value } ) )
67+ } ;
68+
5069 const handleStartDateChange = ( e : React . ChangeEvent < HTMLInputElement > ) => { setStartDate ( e . target . value ) }
5170 const handleEndDateChange = ( e : React . ChangeEvent < HTMLInputElement > ) => { setEndDate ( e . target . value ) }
5271 const handleDueDateChange = ( e : React . ChangeEvent < HTMLInputElement > ) => { setDueDate ( e . target . value ) }
@@ -99,36 +118,54 @@ const AddAssignmentModal = ({ open, onClose }: Props) => {
99118 . finally ( ( ) => {
100119
101120 } )
102-
103121 }
104122
123+ useEffect ( ( ) => { RequestService . get ( `/api/course/${ courseId } ) . then ( ( res ) => { setAssignments ( res ) } ) } , [ formData ] )
124+
125+
126+ useEffect ( ( ) => {
127+ const categories = [ ...new Set ( assignments . map ( a => a . categoryName ) ) ] ;
128+ const options = categories . map ( ( category ) => ( {
129+ value : category ,
130+ label : category
131+ } ) ) ;
132+
133+ setAllCategoryOptions ( options ) ;
134+ } , [ assignments ] )
105135
106136 return (
107137 < Modal title = "Add Assignment" buttonAction = { handleSubmit } open = { open } onClose = { onClose } >
108138 < div className = "input-group" >
109139 < label htmlFor = "categoryName" className = "input-label" > Assignment Category:</ label >
110- < input type = "text" id = "categoryName" onChange = { handleChange }
111- placeholder = 'Type assignment category' />
140+ < TextDropdown
141+ onChange = { handleCategoryChange }
142+ onCreate = { handleCategoryCreate }
143+ options = { categoryOptions }
144+ custom = { { control : ( ) => ( { border :'none' , padding :'3px 0' } ) ,
145+ placeholder : ( ) => ( { color : '#555555' } ) ,
146+ input : ( ) => ( { fontSize : '14px' } ) ,
147+ singleValue : ( ) => ( { fontSize : '14px' } ) } }
148+ value = { formData . categoryName ? { value : formData . categoryName , label : formData . categoryName } : undefined } />
112149 </ div >
113150 < div className = "input-group" >
114151 < label htmlFor = "name" className = "input-label" > Assignment Name:</ label >
115- < input type = "text" id = "name" onChange = { handleChange }
152+ < input type = "text" id = "name" onChange = { handleChange } className = { formStyles . input }
116153 placeholder = 'e.g. PA3' />
117154 </ div >
118155 < div className = "input-group" >
119156 < label htmlFor = "description" className = "input-label" > Description: < span > (optional)</ span > </ label >
120- < textarea rows = { 4 } id = "description" onChange = { handleChange }
157+ < textarea rows = { 4 } id = "description" onChange = { handleChange } className = { formStyles . input }
121158 placeholder = 'Provide an optional assignment description' />
122159 </ div >
123160 < div className = 'input-subgroup-2col' >
124161 < div className = "input-group" >
125162 < label htmlFor = "maxSubmissions" className = "input-label" > Maximum Submissions:</ label >
126- < input type = "number" id = "maxSubmissions" onChange = { handleChange }
163+ < input type = "number" id = "maxSubmissions" onChange = { handleChange } className = { formStyles . input }
127164 placeholder = 'e.g. 1' value = { formData . maxSubmissions } min = "0" />
128165 </ div >
129166 < div className = "input-group" >
130167 < label htmlFor = "maxFileSize" className = "input-label" > Maximum File Size (KB):</ label >
131- < input type = "number" id = "maxFileSize" onChange = { handleChange }
168+ < input type = "number" id = "maxFileSize" onChange = { handleChange } className = { formStyles . input }
132169 placeholder = 'e.g. 100' value = { formData . maxFileSize } min = "0" />
133170 </ div >
134171 </ div >
0 commit comments