added feed

2026-05-06 01:51:01 +03:00
parent eeda490e55
commit fc829c8c7a
18 changed files with 947 additions and 1 deletions
--- a/src/pages/FeedPage.jsx
+++ b/src/pages/FeedPage.jsx
@@ -0,0 +1,141 @@
+import {useState, useEffect, useCallback} from "react";
+import "../styles/feed.css";
+import {API_URL} from "../config/constants";
+import Sidebar from "../components/Sidebar";
+import RightSidebar from "../components/RightSidebar";
+import AdCard from "../components/AdCard";
+import PostModal from "../components/PostModal";
+import MenuIcon from "../components/icons/MenuIcon"
+
+// ─── FEED PAGE ────────────────────────────────────────────────────────────────
+export default function FeedPage() {
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+  const [activeNav, setActiveNav] = useState("Главная");
+  const [modalOpen, setModalOpen] = useState(false);
+  const [ads, setAds] = useState([]);
+  const [liked, setLiked] = useState(new Set());
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState("");
+
+  // Загрузка объявлений с бэка
+  useEffect(() => {
+    const load = async () => {
+      setLoading(true);
+      setError("");
+      try {
+        const res = await fetch(`${API_URL}/api/ads`);
+        if (!res.ok) {
+          throw new Error(`Ошибка ${res.status}`);
+        }
+        const data = await res.json();
+        // поддерживаем { items: [] } и просто []
+        setAds(Array.isArray(data) ? data : (data.items ?? []));
+      } catch (err) {
+        setError(err.message || "Не удалось загрузить объявления");
+      } finally {
+        setLoading(false);
+      }
+    };
+    load();
+  }, []);
+
+  const toggleLike = useCallback((id) => {
+    setLiked(prev => {
+      const next = new Set(prev);
+      next.has(id) ? next.delete(id) : next.add(id);
+      return next;
+    });
+  }, []);
+
+  // Новое объявление — добавляем в начало ленты
+  const handleNewAd = useCallback((ad) => {
+    setAds(prev => [ad, ...prev]);
+  }, []);
+
+  const renderContent = () => {
+    if (loading) {
+      return (
+          <div className="f-center">
+            <div className="f-spinner-wrap">
+              <div className="f-spinner"/>
+              Загружаем объявления...
+            </div>
+          </div>
+      );
+    }
+    if (error) {
+      return (
+          <div className="f-center">
+            <div className="f-center-icon">⚠️</div>
+            <div className="f-center-title">Не удалось загрузить ленту</div>
+            <div className="f-center-sub">{error}</div>
+          </div>
+      );
+    }
+    if (!ads.length) {
+      return (
+          <div className="f-center">
+            <div className="f-center-icon">🔍</div>
+            <div className="f-center-title">Объявлений пока нет</div>
+            <div className="f-center-sub">
+              Будьте первым — разместите объявление<br/>о потере или находке
+            </div>
+          </div>
+      );
+    }
+    return ads.map(ad => (
+        <AdCard key={ad.id} ad={ad} liked={liked.has(ad.id)}
+                onLike={toggleLike}/>
+    ));
+  };
+
+  return (
+      <>
+        <div className="f-app">
+
+          <Sidebar
+              open={sidebarOpen}
+              activeNav={activeNav}
+              onClose={() => setSidebarOpen(false)}
+              onNavClick={setActiveNav}
+          />
+
+          <div className="f-main">
+            <div className="f-topbar">
+              <button className="f-menu-btn"
+                      onClick={() => setSidebarOpen(v => !v)}>
+                <MenuIcon/>
+              </button>
+              <div className="f-topbar-center">
+                <button className="f-post-btn"
+                        onClick={() => setModalOpen(true)}>
+                  <span style={{
+                    fontSize: "1.15rem",
+                    fontWeight: 900,
+                    lineHeight: 1
+                  }}>+</span>
+                  Разместить объявление
+                </button>
+              </div>
+              <div className="f-topbar-spacer"/>
+            </div>
+
+            <div className="f-wrap">
+              <div className="f-feed">
+                {renderContent()}
+              </div>
+              <RightSidebar/>
+            </div>
+          </div>
+
+          {modalOpen && (
+              <PostModal
+                  onClose={() => setModalOpen(false)}
+                  onSuccess={handleNewAd}
+              />
+          )}
+
+        </div>
+      </>
+  );
+}