Skip to content

S
simple-todo-app
Commit d4250635 by Ajmal.S
Options

corrections

parent cf40f2a3
Showing with 67 additions and 107 deletions
db.json
{
"students": [
{
"text": "ajmals",
"mark": "67",
"id": 5262
"id": 1441,
"mark": "1212",
"text": "ghgh"
},
{
"id": 4244,
"mark": "56",
"text": "rrr"
},
{
"id": 1559,
"mark": "56",
"text": "ww"
},
{
"id": 1749,
"mark": "56",
"text": "aru"
},
{
"id": 6758,
"id": 6950,
"mark": "67",
"text": "bala"
"text": "mam"
}
]
}
\ No newline at end of file
src/App.js
import { useState, useEffect } from 'react';
import Students from './components/Students';
import Header from './components/Header'
import AddStudent from './components/AddStudent';
import Form from './components/Form';
import 'bootstrap/dist/css/bootstrap.min.css';
function App() {
const [studentsData, setStudentsData] = useState([]);
const [text, setText] = useState();
const [mark, setMark] = useState();
const fetchStudents = async () => {
const response = await fetch('http://localhost:5000/students');
......@@ -20,16 +22,9 @@ function App() {
setStudentsData(data);
}
setStudents();
})
}, [])
const addStudent = async (data) => {
if (!data.text) {
alert('Please Enter Student Name');
return;
} else if (!data.mark) {
alert('Please Enter Mark')
return;
}
const response = await fetch('http://localhost:5000/students', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify(data) });
const datas = await response.json();
setStudentsData([...studentsData, datas]);
......@@ -41,12 +36,26 @@ function App() {
setStudentsData(studentsData.filter((data) => data.id !== id))
}
const editStudent = async (id) => {
let item = { text, mark }
const response = await fetch(`http://localhost:5000/students/${id}`, {
method: 'PUT',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(item)
})
const data = await response.json()
setStudentsData(data);
}
return (
<div className="c-container">
<Header />
<AddStudent addStudent={addStudent} />
<Form onAdd={addStudent} text={text} setText={setText} mark={mark} setMark={setMark}/>
{studentsData.map((data, index) => (
<Students key={data.id} index={index} id={data.id} marks={data.mark} grade={data.grade} onAddStudent={addStudent} onDeleteStudent={deleteStudent}>{data.text}</Students>
<Students key={data.id} index={index} id={data.id} marks={data.mark} onAdd={addStudent} onDelete={deleteStudent}>{data.text}</Students>
))}
</div>
......
src/components/AddStudent.js → src/components/Form.js
import React, { useState } from 'react';
const AddStudent = ({ addStudent }) => {
const Form = ({ onAdd, text, setText, mark, setMark }) => {
const [name, setName] = useState('');
const [mark, setMark] = useState('');
const onAddStudent = (e) => {
const handleSubmit = (e) => {
e.preventDefault()
addStudent({
id: Math.floor(Math.random() * 10000),
if (!text) {
alert('Please Enter Student Name');
return;
} else if (!mark) {
alert('Please Enter Mark')
return;
}
onAdd({
mark: mark,
text: name,
text: text,
});
setName('');
setText('');
setMark('');
}
return (
<form className='add-form' onSubmit={onAddStudent}>
<form className='add-form' onSubmit={handleSubmit}>
<div className='form-ctrl'>
<label>Student Name</label>
<input type='text' placeholder='Name' value={name} onChange={(e) => setName(e.target.value)} />
<input type='text' placeholder='Name' value={text} onChange={(e) => setText(e.target.value)} />
</div>
<div className='form-ctrl'>
<label>Mark</label>
......@@ -33,4 +36,4 @@ const AddStudent = ({ addStudent }) => {
)
}
export default AddStudent
export default Form
src/components/Students.js
import { useState } from 'react'
import { ImBin } from 'react-icons/im'
import { MdOutlineModeEditOutline } from 'react-icons/md'
import { Modal, Button } from 'react-bootstrap';
const Students = ({ children, marks, onDeleteStudent, id, index }) => {
const [show, setShow] = useState(false);
const [deleteShow, setDeleteShow] = useState(false);
const handleDeleteOpen = () => setDeleteShow(true);
const handleDeleteClose = () => setDeleteShow(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
const [text, setText] = useState(children);
const [mark, setMark] = useState(marks);
const onEditStudent = async (id) => {
let item = { text, mark }
const response = await fetch(`http://localhost:5000/students/${id}`, {
method: 'PUT',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(item)
})
const data = await response.json()
console.log(data);
}
const Students = ({ children, marks, id, index, onDelete }) => {
return (
<>
<div className='student'>
<div>{index + 1}</div>
<div>{text}</div>
<div>{mark}</div>
<div><small className={`${mark >= 35 ? 'pass' : 'fail'}`}>({mark >= 35 ? 'P' : 'F'})</small></div>
<div style={{ display: 'flex' }}>
<div><MdOutlineModeEditOutline onClick={handleShow} /></div>
<div style={{ marginLeft: '10px' }}><ImBin onClick={handleDeleteOpen} /></div>
</div>
<div className='student'>
<div>{index + 1}</div>
<div>{children}</div>
<div>{marks}</div>
<div><small className={`${marks >= 35 ? 'pass' : 'fail'}`}>({marks >= 35 ? 'P' : 'F'})</small></div>
<div style={{ display: 'flex' }}>
<div><MdOutlineModeEditOutline /></div>
<div style={{ marginLeft: '10px' }}><ImBin onClick={() => onDelete(id)} /></div>
</div>
{/* Delete Student */}
<Modal show={deleteShow} onHide={handleDeleteClose}>
<Modal.Header closeButton>
<Modal.Title>Are you sure you want to delete? <br /> <b>{text}</b></Modal.Title>
</Modal.Header>
<Modal.Footer>
<Button variant="secondary" onClick={handleDeleteClose}>
Cancel
</Button>
<Button variant="primary" type='submit' onClick={() => onDeleteStudent(id)}>
Delete
</Button>
</Modal.Footer>
</Modal>
{/* Edit Student */}
<Modal show={show} onHide={handleClose}>
<Modal.Header closeButton>
<Modal.Title>Edit Student Data</Modal.Title>
</Modal.Header>
<Modal.Body>
<div className='form-ctrl'>
<label>Name</label>
<input type='text' value={text} onChange={(e) => setText(e.target.value)} />
<label>Mark</label>
<input type='text' value={mark} onChange={(e) => setMark(e.target.value)} />
</div>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleClose}>
Cancel
</Button>
<Button variant="primary" type='submit' onClick={() => onEditStudent(id)}>
Save Changes
</Button>
</Modal.Footer>
</Modal>
</>
</div>
)
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment