start final project

db.json

@@ -0,0 +1,22 @@
+{
+    "advertisement": [
+        {
+            "id":1,
+            "name":"Продаю голодного кота!",
+            "description":"Кот бегемот. Прокормить невозможно!",
+            "url":"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTqlWZ1N8qSUMB1HuqN6DjnXP_D5NRGNJ-W6zLZqP-Y9Q&s=10"
+        },
+        {
+            "id":2,
+            "name":"Продаю машину",
+            "description":"Не бита не крашена без пробега по РФ",
+            "url":"https://s0.rbk.ru/v6_top_pics/media/img/9/33/347054091401339.jpeg"
+        },
+        {
+            "id":3,
+            "name":"Продаю квартиру",
+            "description":"Центр города, с видом на море.",
+            "url":"https://hoff.ru/upload/medialibrary/11c/11cb47c1d2d4f248b7dde57f479f2d47.jpg"
+        }
+    ]
+}

package.json

@@ -4,14 +4,17 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
+    "server": "json-server db.json",
     "dev": "vite",
     "build": "vite build",
     "lint": "eslint .",
     "preview": "vite preview"
   },
   "dependencies": {
+    "json-server": "^1.0.0-beta.15",
     "react": "^19.1.0",
-    "react-dom": "^19.1.0"
+    "react-dom": "^19.1.0",
+    "react-router-dom": "^7.18.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.25.0",
@@ -22,7 +25,6 @@
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.19",
     "globals": "^16.0.0",
-    "sass-embedded": "^1.99.0",
     "vite": "^6.3.5"
   }
 }

src/App.css

@@ -1,15 +0,0 @@
-.container {
-/*    display: flex;
-    flex-direction: column;
-    flex-wrap: nowrap;*/
-    height: 500px;
-    overflow: auto;
-    border: 1px solid black;
-}
-.item {
-    font-size: 16pt;
-    border: 1px dotted gray;
-    /*margin: 5px 10px;
-    padding: 10px;*/
-    border-radius: 5px;
-}

src/App.jsx

@@ -1,51 +1,12 @@
-import { useEffect, useRef, useState } from 'react';
-import styles from './App.module.scss';
-
-const InfiniteList = () => {
-  const [items, setItems] = useState([...Array(20).keys()]); // Initial data
-  const loaderRef = useRef(null);
-
-  const loadMore = () => {
-    setItems((prev) => [...prev, ...Array(10).keys()].map((_, i) => prev.length + i));
-  };
-
-  useEffect(() => {
-    const observer = new IntersectionObserver((entries) => {
-      if (entries[0].isIntersecting) {
-        loadMore(); // Load next batch when the loader is seen
-      }
-    });
-
-    if (loaderRef.current) observer.observe(loaderRef.current);
-    return () => observer.disconnect();
-  }, []);
-
-  return (
-    <ul>
-      {items.map(item => <li key={item} className={ styles.item }>Item {item}</li>)}
-      <div ref={loaderRef}>Loading more...</div>
-    </ul>
-  );
-};
+import { RouterProvider } from "react-router-dom";
+import { router } from './router'
+import Header from './components/Header/index'
 
 function App() {
-    const generatedBigDataSet = () => {
-        return Array.from({ length: 100 }, (_, index) => ({
-            id: index,
-            name: `Элемент № ${index}`,
-            value: Math.floor(Math.random() * 1000)
-        }))
-    }
-    const [data] = useState(generatedBigDataSet);
-    
 	return (
 		<>
-            <div>
-                <h2>Визуализация большого списка</h2>
-                <div className={ styles.container }>
-                <InfiniteList />
-                </div>
-            </div>
+            <Header />
+			<RouterProvider router={router} />
 		</>
 	)
 }

src/components/AdvList/index.jsx

