added new start page
This commit is contained in:
SlimusMinus
542
src/pages/MainFeed.jsx
Normal file
542
src/pages/MainFeed.jsx
Normal file
@@ -0,0 +1,542 @@
|
||||
import { useState, useEffect, useCallback, useMemo, useRef } from "react";
|
||||
import { useNavigate, useLocation } from "react-router-dom";
|
||||
import "../styles/index.css";
|
||||
import { API_URL } from "../config/authConstants";
|
||||
import Sidebar from "../components/Sidebar";
|
||||
import RightSidebar from "../components/RightSidebar";
|
||||
import PostOnFeed from "../components/PostOnFeed";
|
||||
import CreateUpdatePost from "../components/CreateUpdatePost";
|
||||
import ImageViewer from "../components/ImageViewer";
|
||||
import MenuIcon from "../components/icons/MenuIcon";
|
||||
import ProfileAvatar from "../components/profile/ProfileAvatar";
|
||||
import { ProfileModal } from "../components/profile";
|
||||
import AuthModal from "../components/AuthModal";
|
||||
import RulesModal from "../components/RulesModal";
|
||||
import { useAuthContext } from "../context/AuthContext";
|
||||
import { useDeletePost } from "../hooks/useDeletePost";
|
||||
import { useFavorites } from "../hooks/useFavorites";
|
||||
import { usePostStatus } from "../hooks/usePostStatus";
|
||||
|
||||
/**
|
||||
* MainFeed — корневой компонент приложения.
|
||||
* Управляет состоянием ленты, модалок и сайдбара;
|
||||
* остальные компоненты получают данные через пропсы.
|
||||
*/
|
||||
export default function MainFeed() {
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const { user, token, isAuthenticated } = useAuthContext();
|
||||
const { deletePost } = useDeletePost();
|
||||
const { toggleFavorite, loadFavorites } = useFavorites();
|
||||
const { markAsFound } = usePostStatus();
|
||||
|
||||
// Открыт ли левый сайдбар (мобильный слайд-аут)
|
||||
const [sidebarOpen, setSidebarOpen] = useState(false);
|
||||
// Активный пункт навигации в сайдбаре
|
||||
const [activeNav, setActiveNav] = useState("Главная");
|
||||
// Фильтр по типу объявления: null (все) | "loss" | "found"
|
||||
const [typeFilter, setTypeFilter] = useState(null);
|
||||
// Поисковый запрос (фильтр по title / description)
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
// Открыта ли модалка создания нового объявления
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
// Объявление, которое сейчас редактируется (null — модалка закрыта)
|
||||
const [editAd, setEditAd] = useState(null);
|
||||
// Открыто ли модальное окно редактирования профиля
|
||||
const [profileModalOpen, setProfileModalOpen] = useState(false);
|
||||
// Открыто ли модальное окно аутентификации (login / register)
|
||||
const [authModalOpen, setAuthModalOpen] = useState(false);
|
||||
// Открыто ли модальное окно правил площадки
|
||||
const [rulesModalOpen, setRulesModalOpen] = useState(false);
|
||||
// Просмотр изображений: null — закрыто, { images, index } — открыто
|
||||
const [viewerData, setViewerData] = useState(null);
|
||||
// Массив объявлений из API (основная лента)
|
||||
const [ads, setAds] = useState([]);
|
||||
// Объявления текущего пользователя (загружаются отдельно по userId)
|
||||
const [myAds, setMyAds] = useState([]);
|
||||
// Set id объявлений, которые пользователь лайкнул (только локально)
|
||||
const [liked, setLiked] = useState(new Set());
|
||||
// Состояния загрузки и ошибки для ленты
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState("");
|
||||
// Пагинация ленты
|
||||
const [page, setPage] = useState(0);
|
||||
const [hasMore, setHasMore] = useState(true);
|
||||
const [loadingMore, setLoadingMore] = useState(false);
|
||||
|
||||
const PAGE_SIZE = 20;
|
||||
|
||||
// Данные профиля — из контекста авторизации (или пустой объект для гостя)
|
||||
const profileData = useMemo(() => {
|
||||
if (!user) return {};
|
||||
|
||||
// Если бэк присылает имя одним полем "name" — разбиваем на firstName/lastName
|
||||
// Если бэк присылает отдельные поля firstName/lastName — используем их напрямую
|
||||
const nameParts = (user.name || "").trim().split(/\s+/);
|
||||
const firstName = user.firstName || nameParts[0] || "";
|
||||
const lastName = user.lastName || nameParts.slice(1).join(" ") || "";
|
||||
|
||||
// Аватар может быть относительным путём (/uploads/avatars/...) — добавляем API_URL
|
||||
const rawAvatar = user.avatar || null;
|
||||
const avatar = rawAvatar && rawAvatar.startsWith("/")
|
||||
? `${API_URL}${rawAvatar}`
|
||||
: rawAvatar;
|
||||
|
||||
return {
|
||||
login: user.login || "",
|
||||
firstName,
|
||||
lastName,
|
||||
email: user.email || "",
|
||||
phone: user.phone || "",
|
||||
avatar,
|
||||
id: user.id,
|
||||
};
|
||||
}, [user]);
|
||||
|
||||
/** Загружает ленту объявлений с бэкенда. */
|
||||
const loadFeed = useCallback(async (pageNum = 0, search = "", append = false) => {
|
||||
if (pageNum === 0) {
|
||||
setLoading(true);
|
||||
} else {
|
||||
setLoadingMore(true);
|
||||
}
|
||||
setError("");
|
||||
try {
|
||||
const params = new URLSearchParams({
|
||||
page: pageNum,
|
||||
size: PAGE_SIZE,
|
||||
});
|
||||
if (search) params.set("search", search);
|
||||
|
||||
const res = await fetch(`${API_URL}/api/v1/posts?${params}`);
|
||||
if (!res.ok) throw new Error(`Ошибка ${res.status}`);
|
||||
const data = await res.json();
|
||||
|
||||
const content = data.content ?? [];
|
||||
const normalizedAds = content.map(ad => ({
|
||||
...ad,
|
||||
type: ad.type ? ad.type.toLowerCase() : "loss"
|
||||
}));
|
||||
|
||||
setAds(prev => append ? [...prev, ...normalizedAds] : normalizedAds);
|
||||
setHasMore(!data.last); // data.last — стандартное поле Spring Page
|
||||
setPage(pageNum);
|
||||
} catch (err) {
|
||||
setError(err.message || "Не удалось загрузить объявления");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
setLoadingMore(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Загружаем лайки пользователя при авторизации
|
||||
useEffect(() => {
|
||||
if (isAuthenticated && token) {
|
||||
loadFavorites(token).then(favoriteIds => {
|
||||
setLiked(new Set(favoriteIds));
|
||||
});
|
||||
} else {
|
||||
setLiked(new Set());
|
||||
}
|
||||
}, [isAuthenticated, token, loadFavorites]);
|
||||
|
||||
// Открываем модалку аутентификации если пришли с лендинга
|
||||
useEffect(() => {
|
||||
if (location.state?.openAuth) {
|
||||
setAuthModalOpen(true);
|
||||
window.history.replaceState({}, document.title);
|
||||
}
|
||||
}, [location.state]);
|
||||
|
||||
// Первичная загрузка при монтировании компонента
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
loadFeed(0, searchQuery, false);
|
||||
}, 400);
|
||||
return () => clearTimeout(timer);
|
||||
}, [searchQuery, loadFeed]);
|
||||
|
||||
|
||||
/** Загружает объявления текущего пользователя по userId с бэкенда. */
|
||||
const loadMyPosts = useCallback(async () => {
|
||||
if (!user?.id) return;
|
||||
setLoading(true);
|
||||
setError("");
|
||||
try {
|
||||
const res = await fetch(`${API_URL}/api/v1/posts/${user.id}`);
|
||||
if (res.status === 404) {
|
||||
// У пользователя пока нет объявлений — это нормальная ситуация
|
||||
setMyAds([]);
|
||||
return;
|
||||
}
|
||||
if (!res.ok) throw new Error(`Ошибка ${res.status}`);
|
||||
const data = await res.json();
|
||||
const posts = Array.isArray(data) ? data : (data.items ?? []);
|
||||
const normalizedPosts = posts.map(ad => ({
|
||||
...ad,
|
||||
type: ad.type ? ad.type.toLowerCase() : "loss"
|
||||
}));
|
||||
setMyAds(normalizedPosts);
|
||||
} catch (err) {
|
||||
setError(err.message || "Не удалось загрузить ваши объявления");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [user?.id]);
|
||||
|
||||
/**
|
||||
* Переключает лайк на объявлении через API.
|
||||
*/
|
||||
const toggleLike = useCallback(async (id) => {
|
||||
if (!isAuthenticated || !token) {
|
||||
setAuthModalOpen(true);
|
||||
return;
|
||||
}
|
||||
|
||||
const success = await toggleFavorite(id, token);
|
||||
if (success) {
|
||||
// Перезагружаем ленту для получения обновлённых данных
|
||||
loadFeed();
|
||||
if (activeNav === "Мои объявления") {
|
||||
loadMyPosts();
|
||||
}
|
||||
}
|
||||
}, [isAuthenticated, token, toggleFavorite, loadFeed, loadMyPosts, activeNav]);
|
||||
|
||||
/** Удаляет объявление и перезагружает ленту */
|
||||
const handleDelete = useCallback(async (postId) => {
|
||||
if (!window.confirm("Вы уверены, что хотите удалить это объявление?")) {
|
||||
return;
|
||||
}
|
||||
const success = await deletePost(postId);
|
||||
if (success) {
|
||||
loadFeed();
|
||||
loadMyPosts();
|
||||
}
|
||||
}, [deletePost, loadFeed, loadMyPosts]);
|
||||
|
||||
/** Отмечает объявление как "Вещь найдена" и перезагружает ленту */
|
||||
const handleMarkFound = useCallback(async (postId) => {
|
||||
if (!window.confirm("Отметить это объявление как \"Вещь найдена\"?")) {
|
||||
return;
|
||||
}
|
||||
|
||||
const success = await markAsFound(postId, token);
|
||||
if (success) {
|
||||
loadFeed();
|
||||
loadMyPosts();
|
||||
}
|
||||
}, [markAsFound, token, loadFeed, loadMyPosts]);
|
||||
|
||||
// После создания или редактирования объявления перезагружаем ленту,
|
||||
// чтобы получить актуальные данные (включая изображения) из БД
|
||||
const handleNewAd = useCallback(() => { loadFeed(); loadMyPosts(); }, [loadFeed, loadMyPosts]);
|
||||
const handleEditSave = useCallback(() => { loadFeed(); loadMyPosts(); }, [loadFeed, loadMyPosts]);
|
||||
|
||||
const handleImageClick = useCallback((images, index, ad) => {
|
||||
if (images?.length) {
|
||||
setViewerData({ images, index, ad });
|
||||
}
|
||||
}, []);
|
||||
|
||||
/**
|
||||
* Обработчик нажатия «Разместить объявление».
|
||||
* Если пользователь не авторизован — открывает модалку входа.
|
||||
*/
|
||||
const handleCreatePost = useCallback(() => {
|
||||
if (!isAuthenticated) {
|
||||
setAuthModalOpen(true);
|
||||
} else {
|
||||
setModalOpen(true);
|
||||
}
|
||||
}, [isAuthenticated]);
|
||||
|
||||
/**
|
||||
* Обработчик редактирования — разрешён только автору объявления.
|
||||
*/
|
||||
const handleEdit = useCallback((ad) => {
|
||||
if (!isAuthenticated) {
|
||||
setAuthModalOpen(true);
|
||||
} else {
|
||||
setEditAd(ad);
|
||||
}
|
||||
}, [isAuthenticated]);
|
||||
|
||||
// Сентинел для бесконечного скролла — подгружает следующую страницу
|
||||
const observerRef = useRef(null);
|
||||
const sentinelRef = useCallback(node => {
|
||||
if (loadingMore) return;
|
||||
if (observerRef.current) observerRef.current.disconnect();
|
||||
|
||||
observerRef.current = new IntersectionObserver(entries => {
|
||||
if (entries[0].isIntersecting && hasMore && !loading && !loadingMore) {
|
||||
loadFeed(page + 1, searchQuery, true);
|
||||
}
|
||||
}, { rootMargin: "200px" });
|
||||
|
||||
if (node) observerRef.current.observe(node);
|
||||
}, [loadingMore, hasMore, loading, page, searchQuery, loadFeed]);
|
||||
|
||||
|
||||
// Когда переключаемся на «Мои объявления» — подгружаем с бэкенда по userId
|
||||
useEffect(() => {
|
||||
if (activeNav === "Мои объявления" && isAuthenticated && user?.id) {
|
||||
loadMyPosts();
|
||||
}
|
||||
}, [activeNav, isAuthenticated, user?.id, loadMyPosts]);
|
||||
|
||||
// Фильтруем объявления в зависимости от выбранной вкладки и фильтра типа
|
||||
const filteredAds = (() => {
|
||||
let result;
|
||||
|
||||
if (activeNav === "Мои объявления") {
|
||||
// Используем объявления, загруженные с бэкенда по userId
|
||||
result = myAds;
|
||||
} else if (activeNav === "Главная") {
|
||||
result = ads;
|
||||
} else {
|
||||
result = ads.filter(ad =>
|
||||
activeNav === "Вещи"
|
||||
? ["Вещь", "Другое"].includes(ad.category)
|
||||
: activeNav === "Питомцы"
|
||||
? ad.category === "Питомец"
|
||||
: false
|
||||
);
|
||||
}
|
||||
|
||||
// Применяем поисковый фильтр по title / description
|
||||
if (typeFilter) {
|
||||
result = result.filter(ad => ad.type === typeFilter);
|
||||
}
|
||||
|
||||
// Применяем фильтр по типу объявления
|
||||
if (typeFilter) {
|
||||
result = result.filter(ad => ad.type === typeFilter);
|
||||
}
|
||||
return result;
|
||||
})();
|
||||
|
||||
/**
|
||||
* Рендерит содержимое ленты в зависимости от текущего состояния:
|
||||
* — спиннер во время загрузки
|
||||
* — сообщение об ошибке
|
||||
* — заглушка при пустой ленте
|
||||
* — список карточек объявлений
|
||||
*/
|
||||
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 (!filteredAds.length) {
|
||||
const emptyMsg = activeNav === "Мои объявления"
|
||||
? { title: "У вас нет объявлений", sub: "Создайте первое — нажмите кнопку выше" }
|
||||
: { title: "Объявлений пока нет", sub: "Будьте первым — разместите объявление<br />о потере или находке" };
|
||||
|
||||
return (
|
||||
<div className="f-center">
|
||||
<div className="f-center-icon">🔍</div>
|
||||
<div className="f-center-title">{emptyMsg.title}</div>
|
||||
<div className="f-center-sub"
|
||||
dangerouslySetInnerHTML={{ __html: emptyMsg.sub }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return filteredAds.map(ad => (
|
||||
<PostOnFeed
|
||||
key={ad.id}
|
||||
ad={ad}
|
||||
liked={liked.has(ad.id)}
|
||||
onLike={toggleLike}
|
||||
onEdit={activeNav === "Мои объявления" ? handleEdit : undefined}
|
||||
onDelete={activeNav === "Мои объявления" ? handleDelete : undefined}
|
||||
onMarkFound={activeNav === "Мои объявления" ? handleMarkFound : undefined}
|
||||
isOwner={activeNav === "Мои объявления"}
|
||||
onImageClick={handleImageClick}
|
||||
onAuthRequired={() => setAuthModalOpen(true)}
|
||||
/>
|
||||
));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="f-app">
|
||||
{/* Левый сайдбар с навигацией */}
|
||||
<Sidebar
|
||||
open={sidebarOpen}
|
||||
activeNav={activeNav}
|
||||
onClose={() => setSidebarOpen(false)}
|
||||
onNavClick={setActiveNav}
|
||||
isAuthenticated={isAuthenticated}
|
||||
onLoginClick={() => setAuthModalOpen(true)}
|
||||
onRulesClick={() => setRulesModalOpen(true)}
|
||||
onReviewsClick={() => navigate("/reviews")}
|
||||
/>
|
||||
|
||||
<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={handleCreatePost}>
|
||||
<span style={{
|
||||
fontSize: "1.15rem",
|
||||
fontWeight: 900,
|
||||
lineHeight: 1
|
||||
}}>+</span>
|
||||
Разместить объявление
|
||||
</button>
|
||||
</div>
|
||||
{/* Иконка профиля в правом углу */}
|
||||
{isAuthenticated ? (
|
||||
<div className="f-topbar-profile"
|
||||
onClick={() => setProfileModalOpen(true)}>
|
||||
<ProfileAvatar avatar={profileData.avatar}
|
||||
name={`${profileData.firstName
|
||||
|| ""} ${profileData.lastName || ""}`}/>
|
||||
</div>
|
||||
) : (
|
||||
<button className="f-login-btn"
|
||||
onClick={() => setAuthModalOpen(true)}>
|
||||
Войти
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Строка поиска */}
|
||||
<div className="f-search-bar">
|
||||
<svg className="f-search-icon" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" strokeWidth="2" strokeLinecap="round"
|
||||
strokeLinejoin="round">
|
||||
<circle cx="11" cy="11" r="8"/>
|
||||
<path d="m21 21-4.35-4.35"/>
|
||||
</svg>
|
||||
<input
|
||||
className="f-search-input"
|
||||
type="text"
|
||||
placeholder="Поиск по названию или описанию..."
|
||||
value={searchQuery}
|
||||
onChange={e => setSearchQuery(e.target.value)}
|
||||
/>
|
||||
{searchQuery && (
|
||||
<button className="f-search-clear"
|
||||
onClick={() => setSearchQuery("")}>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||
strokeWidth="2" strokeLinecap="round"
|
||||
strokeLinejoin="round" width="18" height="18">
|
||||
<path d="M18 6 6 18M6 6l12 12"/>
|
||||
</svg>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Фильтр по типу объявления */}
|
||||
<div className="f-filter-bar">
|
||||
<button
|
||||
className={`f-filter-btn${typeFilter === "loss" ? " active"
|
||||
: ""}`}
|
||||
onClick={() => setTypeFilter("loss")}
|
||||
>
|
||||
🔴 Потери
|
||||
</button>
|
||||
<button
|
||||
className={`f-filter-btn${typeFilter === null ? " active"
|
||||
: ""}`}
|
||||
onClick={() => setTypeFilter(null)}
|
||||
>
|
||||
Все объявления
|
||||
</button>
|
||||
<button
|
||||
className={`f-filter-btn${typeFilter === "found" ? " active"
|
||||
: ""}`}
|
||||
onClick={() => setTypeFilter("found")}
|
||||
>
|
||||
🟢 Находки
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Основная область: лента + правый сайдбар */}
|
||||
<div className="f-wrap">
|
||||
<div className="f-feed">
|
||||
{renderContent()}
|
||||
{activeNav === "Главная" && !loading && (
|
||||
<div ref={sentinelRef} style={{height: "1px"}}/>
|
||||
)}
|
||||
{loadingMore && (
|
||||
<div className="f-center" style={{padding: "1rem"}}>
|
||||
<div className="f-spinner"/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{/* Правый сайдбар: промо-блоки / фильтры */}
|
||||
<RightSidebar/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Модалка создания нового объявления (только для авторизованных) */}
|
||||
{modalOpen && isAuthenticated && (
|
||||
<CreateUpdatePost
|
||||
onClose={() => setModalOpen(false)}
|
||||
onSuccess={handleNewAd}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Модалка редактирования — открывается когда editAd !== null */}
|
||||
{editAd && isAuthenticated && (
|
||||
<CreateUpdatePost
|
||||
initialData={editAd}
|
||||
onClose={() => setEditAd(null)}
|
||||
onSuccess={handleEditSave}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Модальное окно редактирования профиля */}
|
||||
{profileModalOpen && isAuthenticated && (
|
||||
<ProfileModal
|
||||
onClose={() => setProfileModalOpen(false)}
|
||||
initialData={profileData}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Модальное окно входа / регистрации */}
|
||||
{authModalOpen && (
|
||||
<AuthModal
|
||||
onClose={() => setAuthModalOpen(false)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Модальное окно правил площадки */}
|
||||
{rulesModalOpen && (
|
||||
<RulesModal onClose={() => setRulesModalOpen(false)} />
|
||||
)}
|
||||
|
||||
{/* Просмотр изображений */}
|
||||
{viewerData && (
|
||||
<ImageViewer
|
||||
images={viewerData.images}
|
||||
initialIndex={viewerData.index}
|
||||
onClose={() => setViewerData(null)}
|
||||
postData={viewerData.ad}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user