@@ -18,17 +18,26 @@ const customStyles = {
1818export default class AddStudent extends Component {
1919 constructor ( ) {
2020 super ( )
21- this . firstNameEl = React . createRef ( ) ; this . middleNameEl = React . createRef ( ) ; this . lastNameEl = React . createRef ( ) ;
22- this . addressEl = React . createRef ( ) ; this . standardEl = React . createRef ( ) ;
23- this . boardEl = React . createRef ( ) ; this . physicsEl = React . createRef ( ) ;
21+ this . firstNameEl = React . createRef ( ) ;
22+ this . middleNameEl = React . createRef ( ) ;
23+ this . lastNameEl = React . createRef ( ) ;
24+ this . addressEl = React . createRef ( ) ;
25+ this . standardEl = React . createRef ( ) ;
26+ this . boardEl = React . createRef ( ) ;
2427 this . schoolEl = React . createRef ( ) ;
25- this . englishEl = React . createRef ( ) ; this . mathsEl = React . createRef ( ) ;
26- this . sexEl = React . createRef ( ) ; this . feesEl = React . createRef ( ) ;
28+ this . physicsEl = React . createRef ( ) ;
29+ this . englishEl = React . createRef ( ) ;
30+ this . mathsEl = React . createRef ( ) ;
31+ this . chemEl = React . createRef ( ) ;
32+ this . bioEl = React . createRef ( ) ;
33+ this . sexEl = React . createRef ( ) ;
34+ this . feesEl = React . createRef ( ) ;
2735 this . state = {
2836 modalJoinIsOpen : false , modalDOBIsOpen : false ,
2937 date : new Date ( ) ,
3038 loading : false , loggedIn : false ,
31- dateOfJoining : 'pick a date' , dateOfBirth : new Date ( )
39+ dateOfJoining : 'pick a date' , dateOfBirth : new Date ( ) ,
40+ age :'Age'
3241 }
3342 }
3443
@@ -58,7 +67,8 @@ export default class AddStudent extends Component {
5867 }
5968
6069 onDOBChange = date => {
61- this . setState ( { dateOfBirth : date } )
70+ const age = new Date ( ) . getFullYear ( ) - date . getFullYear ( )
71+ this . setState ( { dateOfBirth : date , age } )
6272 this . closeModal ( )
6373 }
6474
@@ -86,20 +96,42 @@ export default class AddStudent extends Component {
8696 handleAddForm = ( e ) => {
8797 e . preventDefault ( ) ;
8898 this . setState ( { loading : true } )
89- const fName = this . firstNameEl . current . value ; const mName = this . firstNameEl . current . value ;
90- const lName = this . lastNameEl . current . value ; const std = this . standardEl . current . value ;
91- const addr = this . addressEl . current . value ; const brd = this . boardEl . current . value ;
99+ const fName = this . firstNameEl . current . value ;
100+ const mName = this . firstNameEl . current . value ;
101+ const lName = this . lastNameEl . current . value ;
102+ const std = this . standardEl . current . value ;
103+ const addr = this . addressEl . current . value ;
104+ const brd = this . boardEl . current . value ;
92105 const schl = this . schoolEl . current . value ;
93- const phy = this . physicsEl . current . value ; const eng = this . englishEl . current . value ;
94- const maths = this . mathsEl . current . value ; const sex = this . sexEl . current . value ; const fees = this . feesEl . current . value ;
106+ const phy = this . physicsEl . current . value ;
107+ const eng = this . englishEl . current . value ;
108+ const maths = this . mathsEl . current . value ;
109+ const chem = this . chemEl . current . value ;
110+ const bio = this . bioEl . current . value ;
111+ const sex = this . sexEl . current . value ;
112+ const fees = this . feesEl . current . value ;
95113
96114 const addStudentRequest = {
97- "firstName" : fName , "middleName" : mName , "lastName" : lName ,
115+ "firstName" : fName ,
116+ "middleName" : mName ,
117+ "lastName" : lName ,
98118 "dateOfBirth" : this . state . dateOfBirth ,
99119 "joinedOn" : this . state . dateOfJoining ,
100- "Address" : addr , "standard" : std , "Board" : brd , "school" : schl ,
101- "lastYearmarks" : { "physics" : phy , "english" : eng , "maths" : maths } ,
102- "sex" : sex , "fees" : { "total" : fees }
120+ "Address" : addr ,
121+ "standard" : std ,
122+ "Board" : brd ,
123+ "school" : schl ,
124+ "lastYearmarks" : {
125+ "physics" : phy ,
126+ "english" : eng ,
127+ "maths" : maths ,
128+ "chemistry" : chem ,
129+ "biology" : bio ,
130+ } ,
131+ "sex" : sex ,
132+ "fees" : {
133+ "total" : fees
134+ }
103135 }
104136 fetch ( '/api/student' , {
105137 method : 'POST' , mode : 'cors' ,
@@ -153,11 +185,11 @@ export default class AddStudent extends Component {
153185 </ div >
154186 </ div >
155187 < div className = "row" >
156- < div className = "form-group col" >
188+ < div className = "form-group col-6 " >
157189 < label htmlFor = "InputAddress" > Address</ label >
158190 < input type = "text" ref = { this . addressEl } className = "form-control form-control-sm" id = "InputAddress" placeholder = "Address" required />
159191 </ div >
160- < div className = "form-group col" >
192+ < div className = "form-group col-4 " >
161193 < div className = "input-group" >
162194 < label htmlFor = "dateOfBirth" > Date Of Birth </ label >
163195 < div className = "w-100" > </ div >
@@ -169,6 +201,13 @@ export default class AddStudent extends Component {
169201 </ div >
170202 </ div >
171203 </ div >
204+ < div className = "col-2" >
205+ < div className = "input-group" >
206+ < label htmlFor = "Age" > Age</ label >
207+ < div className = "w-100" > </ div >
208+ < input type = "text" className = 'form-control form-control-sm' name = "Age" value = { this . state . age } readOnly />
209+ </ div >
210+ </ div >
172211 </ div >
173212 < hr />
174213 < div className = "row" >
@@ -221,6 +260,22 @@ export default class AddStudent extends Component {
221260 < input type = "text" className = "form-control form-control-sm" id = 'Maths' ref = { this . mathsEl } id = "InputMaths" placeholder = "Maths" required />
222261 </ div >
223262 </ div >
263+ < div className = "form-group row" >
264+ < div className = "col-md-4" >
265+ < label htmlFor = "Chemistry" > Chemistry</ label >
266+ < input type = "text"
267+ className = "form-control form-control-sm"
268+ id = 'Chemistry' ref = { this . chemEl }
269+ placeholder = "Chemistry" required />
270+ </ div >
271+ < div className = "col-md-4" >
272+ < label htmlFor = "Biology" > Biology</ label >
273+ < input type = "text"
274+ className = "form-control form-control-sm"
275+ id = 'Biology' ref = { this . bioEl }
276+ placeholder = "Biology" required />
277+ </ div >
278+ </ div >
224279 < hr />
225280 < div className = "row" >
226281 < div className = "form-group col" >
0 commit comments