@@ -0,0 +1,49 @@
+import styles from './index.module.css'
+import { useState, useEffect } from 'react'
+
+export default function() {
+    const [data,setData] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    
+    useEffect(()=>{
+        const controller = new AbortController();
+        const fetchData = async () => {
+            try {
+                const response = await fetch('http://localhost:3000/advertisement', {
+                    signal: controller.signal // Link the abort signal to the fetch request
+                });
+        
+                if (!response.ok) {
+                    throw new Error(`HTTP error! Status: ${response.status}`);
+                }
+        
+                const result = await response.json();
+                setData(result);
+            } catch (err) {
+                if (err.name !== 'AbortError') {
+                    setError(err.message);
+                }
+            } finally {
+                setLoading(false);
+            }
+        };
+        fetchData();
+        return () => controller.abort();
+    },[]);
+    
+    return (
+        <>
+            <div className={styles.container}>
+            {data.map(item => <div key={item.id} className={styles.card}>
+                <h3>{item.name}</h3>
+                <div 
+                    className={styles.img}
+                    style={{backgroundImage: `url(${item.url})`}}>
+                </div>
+                <p>{item.description}</p>
+                </div>)}
+            </div>
+        </>
+    )
+}

src/components/AdvList/index.module.css

@@ -0,0 +1,27 @@
+.container {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    column-gap: 10px;
+}
+.card {
+    min-width: 100px;
+    min-height: 200px;
+    /*border: 1px solid black;*/
+    border-radius: 10px;
+    box-shadow: 2px 2px 5px 2px black;    
+}
+.card h3 {
+    text-align: center;
+}
+.card p {
+    margin: 5px 10px;
+}
+.img {
+    width: 200px;
+    height: 200px;
+    border-radius: 5px;
+    background-size: cover;
+    background-position: center;
+    margin: 0 auto;
+}

src/components/Header/index.jsx

@@ -0,0 +1,17 @@
+import styles from './index.module.css'
+
+export default function() {
+    return (
+        <>
+            <header>
+                <nav>
+                    <ul className={styles.container}>
+                        <li><a href="/">Главная</a></li>
+                        <li><a href="/favorite">Избранное</a></li>
+                        <li><a href="/profile">Профиль</a></li>
+                    </ul>
+                </nav>
+            </header>
+        </>
+    )
+}

src/components/Header/index.module.css

@@ -0,0 +1,7 @@
+.container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    list-style: none;
+    column-gap: 1em;
+}

src/pages/Error.jsx

@@ -0,0 +1,7 @@
+export default function() {
+    return (
+        <>
+            <h1>Error</h1>
+        </>
+    )
+}

src/pages/Favorites.jsx

@@ -0,0 +1,7 @@
+export default function() {
+    return (
+        <>
+            <h1>Favorites</h1>
+        </>
+    )
+}

src/pages/Main.jsx

@@ -0,0 +1,12 @@
+import AdvList from '../components/AdvList/index'
+
+export default function() {
+    return (
+        <>
+        <h1>Main</h1>
+        <div>
+            <AdvList />
+        </div>
+        </>
+    )
+}

src/pages/Profile.jsx

@@ -0,0 +1,7 @@
+export default function() {
+    return (
+        <>
+        <h1>Profile</h1>
+        </>
+    )
+}

src/router.jsx

@@ -0,0 +1,28 @@
+import { createBrowserRouter } from 'react-router-dom'
+import MainPage from './pages/Main'
+import ErrorPage from './pages/Error'
+import FavoritePage from './pages/Favorites'
+import ProfilePage from './pages/Profile'
+
+export const router = createBrowserRouter([
+    {
+        path: "/",
+        element: <MainPage />,
+        errorElement: <ErrorPage />,
+        children: [
+            {
+                path: "/",
+                element: <MainPage />,
+                loader: async () => fetch("/api/dashboard-data"),
+            },
+        ]
+    },
+    {
+        path: "/favorite",
+        element: <FavoritePage />
+    },
+    {
+        path: "/profile",
+        element: <ProfilePage />
+    }    
+]);