Отображение студентов

src/components/studenttablerow/studenttablerow.jsx

@@ -0,0 +1,17 @@
+import { PropTypes } from "prop-types";
+
+const StudentTableRow = ({ student }) => {
+    return (
+        <tr>
+            <th scope='row'>{student.id}</th>
+            <td>{student.surname} {student.name}</td>
+            <td>{student.group.name}</td>
+        </tr>
+    );
+};
+
+StudentTableRow.propTypes = {
+    student: PropTypes.object
+};
+
+export default StudentTableRow;

src/hooks/UserHooks.js

@@ -69,3 +69,24 @@ export const useUsers = () => {
         handleUsersRefresh,
     };
 };
+
+export const useStudents = () => {
+    const [studentsRefresh, setStudentsRefresh] = useState(false);
+    const [students, setStudents] = useState([]);
+    const handleStudentsRefresh = () => setStudentsRefresh(!studentsRefresh);
+
+    const getStudents = async () => {
+        const expand = `?isTeacher=false&_expand=group`;
+        const data = await UsersApiService.getAll(expand);
+        setStudents(data ?? []);
+    };
+
+    useEffect(() => {
+        getStudents();
+    }, [studentsRefresh]);
+
+    return {
+        students,
+        handleStudentsRefresh,
+    };
+};

src/pages/StudentsPage/StudentsPage.jsx

@@ -1,11 +1,29 @@
-import { useOnlyTeachers } from "../../hooks/UserHooks";
+import StudentTableRow from "../../components/studenttablerow/studenttablerow";
+import { useOnlyTeachers, useStudents } from "../../hooks/UserHooks";
+import { Container } from "react-bootstrap";
 
 const StudentsPage = () => {
     useOnlyTeachers();
+    const { students, handleStudentsChange } = useStudents();
 
     return (
         <>
-            <h5>StudentsPage</h5>
+            <Container>
+                <table className="table">
+                    <thead>
+                        <tr>
+                            <th scope="col">ID</th>
+                            <th scope="col">Фамилия Имя</th>
+                            <th scope="col">Группа</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {
+                            students.map((student, index) => <StudentTableRow key={index} student={student} />)
+                        }
+                    </tbody>
+                </table>
+            </Container>
         </>
     );
 };