From e243f101b3266ed98a1b668562a639408ffe36d7 Mon Sep 17 00:00:00 2001
From: physcik <mynameisgennadiy@vk.com>
Date: Fri, 10 Apr 2026 20:45:57 +0500
Subject: router setup

---
 front/src/App.js                    | 25 -------------------------
 front/src/App.test.js               |  8 --------
 front/src/App.test.tsx              |  9 +++++++++
 front/src/App.tsx                   | 27 +++++++++++++++++++++++++++
 front/src/Emelents/ClassList.tsx    |  7 +++++++
 front/src/Emelents/IndexElement.tsx |  9 +++++++++
 front/src/Emelents/Sidebar.tsx      | 12 ++++++++++++
 front/src/index.css                 | 13 ++++++++-----
 front/src/index.js                  | 17 -----------------
 front/src/index.tsx                 | 19 +++++++++++++++++++
 front/src/react-app-env.d.ts        |  1 +
 front/src/reportWebVitals.js        | 13 -------------
 front/src/reportWebVitals.ts        | 15 +++++++++++++++
 front/src/setupTests.js             |  5 -----
 front/src/setupTests.ts             |  5 +++++
 15 files changed, 112 insertions(+), 73 deletions(-)
 delete mode 100644 front/src/App.js
 delete mode 100644 front/src/App.test.js
 create mode 100644 front/src/App.test.tsx
 create mode 100644 front/src/App.tsx
 create mode 100644 front/src/Emelents/ClassList.tsx
 create mode 100644 front/src/Emelents/IndexElement.tsx
 create mode 100644 front/src/Emelents/Sidebar.tsx
 delete mode 100644 front/src/index.js
 create mode 100644 front/src/index.tsx
 create mode 100644 front/src/react-app-env.d.ts
 delete mode 100644 front/src/reportWebVitals.js
 create mode 100644 front/src/reportWebVitals.ts
 delete mode 100644 front/src/setupTests.js
 create mode 100644 front/src/setupTests.ts

(limited to 'front/src')

diff --git a/front/src/App.js b/front/src/App.js
deleted file mode 100644
index 3784575..0000000
--- a/front/src/App.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import logo from './logo.svg';
-import './App.css';
-
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
-}
-
-export default App;
diff --git a/front/src/App.test.js b/front/src/App.test.js
deleted file mode 100644
index 1f03afe..0000000
--- a/front/src/App.test.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});
diff --git a/front/src/App.test.tsx b/front/src/App.test.tsx
new file mode 100644
index 0000000..2a68616
--- /dev/null
+++ b/front/src/App.test.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});
diff --git a/front/src/App.tsx b/front/src/App.tsx
new file mode 100644
index 0000000..47cc1ed
--- /dev/null
+++ b/front/src/App.tsx
@@ -0,0 +1,27 @@
+import './App.css';
+import Sidebar from './Emelents/Sidebar';
+import { createBrowserRouter, RouterProvider } from 'react-router';
+import IndexElement from './Emelents/IndexElement';
+import ClassesList from './Emelents/ClassList';
+
+const router = createBrowserRouter([
+    {
+        index: true,
+        element: (<IndexElement />),
+    },
+    {
+        path: "/classes",
+        element: (<ClassesList />),
+    },
+]);
+
+function App() {
+    return (
+        <div>
+            <Sidebar />
+            <RouterProvider router={router} />
+        </div>
+    );
+}
+
+export default App;
diff --git a/front/src/Emelents/ClassList.tsx b/front/src/Emelents/ClassList.tsx
new file mode 100644
index 0000000..f0f6fcc
--- /dev/null
+++ b/front/src/Emelents/ClassList.tsx
@@ -0,0 +1,7 @@
+function ClassesList() {
+    return (
+        <h1> Classes list </h1>
+    );
+}
+
+export default ClassesList;
diff --git a/front/src/Emelents/IndexElement.tsx b/front/src/Emelents/IndexElement.tsx
new file mode 100644
index 0000000..4eda815
--- /dev/null
+++ b/front/src/Emelents/IndexElement.tsx
@@ -0,0 +1,9 @@
+function IndexElement() {
+    return (
+        <div>
+            <h1> Index element </h1>
+        </div>
+    );
+}
+
+export default IndexElement;
diff --git a/front/src/Emelents/Sidebar.tsx b/front/src/Emelents/Sidebar.tsx
new file mode 100644
index 0000000..c5a4a9c
--- /dev/null
+++ b/front/src/Emelents/Sidebar.tsx
@@ -0,0 +1,12 @@
+function Sidebar() {
+    return (
+        <nav className='Sidebar'>
+            <h1> Test </h1>
+            <ul>
+            <li> <a href="/classes"> Class list </a> </li>
+            </ul>
+        </nav>
+    )
+}
+
+export default Sidebar;
diff --git a/front/src/index.css b/front/src/index.css
index ec2585e..dfdc4ba 100644
--- a/front/src/index.css
+++ b/front/src/index.css
@@ -1,13 +1,16 @@
 body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    padding: 0;
+    margin: 0;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    position: absolute;
+    top: 0px;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
diff --git a/front/src/index.js b/front/src/index.js
deleted file mode 100644
index d563c0f..0000000
--- a/front/src/index.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
-
-const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
diff --git a/front/src/index.tsx b/front/src/index.tsx
new file mode 100644
index 0000000..032464f
--- /dev/null
+++ b/front/src/index.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement
+);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();
diff --git a/front/src/react-app-env.d.ts b/front/src/react-app-env.d.ts
new file mode 100644
index 0000000..6431bc5
--- /dev/null
+++ b/front/src/react-app-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="react-scripts" />
diff --git a/front/src/reportWebVitals.js b/front/src/reportWebVitals.js
deleted file mode 100644
index 5253d3a..0000000
--- a/front/src/reportWebVitals.js
+++ /dev/null
@@ -1,13 +0,0 @@
-const reportWebVitals = onPerfEntry => {
-  if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
-  }
-};
-
-export default reportWebVitals;
diff --git a/front/src/reportWebVitals.ts b/front/src/reportWebVitals.ts
new file mode 100644
index 0000000..49a2a16
--- /dev/null
+++ b/front/src/reportWebVitals.ts
@@ -0,0 +1,15 @@
+import { ReportHandler } from 'web-vitals';
+
+const reportWebVitals = (onPerfEntry?: ReportHandler) => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;
diff --git a/front/src/setupTests.js b/front/src/setupTests.js
deleted file mode 100644
index 8f2609b..0000000
--- a/front/src/setupTests.js
+++ /dev/null
@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';
diff --git a/front/src/setupTests.ts b/front/src/setupTests.ts
new file mode 100644
index 0000000..8f2609b
--- /dev/null
+++ b/front/src/setupTests.ts
@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';
-- 
cgit v1.3