Resource details page

src/components/shared/Table/Table.tsx

@@ -27,11 +27,12 @@ export default function Table({ headers, children }: Props) {
 
 interface TableRowProps {
   children: ReactNode;
+  onClick?: () => void;
 }
 
-export function TableRow({ children }: TableRowProps) {
+export function TableRow({ children, onClick }: TableRowProps) {
   return (
-    <div className={styles.row}>
+    <div className={styles.row} onClick={onClick}>
       <div className={styles.content}>{children}</div>
     </div>
   );

src/pages/groups/GroupDetails.tsx

@@ -7,13 +7,13 @@ import { ROUTES } from "@/constants/routes";
 import { useNotification } from "@/hooks/useNotification";
 import { IOption } from "@/interfaces/common";
 import { IGroupCreate } from "@/interfaces/group";
-import { useGroupMutation } from "@/queries/groups";
+import { useGroupDetailsQuery, useGroupMutation } from "@/queries/groups";
 import { useSubjectsQuery } from "@/queries/subjects";
 import { yupResolver } from "@hookform/resolvers/yup";
 import { useQueryClient } from "@tanstack/react-query";
 import { useEffect, useMemo, useState } from "react";
 import { SubmitHandler, useForm } from "react-hook-form";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 import * as Yup from "yup";
 
 const groupValidationSchema = Yup.object({
@@ -35,7 +35,7 @@ interface GroupForm {
 }
 
 function GroupDetails() {
-  // const { id } = useParams();
+  const { id } = useParams();
 
   const [search, setSearch] = useState("");
 
@@ -44,6 +44,8 @@ function GroupDetails() {
   const queryClient = useQueryClient();
   const navigate = useNavigate();
 
+  const { data, isLoading } = useGroupDetailsQuery(+id!);
+
   const {
     data: subjects,
     isFetching,

src/pages/groups/components/GroupsList.tsx

@@ -22,7 +22,10 @@ function GroupsList({ groups, isLoading }: Props) {
         headers={[{ title: "ID" }, { title: "Название" }, { title: "Предмет" }]}
       >
         {groups.map((group) => (
-          <TableRow key={group.id}>
+          <TableRow
+            key={group.id}
+            onClick={() => navigate(`${ROUTES.GROUP}/${group.id}`)}
+          >
             <TableColumn>{group.id}</TableColumn>
             <TableColumn>{group.title}</TableColumn>
             <TableColumn>{group.subject.title}</TableColumn>

src/pages/lectures/LecturesPage.tsx

@@ -28,7 +28,10 @@ function LecturesPage() {
         ]}
       >
         {lectures?.map((lecture) => (
-          <TableRow key={lecture.id}>
+          <TableRow
+            key={lecture.id}
+            onClick={() => navigate(`${ROUTES.LECTURE}/${lecture.id}`)}
+          >
             <TableColumn>{lecture.id}</TableColumn>
             <TableColumn>{lecture.title}</TableColumn>
             <TableColumn>{lecture.number}</TableColumn>

src/pages/sections/SectionsPage.tsx

@@ -19,7 +19,10 @@ function SectionsPage() {
         headers={[{ title: "ID" }, { title: "Название" }, { title: "Предмет" }]}
       >
         {sections?.map((section) => (
-          <TableRow key={section.id}>
+          <TableRow
+            key={section.id}
+            onClick={() => navigate(`${ROUTES.SECTION}/${section.id}`)}
+          >
             <TableColumn>{section.id}</TableColumn>
             <TableColumn>{section.title}</TableColumn>
             <TableColumn>{section.subject.title}</TableColumn>

src/pages/subjects/SubjectsPage.tsx

@@ -26,7 +26,10 @@ function SubjectsPage() {
         ]}
       >
         {subjects?.map((subject) => (
-          <TableRow key={subject.id}>
+          <TableRow
+            key={subject.id}
+            onClick={() => navigate(`${ROUTES.SUBJECT}/${subject.id}`)}
+          >
             <TableColumn>{subject.id}</TableColumn>
             <TableColumn>{subject.title}</TableColumn>
             <TableColumn>

src/pages/topics/TopicsPage.tsx

@@ -19,7 +19,10 @@ function TopicsPage() {
         headers={[{ title: "ID" }, { title: "Название" }, { title: "Раздел" }]}
       >
         {topics?.map((topic) => (
-          <TableRow key={topic.id}>
+          <TableRow
+            key={topic.id}
+            onClick={() => navigate(`${ROUTES.TOPIC}/${topic.id}`)}
+          >
             <TableColumn>{topic.id}</TableColumn>
             <TableColumn>{topic.title}</TableColumn>
             <TableColumn>{topic.section.title}</TableColumn>

src/queries/groups.ts

@@ -1,6 +1,11 @@
 import { QUERY_KEYS } from "@/constants/queryKeys";
 import { IGroup } from "../interfaces/auth";
-import { createGroup, getGroups, removeGroup } from "../requests/groups";
+import {
+  createGroup,
+  getGroupDetails,
+  getGroups,
+  removeGroup,
+} from "../requests/groups";
 import { useMutation, useQuery } from "@tanstack/react-query";
 
 interface MutationQuery {
@@ -36,6 +41,18 @@ export const useGroupsQuery = () => {
   };
 };
 
+export const useGroupDetailsQuery = (id: number) => {
+  const { data, isLoading } = useQuery({
+    queryFn: () => getGroupDetails(id),
+    queryKey: [QUERY_KEYS.GROUPS, id],
+  });
+
+  return {
+    data,
+    isLoading,
+  };
+};
+
 export const useGroupDeletion = (
   id: number,
   { onSuccess, onError }: MutationQuery

src/requests/groups.ts

@@ -7,6 +7,10 @@ export async function getGroups(): Promise<IGroup[]> {
   return axios.get(API_GROUPS).then(({ data }) => data);
 }
 
+export async function getGroupDetails(id: number) {
+  return axios.get(`${API_GROUPS}${id}`).then(({ data }) => data);
+}
+
 export async function createGroup(data: IGroupCreate): Promise<IGroup> {
   return axios.post(API_GROUPS, data).then(({ data }) => data);
 }

src/routes/RootRouter.tsx

@@ -25,16 +25,16 @@ const router = createBrowserRouter(
       <Route index element={<Home />} />
       <Route path="login" element={<Login />} />
       <Route path="office" element={<DashboardLayout />}>
-        <Route path="group" element={<GroupDetails />} />
+        <Route path="group/:id" element={<GroupDetails />} />
         <Route path="groups" element={<GroupsPage />} />
         <Route path="sections" element={<SectionsPage />} />
-        <Route path="section" element={<SectionDetails />} />
+        <Route path="section/:id" element={<SectionDetails />} />
         <Route path="topics" element={<TopicsPage />} />
-        <Route path="topic" element={<TopicDetails />} />
+        <Route path="topic/:id" element={<TopicDetails />} />
         <Route path="lectures" element={<LecturesPage />} />
-        <Route path="lecture" element={<LectureDetails />} />
+        <Route path="lecture/:id" element={<LectureDetails />} />
         <Route path="subjects" element={<SubjectsPage />} />
-        <Route path="subject" element={<SubjectDetails />} />
+        <Route path="subject/:id" element={<SubjectDetails />} />
         <Route path="reg-requests" element={<RegRequestsPage />} />
       </Route>
     </Route>