From a37118dc6a22e4ab80de29e373d21791a0366614 Mon Sep 17 00:00:00 2001
From: Mikan <72257910+Mikan-DS@users.noreply.github.com>
Date: Sat, 31 May 2025 10:57:27 +0300
Subject: [PATCH] before show

---
 src/API/common.ts              | 37 ++++++++++++++++++++++--
 src/App.tsx                    | 16 ++++++++--
 src/components/LoadingData.tsx | 14 +++++++++
 src/pages/DashboardPage.tsx    |  3 ++
 src/pages/MainPage.tsx         | 33 ++++++++-------------
 src/pages/SurveyPage.tsx       | 53 ++++++++++++++++++++++++++++++++++
 src/types/survey.ts            |  9 ++++++
 7 files changed, 139 insertions(+), 26 deletions(-)
 create mode 100644 src/components/LoadingData.tsx

diff --git a/src/API/common.ts b/src/API/common.ts
index a23ae68..ff14d09 100644
--- a/src/API/common.ts
+++ b/src/API/common.ts
@@ -50,7 +50,14 @@ export async function getFetch(path:string) {
 }
 
 
-export function useDataPage<T>(application:string, endpoint: string) {
+const createQueryString = (params: Record<string, string | number | boolean | undefined>): string => {
+    const filteredParams = Object.entries(params)
+        .filter(([_, value]) => value !== undefined && value !== null)
+        .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(String(value))}`);
+    return filteredParams.join('&');
+};
+
+export function useDataPage<T>(application:string, endpoint: string, params:{[key:string]:string|number}={}) {
     const [data, setData] = useState<T[]|null>(null);
     // const [previousUrl, setPreviousUrl] = useState<string|undefined>(undefined)
     // const [nextUrl, setNextUrl] = useState<string|undefined>(undefined)
@@ -61,7 +68,7 @@ export function useDataPage<T>(application:string, endpoint: string) {
     useEffect(
         ()=>{
             if (data === null){
-                getFetch(`/${application}/${endpoint}/`).then((r)=>{
+                getFetch(`/${application}/${endpoint}/?${createQueryString(params)}`).then((r)=>{
                     if (r.success){
                         const pageData = r.body as PageResponse<T>;
 
@@ -111,3 +118,29 @@ export function useDataPage<T>(application:string, endpoint: string) {
 
 
 }
+
+export function useData<T>(application:string, endpoint: string, id: string|number) {
+
+    const [data, setData] = useState<T | null | undefined>(null);
+
+    useEffect(
+        ()=>{
+            if (data === null){
+                getFetch(`/${application}/${endpoint}/${id}`).then((r)=>{
+                    if (r.success){
+                        const pageData = r.body as T;
+                        setData(pageData);
+                    }
+                    else {
+                        setData(null);
+                    }
+                })
+            }
+        },
+        [data, application, endpoint, id]
+    )
+
+    return data;
+
+}
+
diff --git a/src/App.tsx b/src/App.tsx
index b7c09a1..19a954c 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,14 +1,24 @@
 // App.tsx
-import {BrowserRouter as Router, Routes, Route, Navigate} from 'react-router-dom';
+import {BrowserRouter as Router, Routes, Route, Navigate, Link} from 'react-router-dom';
 import React from "react";
 import {MainPage} from "./pages/MainPage.tsx";
+import {SurveyPage} from "./pages/SurveyPage.tsx";
+import {DashboardPage} from "./pages/DashboardPage.tsx";
+
+
 
 export default function App() {
     return (
         <Router>
+            <div className="header">
+                <Link to="/dashboard" className="menu-button">☰</Link>
+                <h1 className="logo">Pro-Fi Test</h1>
+            </div>
             <Routes>
-                <Route path="/" element={<MainPage />} />
-                <Route path="*" element={<Navigate to="/" />} />
+                <Route path="/" element={<MainPage/>}/>
+                <Route path="/surveys/:surveyId/" element={<SurveyPage/>}/>
+                <Route path="/dashboard/" element={<DashboardPage/>}/>
+                <Route path="*" element={<Navigate to="/"/>}/>
             </Routes>
         </Router>
     );
diff --git a/src/components/LoadingData.tsx b/src/components/LoadingData.tsx
new file mode 100644
index 0000000..290ec9e
--- /dev/null
+++ b/src/components/LoadingData.tsx
@@ -0,0 +1,14 @@
+import {ReactElement} from "react";
+import {Link} from "react-router-dom";
+
+export function LoadingData({data, children}: {data: object|null|undefined, children: ReactElement}) {
+
+    if (data === null){
+        return <div className={"loading"}>Идёт загрузка...</div>
+    }
+    if (data === undefined){
+        return <Link className={"not-found"} to={"/"}>404 НИЧЕГО НЕ НАЙДЕНО</Link>
+    }
+    return children;
+
+}
\ No newline at end of file
diff --git a/src/pages/DashboardPage.tsx b/src/pages/DashboardPage.tsx
index e69de29..59e4964 100644
--- a/src/pages/DashboardPage.tsx
+++ b/src/pages/DashboardPage.tsx
@@ -0,0 +1,3 @@
+export function DashboardPage() {
+    return null;
+}
\ No newline at end of file
diff --git a/src/pages/MainPage.tsx b/src/pages/MainPage.tsx
index 7b2bd0f..011faad 100644
--- a/src/pages/MainPage.tsx
+++ b/src/pages/MainPage.tsx
@@ -13,29 +13,20 @@ export function MainPage() {
 
     return (
         <div className="main-page">
-            {/* Header */}
-            <div className="header">
-                <Link to="/dashboard" className="menu-button">☰</Link>
-                <h1 className="logo">Pro-Fi Test</h1>
+            <h2 className="title">Тесты для школьников и абитуриентов</h2>
+
+            <div className={"surveys-list"}>
+                <LoadingList data={surveys.items} listElement={(s: Survey)=>(
+                    <Link key={s.id} to={`surveys/${s.id}/`}>{s.title}</Link>
+                )}/>
             </div>
 
-            {/* Main Content */}
-            <div className="content">
-                <h2 className="title">Тесты для школьников и абитуриентов</h2>
-
-                <div className={"surveys-list"}>
-                    <LoadingList data={surveys.items} listElement={(s: Survey)=>(
-                        <Link key={s.id} to={`surveys/${s.id}/`}>{s.title}</Link>
-                    )}/>
-                </div>
-
-                <p className="description">
-                    Добро пожаловать на Pro-Fi Test — ваш надежный помощник в мире профессий!
-                    Мы понимаем, что выбор будущей профессии — это одно из самых важных решений
-                    в жизни каждого школьника. Наша миссия — помочь молодым людям найти свой путь,
-                    раскрыть таланты и понять, какие профессии соответствуют их интересам и способностям.
-                </p>
-            </div>
+            <p className="description">
+                Добро пожаловать на Pro-Fi Test — ваш надежный помощник в мире профессий!
+                Мы понимаем, что выбор будущей профессии — это одно из самых важных решений
+                в жизни каждого школьника. Наша миссия — помочь молодым людям найти свой путь,
+                раскрыть таланты и понять, какие профессии соответствуют их интересам и способностям.
+            </p>
         </div>
     );
 }
\ No newline at end of file
diff --git a/src/pages/SurveyPage.tsx b/src/pages/SurveyPage.tsx
index e69de29..b02f590 100644
--- a/src/pages/SurveyPage.tsx
+++ b/src/pages/SurveyPage.tsx
@@ -0,0 +1,53 @@
+import {LoadingList} from "../components/LoadingList.tsx";
+import {Survey} from "../types/survey.ts";
+import {Link, useParams} from "react-router-dom";
+import React from "react";
+import {useData, useDataPage} from "../API/common.ts";
+import {LoadingData} from "../components/LoadingData.tsx";
+
+
+
+export function SurveyPage() {
+
+    const {surveyId} = useParams();
+
+    const survey = useData<Survey>("surveys", "surveys", surveyId);
+
+    return (
+        <div className="survey-page">
+            <LoadingData data={survey}>
+                <h1>
+                    {survey?.title}
+                </h1>
+                <div>
+                    {survey?.description}
+                </div>
+
+                <SurveyQuestions survey={survey}/>
+
+            </LoadingData>
+
+        </div>
+    );
+}
+
+
+function SurveyQuestions({survey}: { survey: Survey | null | undefined }) {
+
+    const _survey = survey as Survey;
+
+    const questionsPairs = useDataPage("surveys", "question-pairs", {survey:_survey.id});
+    const questionsAgreement = useDataPage("surveys", "question-pairs", {survey:_survey.id});
+
+    //const questions =
+
+
+    return (
+        <>
+
+
+        </>
+    );
+}
+
+
diff --git a/src/types/survey.ts b/src/types/survey.ts
index e3b2518..2170396 100644
--- a/src/types/survey.ts
+++ b/src/types/survey.ts
@@ -2,6 +2,15 @@ import {UniqueItem} from "./common.ts";
 
 export interface Survey extends UniqueItem{
     title: string;
+    description: string;
 }
 
 
+interface Statement extends UniqueItem{
+    text: string;
+    score_variable: number;
+}
+
+export interface QuestionPair extends UniqueItem{
+
+}