Skip to content

Commit f9e7660

Browse files
archies-coderarchies-coder
committed
Modified Add Page
1 parent 2d00c62 commit f9e7660

File tree

5 files changed

+215
-186
lines changed

5 files changed

+215
-186
lines changed

‎client/src/App.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, {Component} from 'react';
22
import AppNavbar from './components/navigation/AppNav';
33
import 'bootstrap/dist/css/bootstrap.min.css';
44
import { Switch, Route} from "react-router-dom";
5+
56
//Components
67
import AppLogin from "./components/login/Login";
78
import {Logout} from "./components/login/Logout";
@@ -12,6 +13,7 @@ import Attendance from './components/attendance/Attendance';
1213
import EditStudent from './components/student-list/EditStudent';
1314
import Fee from './components/fees/Fee';
1415
import './index.css'
16+
1517
export default class App extends Component {
1618
render() {
1719
return (

‎client/src/components/add-student/AddStudent.js‎

Lines changed: 114 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,30 @@
1-
import React, { Component} from 'react'
1+
import React, { Component } from 'react'
22
import Modal from 'react-modal';
33
import MyCalendar from '../reusables/Calendar'
4-
import {AuthContext} from '../../context'
4+
import { AuthContext } from '../../context'
55
import MyLoader from '../reusables/MyLoader';
66

77

88
const customStyles = {
9-
content : {
10-
top : '50%',
11-
left : '50%',
12-
right : 'auto',
13-
bottom : 'auto',
14-
marginRight : '-50%',
15-
transform : 'translate(-50%, -50%)'
9+
content: {
10+
top: '50%',
11+
left: '50%',
12+
right: 'auto',
13+
bottom: 'auto',
14+
marginRight: '-50%',
15+
transform: 'translate(-50%, -50%)'
1616
}
17-
};
17+
};
1818

1919
export default class AddStudent extends Component {
20-
constructor(){
20+
constructor() {
2121
super()
22-
this.firstNameEl = React.createRef();this.lastNameEl = React.createRef();
23-
this.addressEl = React.createRef();this.standardEl = React.createRef();
24-
this.boardEl = React.createRef();this.physicsEl = React.createRef();
25-
this.englishEl = React.createRef();this.mathsEl = React.createRef();
26-
this.sexEl = React.createRef();this.feesEl = React.createRef();
27-
this.state={
22+
this.firstNameEl = React.createRef(); this.lastNameEl = React.createRef();
23+
this.addressEl = React.createRef(); this.standardEl = React.createRef();
24+
this.boardEl = React.createRef(); this.physicsEl = React.createRef();
25+
this.englishEl = React.createRef(); this.mathsEl = React.createRef();
26+
this.sexEl = React.createRef(); this.feesEl = React.createRef();
27+
this.state = {
2828
modalIsOpen: false,
2929
date: new Date(),
3030
addedStudent: {},
@@ -35,19 +35,19 @@ export default class AddStudent extends Component {
3535
onChange = date => {
3636
this.setState({ date })
3737
this.closeModal()
38-
}
38+
}
3939

40-
openModal = ()=> {
41-
this.setState({modalIsOpen: true});
40+
openModal = () => {
41+
this.setState({ modalIsOpen: true });
4242
}
4343

44-
closeModal= ()=> {
45-
this.setState({modalIsOpen: false});
44+
closeModal = () => {
45+
this.setState({ modalIsOpen: false });
4646
}
4747

4848
handleAddForm = (e) => {
4949
e.preventDefault();
50-
this.setState({loading:true})
50+
this.setState({ loading: true })
5151
const fName = this.firstNameEl.current.value;
5252
const lName = this.lastNameEl.current.value;
5353
const std = this.standardEl.current.value;
@@ -58,69 +58,73 @@ export default class AddStudent extends Component {
5858
const maths = this.mathsEl.current.value;
5959
const sex = this.sexEl.current.value;
6060
const fees = this.feesEl.current.value;
61-
61+
6262
const addStudentRequest = {
63-
"firstName":fName,"lastName":lName,
64-
"Address":addr,"standard":std,
65-
"Board":brd,
66-
"lastYearmarks":{
67-
"physics":phy,
68-
"english":eng,
69-
"maths":maths
70-
},"sex":sex,
71-
"fees":{
63+
"firstName": fName, "lastName": lName,
64+
"Address": addr, "standard": std,
65+
"Board": brd,
66+
"lastYearmarks": {
67+
"physics": phy,
68+
"english": eng,
69+
"maths": maths
70+
}, "sex": sex,
71+
"fees": {
7272
"total": fees
7373
}
7474
}
75-
fetch('/api/student',{
76-
method:'POST',mode:'cors',
77-
headers:{
78-
'Content-Type':'application/json',
75+
fetch('/api/student', {
76+
method: 'POST', mode: 'cors',
77+
headers: {
78+
'Content-Type': 'application/json',
7979
'Accept': 'application/json'
8080
},
8181
body: JSON.stringify(addStudentRequest)
82-
}).then(res=>{
82+
}).then(res => {
8383
if (res.status !== 200 && res.status !== 201) {
84-
if(res.status === 401){
85-
this.setState({loading: false})
84+
if (res.status === 401) {
85+
this.setState({ loading: false })
8686
this.props.history.push('/login')
8787
}
88-
this.setState({loading: false})
88+
this.setState({ loading: false })
8989
throw new Error(res.status)
9090
}
91-
this.setState({loading:false})
91+
this.setState({ loading: false })
9292
return res.json();
9393
})
94-
.then(resData => {
95-
this.setState({addedStudent: resData, loading: false})
96-
this.props.history.push('/list')
97-
})
98-
.catch(err=>{
99-
this.setState({loading: false})
100-
throw new Error(err)
101-
})
94+
.then(resData => {
95+
this.setState({ addedStudent: resData, loading: false })
96+
this.props.history.push('/list')
97+
})
98+
.catch(err => {
99+
this.setState({ loading: false })
100+
throw new Error(err)
101+
})
102102
}
103103

104104
render() {
105-
105+
106106
return (this.state.loading) ? <MyLoader loading={this.state.loading} /> :
107-
<AuthContext.Consumer>
108-
{context =>(
109-
<div className="d-lg-flex border justify-content-center p-3">
110-
<form onSubmit={this.handleAddForm}>
111-
<div className="row py-3">
112-
<div className="col">
113-
<input type="text" ref={this.firstNameEl} className="form-control" placeholder="First name" required/>
114-
</div>
115-
<div className="col">
116-
<input type="text" ref={this.lastNameEl} className="form-control" placeholder="Last name" required/>
117-
</div>
107+
<AuthContext.Consumer>
108+
{context => (
109+
<div className="d-lg-flex border justify-content-center p-3">
110+
<form onSubmit={this.handleAddForm}>
111+
<div className="row py-3">
112+
<div className="col">
113+
<input type="text" ref={this.firstNameEl} className="form-control" placeholder="First name" required />
114+
</div>
115+
<div className="col">
116+
<input type="text" className="form-control" placeholder="Middle name" />
118117
</div>
119-
<div className="form-group">
120-
<label htmlFor="InputAddress">Address</label>
121-
<input type="text" ref={this.addressEl} className="form-control" id="InputAddress" placeholder="Address" required/>
118+
<div className="col">
119+
<input type="text" ref={this.lastNameEl} className="form-control" placeholder="Last name" required />
122120
</div>
123-
<div className="form-group">
121+
</div>
122+
<div className="form-group">
123+
<label htmlFor="InputAddress">Address</label>
124+
<input type="text" ref={this.addressEl} className="form-control" id="InputAddress" placeholder="Address" required />
125+
</div>
126+
<div className="row">
127+
<div className="form-group col">
124128
<label htmlFor="Inputstandard">Standard</label>
125129
<select className="form-control form-control-sm" id="Inputstandard" ref={this.standardEl}>
126130
<option>5</option>
@@ -131,57 +135,65 @@ export default class AddStudent extends Component {
131135
<option>10</option>
132136
</select>
133137
</div>
134-
<div className="form-group">
138+
<div className="form-group col">
135139
<label htmlFor="InputBoard">Board</label>
136140
<select className="form-control form-control-sm" id="InputBoard" ref={this.boardEl}>
137141
<option>MH</option>
138142
<option>ICSC</option>
139143
<option>CBSE</option>
140144
</select>
141145
</div>
142-
<div className="form-group">
143-
<label htmlFor="InputDate">Date Of Joining </label>
144-
{/* <input type="button" className="btn btn-primary btn-sm"><i class="far fa-calendar-alt"></i></input> */}
145-
<i className="far fa-calendar-alt ml-2 mb-2 btn-lg" id="InputDate" onClick={this.openModal}></i>
146-
<br/>
147-
<p>Selected Date:- {this.state.date.toLocaleDateString()}</p>
146+
</div>
147+
<div className="form-group">
148+
<label htmlFor="InputDate">Date Of Joining </label>
149+
<i className="far fa-calendar-alt ml-2 mr-4 mb-2 btn-lg" id="InputDate" onClick={this.openModal} />
150+
<span>Selected Date:- {this.state.date.toLocaleDateString()}</span>
151+
</div>
152+
<div>
153+
<h5>Last Year Marks</h5>
154+
</div>
155+
<div className="form-group row">
156+
<div className="col-md-4">
157+
<label htmlFor="InputPhysics">Physics</label>
158+
<input type="number" className="form-control" ref={this.physicsEl} id="InputPhysics" placeholder="Physics" required />
148159
</div>
149-
<div className="form-group">
150-
<label htmlFor="InputPhysics">Physics Marks</label>
151-
<input type="number" className="form-control" ref={this.physicsEl} id="InputPhysics" placeholder="Physics" required/>
152-
<label htmlFor="InputEnglish">English Marks</label>
153-
<input type="number" className="form-control" ref={this.englishEl} id="InputEnglish" placeholder="English" required/>
154-
<label htmlFor="InputMaths">Maths Marks</label>
155-
<input type="number" className="form-control" ref={this.mathsEl} id="InputMaths" placeholder="Maths" required/>
160+
<div className="col-md-4"><label htmlFor="InputEnglish">English</label>
161+
<input type="number" className="form-control" ref={this.englishEl} id="InputEnglish" placeholder="English" required />
156162
</div>
157-
<div className="form-group">
158-
<label htmlFor="InputSex">Sex</label>
163+
<div className="col-md-4"><label htmlFor="InputMaths">Maths</label>
164+
<input type="number" className="form-control" ref={this.mathsEl} id="InputMaths" placeholder="Maths" required />
165+
</div>
166+
</div>
167+
<div className="row">
168+
<div className="form-group col">
169+
<label htmlFor="InputSex">Gender</label>
159170
<select className="form-control form-control-sm" id="InputSex" ref={this.sexEl}>
160171
<option>Male</option>
161172
<option>Female</option>
162173
</select>
163174
</div>
164-
<div className="form-group">
175+
<div className="form-group col">
165176
<label htmlFor="InputFees">Total Fees</label>
166-
<input type="text" className="form-control" ref={this.feesEl} id="InputFees" placeholder="Amout Of Fees Paid"/>
177+
<input type="text" className="form-control" ref={this.feesEl} id="InputFees" placeholder="Amout Of Fees Paid" />
167178
</div>
168-
<button type="submit" className="btn btn-primary">Submit</button>
169-
</form>
170-
<Modal
171-
isOpen={this.state.modalIsOpen}
172-
onRequestClose={this.closeModal}
173-
style={customStyles}
174-
contentLabel="Date Picker Modal"
175-
ariaHideApp={false}
176-
>
177-
<MyCalendar
178-
onChange={this.onChange}
179-
value={this.state.date}
180-
/>
181-
</Modal>
182-
183-
</div>
184-
)}
185-
</AuthContext.Consumer>
179+
</div>
180+
<button type="submit" className="btn btn-primary">Submit</button>
181+
</form>
182+
<Modal
183+
isOpen={this.state.modalIsOpen}
184+
onRequestClose={this.closeModal}
185+
style={customStyles}
186+
contentLabel="Date Picker Modal"
187+
ariaHideApp={false}
188+
>
189+
<MyCalendar
190+
onChange={this.onChange}
191+
value={this.state.date}
192+
/>
193+
</Modal>
194+
195+
</div>
196+
)}
197+
</AuthContext.Consumer>
186198
}
187199
}

‎client/src/components/navigation/AppNav.js‎

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import {
77
NavbarToggler,
88
NavbarBrand,
99
Nav,
10-
NavItem,
1110
NavLink
1211
} from 'reactstrap';
1312

@@ -20,6 +19,7 @@ export default class AppNavbar extends Component {
2019
};
2120
}
2221
toggle = ()=> {
22+
let status = this.state.isOpen
2323
this.setState({
2424
isOpen: !this.state.isOpen
2525
});
@@ -36,29 +36,29 @@ export default class AppNavbar extends Component {
3636
</NavbarBrand>
3737
<NavbarToggler onClick={this.toggle} />
3838
<Collapse isOpen={this.state.isOpen} navbar>
39-
<Nav className="mr-auto" navbar>
40-
<NavLink tag={Link} to='/list' className='nav-link'>
41-
Students
42-
</NavLink>
43-
<NavLink tag={Link} to='/add' className='nav-link'>
44-
Add
45-
</NavLink>
46-
<NavLink tag={Link} to='/attendance' className='nav-link'>
47-
Attendance
48-
</NavLink>
49-
<NavLink tag={Link} to='/fees' className='nav-link'>
50-
Fee
51-
</NavLink>
52-
</Nav>
53-
<Nav className="ml-auto" navbar>
54-
{!context.state.isAuth && <NavLink tag={Link} to='/login' className='nav-link'>
55-
Login
56-
</NavLink>}
57-
{context.state.isAuth && <NavLink tag={Link} to='/logout' className='nav-link'>
58-
Logout
59-
</NavLink>}
60-
</Nav>
61-
</Collapse>
39+
<Nav className="mr-auto" navbar>
40+
{context.state.isAuth &&<NavLink tag={Link} to='/list' className='nav-link'>
41+
Students
42+
</NavLink>}
43+
{context.state.isAuth && <NavLink tag={Link} to='/add' className='nav-link'>
44+
Add
45+
</NavLink>}
46+
{context.state.isAuth && <NavLink tag={Link} to='/attendance' className='nav-link'>
47+
Attendance
48+
</NavLink>}
49+
{context.state.isAuth && <NavLink tag={Link} to='/fees' className='nav-link'>
50+
Fee
51+
</NavLink>}
52+
</Nav>
53+
<Nav className="ml-auto" navbar>
54+
{!context.state.isAuth && <NavLink tag={Link} to='/login' className='nav-link'>
55+
Login
56+
</NavLink>}
57+
{context.state.isAuth && <NavLink tag={Link} to='/logout' className='nav-link'>
58+
Logout
59+
</NavLink>}
60+
</Nav>
61+
</Collapse>
6262
</Navbar>
6363
)}
6464
</AuthContext.Consumer>

0 commit comments

Comments
 (0)