before show

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;
+
+}
+

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={<MainPage/>}/>
-                <Route path="*" element={<Navigate to="/" />} />
+                <Route path="/surveys/:surveyId/" element={<SurveyPage/>}/>
+                <Route path="/dashboard/" element={<DashboardPage/>}/>
+                <Route path="*" element={<Navigate to="/"/>}/>
             </Routes>
         </Router>
     );

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;
+
+}

src/pages/DashboardPage.tsx

@@ -0,0 +1,3 @@
+export function DashboardPage() {
+    return null;
+}

src/pages/MainPage.tsx

@@ -13,14 +13,6 @@ 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>
-            </div>
-
-            {/* Main Content */}
-            <div className="content">
             <h2 className="title">Тесты для школьников и абитуриентов</h2>
 
             <div className={"surveys-list"}>
@@ -36,6 +28,5 @@ export function MainPage() {
                 раскрыть таланты и понять, какие профессии соответствуют их интересам и способностям.
             </p>
         </div>
-        </div>
     );
 }

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 (
+        <>
+
+
+        </>
+    );
+}
+
+

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{
+
+}