From 686c190b3eae6efd9b8366b6b19ca74590673b22 Mon Sep 17 00:00:00 2001
From: akmatoff <akmatoff.exe@gmail.com>
Date: Mon, 29 Jan 2024 23:40:03 +0600
Subject: [PATCH] Resource details page

---
 src/components/shared/Table/Table.tsx      |  5 +++--
 src/pages/groups/GroupDetails.tsx          |  8 +++++---
 src/pages/groups/components/GroupsList.tsx |  5 ++++-
 src/pages/lectures/LecturesPage.tsx        |  5 ++++-
 src/pages/sections/SectionsPage.tsx        |  5 ++++-
 src/pages/subjects/SubjectsPage.tsx        |  5 ++++-
 src/pages/topics/TopicsPage.tsx            |  5 ++++-
 src/queries/groups.ts                      | 19 ++++++++++++++++++-
 src/requests/groups.ts                     |  4 ++++
 src/routes/RootRouter.tsx                  | 10 +++++-----
 10 files changed, 55 insertions(+), 16 deletions(-)

diff --git a/src/components/shared/Table/Table.tsx b/src/components/shared/Table/Table.tsx
index 118a9fa..975b4f4 100644
--- a/src/components/shared/Table/Table.tsx
+++ b/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>
   );
diff --git a/src/pages/groups/GroupDetails.tsx b/src/pages/groups/GroupDetails.tsx
index 2eb1379..3aa8e24 100644
--- a/src/pages/groups/GroupDetails.tsx
+++ b/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,
diff --git a/src/pages/groups/components/GroupsList.tsx b/src/pages/groups/components/GroupsList.tsx
index 6d58848..f2fbe3d 100644
--- a/src/pages/groups/components/GroupsList.tsx
+++ b/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>
diff --git a/src/pages/lectures/LecturesPage.tsx b/src/pages/lectures/LecturesPage.tsx
index 2d674ea..309553e 100644
--- a/src/pages/lectures/LecturesPage.tsx
+++ b/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>
diff --git a/src/pages/sections/SectionsPage.tsx b/src/pages/sections/SectionsPage.tsx
index 7223b2d..cb654a5 100644
--- a/src/pages/sections/SectionsPage.tsx
+++ b/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>
diff --git a/src/pages/subjects/SubjectsPage.tsx b/src/pages/subjects/SubjectsPage.tsx
index 1b882e7..6f3238b 100644
--- a/src/pages/subjects/SubjectsPage.tsx
+++ b/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>
diff --git a/src/pages/topics/TopicsPage.tsx b/src/pages/topics/TopicsPage.tsx
index 68e166d..97650c8 100644
--- a/src/pages/topics/TopicsPage.tsx
+++ b/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>
diff --git a/src/queries/groups.ts b/src/queries/groups.ts
index 181bacd..b538416 100644
--- a/src/queries/groups.ts
+++ b/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
diff --git a/src/requests/groups.ts b/src/requests/groups.ts
index 56d542f..30abede 100644
--- a/src/requests/groups.ts
+++ b/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);
 }
diff --git a/src/routes/RootRouter.tsx b/src/routes/RootRouter.tsx
index c4b176f..a57d5db 100644
--- a/src/routes/RootRouter.tsx
+++ b/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>