done all crud

all/node-postgres/connect.js

@@ -0,0 +1,15 @@
+const { request } = require('express');
+var config = require('./config.json');
+
+const Pool = require('pg').Pool
+const pool = new Pool({
+    user: config.user,
+    host: config.host,
+    database: config.database,
+    password: config.password,
+    port: config.port
+})
+
+module.exports = {
+    pool
+}

all/node-postgres/index.js

@@ -102,7 +102,7 @@ app.put('/teacher/upd/:id', (req, res) => {
 
 // SUBJECT------------------------------------- 
 app.post('/subject', (req, res) => {
-    subject.create(req.body.name, req.body.hours)
+    subject.create(req.body.name, req.body.hours_count)
     .then(response => res.status(200).send(response))
     .catch(error => res.status(500).send(error))
 })
@@ -120,7 +120,7 @@ app.delete('/subject/del/:id', (req, res) => {
 })
 
 app.put('/subject/upd/:id', (req, res) => {
-    subject.update(req.params.id, req.body.name, req.body.hours)
+    subject.update(req.params.id, req.body.name, req.body.hours_count)
     .then(response => res.status(200).send(response))
     .catch(error => res.status(500).send(error))
 })
@@ -128,7 +128,7 @@ app.put('/subject/upd/:id', (req, res) => {
 
 // DIRECTION------------------------------------- 
 app.post('/direction', (req, res) => {
-    direction.create(req.body.name, req.body.facultyId)
+    direction.create(req.body.name, req.body.faculty_id)
     .then(response => res.status(200).send(response))
     .catch(error => res.status(500).send(error))
 })
@@ -154,7 +154,7 @@ app.put('/direction/upd/:id', (req, res) => {
 
 // STUDENT------------------------------------- 
 app.post('/student', (req, res) => {
-    student.create(req.params.name, req.params.surname, req.params.book, req.params.directionId)
+    student.create(req.body.name, req.body.surname, req.body.record_book, req.body.direction_id)
     .then(response => res.status(200).send(response))
     .catch(error => res.status(500).send(error))
 })
@@ -172,7 +172,7 @@ app.delete('/student/del/:id', (req, res) => {
 })
 
 app.put('/student/upd/:id', (req, res) => {
-    student.update(req.params.id, req.params.name, req.params.surname, req.params.book, req.params.directionId)
+    student.update(req.params.id, req.body.name, req.body.surname, req.body.record_book, req.body.direction_id)
     .then(response => res.status(200).send(response))
     .catch(error => res.status(500).send(error))
 })
@@ -180,7 +180,7 @@ app.put('/student/upd/:id', (req, res) => {
 
 // SCORE------------------------------------- 
 app.post('/score', (req, res) => {
-    score.create(req.body.value, req.body.subjectId, req.body.testId, req.body.teacherId, req.body.studentId)
+    score.create(req.body.value, req.body.subject_id, req.body.test_type_id, req.body.teacher_id, req.body.student_id)
     .then(response => res.status(200).send(response))
     .catch(error => res.status(500).send(error))
 })

all/node-postgres/models/direction.js

@@ -1,14 +1,5 @@
 const { request } = require('express');
-var config = require('../config.json');
+const pool = require('../connect').pool
-
-const Pool = require('pg').Pool
-const pool = new Pool({
-    user: config.user,
-    host: config.host,
-    database: config.database,
-    password: config.password,
-    port: config.port
-})
 
 const create = (nameF, facultyId) => {
     return new Promise((resolve, reject) => {
@@ -43,7 +34,8 @@ const update = (id, name, faculty_id) => {
 
 const get = () => {
     return new Promise(function(resolve, reject) {
-      pool.query('SELECT * FROM direction', (error, results) => {
+      pool.query('select d.id, d."name", d.faculty_id, f."name" as faculty_name from direction d, faculty f where d.faculty_id = f.id', 
+      (error, results) => {
         if (error) {
           reject(error)
         }

all/node-postgres/models/score.js

@@ -1,14 +1,5 @@
 const { request } = require('express');
-var config = require('../config.json');
+const pool = require('../connect').pool
-
-const Pool = require('pg').Pool
-const pool = new Pool({
-    user: config.user,
-    host: config.host,
-    database: config.database,
-    password: config.password,
-    port: config.port
-})
 
 const create = (value, subject_id, test_type_id, teacher_id, student_id) => {
     return new Promise((resolve, reject) => {
@@ -43,15 +34,18 @@ const update = (id, value, subject_id, test_type_id, teacher_id, student_id) =>
 }
 
 const get = () => {
-    return new Promise(function(resolve, reject) {
+  const a = 'select s.*, s2."name" as student_name, s2.surname as student_surname, s2.surname as student_surname, s3."name" as subject_name, t."name" as teacher_name, t.surname as teacher_surname, tt."name" as test_type_name from score s ' 
-      pool.query('SELECT * FROM direction', (error, results) => {
+  const b = 'join student s2 on s.student_id = s2.id  join subject s3 on s.subject_id  = s3.id join teacher t on s.teacher_id  = t.id join test_type tt on s.test_type_id = tt.id'
-        if (error) {
+  const res = a + b
-          reject(error)
+  return new Promise(function(resolve, reject) {
-        }
+    pool.query(res, (error, results) => {
-        resolve(results.rows)
+      if (error) {
-      })
+        reject(error)
-    }) 
+      }
-  }
+      resolve(results.rows)
+    })
+  }) 
+}
 
 module.exports = {
     create,

all/node-postgres/models/student.js

@@ -1,14 +1,5 @@
 const { request } = require('express');
-var config = require('../config.json');
+const pool = require('../connect').pool
-
-const Pool = require('pg').Pool
-const pool = new Pool({
-    user: config.user,
-    host: config.host,
-    database: config.database,
-    password: config.password,
-    port: config.port
-})
 
 const create = (name, surname, book, directionId) => {
     return new Promise((resolve, reject) => {
@@ -44,7 +35,8 @@ const update = (id, name, surname, book, directionId) => {
 
 const get = () => {
     return new Promise(function(resolve, reject) {
-      pool.query('SELECT * FROM student', (error, results) => {
+      pool.query('select s.id, s."name", s.surname, s.record_book, s.direction_id, d."name" as direction_name from student s , direction d where s.direction_id = d.id ', 
+      (error, results) => {
         if (error) {
           reject(error)
         }

all/node-postgres/models/subject.js

@@ -1,14 +1,5 @@
 const { request } = require('express');
-var config = require('../config.json');
+const pool = require('../connect').pool
-
-const Pool = require('pg').Pool
-const pool = new Pool({
-    user: config.user,
-    host: config.host,
-    database: config.database,
-    password: config.password,
-    port: config.port
-})
 
 const create = (name, hours) => {
     return new Promise((resolve, reject) => {

all/node-postgres/models/teacher.js

@@ -1,14 +1,6 @@
 const { request } = require('express');
-var config = require('../config.json');
+const pool = require('../connect').pool
 
-const Pool = require('pg').Pool
-const pool = new Pool({
-    user: config.user,
-    host: config.host,
-    database: config.database,
-    password: config.password,
-    port: config.port
-})
 
 const create = (name, surname, post) => {
     return new Promise((resolve, reject) => {

all/react-postgres/src/App.js

@@ -5,6 +5,9 @@ import FacultyPage from "./pages/FacultyPage";
 import TestPage from './pages/TestPage';
 import TeacherPage from './pages/TeacherPage';
 import SubjectPage from './pages/SubjectPage';
+import DirectionPage from './pages/DirectionPage';
+import StudentPage from './pages/StudentPage';
+import ScorePage from './pages/ScorePage';
 
 function App() {
   return (
@@ -16,6 +19,9 @@ function App() {
         <Route path="/test" element={<TestPage/>} />
         <Route path="/teacher" element={<TeacherPage/>} />
         <Route path="/subject" element={<SubjectPage/>} />
+        <Route path="/direction" element={<DirectionPage/>} />
+        <Route path="/student" element={<StudentPage/>} />
+        <Route path="/score" element={<ScorePage/>} />
       </Routes>
     </>
   );

all/react-postgres/src/models/Direction.js

@@ -0,0 +1,8 @@
+export default class Direction {
+    constructor(data) {
+        this.id = data?.id;
+        this.name = data?.name || '';
+        this.faculty_id = data?.faculty_id || '';
+        this.faculty_name = data?.faculty_name || '';
+    }
+}

all/react-postgres/src/models/Score.js

@@ -0,0 +1,16 @@
+export default class Score {
+    constructor(data) {
+        this.id = data?.id;
+        this.value = data?.value || '';
+        this.subject_id = data?.subject_id || '';
+        this.subject_name = data?.subject_name || '';
+        this.test_type_id = data?.test_type_id || '';
+        this.test_type_name = data?.test_type_name || '';
+        this.teacher_id = data?.teacher_id || '';
+        this.teacher_name = data?.teacher_name || '';
+        this.teacher_surname = data?.teacher_surname || '';
+        this.student_id = data?.student_id || '';
+        this.student_name = data?.student_name || '';
+        this.student_surname = data?.student_surname || '';
+    }
+}

all/react-postgres/src/models/Student.js

@@ -0,0 +1,10 @@
+export default class Student {
+    constructor(data) {
+        this.id = data?.id;
+        this.name = data?.name || '';
+        this.surname = data?.surname || '';
+        this.record_book = data?.record_book || '';
+        this.direction_id = data?.direction_id || '';
+        this.direction_name = data?.direction_name || '';
+    }
+}

all/react-postgres/src/pages/DirectionPage.jsx

@@ -0,0 +1,151 @@
+import React, {useState, useEffect} from 'react';
+import Modal from '../common/Modal';
+import Direction from '../models/Direction';
+
+
+export default function DirectionPage() {
+    const [items, setItems] = useState([]);
+    const [item, setItem] = useState(new Direction())
+
+    const [faculties, setFaculties] = useState([])
+
+    const [modalHeader, setModalHeader] = useState('')
+    const [modalConfirm, setModalConfirm] = useState('')
+    const [modalVisible, setModalVisible] = useState(false)
+    const [isEdit, setEdit] = useState(false)
+
+    useEffect(() => {
+        get()
+        //eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    function save(){
+        if(isEdit) upd()
+        else create()
+        get()
+    }
+
+    function get(){
+        fetch('http://localhost:3001/direction')
+        .then(response => {return response.json()})
+        .then(data => setItems(data))
+
+        fetch('http://localhost:3001/faculty')
+        .then(response => {return response.json()})
+        .then(data => setFaculties(data))
+    }
+
+    function create(){
+        fetch('http://localhost:3001/direction', {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(item)
+        })
+        .then(response => get())
+    }
+
+    function upd(){
+        fetch(`http://localhost:3001/direction/upd/${item.id}`, {
+            method: 'PUT',
+            headers: {
+              'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(item)
+        })
+        .then(response => get())
+    }
+
+    function del(id){
+        fetch(`http://localhost:3001/direction/del/${id}`, {
+            method: 'DELETE'
+        })
+        .then(response => get())
+    }
+
+    function handleCreate(){
+        setEdit(false)
+        setModalHeader('Create');
+        setModalConfirm('Add');
+        setModalVisible(true);
+    }
+
+    function handleFormChange(event) {
+        setItem(prevState => ({ ...prevState, [event.target.id]: event.target.value }))
+    }
+
+    function handleEdit(data){
+        setItem(data)
+        setEdit(true)
+        setModalHeader('Update');
+        setModalConfirm('Save');
+        setModalVisible(true);
+    }
+
+    const hideModal = () => setModalVisible(false)
+    const modalDone = () => save()
+
+  return (
+    <>
+        <Modal
+            header={modalHeader}
+            confirm={modalConfirm}
+            visible={modalVisible} 
+            onHide={hideModal}
+            onDone={modalDone}>
+                <div className="mb-3">
+                    <label htmlFor="name" className="form-label">Name</label>
+                    <input type="text" id="name" className="form-control" required 
+                        value={item.name} onChange={handleFormChange}/>
+                </div>
+
+                <div className="mb-3">
+                    <p className="h4" htmlFor="faculty_id">Faculty</p>
+                    <select id="faculty_id" className="form-select " required
+                        value={item.faculty_id} onChange={handleFormChange}>
+                        <option disabled value="">Choose faculty</option>
+                        {
+                            faculties.map(faculty => 
+                                <option key={faculty.id} value={faculty.id}>{faculty.name}</option>
+                            )
+                        }
+                    </select>
+                </div>
+        </Modal>
+
+        <div className='container'>
+            <button type="button" className="btn btn-success" onClick={handleCreate}>Create</button>
+
+            <table className='table'>
+                <thead>
+                    <tr>
+                    <th scope="col">#</th>
+                    <th scope="col">name</th>
+                    <th scope="col">faculty</th>
+                    <th scope="col"></th>
+                    </tr>
+                </thead>
+
+                <tbody>
+                    {
+                        items.map((data, index) =>
+                        <tr key={data.id}>
+                            <th scope="row">{index + 1}</th>
+                            <td>{data.name}</td>
+                            <td>{data.faculty_name}</td>
+                            <td>
+                                <div>
+                                    <button type="button" className="btn btn-warning" onClick={() => handleEdit(data)}>Edit</button>  
+                                    <button type="button" className="btn btn-danger" onClick={() => del(data.id)}>Delete</button>  
+                                </div>
+                            </td>
+                        </tr> 
+                        )
+                    }
+                </tbody>
+            </table>
+        </div>
+    </>
+  );
+}

all/react-postgres/src/pages/FacultyPage.jsx

@@ -30,13 +30,12 @@ export default function FacultyPage() {
     }
 
     function create(){
-        const name = item.name
         fetch('http://localhost:3001/faculty', {
             method: 'POST',
             headers: {
               'Content-Type': 'application/json',
             },
-            body: JSON.stringify({name})
+            body: JSON.stringify(item)
         })
         .then(response => get())
     }

all/react-postgres/src/pages/ScorePage.jsx

@@ -0,0 +1,212 @@
+import React, {useState, useEffect} from 'react';
+import Modal from '../common/Modal';
+import Score from '../models/Score';
+
+
+export default function ScorePage() {
+    const [items, setItems] = useState([]);
+    const [item, setItem] = useState(new Score())
+
+    const [subjects, setSubjects] = useState([])
+    const [tests, setTests] = useState([])
+    const [teachers, setTeachers] = useState([])
+    const [students, setStudents] = useState([])
+
+    const [modalHeader, setModalHeader] = useState('')
+    const [modalConfirm, setModalConfirm] = useState('')
+    const [modalVisible, setModalVisible] = useState(false)
+    const [isEdit, setEdit] = useState(false)
+
+    useEffect(() => {
+        get()
+        //eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    function save(){
+        if(isEdit) upd()
+        else create()
+        get()
+    }
+
+    function get(){
+        fetch('http://localhost:3001/score')
+        .then(response => {return response.json()})
+        .then(data => setItems(data))
+
+        fetch('http://localhost:3001/subject')
+        .then(response => {return response.json()})
+        .then(data => setSubjects(data))
+
+        fetch('http://localhost:3001/test')
+        .then(response => {return response.json()})
+        .then(data => setTests(data))
+
+        fetch('http://localhost:3001/teacher')
+        .then(response => {return response.json()})
+        .then(data => setTeachers(data))
+
+        fetch('http://localhost:3001/student')
+        .then(response => {return response.json()})
+        .then(data => setStudents(data))
+    }
+
+    function create(){
+        console.log(item)
+        fetch('http://localhost:3001/score', {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(item)
+        })
+        .then(response => get())
+    }
+
+    function upd(){
+        fetch(`http://localhost:3001/score/upd/${item.id}`, {
+            method: 'PUT',
+            headers: {
+              'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(item)
+        })
+        .then(response => get())
+    }
+
+    function del(id){
+        fetch(`http://localhost:3001/score/del/${id}`, {
+            method: 'DELETE'
+        })
+        .then(response => get())
+    }
+
+    function handleCreate(){
+        setEdit(false)
+        setModalHeader('Create');
+        setModalConfirm('Add');
+        setModalVisible(true);
+    }
+
+    function handleFormChange(event) {
+        setItem(prevState => ({ ...prevState, [event.target.id]: event.target.value }))
+    }
+
+    function handleEdit(data){
+        setItem(data)
+        setEdit(true)
+        setModalHeader('Update');
+        setModalConfirm('Save');
+        setModalVisible(true);
+    }
+
+    const hideModal = () => setModalVisible(false)
+    const modalDone = () => save()
+
+  return (
+    <>
+        <Modal
+            header={modalHeader}
+            confirm={modalConfirm}
+            visible={modalVisible} 
+            onHide={hideModal}
+            onDone={modalDone}>
+                <div className="mb-3">
+                    <label htmlFor="value" className="form-label">Value</label>
+                    <input type="text" id="value" className="form-control" required 
+                        value={item.value} onChange={handleFormChange}/>
+                </div>
+
+                <div className="mb-3">
+                    <p className="h4" htmlFor="subject_id">Subject</p>
+                    <select id="subject_id" className="form-select " required
+                        value={item.subject_id} onChange={handleFormChange}>
+                        <option disabled value="">Choose subject</option>
+                        {
+                            subjects.map(subject => 
+                                <option key={subject.id} value={subject.id}>{subject.name}</option>
+                            )
+                        }
+                    </select>
+                </div>
+
+                <div className="mb-3">
+                    <p className="h4" htmlFor="test_type_id">Test type</p>
+                    <select id="test_type_id" className="form-select " required
+                        value={item.test_type_id} onChange={handleFormChange}>
+                        <option disabled value="">Choose test type</option>
+                        {
+                            tests.map(test => 
+                                <option key={test.id} value={test.id}>{test.name}</option>
+                            )
+                        }
+                    </select>
+                </div>
+
+                <div className="mb-3">
+                    <p className="h4" htmlFor="teacher_id">Teacher</p>
+                    <select id="teacher_id" className="form-select " required
+                        value={item.teacher_id} onChange={handleFormChange}>
+                        <option disabled value="">Choose teacher</option>
+                        {
+                            teachers.map(teacher => 
+                                <option key={teacher.id} value={teacher.id}>{teacher.name}</option>
+                            )
+                        }
+                    </select>
+                </div>
+
+                <div className="mb-3">
+                    <p className="h4" htmlFor="student_id">Student</p>
+                    <select id="student_id" className="form-select " required
+                        value={item.student_id} onChange={handleFormChange}>
+                        <option disabled value="">Choose student</option>
+                        {
+                            students.map(student => 
+                                <option key={student.id} value={student.id}>{student.name}</option>
+                            )
+                        }
+                    </select>
+                </div>
+        </Modal>
+
+        <div className='container'>
+            <button type="button" className="btn btn-success" onClick={handleCreate}>Create</button>
+
+            <table className='table'>
+                <thead>
+                    <tr>
+                    <th scope="col">#</th>
+                    <th scope="col">test type</th>
+                    <th scope="col">value</th>
+                    <th scope="col">student</th>
+                    <th scope="col">subject</th>
+                    <th scope="col">teacher</th>
+                    <th scope="col"></th>
+                    </tr>
+                </thead>
+
+                <tbody>
+                    {
+                        items.map((data, index) =>
+                        <tr key={data.id}>
+                            <th scope="row">{index + 1}</th>
+                            <td>{data.test_type_name}</td>
+                            <td>{data.value}</td>
+                            <td>{data.student_name} {data.student_surname}</td>
+                            <td>{data.subject_name}</td>
+                            <td>{data.teacher_name} {data.teacher_surname}</td>
+                            <td>
+                                <div>
+                                    <button type="button" className="btn btn-warning" onClick={() => handleEdit(data)}>Edit</button>  
+                                    <button type="button" className="btn btn-danger" onClick={() => del(data.id)}>Delete</button>  
+                                </div>
+                            </td>
+                        </tr> 
+                        )
+                    }
+                </tbody>
+            </table>
+        </div>
+    </>
+  );
+}

all/react-postgres/src/pages/StudentPage.jsx

@@ -0,0 +1,168 @@
+import React, {useState, useEffect} from 'react';
+import Modal from '../common/Modal';
+import Student from '../models/Student';
+
+
+export default function StudentPage() {
+    const [items, setItems] = useState([]);
+    const [item, setItem] = useState(new Student())
+
+    const [directions, setDirections] = useState([])
+
+    const [modalHeader, setModalHeader] = useState('')
+    const [modalConfirm, setModalConfirm] = useState('')
+    const [modalVisible, setModalVisible] = useState(false)
+    const [isEdit, setEdit] = useState(false)
+
+    useEffect(() => {
+        get()
+        //eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    function save(){
+        if(isEdit) upd()
+        else create()
+        get()
+    }
+
+    function get(){
+        fetch('http://localhost:3001/student')
+        .then(response => {return response.json()})
+        .then(data => setItems(data))
+
+        fetch('http://localhost:3001/direction')
+        .then(response => {return response.json()})
+        .then(data => setDirections(data))
+    }
+
+    function create(){
+        console.log(item)
+        fetch('http://localhost:3001/student', {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(item)
+        })
+        .then(response => get())
+    }
+
+    function upd(){
+        fetch(`http://localhost:3001/student/upd/${item.id}`, {
+            method: 'PUT',
+            headers: {
+              'Content-Type': 'application/json',
+            },
+            body: JSON.stringify(item)
+        })
+        .then(response => get())
+    }
+
+    function del(id){
+        fetch(`http://localhost:3001/student/del/${id}`, {
+            method: 'DELETE'
+        })
+        .then(response => get())
+    }
+
+    function handleCreate(){
+        setEdit(false)
+        setModalHeader('Create');
+        setModalConfirm('Add');
+        setModalVisible(true);
+    }
+
+    function handleFormChange(event) {
+        setItem(prevState => ({ ...prevState, [event.target.id]: event.target.value }))
+    }
+
+    function handleEdit(data){
+        setItem(data)
+        setEdit(true)
+        setModalHeader('Update');
+        setModalConfirm('Save');
+        setModalVisible(true);
+    }
+
+    const hideModal = () => setModalVisible(false)
+    const modalDone = () => save()
+
+  return (
+    <>
+        <Modal
+            header={modalHeader}
+            confirm={modalConfirm}
+            visible={modalVisible} 
+            onHide={hideModal}
+            onDone={modalDone}>
+                <div className="mb-3">
+                    <label htmlFor="name" className="form-label">Name</label>
+                    <input type="text" id="name" className="form-control" required 
+                        value={item.name} onChange={handleFormChange}/>
+                </div>
+
+                <div className="mb-3">
+                    <label htmlFor="surname" className="form-label">Surname</label>
+                    <input type="text" id="surname" className="form-control" required 
+                        value={item.surname} onChange={handleFormChange}/>
+                </div>
+
+                <div className="mb-3">
+                    <label htmlFor="record_book" className="form-label">Record book</label>
+                    <input type="text" id="record_book" className="form-control" required 
+                        value={item.record_book} onChange={handleFormChange}/>
+                </div>
+
+                <div className="mb-3">
+                    <p className="h4" htmlFor="faculty_id">Direction</p>
+                    <select id="direction_id" className="form-select " required
+                        value={item.direction_id} onChange={handleFormChange}>
+                        <option disabled value="">Choose direction</option>
+                        {
+                            directions.map(direction => 
+                                <option key={direction.id} value={direction.id}>{direction.name}</option>
+                            )
+                        }
+                    </select>
+                </div>
+        </Modal>
+
+        <div className='container'>
+            <button type="button" className="btn btn-success" onClick={handleCreate}>Create</button>
+
+            <table className='table'>
+                <thead>
+                    <tr>
+                    <th scope="col">#</th>
+                    <th scope="col">name</th>
+                    <th scope="col">surname</th>
+                    <th scope="col">record book</th>
+                    <th scope="col">direction</th>
+                    <th scope="col"></th>
+                    </tr>
+                </thead>
+
+                <tbody>
+                    {
+                        items.map((data, index) =>
+                        <tr key={data.id}>
+                            <th scope="row">{index + 1}</th>
+                            <td>{data.name}</td>
+                            <td>{data.surname}</td>
+                            <td>{data.record_book}</td>
+                            <td>{data.direction_name}</td>
+                            <td>
+                                <div>
+                                    <button type="button" className="btn btn-warning" onClick={() => handleEdit(data)}>Edit</button>  
+                                    <button type="button" className="btn btn-danger" onClick={() => del(data.id)}>Delete</button>  
+                                </div>
+                            </td>
+                        </tr> 
+                        )
+                    }
+                </tbody>
+            </table>
+        </div>
+    </>
+  );
+}

all/react-postgres/src/pages/SubjectPage.jsx

@@ -33,6 +33,7 @@ export default function SubjectPage() {
     }
 
     function create(){
+        console.log(item)
         fetch('http://localhost:3001/subject', {
             method: 'POST',
             headers: {
@@ -69,7 +70,7 @@ export default function SubjectPage() {
     }
 
     function handleFormChange(event) {
-        setItem({ ...item, [event.target.id]: event.target.value })
+        setItem(prevState => ({ ...prevState, [event.target.id]: event.target.value }))
     }
 
     function handleEdit(data){
@@ -98,8 +99,8 @@ export default function SubjectPage() {
                 </div>
 
                 <div className="mb-3">
-                    <label htmlFor="hours" className="form-label">Hours</label>
+                    <label htmlFor="hours_count" className="form-label">Hours</label>
-                    <input type="text" id="hours" className="form-control" required 
+                    <input type="text" id="hours_count" className="form-control" required 
                         value={item.hours_count} onChange={handleFormChange}/>
                 </div>
         </Modal>

all/react-postgres/src/pages/TeacherPage.jsx

@@ -66,7 +66,8 @@ export default function TeacherPage() {
     }
 
     function handleFormChange(event) {
-        setItem({ ...item, [event.target.id]: event.target.value })
+        console.log(event.target.id)
+        setItem(prevState => ({ ...prevState, [event.target.id]: event.target.value }))
     }
 
     function handleEdit(data){