Merge pull request #75 from SlimusMinus/fix-all_code
fix bug and errors
This commit is contained in:
3
.env
3
.env
@@ -1,3 +0,0 @@
|
|||||||
REACT_APP_YANDEX_GEOCODER_KEY=c2d3c717-a109-4494-8863-7edbc32044e3
|
|
||||||
REACT_APP_YANDEX_MAPS_KEY=d4696cc8-6a1f-4356-9219-108ac474093b
|
|
||||||
REACT_APP_API_URL=http://192.168.1.76:8080
|
|
||||||
4
.gitignore
vendored
4
.gitignore
vendored
@@ -13,6 +13,10 @@
|
|||||||
|
|
||||||
# misc
|
# misc
|
||||||
.DS_Store
|
.DS_Store
|
||||||
|
|
||||||
|
# env — реальные ключи и адреса бэкенда не коммитим.
|
||||||
|
# Образец переменных держим в .env.example
|
||||||
|
.env
|
||||||
.env.local
|
.env.local
|
||||||
.env.development.local
|
.env.development.local
|
||||||
.env.test.local
|
.env.test.local
|
||||||
|
|||||||
620
README.md
620
README.md
@@ -1,70 +1,614 @@
|
|||||||
# Getting Started with Create React App
|
# Находка
|
||||||
|
|
||||||
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
|
Платформа для поиска потерянных вещей и питомцев. SPA на React 18 с JWT-аутентификацией
|
||||||
|
и автоматическим обновлением токена, чатом на WebSocket (STOMP/SockJS), картами Яндекса,
|
||||||
|
загрузкой изображений, админ-панелью рекламы и модерации объявлений, i18n (ru/en) и
|
||||||
|
светлой/тёмной темой.
|
||||||
|
|
||||||
## Available Scripts
|
---
|
||||||
|
|
||||||
In the project directory, you can run:
|
## Содержание
|
||||||
|
|
||||||
### `npm start`
|
1. [Быстрый старт](#1-быстрый-старт)
|
||||||
|
2. [Переменные окружения](#2-переменные-окружения)
|
||||||
|
3. [Стек и зависимости](#3-стек-и-зависимости)
|
||||||
|
4. [Скрипты](#4-скрипты)
|
||||||
|
5. [Структура проекта](#5-структура-проекта)
|
||||||
|
6. [Маршруты](#6-маршруты)
|
||||||
|
7. [Ключевые компоненты](#7-ключевые-компоненты)
|
||||||
|
8. [Контексты](#8-контексты)
|
||||||
|
9. [Хуки](#9-хуки)
|
||||||
|
10. [API-эндпоинты](#10-api-эндпоинты)
|
||||||
|
11. [WebSocket](#11-websocket)
|
||||||
|
12. [Админские эндпоинты](#12-админские-эндпоинты)
|
||||||
|
13. [Стили и темы](#13-стили-и-темы)
|
||||||
|
14. [Основные сценарии](#14-основные-сценарии)
|
||||||
|
15. [Известные проблемы и предупреждения](#15-известные-проблемы-и-предупреждения)
|
||||||
|
|
||||||
Runs the app in the development mode.\
|
---
|
||||||
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
|
|
||||||
|
|
||||||
The page will reload when you make changes.\
|
## 1. Быстрый старт
|
||||||
You may also see any lint errors in the console.
|
|
||||||
|
|
||||||
### `npm test`
|
Требуется Node.js 18+ (проверено на Node 24).
|
||||||
|
|
||||||
Launches the test runner in the interactive watch mode.\
|
```bash
|
||||||
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
|
npm install # зависимости (см. раздел о .npmrc)
|
||||||
|
npm start # dev-сервер на http://localhost:3000
|
||||||
|
npm run build # production-сборка в build/
|
||||||
|
```
|
||||||
|
|
||||||
### `npm run build`
|
Фронтенд ожидает работающий бэкенд (по умолчанию `http://localhost:8080`).
|
||||||
|
Если нужно обращаться к другому адресу — скопируйте `.env.example` в `.env`
|
||||||
|
и задайте `REACT_APP_API_URL`.
|
||||||
|
|
||||||
Builds the app for production to the `build` folder.\
|
---
|
||||||
It correctly bundles React in production mode and optimizes the build for the best performance.
|
|
||||||
|
|
||||||
The build is minified and the filenames include the hashes.\
|
## 2. Переменные окружения
|
||||||
Your app is ready to be deployed!
|
|
||||||
|
|
||||||
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
|
Файл `.env` **не** коммитится (см. `.gitignore`), шаблон — `.env.example`.
|
||||||
|
|
||||||
### `npm run eject`
|
| Переменная | Обязательна | По умолчанию | Описание |
|
||||||
|
|------------|-------------|--------------|----------|
|
||||||
|
| `REACT_APP_API_URL` | да | `http://localhost:8080` | Базовый URL бэкенда |
|
||||||
|
| `REACT_APP_YANDEX_GEOCODER_KEY` | для карты | — | Яндекс.Геокодер: обратное геокодирование координат → адрес |
|
||||||
|
| `REACT_APP_YANDEX_MAPS_KEY` | для карты | — | Публичный ключ Яндекс.Карт, подставляется в `public/index.html` |
|
||||||
|
| `REACT_APP_SUPPORT_EMAIL` | нет | есть значение по умолчанию | Почта поддержки в модалке «Поддержка» |
|
||||||
|
|
||||||
**Note: this is a one-way operation. Once you `eject`, you can't go back!**
|
> **Безопасность.** Ключи Яндекса — публичные, но попадание реального `.env` в git
|
||||||
|
> означает утечку в историю коммитов. Если файл уже коммитился, перевыпустите ключи:
|
||||||
|
> добавление `.env` в `.gitignore` не удаляет его из истории.
|
||||||
|
|
||||||
If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
|
---
|
||||||
|
|
||||||
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
|
## 3. Стек и зависимости
|
||||||
|
|
||||||
You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
|
| Пакет | Назначение |
|
||||||
|
|-------|-----------|
|
||||||
|
| `react` / `react-dom` 18 | UI |
|
||||||
|
| `react-router-dom` 7 | Роутинг (`BrowserRouter`) |
|
||||||
|
| `@stomp/stompjs` + `sockjs-client` | WebSocket (STOMP) для чата и непрочитанных |
|
||||||
|
| `framer-motion` | Анимации модалок и переходов |
|
||||||
|
| `react-hook-form` + `@hookform/resolvers` + `zod` 4 | Формы и их валидация |
|
||||||
|
| `i18next` + `react-i18next` | Локализация ru/en |
|
||||||
|
| `@emoji-mart/react` + `@emoji-mart/data` + `emoji-mart` | Эмодзи-пикер в чате |
|
||||||
|
| `react-scripts` 5.0.1 | Сборка/дев-сервер (CRA) |
|
||||||
|
|
||||||
## Learn More
|
Карты Яндекса подключаются напрямую через глобальный `window.ymaps`
|
||||||
|
(см. `src/utils/ymapsApi.js`), без обёртки — она ждёт готовности API
|
||||||
|
с таймаутом и отдаёт ошибку вместо вечного спиннера.
|
||||||
|
|
||||||
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
|
Dev-зависимости: `typescript` 5.9, `@types/react` 18, `@types/react-dom`,
|
||||||
|
`@types/node`, `@testing-library/*`.
|
||||||
|
|
||||||
To learn React, check out the [React documentation](https://reactjs.org/).
|
### `.npmrc` и конфликт peer-зависимостей
|
||||||
|
|
||||||
### Code Splitting
|
В репозитории лежит `.npmrc` с `legacy-peer-deps=true`. Причина: `react-scripts@5.0.1`
|
||||||
|
объявляет `typescript` **опциональным** peer-диапазоном `^3.2.1 || ^4`, а проекту нужен
|
||||||
|
TypeScript 5 (на TS 4 не собираются `@types/react` 18.3 и `zod` 4). Конфликт формальный:
|
||||||
|
CRA типы не проверяет — их вырезает babel, а проверка запускается отдельно через
|
||||||
|
`npm run typecheck`.
|
||||||
|
|
||||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
|
Побочный эффект `legacy-peer-deps`: npm не ставит peer-зависимости автоматически,
|
||||||
|
поэтому `emoji-mart` объявлен в `dependencies` явно (его требует `@emoji-mart/react`).
|
||||||
|
|
||||||
### Analyzing the Bundle Size
|
---
|
||||||
|
|
||||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
|
## 4. Скрипты
|
||||||
|
|
||||||
### Making a Progressive Web App
|
| Скрипт | Что делает |
|
||||||
|
|--------|-----------|
|
||||||
|
| `npm start` | Dev-сервер с hot reload |
|
||||||
|
| `npm run build` | Production-сборка в `build/` |
|
||||||
|
| `npm test` | Jest в watch-режиме |
|
||||||
|
| `npm run test:ci` | Тесты один раз (`--watchAll=false`) — для CI |
|
||||||
|
| `npm run lint` | ESLint по `src`, `--max-warnings=0` |
|
||||||
|
| `npm run typecheck` | `tsc --noEmit` по `tsconfig.json` |
|
||||||
|
|
||||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
|
Перед коммитом стоит прогнать все четыре проверки: `lint`, `typecheck`, `test:ci`, `build`.
|
||||||
|
|
||||||
### Advanced Configuration
|
---
|
||||||
|
|
||||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
|
## 5. Структура проекта
|
||||||
|
|
||||||
### Deployment
|
```
|
||||||
|
src/
|
||||||
|
├── index.js # Точка входа
|
||||||
|
├── App.js # Провайдеры + маршруты
|
||||||
|
├── i18n.js # Инициализация i18next, persist языка
|
||||||
|
├── legacy.d.ts # Типы ассетов (*.css, *.png, ...)
|
||||||
|
│
|
||||||
|
├── api/
|
||||||
|
│ ├── apiClient.jsx # apiFetch: Authorization + refresh токена по 401
|
||||||
|
│ ├── adminAdsApi.js # Кампании, реклама, фуллскрин-реклама
|
||||||
|
│ ├── adminContentApi.js # Админские объявления: список, статус, удаление
|
||||||
|
│ └── adsApi.js # Фуллскрин-реклама, пресigned-выгрузка видео
|
||||||
|
│
|
||||||
|
├── config/
|
||||||
|
│ ├── authConstants.js # API_URL
|
||||||
|
│ ├── feedConstants.js # Пункты меню, категории, пустая форма
|
||||||
|
│ └── landingConstants.js # Контент лендинга
|
||||||
|
│
|
||||||
|
├── context/
|
||||||
|
│ ├── AuthContext.jsx # user, token, isAuthenticated, isAdmin, login/logout
|
||||||
|
│ ├── ThemeContext.jsx # Светлая/тёмная тема
|
||||||
|
│ └── UnreadContext.jsx # Счётчики непрочитанных чатов
|
||||||
|
│
|
||||||
|
├── stores/
|
||||||
|
│ ├── activeChatStore.js # Активный чат
|
||||||
|
│ └── chatPostStore.js # Кэш «объявление ↔ чат»
|
||||||
|
│
|
||||||
|
├── hooks/ # см. раздел 9
|
||||||
|
│
|
||||||
|
├── utils/
|
||||||
|
│ ├── adSession.js # ID рекламной сессии (устойчив к запрету localStorage)
|
||||||
|
│ ├── campaignStatus.js # Статусы кампаний
|
||||||
|
│ ├── chatDisplay.jsx # Данные для списка чатов
|
||||||
|
│ ├── compressImage.js # Сжатие JPEG до 1200px
|
||||||
|
│ ├── formatPhone.js # Маска +7 (___) ___-__-__
|
||||||
|
│ ├── validatePostForm.js # Валидация формы объявления
|
||||||
|
│ ├── withAds.js # Рекламная обёртка
|
||||||
|
│ └── ymapsApi.js # Ожидание window.ymaps с таймаутом
|
||||||
|
│
|
||||||
|
├── pages/
|
||||||
|
│ ├── NakhodkaLanding.jsx # Лендинг «/»
|
||||||
|
│ ├── MainFeed.tsx # Лента объявлений — главная страница
|
||||||
|
│ ├── MapModal.jsx, MapView.jsx # Карта и полноэкранный режим
|
||||||
|
│ ├── ChatListPage.jsx, ChatPage.jsx
|
||||||
|
│ ├── ReviewsPage.jsx
|
||||||
|
│ ├── CreateUpdatePost.jsx # Создание/редактирование (в т.ч. adminMode)
|
||||||
|
│ ├── PostOnFeed.jsx # Карточка объявления
|
||||||
|
│ ├── RulesModal.jsx, SupportModal.jsx
|
||||||
|
│ └── AdminAdsPage.jsx # Админ-панель
|
||||||
|
│
|
||||||
|
├── components/
|
||||||
|
│ ├── feed/ FeedTopBar.tsx, FeedContent, FeedSearchBar, PullToRefresh, RewardPopup
|
||||||
|
│ ├── nav/ BottomNav.jsx, Sidebar.jsx
|
||||||
|
│ ├── layout/ AppTopBar.jsx
|
||||||
|
│ ├── chat/ ChatHeader, ChatInputBar, ChatListItem, MessageBubble
|
||||||
|
│ ├── reviews/ RatingSummary, ReviewCard, ReviewForm, StarRating
|
||||||
|
│ ├── profile/ Profile, ProfileAvatar, ProfileFormFields, ProfileModal, profileValidation
|
||||||
|
│ ├── admin/ PostsTab, AdvertisingCreate/EditModal, CampaignCreate/EditModal, ...
|
||||||
|
│ ├── landing/ Hero, Navbar, StepsSection, RadarBeacon, FinalCta, Footer, Icon
|
||||||
|
│ ├── icons/ NavIcons + Calendar/Close/Globe/Menu/Moon/Phone/Pin/Sun/Trash
|
||||||
|
│ └── … AuthModal, Toast, MapView, PostDetailModal, ImageViewer, AdCard, AdSlot, ...
|
||||||
|
│
|
||||||
|
├── styles/
|
||||||
|
│ ├── index.css # Точка входа CSS
|
||||||
|
│ ├── base.css # Переменные, сброс, keyframes
|
||||||
|
│ ├── layout.css, sidebar.css, card.css, modal.css, ui.css
|
||||||
|
│ └── chat.css, reviews.css, rules.css, admin.css, NakhodkaLanding.css
|
||||||
|
│
|
||||||
|
└── locales/
|
||||||
|
├── ru.json
|
||||||
|
└── en.json
|
||||||
|
```
|
||||||
|
|
||||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
|
---
|
||||||
|
|
||||||
### `npm run build` fails to minify
|
## 6. Маршруты
|
||||||
|
|
||||||
This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
|
| Путь | Компонент | Доступ |
|
||||||
|
|------|-----------|--------|
|
||||||
|
| `/` | `NakhodkaLanding` | публичный лендинг |
|
||||||
|
| `/feed` | `MainFeed` | лента (главная) |
|
||||||
|
| `/reviews` | `ReviewsPage` | отзывы о площадке |
|
||||||
|
| `/chats` | `ChatListPage` | список чатов |
|
||||||
|
| `/chats/:chatId` | `ChatPage` | чат |
|
||||||
|
| `/admin/ads` | `AdminAdsPage` | только `isAdmin` (иначе редирект на `/feed`) |
|
||||||
|
| `*` | `NakhodkaLanding` | 404-fallback |
|
||||||
|
|
||||||
|
Провайдеры: `ThemeProvider` → `AuthProvider` → `BrowserRouter`.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 7. Ключевые компоненты
|
||||||
|
|
||||||
|
### `MainFeed.tsx`
|
||||||
|
|
||||||
|
Главная страница. Собирает топбар, поиск, фильтры, ленту, сайдбары, карту,
|
||||||
|
модалки (объявление, профиль, вход, правила, поддержка, просмотр фото).
|
||||||
|
Делегирует загрузку и мутации хукам `useFeedPosts`, `useCityFeed`, `useSearchPosts`,
|
||||||
|
`useMyPosts`, `useFeedActions`, `useModals`. Ошибки удаления/отметки «найдено»
|
||||||
|
показываются через `Toast`.
|
||||||
|
|
||||||
|
### `PostOnFeed.jsx`
|
||||||
|
|
||||||
|
Карточка объявления: фото, бейджи категории/типа/статуса, заголовок, описание,
|
||||||
|
адрес, дата, телефон, кнопка карты и «Написать». Для владельца — редактирование,
|
||||||
|
удаление, отметка «найдено».
|
||||||
|
|
||||||
|
### `CreateUpdatePost.jsx`
|
||||||
|
|
||||||
|
Модалка создания/редактирования. Переключатель Потеря/Находка, заголовок,
|
||||||
|
описание, фото (сжатие на клиенте), категория, карта Яндекса с меткой и обратным
|
||||||
|
геокодированием, адрес, телефон с маской, чекбокс правил. Валидация —
|
||||||
|
`validatePostForm`. С пропом `adminMode` шлёт `PUT /api/v1/admin/posts/{id}`.
|
||||||
|
|
||||||
|
### `FeedContent.jsx` / `FeedTopBar.tsx` / `PullToRefresh.jsx`
|
||||||
|
|
||||||
|
Лента, топбар со спрятанной панелью на скролле, pull-to-refresh с корректным
|
||||||
|
cleanup класса активности.
|
||||||
|
|
||||||
|
### `MapView.jsx`
|
||||||
|
|
||||||
|
Полноэкранная карта. Ждёт готовности API Яндекса, показывает плашку ошибки,
|
||||||
|
если он не загрузился. Первая загрузка маркеров идёт по фактическим границам
|
||||||
|
карты, а не по событию `load` (которого у `ymaps.Map` в 2.1 нет).
|
||||||
|
|
||||||
|
### `AdminAdsPage.jsx` + `components/admin/PostsTab.jsx`
|
||||||
|
|
||||||
|
Админ-панель: вкладки «Рекламные кампании» и «Все объявления».
|
||||||
|
Кампании, реклама, загрузка видео (presigned → S3 → confirm), фуллскрин-реклама.
|
||||||
|
`PostsTab` — список всех объявлений с поиском, фильтрами, пагинацией, правкой,
|
||||||
|
закрытием/возвратом в ленту и удалением.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 8. Контексты
|
||||||
|
|
||||||
|
### `AuthContext`
|
||||||
|
|
||||||
|
```js
|
||||||
|
{
|
||||||
|
user, // object | null
|
||||||
|
token, // string | null — JWT
|
||||||
|
isAuthenticated, // !!token
|
||||||
|
isAdmin, // user.role === "ADMIN" — только скрытие UI, не защита
|
||||||
|
login(user, token), // пишет в localStorage + state
|
||||||
|
logout(), // чистит localStorage + state
|
||||||
|
updateUser(userData), // обновляет пользователя
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Хранится в `localStorage`: `user` (JSON), `token`, `refreshToken`.
|
||||||
|
Хук: `useAuthContext()`.
|
||||||
|
|
||||||
|
### `ThemeContext`
|
||||||
|
|
||||||
|
Светлая/тёмная тема; выбор сохраняется.
|
||||||
|
|
||||||
|
### `UnreadContext`
|
||||||
|
|
||||||
|
Счётчики непрочитанных по чатам; сбрасываются при смене пользователя,
|
||||||
|
данные приходят из WS-подписки `/topic/user/{userId}/unread`.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 9. Хуки
|
||||||
|
|
||||||
|
### Авторизация и API
|
||||||
|
|
||||||
|
| Хук | Назначение |
|
||||||
|
|-----|-----------|
|
||||||
|
| `apiClient.jsx` → `apiFetch` | `fetch` + `Authorization` + автоматический refresh по 401 (один refresh на параллельные запросы) |
|
||||||
|
| `useProfile.js` | Загрузка профиля |
|
||||||
|
| `useUpdateProfile.js` | Обновление профиля с аватаром |
|
||||||
|
|
||||||
|
### Объявления
|
||||||
|
|
||||||
|
| Хук | Назначение |
|
||||||
|
|-----|-----------|
|
||||||
|
| `useFeedPosts.jsx` | Лента с пагинацией, request-id guard, дедупликация |
|
||||||
|
| `useCityFeed.jsx` | Лента по городу |
|
||||||
|
| `useSearchPosts.js` | Поиск с дебаунсом |
|
||||||
|
| `useMyPosts.jsx` | Мои объявления |
|
||||||
|
| `useFeedActions.jsx` | Удаление и отметка «найдено» + `error`/`clearError` |
|
||||||
|
| `usePostMutation.js` | Создание/обновление (обычное и `adminMode`) |
|
||||||
|
| `useDeletePost.js`, `usePostStatus.js` | Точечные мутации |
|
||||||
|
| `useImageUpload.js` | Выбор, сжатие, превью изображения |
|
||||||
|
| `useModals.jsx` | Управление модалками |
|
||||||
|
| `useInfiniteScroll.jsx` | Бесконечная прокрутка с cleanup `IntersectionObserver` |
|
||||||
|
| `useCities.js`, `useClickOutside.jsx`, `useIsDesktop.js` | Вспомогательные |
|
||||||
|
|
||||||
|
### Реклама
|
||||||
|
|
||||||
|
| Хук | Назначение |
|
||||||
|
|-----|-----------|
|
||||||
|
| `useFullscreenAdTrigger.js` | Показ фуллскрин-рекламы |
|
||||||
|
| `useAdClickTracking.js`, `useAdImpressionTracking.js` | Клики/показы |
|
||||||
|
| `useTranscodingStatusPolling.js` | Статус транскодинга видео: сброс между роликами, fallback `PROCESSING`, лимит попыток |
|
||||||
|
|
||||||
|
### Чат
|
||||||
|
|
||||||
|
| Хук | Назначение |
|
||||||
|
|-----|-----------|
|
||||||
|
| `useStompClient.js` | Общий STOMP-клиент: reconnect, обработка close/ошибок, стабильные колбэки |
|
||||||
|
| `useChatSocket.js` | Подписка на чат, отправка сообщений |
|
||||||
|
| `useUnreadSocket.js` | Непрочитанные |
|
||||||
|
| `useChats.js` | Список чатов, создание, сообщения (request-id guard) |
|
||||||
|
| `useContactSeller.js` | Создание/получение чата с продавцом |
|
||||||
|
| `useDeleteChat.js` | Удаление чата |
|
||||||
|
|
||||||
|
### Карта и локация
|
||||||
|
|
||||||
|
| Хук | Назначение |
|
||||||
|
|-----|-----------|
|
||||||
|
| `useGeolocation.js` | Геолокация пользователя со статусами |
|
||||||
|
| `useYandexMap.js` | Инициализация карты, метка (drag), обратное геокодирование, ошибка загрузки API |
|
||||||
|
|
||||||
|
### Прочее
|
||||||
|
|
||||||
|
| Хук | Назначение |
|
||||||
|
|-----|-----------|
|
||||||
|
| `useReviews.jsx` | Отзывы: загрузка, отправка, средний рейтинг и распределение |
|
||||||
|
| `useLanguageToggle.js` | Переключение ru/en |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 10. API-эндпоинты
|
||||||
|
|
||||||
|
Базовый URL — `REACT_APP_API_URL`. Защищённые эндпоинты вызываются через
|
||||||
|
`apiFetch`, который сам добавляет `Authorization: Bearer <JWT>` и обновляет
|
||||||
|
токен при 401.
|
||||||
|
|
||||||
|
### Аутентификация
|
||||||
|
|
||||||
|
| Метод | Endpoint | Тело | Ответ |
|
||||||
|
|-------|----------|------|-------|
|
||||||
|
| `POST` | `/api/v1/auth/login` | `{ login, password }` | `{ token, refreshToken, user }` |
|
||||||
|
| `POST` | `/api/v1/auth/register` | `{ name, login, password }` | `{ token, refreshToken, user }` |
|
||||||
|
| `POST` | `/api/v1/auth/refresh` | `{ refreshToken }` | `{ token, refreshToken }` |
|
||||||
|
|
||||||
|
### Объявления
|
||||||
|
|
||||||
|
| Метод | Endpoint | Назначение |
|
||||||
|
|-------|----------|-----------|
|
||||||
|
| `GET` | `/api/v1/posts?page=&size=&…` | Лента с пагинацией (`content` / `items` / массив) |
|
||||||
|
| `GET` | `/api/v1/posts/search?…` | Поиск |
|
||||||
|
| `GET` | `/api/v1/posts/cities` | Список городов |
|
||||||
|
| `GET` | `/api/v1/posts/map?minLat&maxLat&minLng&maxLng&…` | Маркеры в границах карты |
|
||||||
|
| `GET` | `/api/v1/posts/detail/:postId` | Карточка объявления |
|
||||||
|
| `GET` | `/api/v1/posts/:userId` | Объявления пользователя |
|
||||||
|
| `POST` | `/api/v1/posts` | Создать (`FormData`) |
|
||||||
|
| `PUT` | `/api/v1/posts/:id` | Обновить (`FormData`) |
|
||||||
|
| `DELETE` | `/api/v1/posts/:id` | Удалить |
|
||||||
|
| `PATCH` | `/api/v1/posts/:postId/status` | Статус `ACTIVE` / `CLOSED` |
|
||||||
|
|
||||||
|
### Профиль
|
||||||
|
|
||||||
|
| Метод | Endpoint | Назначение |
|
||||||
|
|-------|----------|-----------|
|
||||||
|
| `PUT` | `/api/v1/users/:userId` | Обновить профиль (`FormData`) |
|
||||||
|
|
||||||
|
### Чаты
|
||||||
|
|
||||||
|
| Метод | Endpoint | Назначение |
|
||||||
|
|-------|----------|-----------|
|
||||||
|
| `GET` | `/api/v1/chats` | Список чатов |
|
||||||
|
| `POST` | `/api/v1/chats/with/:otherUserId` | Создать/получить чат (`{ postId }`) |
|
||||||
|
| `GET` | `/api/v1/chats/:chatId/messages` | Сообщения |
|
||||||
|
| `POST` | `/api/v1/chats/:chatId/messages` | Отправить |
|
||||||
|
| `POST` | `/api/v1/chats/:chatId/read` | Отметить прочитанным |
|
||||||
|
| `DELETE` | `/api/v1/chats/:chatId` | Удалить чат |
|
||||||
|
|
||||||
|
### Отзывы
|
||||||
|
|
||||||
|
| Метод | Endpoint | Тело |
|
||||||
|
|-------|----------|------|
|
||||||
|
| `GET` | `/api/v1/reviews` | — |
|
||||||
|
| `POST` | `/api/v1/reviews` | `{ rating, text }` |
|
||||||
|
|
||||||
|
### Файлы и реклама
|
||||||
|
|
||||||
|
| Метод | Endpoint | Назначение |
|
||||||
|
|-------|----------|-----------|
|
||||||
|
| `GET` | `/api/v1/files/:filename` | Изображение по имени |
|
||||||
|
| `GET` | `/api/fullscreen-ad` | Текущая фуллскрин-реклама |
|
||||||
|
| `GET` | `/api/ads/next` | Следующая реклама |
|
||||||
|
| `POST` | `/api/ads/click`, `/api/ads/impression` | Трекинг |
|
||||||
|
|
||||||
|
Значения категорий в запросах — **стабильные русские строки** (`Вещь`, `Питомец`,
|
||||||
|
`Другое`): они хранятся в БД, поэтому не переводятся вместе с интерфейсом.
|
||||||
|
Локализованы только подписи (`feedConstants.js` → `CATEGORIES`).
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 11. WebSocket
|
||||||
|
|
||||||
|
STOMP поверх SockJS: `${REACT_APP_API_URL}/ws` (токен передаётся при подключении).
|
||||||
|
|
||||||
|
| Назначение | Путь |
|
||||||
|
|-----------|------|
|
||||||
|
| Подписка на чат | `/topic/chat/{chatId}` |
|
||||||
|
| Подписка на непрочитанные | `/topic/user/{userId}/unread` |
|
||||||
|
| Отправка сообщения | `/app/chat.send` |
|
||||||
|
|
||||||
|
Общий клиент — `useStompClient`: единый STOMP-клиент с reconnect, обработкой
|
||||||
|
закрытия соединения и ошибок активации; колбэки хранятся в ref, поэтому
|
||||||
|
переподписка не пересоздаёт подключение.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 12. Админские эндпоинты
|
||||||
|
|
||||||
|
Админ-панель живёт на `/admin/ads` (только для `isAdmin`, только десктоп) и
|
||||||
|
переключается вкладками:
|
||||||
|
|
||||||
|
- `/admin/ads` — рекламные кампании;
|
||||||
|
- `/admin/ads?tab=posts` — «Все объявления».
|
||||||
|
|
||||||
|
### Общие требования
|
||||||
|
|
||||||
|
- Префикс `/api/v1/admin`, все запросы с `Authorization: Bearer <JWT>`.
|
||||||
|
- **Роль `ADMIN` обязана проверяться на сервере по каждому эндпоинту.**
|
||||||
|
Клиентский `isAdmin` — только скрытие UI; подделка `localStorage` не должна
|
||||||
|
давать доступ к чужим объявлениям и переписке.
|
||||||
|
- Тело ошибок — JSON `{"message": "..."}`; фронт показывает этот текст.
|
||||||
|
- Пагинация как у `GET /api/v1/posts`: `{ "content": [...], "last": bool, "totalElements": N }`.
|
||||||
|
Фронт принимает и `content`, и `items`, и голый массив.
|
||||||
|
|
||||||
|
### Реклама (работает)
|
||||||
|
|
||||||
|
`/api/v1/admin/campaigns`, `/api/v1/admin/ads`, `/api/v1/admin/fullscreen-ads`.
|
||||||
|
|
||||||
|
### Объявления
|
||||||
|
|
||||||
|
#### `GET /api/v1/admin/posts`
|
||||||
|
|
||||||
|
Параметры (все опциональны): `page` (с 0), `size` (по умолчанию 20, максимум 100),
|
||||||
|
`search`, `type` (`LOSS`/`FOUND`), `status`.
|
||||||
|
|
||||||
|
Видны **все** статусы, включая `MODERATION` и `REJECTED`. Сортировка по умолчанию —
|
||||||
|
новые сверху (`createdAt DESC`). `search` ищет без учёта регистра по названию,
|
||||||
|
описанию, городу, району и данным владельца (login, имя, фамилия).
|
||||||
|
|
||||||
|
Элемент `content` — то же, что у публичного объявления, плюс данные автора
|
||||||
|
(`ownerId`, `ownerLogin`, `ownerName`, `ownerFirstName`, `ownerLastName`).
|
||||||
|
Фронт читает автора с запасом (`ownerLogin` / `authorLogin` / `userLogin` и т. п.).
|
||||||
|
|
||||||
|
#### `PUT /api/v1/admin/posts/{postId}`
|
||||||
|
|
||||||
|
`multipart/form-data`, как у пользовательского `PUT /api/v1/posts/{id}`:
|
||||||
|
`type`, `title`, `description`, `category`, `phone`, `reward`, `rewardText`,
|
||||||
|
`images`, `existingImages`, `latitude`, `longitude`, `address`.
|
||||||
|
Ответ `200` — обновлённое объявление.
|
||||||
|
|
||||||
|
Отличия от пользовательской правки:
|
||||||
|
|
||||||
|
- **Статус сохраняется** — админ чинит объявление, не убирая его из ленты
|
||||||
|
(`MODERATION` отправил бы на повторную AI-модерацию, `REJECTED` скрыл бы навсегда).
|
||||||
|
Смена статуса — отдельным `PATCH`.
|
||||||
|
- Падение геокодинга не блокирует правку: город берётся из `address`.
|
||||||
|
- Изображения, которых нет в `existingImages`, удаляются.
|
||||||
|
|
||||||
|
#### `DELETE /api/v1/admin/posts/{postId}`
|
||||||
|
|
||||||
|
Ответ `204 No Content`. Вместе с объявлением чистятся изображения в хранилище,
|
||||||
|
записи из `favorites` и обнуляется `post_id` в чатах.
|
||||||
|
|
||||||
|
#### `PATCH /api/v1/admin/posts/{postId}/status`
|
||||||
|
|
||||||
|
Тело `{ "status": "CLOSED" }` — закрыть («найдено»), `{ "status": "ACTIVE" }` —
|
||||||
|
вернуть в ленту. Принимаются все `PostStatus`: `ACTIVE`, `CLOSED`, `MODERATION`,
|
||||||
|
`REJECTED` (фронт отдаёт первые два). Переход в `CLOSED` увеличивает `posts_found`.
|
||||||
|
Неизвестный статус — `400`.
|
||||||
|
|
||||||
|
### Чаты (вкладка не сделана)
|
||||||
|
|
||||||
|
Требуемые эндпоинты:
|
||||||
|
|
||||||
|
| Метод | Endpoint | Назначение |
|
||||||
|
|-------|----------|-----------|
|
||||||
|
| `GET` | `/api/v1/admin/chats?page&size&search&postId` | Список чатов с превью |
|
||||||
|
| `GET` | `/api/v1/admin/chats/{chatId}/messages` | Сообщения чата |
|
||||||
|
| `POST` | `/api/v1/admin/chats/{chatId}/messages` | Написать в чат (`{ "content": "…" }`) |
|
||||||
|
| `DELETE` | `/api/v1/admin/chats/{chatId}` | Удалить чат с перепиской |
|
||||||
|
|
||||||
|
**Важно:** `senderId` должен браться **из JWT, а не из тела запроса**, иначе админ
|
||||||
|
мог бы слать сообщения от имени пользователей. Авторизация — только `ADMIN`;
|
||||||
|
это осознанное расширение прав по сравнению с пользовательским чатом
|
||||||
|
(например, чтобы предупредить о мошенничестве).
|
||||||
|
|
||||||
|
### Что сделано на клиенте
|
||||||
|
|
||||||
|
- `src/api/adminContentApi.js` — `getAdminPosts`, `deleteAdminPost`,
|
||||||
|
`updateAdminPostStatus`; пагинация принимает `content` / `items` / массив;
|
||||||
|
`type` нормализуется в `loss`/`found`.
|
||||||
|
- `CreateUpdatePost` с пропом `adminMode` → `usePostMutation` шлёт
|
||||||
|
`PUT /api/v1/admin/posts/{id}` (форма и валидация общие с пользовательской).
|
||||||
|
- `src/components/admin/PostsTab.jsx` — список, поиск с дебаунсом, фильтры,
|
||||||
|
«Показать ещё», карточки с действиями.
|
||||||
|
|
||||||
|
### Что осталось на клиенте
|
||||||
|
|
||||||
|
- Вкладка «Все чаты» (`ChatsTab.jsx` не создана) — ждёт эндпоинтов чатов.
|
||||||
|
- Проверка роли и скрытие UI: `AuthContext.isAdmin`, `AdminRoute` в `App.js`,
|
||||||
|
`isAdmin` в сайдбаре. Это удобство, не защита.
|
||||||
|
- Админка не постит сообщения через STOMP: используется REST, чтобы реплика
|
||||||
|
не зависела от того, разрешена ли админу подписка `/topic/chat/{id}`.
|
||||||
|
|
||||||
|
### Статус бэкенда
|
||||||
|
|
||||||
|
Репозиторий бэкенда: `D:\reFound\ReFound`.
|
||||||
|
|
||||||
|
| Файл | Назначение |
|
||||||
|
| --- | --- |
|
||||||
|
| `controller/admin/PostAdminController.java` | Эндпоинты объявлений, у каждого `@PreAuthorize("hasRole('ADMIN')")` |
|
||||||
|
| `service/admin/AdminPostService.java` | Логика: список, правка, удаление, статус |
|
||||||
|
| `dto/admin/AdminPostResponse.java` | Объявление + данные владельца |
|
||||||
|
| `dto/admin/AdminPostStatusUpdateRequest.java` | `{ "status": "..." }` |
|
||||||
|
| `util/PostSpecification.java` | `adminSearch` — поиск по полям объявления и владельца |
|
||||||
|
| `repository/ImageRepository.java` | `findByPostIdIn` — картинки страницы одним запросом вместо N+1 |
|
||||||
|
| `repository/ChatRepository.java` | `clearPostReference` — обнуление `post_id` при удалении |
|
||||||
|
| `test/.../AdminPostServiceTest.java` | 13 тестов: поиск, фильтры, статус, статистика, картинки, кэш |
|
||||||
|
|
||||||
|
Защита дублируется: `SecurityConfig` требует `ADMIN` на `/api/v1/admin/**`,
|
||||||
|
и методы контроллера дополнительно закрыты `@PreAuthorize`.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 13. Стили и темы
|
||||||
|
|
||||||
|
Подключение через `src/styles/index.css`:
|
||||||
|
|
||||||
|
```
|
||||||
|
index.css → base.css → layout.css → sidebar.css → card.css → modal.css → ui.css
|
||||||
|
```
|
||||||
|
|
||||||
|
Дополнительно подключаются в компонентах: `chat.css` (`App.js`),
|
||||||
|
`reviews.css`, `rules.css`, `admin.css`, `NakhodkaLanding.css`.
|
||||||
|
|
||||||
|
CSS-переменные в `base.css`:
|
||||||
|
|
||||||
|
| Переменная | Значение | Описание |
|
||||||
|
|-----------|----------|----------|
|
||||||
|
| `--teal` | `#2de0c8` | Основной акцент |
|
||||||
|
| `--teal2` | `#1fc9b0` | Тёмный оттенок |
|
||||||
|
| `--border` | `rgba(255,255,255,0.09)` | Границы |
|
||||||
|
| `--muted` / `--muted2` | `rgba(255,255,255,.38)` / `.15` | Второстепенный текст |
|
||||||
|
| `--font` | `Nunito`, sans-serif | Шрифт |
|
||||||
|
| `--err` | `#ff6b6b` | Ошибка |
|
||||||
|
|
||||||
|
Тёмная тема — градиентные фоны, «стекло» (`backdrop-filter`), акцент `#2de0c8`;
|
||||||
|
светлая переключается через `ThemeContext`.
|
||||||
|
|
||||||
|
Адаптивность:
|
||||||
|
|
||||||
|
| Брейкпоинт | Что меняется |
|
||||||
|
|------------|-------------|
|
||||||
|
| `≤ 900px` | Правый сайдбар скрывается, навигация внизу |
|
||||||
|
| `≤ 768px` | Компактные отступы и кнопки |
|
||||||
|
| `≤ 600px` | Модалки на всю ширину |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 14. Основные сценарии
|
||||||
|
|
||||||
|
**Аутентификация.** Гость нажимает «Разместить», «Мои объявления» или аватар →
|
||||||
|
открывается `AuthModal` → `POST /api/v1/auth/login` → `AuthContext.login()`
|
||||||
|
сохраняет `user`, `token`, `refreshToken` в `localStorage`. Просрочка access-токена
|
||||||
|
обрабатывается прозрачно: `apiFetch` при 401 обновляет токен и повторяет запрос;
|
||||||
|
при неудаче чистит сессию.
|
||||||
|
|
||||||
|
**Создание объявления.** Авторизованный пользователь → `CreateUpdatePost` →
|
||||||
|
заполняет форму → клиентское сжатие фото → `POST /api/v1/posts` (`FormData`) →
|
||||||
|
лента обновляется.
|
||||||
|
|
||||||
|
**Поиск и чат.** «Написать» → `POST /api/v1/chats/with/:otherUserId` →
|
||||||
|
переход на `/chats/:chatId` → подписка на `/topic/chat/{chatId}` →
|
||||||
|
сообщения в реальном времени.
|
||||||
|
|
||||||
|
**Карта.** `useYandexMap` ждёт `window.ymaps` (с таймаутом и ошибкой вместо
|
||||||
|
вечного спиннера), клик по карте ставит метку, drag метки и клик переводят
|
||||||
|
координаты в адрес через Яндекс.Геокодер; запрос на геокодинг защищён
|
||||||
|
request-id от гонок.
|
||||||
|
|
||||||
|
**Профиль.** Аватар в топбаре → `ProfileModal` → `PUT /api/v1/users/:id` →
|
||||||
|
данные обновляются в `AuthContext` и `localStorage`; «Выйти» — очистка сессии.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 15. Известные проблемы и предупреждения
|
||||||
|
|
||||||
|
- **`fs.F_OK is deprecated`** при сборке — предупреждение Node 24 из внутренностей
|
||||||
|
`react-scripts@5`. Не влияет на результат; уходит при переходе на CRA 6 / Vite.
|
||||||
|
- **`npm audit`** показывает уязвимости в транзитивных зависимостях CRA
|
||||||
|
(webpack-dev-server и др.). Применять `npm audit fix --force` нельзя: это
|
||||||
|
ломающие обновления в пределах `react-scripts@5`.
|
||||||
|
- **Ключи Яндекса** попадали в историю git — их нужно перевыпустить.
|
||||||
|
- **Клиентская проверка роли** (`isAdmin`, `AdminRoute`) — только скрытие UI.
|
||||||
|
Реальная авторизация обязана быть на сервере по каждому эндпоинту.
|
||||||
|
- **Известная проблема бэкенда:** `GlobalExceptionHandler` ловит `Exception`
|
||||||
|
без исключений, поэтому битый JSON или неверный тип параметра дают `500`,
|
||||||
|
а не `400`. Из-за этого `type` и `status` в админских эндпоинтах принимаются
|
||||||
|
строками и разбираются вручную.
|
||||||
1464
package-lock.json
generated
1464
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
25
package.json
25
package.json
@@ -6,22 +6,14 @@
|
|||||||
"@emoji-mart/data": "^1.2.1",
|
"@emoji-mart/data": "^1.2.1",
|
||||||
"@emoji-mart/react": "^1.1.1",
|
"@emoji-mart/react": "^1.1.1",
|
||||||
"@hookform/resolvers": "^5.2.2",
|
"@hookform/resolvers": "^5.2.2",
|
||||||
"@pbe/react-yandex-maps": "^1.2.5",
|
|
||||||
"@stomp/stompjs": "^7.3.0",
|
"@stomp/stompjs": "^7.3.0",
|
||||||
"@tailwindcss/vite": "^4.2.4",
|
|
||||||
"@tanstack/react-query": "^5.100.5",
|
|
||||||
"@testing-library/dom": "^10.4.1",
|
"@testing-library/dom": "^10.4.1",
|
||||||
"@testing-library/jest-dom": "^6.9.1",
|
"@testing-library/jest-dom": "^6.9.1",
|
||||||
"@testing-library/react": "^16.3.2",
|
"@testing-library/react": "^16.3.2",
|
||||||
"@testing-library/user-event": "^13.5.0",
|
"@testing-library/user-event": "^13.5.0",
|
||||||
"autoprefixer": "^10.5.0",
|
|
||||||
"class-variance-authority": "^0.7.1",
|
|
||||||
"clsx": "^2.1.1",
|
|
||||||
"emoji-mart": "^5.6.0",
|
"emoji-mart": "^5.6.0",
|
||||||
"framer-motion": "^12.38.0",
|
"framer-motion": "^12.38.0",
|
||||||
"i18next": "^22.5.1",
|
"i18next": "^22.5.1",
|
||||||
"lucide-react": "^1.11.0",
|
|
||||||
"postcss": "^8.5.12",
|
|
||||||
"react": "^18.3.1",
|
"react": "^18.3.1",
|
||||||
"react-dom": "^18.3.1",
|
"react-dom": "^18.3.1",
|
||||||
"react-hook-form": "^7.74.0",
|
"react-hook-form": "^7.74.0",
|
||||||
@@ -29,16 +21,16 @@
|
|||||||
"react-router-dom": "^7.14.2",
|
"react-router-dom": "^7.14.2",
|
||||||
"react-scripts": "5.0.1",
|
"react-scripts": "5.0.1",
|
||||||
"sockjs-client": "^1.6.1",
|
"sockjs-client": "^1.6.1",
|
||||||
"tailwind-merge": "^3.5.0",
|
|
||||||
"tailwindcss": "^4.2.4",
|
|
||||||
"web-vitals": "^2.1.4",
|
"web-vitals": "^2.1.4",
|
||||||
"zod": "^4.3.6",
|
"zod": "^4.3.6"
|
||||||
"zustand": "^5.0.12"
|
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "react-scripts start",
|
"start": "react-scripts start",
|
||||||
"build": "react-scripts build",
|
"build": "react-scripts build",
|
||||||
"test": "react-scripts test",
|
"test": "react-scripts test",
|
||||||
|
"test:ci": "react-scripts test --watchAll=false",
|
||||||
|
"lint": "eslint src --ext .js,.jsx,.ts,.tsx --max-warnings=0",
|
||||||
|
"typecheck": "tsc --noEmit",
|
||||||
"eject": "react-scripts eject"
|
"eject": "react-scripts eject"
|
||||||
},
|
},
|
||||||
"eslintConfig": {
|
"eslintConfig": {
|
||||||
@@ -61,8 +53,11 @@
|
|||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@types/node": "^25.6.0",
|
"@types/node": "^25.6.0",
|
||||||
"@types/react": "^19.2.18",
|
"@types/react": "^18.3.0",
|
||||||
"@types/react-dom": "^19.2.7",
|
"@types/react-dom": "^18.3.0",
|
||||||
"typescript": "^4.9.5"
|
"typescript": "^5.9.3"
|
||||||
|
},
|
||||||
|
"overrides": {
|
||||||
|
"caniuse-lite": "^1.0.30001814"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,13 +0,0 @@
|
|||||||
<!doctype html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
<title>react_front</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="root"></div>
|
|
||||||
<script type="module" src="/src/main.tsx"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 9.3 KiB |
@@ -1,184 +0,0 @@
|
|||||||
.counter {
|
|
||||||
font-size: 16px;
|
|
||||||
padding: 5px 10px;
|
|
||||||
border-radius: 5px;
|
|
||||||
color: var(--accent);
|
|
||||||
background: var(--accent-bg);
|
|
||||||
border: 2px solid transparent;
|
|
||||||
transition: border-color 0.3s;
|
|
||||||
margin-bottom: 24px;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
border-color: var(--accent-border);
|
|
||||||
}
|
|
||||||
&:focus-visible {
|
|
||||||
outline: 2px solid var(--accent);
|
|
||||||
outline-offset: 2px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.base,
|
|
||||||
.framework,
|
|
||||||
.vite {
|
|
||||||
inset-inline: 0;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.base {
|
|
||||||
width: 170px;
|
|
||||||
position: relative;
|
|
||||||
z-index: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.framework,
|
|
||||||
.vite {
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
|
|
||||||
.framework {
|
|
||||||
z-index: 1;
|
|
||||||
top: 34px;
|
|
||||||
height: 28px;
|
|
||||||
transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
|
|
||||||
scale(1.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.vite {
|
|
||||||
z-index: 0;
|
|
||||||
top: 107px;
|
|
||||||
height: 26px;
|
|
||||||
width: auto;
|
|
||||||
transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
|
|
||||||
scale(0.8);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#center {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 25px;
|
|
||||||
place-content: center;
|
|
||||||
place-items: center;
|
|
||||||
flex-grow: 1;
|
|
||||||
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
padding: 32px 20px 24px;
|
|
||||||
gap: 18px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#next-steps {
|
|
||||||
display: flex;
|
|
||||||
border-top: 1px solid var(--border);
|
|
||||||
text-align: left;
|
|
||||||
|
|
||||||
& > div {
|
|
||||||
flex: 1 1 0;
|
|
||||||
padding: 32px;
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
padding: 24px 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
margin-bottom: 16px;
|
|
||||||
width: 22px;
|
|
||||||
height: 22px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
flex-direction: column;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#docs {
|
|
||||||
border-right: 1px solid var(--border);
|
|
||||||
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
border-right: none;
|
|
||||||
border-bottom: 1px solid var(--border);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#next-steps ul {
|
|
||||||
list-style: none;
|
|
||||||
padding: 0;
|
|
||||||
display: flex;
|
|
||||||
gap: 8px;
|
|
||||||
margin: 32px 0 0;
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
height: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: var(--text-h);
|
|
||||||
font-size: 16px;
|
|
||||||
border-radius: 6px;
|
|
||||||
background: var(--social-bg);
|
|
||||||
display: flex;
|
|
||||||
padding: 6px 12px;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
text-decoration: none;
|
|
||||||
transition: box-shadow 0.3s;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
box-shadow: var(--shadow);
|
|
||||||
}
|
|
||||||
.button-icon {
|
|
||||||
height: 18px;
|
|
||||||
width: 18px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
margin-top: 20px;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
li {
|
|
||||||
flex: 1 1 calc(50% - 8px);
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
width: 100%;
|
|
||||||
justify-content: center;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#spacer {
|
|
||||||
height: 88px;
|
|
||||||
border-top: 1px solid var(--border);
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
height: 48px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.ticks {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
&::before,
|
|
||||||
&::after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: -4.5px;
|
|
||||||
border: 5px solid transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
left: 0;
|
|
||||||
border-left-color: var(--border);
|
|
||||||
}
|
|
||||||
&::after {
|
|
||||||
right: 0;
|
|
||||||
border-right-color: var(--border);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,122 +0,0 @@
|
|||||||
import { useState } from 'react'
|
|
||||||
import reactLogo from './assets/react.svg'
|
|
||||||
import viteLogo from './assets/vite.svg'
|
|
||||||
import heroImg from './assets/hero.png'
|
|
||||||
import './App.css'
|
|
||||||
|
|
||||||
function App() {
|
|
||||||
const [count, setCount] = useState(0)
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<section id="center">
|
|
||||||
<div className="hero">
|
|
||||||
<img src={heroImg} className="base" width="170" height="179" alt="" />
|
|
||||||
<img src={reactLogo} className="framework" alt="React logo" />
|
|
||||||
<img src={viteLogo} className="vite" alt="Vite logo" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h1>Get started</h1>
|
|
||||||
<p>
|
|
||||||
Edit <code>src/App.tsx</code> and save to test <code>HMR</code>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className="counter"
|
|
||||||
onClick={() => setCount((count) => count + 1)}
|
|
||||||
>
|
|
||||||
Count is {count}
|
|
||||||
</button>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<div className="ticks"></div>
|
|
||||||
|
|
||||||
<section id="next-steps">
|
|
||||||
<div id="docs">
|
|
||||||
<svg className="icon" role="presentation" aria-hidden="true">
|
|
||||||
<use href="/icons.svg#documentation-icon"></use>
|
|
||||||
</svg>
|
|
||||||
<h2>Documentation</h2>
|
|
||||||
<p>Your questions, answered</p>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<a href="https://vite.dev/" target="_blank">
|
|
||||||
<img className="logo" src={viteLogo} alt="" />
|
|
||||||
Explore Vite
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="https://react.dev/" target="_blank">
|
|
||||||
<img className="button-icon" src={reactLogo} alt="" />
|
|
||||||
Learn more
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div id="social">
|
|
||||||
<svg className="icon" role="presentation" aria-hidden="true">
|
|
||||||
<use href="/icons.svg#social-icon"></use>
|
|
||||||
</svg>
|
|
||||||
<h2>Connect with us</h2>
|
|
||||||
<p>Join the Vite community</p>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<a href="https://github.com/vitejs/vite" target="_blank">
|
|
||||||
<svg
|
|
||||||
className="button-icon"
|
|
||||||
role="presentation"
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
|
||||||
<use href="/icons.svg#github-icon"></use>
|
|
||||||
</svg>
|
|
||||||
GitHub
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="https://chat.vite.dev/" target="_blank">
|
|
||||||
<svg
|
|
||||||
className="button-icon"
|
|
||||||
role="presentation"
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
|
||||||
<use href="/icons.svg#discord-icon"></use>
|
|
||||||
</svg>
|
|
||||||
Discord
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="https://x.com/vite_js" target="_blank">
|
|
||||||
<svg
|
|
||||||
className="button-icon"
|
|
||||||
role="presentation"
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
|
||||||
<use href="/icons.svg#x-icon"></use>
|
|
||||||
</svg>
|
|
||||||
X.com
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="https://bsky.app/profile/vite.dev" target="_blank">
|
|
||||||
<svg
|
|
||||||
className="button-icon"
|
|
||||||
role="presentation"
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
|
||||||
<use href="/icons.svg#bluesky-icon"></use>
|
|
||||||
</svg>
|
|
||||||
Bluesky
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<div className="ticks"></div>
|
|
||||||
<section id="spacer"></section>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default App
|
|
||||||
@@ -1,111 +0,0 @@
|
|||||||
:root {
|
|
||||||
--text: #6b6375;
|
|
||||||
--text-h: #08060d;
|
|
||||||
--bg: #fff;
|
|
||||||
--border: #e5e4e7;
|
|
||||||
--code-bg: #f4f3ec;
|
|
||||||
--accent: #aa3bff;
|
|
||||||
--accent-bg: rgba(170, 59, 255, 0.1);
|
|
||||||
--accent-border: rgba(170, 59, 255, 0.5);
|
|
||||||
--social-bg: rgba(244, 243, 236, 0.5);
|
|
||||||
--shadow:
|
|
||||||
rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;
|
|
||||||
|
|
||||||
--sans: system-ui, 'Segoe UI', Roboto, sans-serif;
|
|
||||||
--heading: system-ui, 'Segoe UI', Roboto, sans-serif;
|
|
||||||
--mono: ui-monospace, Consolas, monospace;
|
|
||||||
|
|
||||||
font: 18px/145% var(--sans);
|
|
||||||
letter-spacing: 0.18px;
|
|
||||||
color-scheme: light dark;
|
|
||||||
color: var(--text);
|
|
||||||
background: var(--bg);
|
|
||||||
font-synthesis: none;
|
|
||||||
text-rendering: optimizeLegibility;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
:root {
|
|
||||||
--text: #9ca3af;
|
|
||||||
--text-h: #f3f4f6;
|
|
||||||
--bg: #16171d;
|
|
||||||
--border: #2e303a;
|
|
||||||
--code-bg: #1f2028;
|
|
||||||
--accent: #c084fc;
|
|
||||||
--accent-bg: rgba(192, 132, 252, 0.15);
|
|
||||||
--accent-border: rgba(192, 132, 252, 0.5);
|
|
||||||
--social-bg: rgba(47, 48, 58, 0.5);
|
|
||||||
--shadow:
|
|
||||||
rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#social .button-icon {
|
|
||||||
filter: invert(1) brightness(2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#root {
|
|
||||||
width: 1126px;
|
|
||||||
max-width: 100%;
|
|
||||||
margin: 0 auto;
|
|
||||||
text-align: center;
|
|
||||||
border-inline: 1px solid var(--border);
|
|
||||||
min-height: 100svh;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1,
|
|
||||||
h2 {
|
|
||||||
font-family: var(--heading);
|
|
||||||
font-weight: 500;
|
|
||||||
color: var(--text-h);
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 56px;
|
|
||||||
letter-spacing: -1.68px;
|
|
||||||
margin: 32px 0;
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
font-size: 36px;
|
|
||||||
margin: 20px 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
h2 {
|
|
||||||
font-size: 24px;
|
|
||||||
line-height: 118%;
|
|
||||||
letter-spacing: -0.24px;
|
|
||||||
margin: 0 0 8px;
|
|
||||||
@media (max-width: 1024px) {
|
|
||||||
font-size: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
p {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
code,
|
|
||||||
.counter {
|
|
||||||
font-family: var(--mono);
|
|
||||||
display: inline-flex;
|
|
||||||
border-radius: 4px;
|
|
||||||
color: var(--text-h);
|
|
||||||
}
|
|
||||||
|
|
||||||
code {
|
|
||||||
font-size: 15px;
|
|
||||||
line-height: 135%;
|
|
||||||
padding: 4px 8px;
|
|
||||||
background: var(--code-bg);
|
|
||||||
}
|
|
||||||
@@ -1,10 +0,0 @@
|
|||||||
import { StrictMode } from 'react'
|
|
||||||
import { createRoot } from 'react-dom/client'
|
|
||||||
import './index.css'
|
|
||||||
import App from './App.tsx'
|
|
||||||
|
|
||||||
createRoot(document.getElementById('root')!).render(
|
|
||||||
<StrictMode>
|
|
||||||
<App />
|
|
||||||
</StrictMode>,
|
|
||||||
)
|
|
||||||
38
src/App.css
38
src/App.css
@@ -1,38 +0,0 @@
|
|||||||
.App {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.App-logo {
|
|
||||||
height: 40vmin;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-reduced-motion: no-preference) {
|
|
||||||
.App-logo {
|
|
||||||
animation: App-logo-spin infinite 20s linear;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.App-header {
|
|
||||||
background-color: #282c34;
|
|
||||||
min-height: 100vh;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font-size: calc(10px + 2vmin);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.App-link {
|
|
||||||
color: #61dafb;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes App-logo-spin {
|
|
||||||
from {
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -63,30 +63,3 @@ export function putWithProgress(url, file, onProgress) {
|
|||||||
xhr.send(file);
|
xhr.send(file);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function uploadAdVideo(advertisingId, file, onProgress) {
|
|
||||||
const presignRes = await apiFetch(
|
|
||||||
`${API_URL}/api/v1/admin/ads/${advertisingId}/video/presign-upload`,
|
|
||||||
{
|
|
||||||
method: "POST",
|
|
||||||
headers: { "Content-Type": "application/json" },
|
|
||||||
body: JSON.stringify({ contentType: file.type }),
|
|
||||||
}
|
|
||||||
);
|
|
||||||
if (!presignRes.ok) throw new Error(`Presign failed (${presignRes.status})`);
|
|
||||||
const { uploadUrl, sourceKey } = await presignRes.json();
|
|
||||||
|
|
||||||
await putWithProgress(uploadUrl, file, onProgress);
|
|
||||||
|
|
||||||
const confirmRes = await apiFetch(
|
|
||||||
`${API_URL}/api/v1/admin/ads/${advertisingId}/video/confirm-upload`,
|
|
||||||
{
|
|
||||||
method: "POST",
|
|
||||||
headers: { "Content-Type": "application/json" },
|
|
||||||
body: JSON.stringify({ sourceKey }),
|
|
||||||
}
|
|
||||||
);
|
|
||||||
if (!confirmRes.ok) throw new Error(`Confirm failed (${confirmRes.status})`);
|
|
||||||
|
|
||||||
return { sourceKey };
|
|
||||||
}
|
|
||||||
@@ -106,7 +106,7 @@ function LoginFormInline({ saveAuth, onClose, onSwitch }) {
|
|||||||
|
|
||||||
<p style={{textAlign: "center", marginTop: 14, color: "var(--muted)", fontSize: ".85rem"}}>
|
<p style={{textAlign: "center", marginTop: 14, color: "var(--muted)", fontSize: ".85rem"}}>
|
||||||
{t('auth.noAccount')}{" "}
|
{t('auth.noAccount')}{" "}
|
||||||
<button onClick={onSwitch}
|
<button type="button" onClick={onSwitch}
|
||||||
style={{background: "none", border: "none", color: "var(--teal)", cursor: "pointer", fontWeight: 700, fontSize: ".85rem", fontFamily: "var(--font)",}}
|
style={{background: "none", border: "none", color: "var(--teal)", cursor: "pointer", fontWeight: 700, fontSize: ".85rem", fontFamily: "var(--font)",}}
|
||||||
>
|
>
|
||||||
{t('auth.register')}
|
{t('auth.register')}
|
||||||
@@ -224,7 +224,7 @@ function RegisterFormInline({ saveAuth, onClose, onSwitch }) {
|
|||||||
|
|
||||||
<p style={{textAlign: "center", marginTop: 14, color: "var(--muted)", fontSize: ".85rem"}}>
|
<p style={{textAlign: "center", marginTop: 14, color: "var(--muted)", fontSize: ".85rem"}}>
|
||||||
{t('auth.hasAccount')}{" "}
|
{t('auth.hasAccount')}{" "}
|
||||||
<button onClick={onSwitch}
|
<button type="button" onClick={onSwitch}
|
||||||
style={{background: "none", border: "none", color: "var(--teal)", cursor: "pointer", fontWeight: 700, fontSize: ".85rem", fontFamily: "var(--font)",}}>
|
style={{background: "none", border: "none", color: "var(--teal)", cursor: "pointer", fontWeight: 700, fontSize: ".85rem", fontFamily: "var(--font)",}}>
|
||||||
{t('auth.loginLink')}
|
{t('auth.loginLink')}
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
@@ -2,6 +2,7 @@ import { useEffect, useRef, useState } from "react";
|
|||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
import { API_URL, getImageUrl } from "../config/authConstants";
|
import { API_URL, getImageUrl } from "../config/authConstants";
|
||||||
import { useGeolocation, GEO_STATUS } from "../hooks/useGeolocation";
|
import { useGeolocation, GEO_STATUS } from "../hooks/useGeolocation";
|
||||||
|
import { whenYmapsReady } from "../utils/ymapsApi";
|
||||||
|
|
||||||
const MARKER_COLORS = {
|
const MARKER_COLORS = {
|
||||||
LOST: "#ff3b30",
|
LOST: "#ff3b30",
|
||||||
@@ -118,6 +119,10 @@ export default function MapView({
|
|||||||
onBack,
|
onBack,
|
||||||
}) {
|
}) {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
|
// tRef нужен, чтобы читать перевод из эффектов, не добавляя t в их deps:
|
||||||
|
// иначе смена языка пересоздавала бы карту и все маркеры с нуля.
|
||||||
|
const tRef = useRef(t);
|
||||||
|
tRef.current = t;
|
||||||
const mapRef = useRef(null);
|
const mapRef = useRef(null);
|
||||||
const ymapRef = useRef(null);
|
const ymapRef = useRef(null);
|
||||||
const userMarkerRef = useRef(null);
|
const userMarkerRef = useRef(null);
|
||||||
@@ -319,9 +324,20 @@ export default function MapView({
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
if (window.ymaps?.ready) {
|
whenYmapsReady()
|
||||||
window.ymaps.ready(init);
|
.then((ymaps) => {
|
||||||
}
|
if (destroyed) return;
|
||||||
|
ymaps.ready(init);
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
// API карт не подгрузился (заблокирован/офлайн/медленный CDN).
|
||||||
|
// Без этой ветки пользователь смотрел бы в вечный спиннер без ошибки.
|
||||||
|
if (!destroyed) {
|
||||||
|
setError(tRef.current("post.mapLoadFailed"));
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
console.warn("Yandex Maps API failed to load:", e);
|
||||||
|
});
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
destroyed = true;
|
destroyed = true;
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
// src/components/Toast.jsx
|
// src/components/Toast.jsx
|
||||||
import { useEffect } from "react";
|
import { useEffect, useRef } from "react";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Toast — всплывающее сообщение об ошибке/успехе, автоматически скрывается.
|
* Toast — всплывающее сообщение об ошибке/успехе, автоматически скрывается.
|
||||||
@@ -10,10 +10,16 @@ import { useEffect } from "react";
|
|||||||
* @param {number} [duration=4000] — время жизни в мс
|
* @param {number} [duration=4000] — время жизни в мс
|
||||||
*/
|
*/
|
||||||
export default function Toast({ message, type = "error", onDismiss, duration = 4000 }) {
|
export default function Toast({ message, type = "error", onDismiss, duration = 4000 }) {
|
||||||
|
// onDismiss почти всегда — свежий инлайн-стрелки. Если держать его в
|
||||||
|
// зависимостях useEffect, любой ре-рендер родителя (сообщения чата, поллинг
|
||||||
|
// рекламы) перезапускал бы отсчёт и тост висел бы бесконечно.
|
||||||
|
const dismissRef = useRef(onDismiss);
|
||||||
|
dismissRef.current = onDismiss;
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const timer = setTimeout(onDismiss, duration);
|
const timer = setTimeout(() => dismissRef.current?.(), duration);
|
||||||
return () => clearTimeout(timer);
|
return () => clearTimeout(timer);
|
||||||
}, [onDismiss, duration]);
|
}, [duration]);
|
||||||
|
|
||||||
if (!message) return null;
|
if (!message) return null;
|
||||||
|
|
||||||
|
|||||||
@@ -1,28 +0,0 @@
|
|||||||
import { useEffect, useState } from "react";
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Отдельный блюр-слой поверх ленты, независим от FeedTopBar.
|
|
||||||
* Прижат к верху общего контейнера, высота подстраивается под
|
|
||||||
* реальную высоту topBar (включая safe-area на iOS).
|
|
||||||
*/
|
|
||||||
export default function FeedBlurMask({ topBarRef }) {
|
|
||||||
const [height, setHeight] = useState(56);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const el = topBarRef?.current;
|
|
||||||
if (!el) return;
|
|
||||||
const update = () => setHeight(el.getBoundingClientRect().height || 56);
|
|
||||||
update();
|
|
||||||
const ro = new ResizeObserver(update);
|
|
||||||
ro.observe(el);
|
|
||||||
return () => ro.disconnect();
|
|
||||||
}, [topBarRef]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className="f-feed-blur-mask"
|
|
||||||
style={{ height }}
|
|
||||||
aria-hidden="true"
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -35,6 +35,9 @@ export default function PullToRefresh({ containerRef, onRefresh, disabled = fals
|
|||||||
const el = containerRef.current;
|
const el = containerRef.current;
|
||||||
if (!el) return;
|
if (!el) return;
|
||||||
el.classList.toggle("f-ptr-active", visible);
|
el.classList.toggle("f-ptr-active", visible);
|
||||||
|
// Размонтирование с visible=true иначе навсегда оставило бы маску
|
||||||
|
// затухания и блокировку pointer-events на контейнере ленты.
|
||||||
|
return () => el.classList.remove("f-ptr-active");
|
||||||
}, [visible, containerRef]);
|
}, [visible, containerRef]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
|||||||
@@ -1,21 +0,0 @@
|
|||||||
export default function TypeFilterBar({ value, onChange, t }) {
|
|
||||||
const options = [
|
|
||||||
{ key: "loss", label: t('feed.filterLoss') },
|
|
||||||
{ key: null, label: t('feed.filterAll') },
|
|
||||||
{ key: "found", label: t('feed.filterFound') },
|
|
||||||
];
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="f-filter-bar">
|
|
||||||
{options.map(opt => (
|
|
||||||
<button
|
|
||||||
key={opt.key ?? "all"}
|
|
||||||
className={`f-filter-btn${value === opt.key ? " active" : ""}`}
|
|
||||||
onClick={() => onChange(opt.key)}
|
|
||||||
>
|
|
||||||
{opt.label}
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,10 +0,0 @@
|
|||||||
export default function HeartIcon({filled}) {
|
|
||||||
return (
|
|
||||||
<svg width={14} height={14} viewBox="0 0 24 24"
|
|
||||||
fill={filled ? "#ff6b6b" : "none"} stroke="#ff6b6b" strokeWidth={2}
|
|
||||||
strokeLinecap="round">
|
|
||||||
<path
|
|
||||||
d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
|
|
||||||
</svg>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,13 +0,0 @@
|
|||||||
import magnifier from "../../assets/magnifier.png";
|
|
||||||
|
|
||||||
export default function LogoIcon() {
|
|
||||||
return (
|
|
||||||
<img
|
|
||||||
src={magnifier}
|
|
||||||
alt="logo"
|
|
||||||
width={20}
|
|
||||||
height={20}
|
|
||||||
style={{ objectFit: "contain" }}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,10 +0,0 @@
|
|||||||
export default function MapIcon() {
|
|
||||||
return (
|
|
||||||
<svg width={14} height={14} viewBox="0 0 24 24" fill="none"
|
|
||||||
stroke="currentColor" strokeWidth={2} strokeLinecap="round">
|
|
||||||
<polygon points="1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6"/>
|
|
||||||
<line x1="8" y1="2" x2="8" y2="18"/>
|
|
||||||
<line x1="16" y1="6" x2="16" y2="22"/>
|
|
||||||
</svg>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -12,10 +12,24 @@ export const NAV_BOTTOM = [
|
|||||||
{ icon: "rules", key: "rules", labelKey: "nav.rules" },
|
{ icon: "rules", key: "rules", labelKey: "nav.rules" },
|
||||||
];
|
];
|
||||||
|
|
||||||
export const CATEGORY_KEYS = [
|
/**
|
||||||
"categories.item", "categories.pet", "categories.other",
|
* Категории объявления.
|
||||||
|
*
|
||||||
|
* value — то, что уходит на бэкенд и хранится в БД (в т.ч. у уже созданных
|
||||||
|
* объявлений), поэтому это стабильные значения, а НЕ переводы. Раньше сюда
|
||||||
|
* клали i18n-ключи и отправляли t(key), из-за чего одно и то же объявление
|
||||||
|
* получало разный category в зависимости от языка интерфейса.
|
||||||
|
*/
|
||||||
|
export const CATEGORIES = [
|
||||||
|
{ value: "Вещь", labelKey: "categories.item" },
|
||||||
|
{ value: "Питомец", labelKey: "categories.pet" },
|
||||||
|
{ value: "Другое", labelKey: "categories.other" },
|
||||||
];
|
];
|
||||||
|
|
||||||
|
export const CATEGORY_ITEM = "Вещь";
|
||||||
|
export const CATEGORY_PET = "Питомец";
|
||||||
|
export const CATEGORY_OTHER = "Другое";
|
||||||
|
|
||||||
export const EMPTY_FORM = {
|
export const EMPTY_FORM = {
|
||||||
type: "loss",
|
type: "loss",
|
||||||
title: "",
|
title: "",
|
||||||
@@ -29,5 +43,3 @@ export const EMPTY_FORM = {
|
|||||||
reward: false,
|
reward: false,
|
||||||
rewardText: ""
|
rewardText: ""
|
||||||
};
|
};
|
||||||
|
|
||||||
export const MAX_PHOTO_SIZE_MB = 5;
|
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { useState, useCallback } from "react";
|
import { useState, useCallback, useRef } from "react";
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import { API_URL } from "../config/authConstants";
|
import { API_URL } from "../config/authConstants";
|
||||||
import { apiFetch } from "../api/apiClient";
|
import { apiFetch } from "../api/apiClient";
|
||||||
@@ -11,8 +11,12 @@ export function useChats() {
|
|||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
const [error, setError] = useState("");
|
const [error, setError] = useState("");
|
||||||
const { updateFromChats, clearChatUnread } = useUnread();
|
const { updateFromChats, clearChatUnread } = useUnread();
|
||||||
|
// fetchChats дёргается и при монтировании, и на каждое изменение totalUnread —
|
||||||
|
// без guard'а медленный предыдущий ответ воскрешал бы прочитанные счётчики.
|
||||||
|
const requestIdRef = useRef(0);
|
||||||
|
|
||||||
const fetchChats = useCallback(async () => {
|
const fetchChats = useCallback(async () => {
|
||||||
|
const requestId = ++requestIdRef.current;
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
setError("");
|
setError("");
|
||||||
try {
|
try {
|
||||||
@@ -20,14 +24,16 @@ export function useChats() {
|
|||||||
if (!res.ok) throw new Error(t('chats.fetchError'));
|
if (!res.ok) throw new Error(t('chats.fetchError'));
|
||||||
|
|
||||||
const data = await res.json();
|
const data = await res.json();
|
||||||
|
if (requestId !== requestIdRef.current) return; // устаревший ответ
|
||||||
const list = Array.isArray(data) ? data : (data.items ?? data.content ?? []);
|
const list = Array.isArray(data) ? data : (data.items ?? data.content ?? []);
|
||||||
cachePostsFromChats(list);
|
cachePostsFromChats(list);
|
||||||
setChats(list);
|
setChats(list);
|
||||||
updateFromChats(list);
|
updateFromChats(list);
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
|
if (requestId !== requestIdRef.current) return;
|
||||||
setError(e.message || t('chats.fetchError'));
|
setError(e.message || t('chats.fetchError'));
|
||||||
} finally {
|
} finally {
|
||||||
setLoading(false);
|
if (requestId === requestIdRef.current) setLoading(false);
|
||||||
}
|
}
|
||||||
}, [updateFromChats, t]);
|
}, [updateFromChats, t]);
|
||||||
|
|
||||||
@@ -46,6 +52,9 @@ export function useChats() {
|
|||||||
|
|
||||||
const fetchMessages = useCallback(async (chatId) => {
|
const fetchMessages = useCallback(async (chatId) => {
|
||||||
const res = await apiFetch(`${API_URL}/api/v1/chats/${chatId}/messages`);
|
const res = await apiFetch(`${API_URL}/api/v1/chats/${chatId}/messages`);
|
||||||
|
// Без этой проверки 5xx с JSON-телом ошибки превращался в пустой список,
|
||||||
|
// и только что отправленное сообщение выглядело как потерянное.
|
||||||
|
if (!res.ok) throw new Error(`Error ${res.status}`);
|
||||||
const data = await res.json();
|
const data = await res.json();
|
||||||
return Array.isArray(data) ? data : (data.items ?? data.content ?? []);
|
return Array.isArray(data) ? data : (data.items ?? data.content ?? []);
|
||||||
}, []);
|
}, []);
|
||||||
|
|||||||
@@ -33,14 +33,14 @@ export function useDeleteChat() {
|
|||||||
if (!res.ok) {
|
if (!res.ok) {
|
||||||
let body;
|
let body;
|
||||||
try { body = await res.json(); } catch { body = null; }
|
try { body = await res.json(); } catch { body = null; }
|
||||||
throw new Error(body?.message || t('chat.deleteErrorWithStatus', { status: res.status }));
|
throw new Error(body?.message || t('chats.deleteErrorWithStatus', { status: res.status }));
|
||||||
}
|
}
|
||||||
|
|
||||||
clearChatUnread(chatId);
|
clearChatUnread(chatId);
|
||||||
removePostForChat(chatId);
|
removePostForChat(chatId);
|
||||||
return { success: true, error: null };
|
return { success: true, error: null };
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
const message = err.message || t('chat.deleteError');
|
const message = err.message || t('chats.deleteError');
|
||||||
setError(message);
|
setError(message);
|
||||||
return { success: false, error: message };
|
return { success: false, error: message };
|
||||||
} finally {
|
} finally {
|
||||||
|
|||||||
@@ -33,6 +33,10 @@ export function useFeedActions({ refresh, loadMyPosts, onAuthRequired, isAuthent
|
|||||||
}, [refresh, loadMyPosts]);
|
}, [refresh, loadMyPosts]);
|
||||||
|
|
||||||
const handleDelete = useCallback(async (postId) => {
|
const handleDelete = useCallback(async (postId) => {
|
||||||
|
if (!isAuthenticated) {
|
||||||
|
onAuthRequired?.();
|
||||||
|
return;
|
||||||
|
}
|
||||||
if (!window.confirm(t('feed.confirmDelete'))) return;
|
if (!window.confirm(t('feed.confirmDelete'))) return;
|
||||||
const result = await deletePost(postId);
|
const result = await deletePost(postId);
|
||||||
if (result.success) {
|
if (result.success) {
|
||||||
@@ -40,9 +44,13 @@ export function useFeedActions({ refresh, loadMyPosts, onAuthRequired, isAuthent
|
|||||||
} else {
|
} else {
|
||||||
setError(result.error);
|
setError(result.error);
|
||||||
}
|
}
|
||||||
}, [t, deletePost, afterMutation]);
|
}, [t, deletePost, afterMutation, isAuthenticated, onAuthRequired]);
|
||||||
|
|
||||||
const handleMarkFound = useCallback(async (postId) => {
|
const handleMarkFound = useCallback(async (postId) => {
|
||||||
|
if (!isAuthenticated) {
|
||||||
|
onAuthRequired?.();
|
||||||
|
return;
|
||||||
|
}
|
||||||
if (!window.confirm(t('feed.confirmMarkFound'))) return;
|
if (!window.confirm(t('feed.confirmMarkFound'))) return;
|
||||||
const result = await markAsFound(postId);
|
const result = await markAsFound(postId);
|
||||||
if (result.success) {
|
if (result.success) {
|
||||||
@@ -50,7 +58,7 @@ export function useFeedActions({ refresh, loadMyPosts, onAuthRequired, isAuthent
|
|||||||
} else {
|
} else {
|
||||||
setError(result.error);
|
setError(result.error);
|
||||||
}
|
}
|
||||||
}, [t, markAsFound, afterMutation]);
|
}, [t, markAsFound, afterMutation, isAuthenticated, onAuthRequired]);
|
||||||
|
|
||||||
const clearError = useCallback(() => setError(""), []);
|
const clearError = useCallback(() => setError(""), []);
|
||||||
|
|
||||||
|
|||||||
@@ -1,8 +1,21 @@
|
|||||||
import { useState, useCallback } from "react";
|
import { useState, useCallback, useRef } from "react";
|
||||||
import { API_URL } from "../config/authConstants";
|
import { API_URL } from "../config/authConstants";
|
||||||
|
|
||||||
const PAGE_SIZE = 20;
|
const PAGE_SIZE = 20;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Достаёт элементы страницы независимо от формы ответа бэкенда
|
||||||
|
* (Spring Page {content,last}, {items,last} или голый массив).
|
||||||
|
*/
|
||||||
|
function extractPage(data) {
|
||||||
|
if (Array.isArray(data)) {
|
||||||
|
return { items: data, last: data.length < PAGE_SIZE };
|
||||||
|
}
|
||||||
|
const items = data?.content ?? data?.items ?? [];
|
||||||
|
const last = typeof data?.last === "boolean" ? data.last : items.length < PAGE_SIZE;
|
||||||
|
return { items, last };
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Управляет основной лентой объявлений: загрузка, пагинация, поиск.
|
* Управляет основной лентой объявлений: загрузка, пагинация, поиск.
|
||||||
*/
|
*/
|
||||||
@@ -13,8 +26,13 @@ export function useFeedPosts() {
|
|||||||
const [page, setPage] = useState(0);
|
const [page, setPage] = useState(0);
|
||||||
const [hasMore, setHasMore] = useState(true);
|
const [hasMore, setHasMore] = useState(true);
|
||||||
const [loadingMore, setLoadingMore] = useState(false);
|
const [loadingMore, setLoadingMore] = useState(false);
|
||||||
|
// Номер последнего начатого запроса: ответы приходят не по порядку
|
||||||
|
// (дебаунс поиска, бесконечный скролл, refresh после удаления), и без
|
||||||
|
// этой проверки медленный «старый» ответ перетирал бы свежий.
|
||||||
|
const requestIdRef = useRef(0);
|
||||||
|
|
||||||
const loadFeed = useCallback(async (pageNum = 0, search = "", append = false) => {
|
const loadFeed = useCallback(async (pageNum = 0, search = "", append = false) => {
|
||||||
|
const requestId = ++requestIdRef.current;
|
||||||
if (pageNum === 0) {
|
if (pageNum === 0) {
|
||||||
setLoading(true);
|
setLoading(true);
|
||||||
} else {
|
} else {
|
||||||
@@ -28,21 +46,37 @@ export function useFeedPosts() {
|
|||||||
const res = await fetch(`${API_URL}/api/v1/posts?${params}`);
|
const res = await fetch(`${API_URL}/api/v1/posts?${params}`);
|
||||||
if (!res.ok) throw new Error(`Error ${res.status}`);
|
if (!res.ok) throw new Error(`Error ${res.status}`);
|
||||||
const data = await res.json();
|
const data = await res.json();
|
||||||
|
if (requestId !== requestIdRef.current) return; // устаревший ответ
|
||||||
|
|
||||||
const content = data.content ?? [];
|
const { items, last } = extractPage(data);
|
||||||
const normalizedAds = content.map(ad => ({
|
const normalizedAds = items.map(ad => ({
|
||||||
...ad,
|
...ad,
|
||||||
type: ad.type ? ad.type.toLowerCase() : "loss",
|
type: ad.type ? ad.type.toLowerCase() : "loss",
|
||||||
}));
|
}));
|
||||||
|
|
||||||
setAds(prev => (append ? [...prev, ...normalizedAds] : normalizedAds));
|
setAds(prev => {
|
||||||
setHasMore(!data.last);
|
const merged = append ? [...prev, ...normalizedAds] : normalizedAds;
|
||||||
|
// Пересекающиеся страницы (сдвиг при вставке новых объявлений) не должны
|
||||||
|
// давать дубликаты — React потеряет state у карточек с одинаковым key.
|
||||||
|
const seen = new Set();
|
||||||
|
return merged.filter(ad => {
|
||||||
|
if (seen.has(ad.id)) return false;
|
||||||
|
seen.add(ad.id);
|
||||||
|
return true;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
setHasMore(!last);
|
||||||
setPage(pageNum);
|
setPage(pageNum);
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
|
if (requestId !== requestIdRef.current) return;
|
||||||
setError(err.message || "Failed to load ads");
|
setError(err.message || "Failed to load ads");
|
||||||
} finally {
|
} finally {
|
||||||
setLoading(false);
|
// Флаг снимает только «свой» запрос: иначе подгрузка страницы N
|
||||||
setLoadingMore(false);
|
// гасила бы спиннер первой страницы, и наоборот.
|
||||||
|
if (requestId === requestIdRef.current) {
|
||||||
|
setLoading(false);
|
||||||
|
setLoadingMore(false);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { useRef, useCallback } from "react";
|
import { useRef, useCallback, useEffect } from "react";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Универсальный хук для бесконечного скролла через IntersectionObserver.
|
* Универсальный хук для бесконечного скролла через IntersectionObserver.
|
||||||
@@ -9,19 +9,32 @@ import { useRef, useCallback } from "react";
|
|||||||
*/
|
*/
|
||||||
export function useInfiniteScroll(onIntersect, enabled) {
|
export function useInfiniteScroll(onIntersect, enabled) {
|
||||||
const observerRef = useRef(null);
|
const observerRef = useRef(null);
|
||||||
|
// Колбэк храним в ref: если держать его в зависимостях useCallback, то новый
|
||||||
|
// инлайн-колбэк на каждом рендере родителя пересоздавал бы IntersectionObserver,
|
||||||
|
// а новый observer сразу отдаёт первоначальное срабатывание — подгрузка
|
||||||
|
// страницы превращалась бы в цикл запросов.
|
||||||
|
const onIntersectRef = useRef(onIntersect);
|
||||||
|
onIntersectRef.current = onIntersect;
|
||||||
|
const enabledRef = useRef(enabled);
|
||||||
|
enabledRef.current = enabled;
|
||||||
|
|
||||||
const sentinelRef = useCallback(node => {
|
const sentinelRef = useCallback((node) => {
|
||||||
if (!enabled) return;
|
observerRef.current?.disconnect();
|
||||||
if (observerRef.current) observerRef.current.disconnect();
|
observerRef.current = null;
|
||||||
|
|
||||||
observerRef.current = new IntersectionObserver(entries => {
|
if (!node || !enabledRef.current) return;
|
||||||
if (entries[0].isIntersecting && enabled) {
|
|
||||||
onIntersect();
|
observerRef.current = new IntersectionObserver((entries) => {
|
||||||
|
if (entries[0].isIntersecting && enabledRef.current) {
|
||||||
|
onIntersectRef.current();
|
||||||
}
|
}
|
||||||
}, { rootMargin: "200px" });
|
}, { rootMargin: "200px" });
|
||||||
|
|
||||||
if (node) observerRef.current.observe(node);
|
observerRef.current.observe(node);
|
||||||
}, [enabled, onIntersect]);
|
}, []);
|
||||||
|
|
||||||
|
// Без этого observer остаётся подписан на уже отсоединённый узел.
|
||||||
|
useEffect(() => () => observerRef.current?.disconnect(), []);
|
||||||
|
|
||||||
return sentinelRef;
|
return sentinelRef;
|
||||||
}
|
}
|
||||||
@@ -3,9 +3,8 @@ import { useTranslation } from 'react-i18next';
|
|||||||
/**
|
/**
|
||||||
* useLanguageToggle — переключение между ru/en.
|
* useLanguageToggle — переключение между ru/en.
|
||||||
*
|
*
|
||||||
* i18next сам сохраняет выбранный язык в localStorage
|
* Persist делает сам i18n (см. src/i18n.js, подписка на languageChanged),
|
||||||
* через LanguageDetector (ключ 'i18nextLng'),
|
* здесь только инициируем смену.
|
||||||
* если detection.caches включает localStorage.
|
|
||||||
*/
|
*/
|
||||||
export function useLanguageToggle() {
|
export function useLanguageToggle() {
|
||||||
const { i18n } = useTranslation();
|
const { i18n } = useTranslation();
|
||||||
|
|||||||
@@ -6,7 +6,7 @@ import { apiFetch } from '../api/apiClient';
|
|||||||
|
|
||||||
/**
|
/**
|
||||||
* Хук для изменения статуса поста (ACTIVE/CLOSED).
|
* Хук для изменения статуса поста (ACTIVE/CLOSED).
|
||||||
* Используется для отметки "Вещь найдена" и (в будущем) для reopen.
|
* Используется для отметки "найдено" и (в будущем) для reopen.
|
||||||
*/
|
*/
|
||||||
export function usePostStatus() {
|
export function usePostStatus() {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
@@ -40,7 +40,7 @@ export function usePostStatus() {
|
|||||||
}, [t]);
|
}, [t]);
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Изменяет статус поста на CLOSED (вещь найдена).
|
* Изменяет статус поста на CLOSED («найдено»).
|
||||||
* @param {number} postId - ID поста
|
* @param {number} postId - ID поста
|
||||||
* @returns {Promise<{success: boolean, error: string|null}>}
|
* @returns {Promise<{success: boolean, error: string|null}>}
|
||||||
*/
|
*/
|
||||||
|
|||||||
@@ -1,11 +1,15 @@
|
|||||||
import { useState, useCallback, useMemo } from "react";
|
import { useState, useCallback, useMemo } from "react";
|
||||||
import { API_URL } from "../config/authConstants";
|
import { API_URL } from "../config/authConstants";
|
||||||
|
import { apiFetch } from "../api/apiClient";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Загрузка/отправка отзывов + производные данные (средний рейтинг,
|
* Загрузка/отправка отзывов + производные данные (средний рейтинг,
|
||||||
* распределение по звёздам).
|
* распределение по звёздам).
|
||||||
|
*
|
||||||
|
* token здесь намеренно не принимается: apiFetch берёт актуальный access-токен
|
||||||
|
* из хранилища сам и рефрешит его при 401.
|
||||||
*/
|
*/
|
||||||
export function useReviews({ token, isAuthenticated, onAuthRequired, authorFallbackName }) {
|
export function useReviews({ isAuthenticated, onAuthRequired, authorFallbackName }) {
|
||||||
const [reviews, setReviews] = useState([]);
|
const [reviews, setReviews] = useState([]);
|
||||||
const [loading, setLoading] = useState(true);
|
const [loading, setLoading] = useState(true);
|
||||||
const [error, setError] = useState("");
|
const [error, setError] = useState("");
|
||||||
@@ -37,12 +41,12 @@ export function useReviews({ token, isAuthenticated, onAuthRequired, authorFallb
|
|||||||
setSubmitting(true);
|
setSubmitting(true);
|
||||||
setSubmitError("");
|
setSubmitError("");
|
||||||
try {
|
try {
|
||||||
const res = await fetch(`${API_URL}/api/v1/reviews`, {
|
// apiFetch, а не голый fetch: он сам подставляет актуальный access-токен
|
||||||
|
// и обновляет его при 401. С пропом token из контекста запрос падал бы
|
||||||
|
// на просроченном токене (контекст обновляется только при логине).
|
||||||
|
const res = await apiFetch(`${API_URL}/api/v1/reviews`, {
|
||||||
method: "POST",
|
method: "POST",
|
||||||
headers: {
|
headers: { "Content-Type": "application/json" },
|
||||||
"Content-Type": "application/json",
|
|
||||||
...(token ? { Authorization: `Bearer ${token}` } : {}),
|
|
||||||
},
|
|
||||||
body: JSON.stringify({ rating, text }),
|
body: JSON.stringify({ rating, text }),
|
||||||
});
|
});
|
||||||
if (!res.ok) throw new Error(`Error ${res.status}`);
|
if (!res.ok) throw new Error(`Error ${res.status}`);
|
||||||
@@ -66,23 +70,28 @@ export function useReviews({ token, isAuthenticated, onAuthRequired, authorFallb
|
|||||||
} finally {
|
} finally {
|
||||||
setSubmitting(false);
|
setSubmitting(false);
|
||||||
}
|
}
|
||||||
}, [isAuthenticated, onAuthRequired, token, loadReviews, authorFallbackName]);
|
}, [isAuthenticated, onAuthRequired, loadReviews, authorFallbackName]);
|
||||||
|
|
||||||
const avgRating = reviews.length
|
// Несохранённые отзывы показываются пользователю, но не должны попадать
|
||||||
? (reviews.reduce((s, r) => s + r.rating, 0) / reviews.length).toFixed(1)
|
// в публичную статистику площадки — иначе avgRating и распределение
|
||||||
|
// навсегда искажаются отзывами, которых нет на сервере.
|
||||||
|
const savedReviews = useMemo(() => reviews.filter((r) => !r.pending), [reviews]);
|
||||||
|
|
||||||
|
const avgRating = savedReviews.length
|
||||||
|
? (savedReviews.reduce((s, r) => s + r.rating, 0) / savedReviews.length).toFixed(1)
|
||||||
: null;
|
: null;
|
||||||
|
|
||||||
const distribution = useMemo(() => {
|
const distribution = useMemo(() => {
|
||||||
const counts = { 1: 0, 2: 0, 3: 0, 4: 0, 5: 0 };
|
const counts = { 1: 0, 2: 0, 3: 0, 4: 0, 5: 0 };
|
||||||
reviews.forEach((r) => {
|
savedReviews.forEach((r) => {
|
||||||
if (counts[r.rating] !== undefined) counts[r.rating] += 1;
|
if (counts[r.rating] !== undefined) counts[r.rating] += 1;
|
||||||
});
|
});
|
||||||
return [5, 4, 3, 2, 1].map((star) => ({
|
return [5, 4, 3, 2, 1].map((star) => ({
|
||||||
star,
|
star,
|
||||||
count: counts[star],
|
count: counts[star],
|
||||||
pct: reviews.length ? Math.round((counts[star] / reviews.length) * 100) : 0,
|
pct: savedReviews.length ? Math.round((counts[star] / savedReviews.length) * 100) : 0,
|
||||||
}));
|
}));
|
||||||
}, [reviews]);
|
}, [savedReviews]);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
reviews, loading, error, submitting, submitError,
|
reviews, loading, error, submitting, submitError,
|
||||||
|
|||||||
@@ -1,71 +0,0 @@
|
|||||||
import { useEffect, useRef, useState } from "react";
|
|
||||||
import type { RefObject } from "react";
|
|
||||||
|
|
||||||
export type ScrollDirection = "up" | "down";
|
|
||||||
|
|
||||||
/**
|
|
||||||
* useScrollDirection — отслеживает направление скролла контейнера `containerRef`
|
|
||||||
* и сообщает, когда тулбар должен быть скрыт.
|
|
||||||
*
|
|
||||||
* Логика (как в Telegram Web):
|
|
||||||
* - при скролле вниз тулбар прячется (hidden = true);
|
|
||||||
* - при скролле вверх (или подъезде в самое начало списка) — показывается;
|
|
||||||
* - есть порог `showThreshold` у вершины, чтобы тулбар появлялся не раньше,
|
|
||||||
* чем контент вернулся достаточно близко к началу.
|
|
||||||
*
|
|
||||||
* requestAnimationFrame + ref'ы: обработчик скролла НЕ триггерит ре-рендер
|
|
||||||
* на каждое событие — состояние меняется только когда скрытость реально
|
|
||||||
* пересекает границу, всё остальное живёт в ref'ах.
|
|
||||||
*/
|
|
||||||
export default function useScrollDirection<T extends HTMLElement>(
|
|
||||||
containerRef: RefObject<T | null>,
|
|
||||||
{ hideThreshold = 12, showThreshold = 88 }: { hideThreshold?: number; showThreshold?: number } = {},
|
|
||||||
): boolean {
|
|
||||||
const [hidden, setHidden] = useState(false);
|
|
||||||
|
|
||||||
const hiddenRef = useRef(false);
|
|
||||||
const lastYRef = useRef(0);
|
|
||||||
const rafRef = useRef<number | null>(null);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
const el = containerRef.current;
|
|
||||||
if (!el) return;
|
|
||||||
|
|
||||||
lastYRef.current = el.scrollTop;
|
|
||||||
|
|
||||||
const onScroll = () => {
|
|
||||||
if (rafRef.current != null) return;
|
|
||||||
rafRef.current = requestAnimationFrame(() => {
|
|
||||||
rafRef.current = null;
|
|
||||||
const y = el.scrollTop;
|
|
||||||
|
|
||||||
const maxScroll = el.scrollHeight - el.clientHeight;
|
|
||||||
const isAtTop = y <= showThreshold;
|
|
||||||
const isAtBottom = maxScroll > 0 && y >= maxScroll - showThreshold;
|
|
||||||
// Без сенсорных/фрикционных возражений: крошечные рывки не считаем за жест
|
|
||||||
const dy = Math.abs(y - lastYRef.current);
|
|
||||||
|
|
||||||
let next = hiddenRef.current;
|
|
||||||
if (isAtTop || isAtBottom) {
|
|
||||||
next = false;
|
|
||||||
} else if (dy >= hideThreshold) {
|
|
||||||
next = y > lastYRef.current;
|
|
||||||
}
|
|
||||||
lastYRef.current = y;
|
|
||||||
|
|
||||||
if (next !== hiddenRef.current) {
|
|
||||||
hiddenRef.current = next;
|
|
||||||
setHidden(next);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
el.addEventListener("scroll", onScroll, { passive: true });
|
|
||||||
return () => {
|
|
||||||
el.removeEventListener("scroll", onScroll);
|
|
||||||
if (rafRef.current != null) cancelAnimationFrame(rafRef.current);
|
|
||||||
};
|
|
||||||
}, [containerRef, hideThreshold, showThreshold]);
|
|
||||||
|
|
||||||
return hidden;
|
|
||||||
}
|
|
||||||
@@ -11,6 +11,11 @@ import { getAccessToken, refreshAccessToken } from "../api/apiClient";
|
|||||||
* и переподключение. Конкретные топики и обработку сообщений задаёт вызывающий
|
* и переподключение. Конкретные топики и обработку сообщений задаёт вызывающий
|
||||||
* хук через onConnect.
|
* хук через onConnect.
|
||||||
*
|
*
|
||||||
|
* Соединение пересоздаётся не только при смене enabled, но и при смене
|
||||||
|
* onConnect: подписка живёт внутри клиента, поэтому новый onConnect (например,
|
||||||
|
* новый chatId → новый топик) обязан переподписать заново, иначе клиент останется
|
||||||
|
* подписан на предыдущий топик, а отправлять будет в новый.
|
||||||
|
*
|
||||||
* @param {boolean} enabled — активировать соединение (например, есть ли userId/chatId)
|
* @param {boolean} enabled — активировать соединение (например, есть ли userId/chatId)
|
||||||
* @param {(client: Client) => void} onConnect — вызывается при успешном коннекте,
|
* @param {(client: Client) => void} onConnect — вызывается при успешном коннекте,
|
||||||
* внутри обычно делают client.subscribe(...)
|
* внутри обычно делают client.subscribe(...)
|
||||||
@@ -28,7 +33,10 @@ export function useStompClient(enabled, onConnect) {
|
|||||||
}, [onConnect]);
|
}, [onConnect]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!enabled) return;
|
if (!enabled) {
|
||||||
|
setConnected(false);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
const client = new Client({
|
const client = new Client({
|
||||||
webSocketFactory: () => new SockJS(`${API_URL}/ws`),
|
webSocketFactory: () => new SockJS(`${API_URL}/ws`),
|
||||||
@@ -43,7 +51,11 @@ export function useStompClient(enabled, onConnect) {
|
|||||||
onConnectRef.current?.(client);
|
onConnectRef.current?.(client);
|
||||||
},
|
},
|
||||||
onDisconnect: () => setConnected(false),
|
onDisconnect: () => setConnected(false),
|
||||||
|
// stompjs не вызывает onDisconnect при обрыве сокета — без этого флага
|
||||||
|
// UI продолжал бы считать нас "онлайн", пока идёт реконнект.
|
||||||
|
onWebSocketClose: () => setConnected(false),
|
||||||
onStompError: async (frame) => {
|
onStompError: async (frame) => {
|
||||||
|
setConnected(false);
|
||||||
if (frame.headers?.message?.includes("Unauthorized")) {
|
if (frame.headers?.message?.includes("Unauthorized")) {
|
||||||
try {
|
try {
|
||||||
await refreshAccessToken();
|
await refreshAccessToken();
|
||||||
@@ -54,11 +66,18 @@ export function useStompClient(enabled, onConnect) {
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
client.activate();
|
|
||||||
clientRef.current = client;
|
clientRef.current = client;
|
||||||
|
// activate() сам не awaited — без catch любое исключение из beforeConnect
|
||||||
|
// всплывало бы как необработанный rejected promise.
|
||||||
|
Promise.resolve(client.activate()).catch((e) => {
|
||||||
|
console.warn("[stomp] activate failed", e);
|
||||||
|
});
|
||||||
|
|
||||||
return () => client.deactivate();
|
return () => {
|
||||||
}, [enabled]);
|
setConnected(false);
|
||||||
|
client.deactivate();
|
||||||
|
};
|
||||||
|
}, [enabled, onConnect]);
|
||||||
|
|
||||||
return { clientRef, connected };
|
return { clientRef, connected };
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -18,7 +18,12 @@ export function useTranscodingStatusPolling(advertisingId, enabled, path = "ads"
|
|||||||
const attemptsRef = useRef(0);
|
const attemptsRef = useRef(0);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!enabled || !advertisingId) return;
|
if (!enabled || !advertisingId) {
|
||||||
|
// Статус предыдущей сущности нельзя переносить на следующую: иначе
|
||||||
|
// новый элемент сразу получит терминальный статус и polling сразу выключится.
|
||||||
|
setStatus('PROCESSING');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
attemptsRef.current = 0;
|
attemptsRef.current = 0;
|
||||||
let cancelled = false;
|
let cancelled = false;
|
||||||
@@ -37,7 +42,7 @@ export function useTranscodingStatusPolling(advertisingId, enabled, path = "ads"
|
|||||||
const data = await res.json();
|
const data = await res.json();
|
||||||
if (cancelled) return;
|
if (cancelled) return;
|
||||||
|
|
||||||
setStatus(data.transcodingStatus);
|
setStatus(data.transcodingStatus ?? 'PROCESSING');
|
||||||
|
|
||||||
attemptsRef.current += 1;
|
attemptsRef.current += 1;
|
||||||
const isTerminal = TERMINAL_STATUSES.includes(data.transcodingStatus);
|
const isTerminal = TERMINAL_STATUSES.includes(data.transcodingStatus);
|
||||||
@@ -49,7 +54,15 @@ export function useTranscodingStatusPolling(advertisingId, enabled, path = "ads"
|
|||||||
setStatus('TIMEOUT');
|
setStatus('TIMEOUT');
|
||||||
}
|
}
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
|
if (cancelled) return;
|
||||||
console.warn('Status poll failed, retrying', err);
|
console.warn('Status poll failed, retrying', err);
|
||||||
|
// Ошибки тоже тратят попытки, иначе MAX_POLL_ATTEMPTS недостижим
|
||||||
|
// и запрос к несуществующему эндпоинту будет повторяться вечно.
|
||||||
|
attemptsRef.current += 1;
|
||||||
|
if (attemptsRef.current >= MAX_POLL_ATTEMPTS) {
|
||||||
|
setStatus('TIMEOUT');
|
||||||
|
return;
|
||||||
|
}
|
||||||
timeoutId = setTimeout(poll, POLL_INTERVAL_MS);
|
timeoutId = setTimeout(poll, POLL_INTERVAL_MS);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,30 +0,0 @@
|
|||||||
import { useEffect, useState } from 'react';
|
|
||||||
import { useStompClient } from './useStompClient'; // ваш существующий хук из чата
|
|
||||||
|
|
||||||
/**
|
|
||||||
* STOMP/WebSocket-подписка на статус транскодинга медиа.
|
|
||||||
* @param {number|string} advertisingId — id сущности
|
|
||||||
* @param {boolean} enabled — включать подписку
|
|
||||||
* @param {string} [path="ads"] — сегмент пути (например, "ads" или "fullscreen-ads")
|
|
||||||
* @returns {string} транскодинг-статус
|
|
||||||
*/
|
|
||||||
export function useTranscodingStatusSocket(advertisingId, enabled, path = "ads") {
|
|
||||||
const [status, setStatus] = useState('PROCESSING');
|
|
||||||
const stompClient = useStompClient();
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!enabled || !advertisingId || !stompClient?.connected) return;
|
|
||||||
|
|
||||||
const subscription = stompClient.subscribe(
|
|
||||||
`/topic/${path}/${advertisingId}/status`,
|
|
||||||
(message) => {
|
|
||||||
const payload = JSON.parse(message.body);
|
|
||||||
setStatus(payload.transcodingStatus);
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
return () => subscription.unsubscribe();
|
|
||||||
}, [advertisingId, enabled, path, stompClient]);
|
|
||||||
|
|
||||||
return status;
|
|
||||||
}
|
|
||||||
@@ -1,10 +1,17 @@
|
|||||||
import { useCallback, useEffect, useRef, useState } from "react";
|
import { useCallback, useEffect, useRef, useState } from "react";
|
||||||
|
import { useTranslation } from "react-i18next";
|
||||||
|
import { whenYmapsReady } from "../utils/ymapsApi";
|
||||||
|
|
||||||
const YANDEX_GEOCODER_API_KEY = process.env.REACT_APP_YANDEX_GEOCODER_KEY;
|
const YANDEX_GEOCODER_API_KEY = process.env.REACT_APP_YANDEX_GEOCODER_KEY;
|
||||||
|
|
||||||
const DEFAULT_CENTER = [55.751574, 37.573856];
|
const DEFAULT_CENTER = [55.751574, 37.573856];
|
||||||
|
|
||||||
export function useYandexMap(enabled, initialCoords = null, initialAddress = "") {
|
export function useYandexMap(enabled, initialCoords = null, initialAddress = "") {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
// tRef читается из эффекта инициализации карты. Добавлять t в его deps нельзя:
|
||||||
|
// смена языка тогда пересоздавала бы карту и теряла бы выбранную метку.
|
||||||
|
const tRef = useRef(t);
|
||||||
|
tRef.current = t;
|
||||||
const mapRef = useRef(null);
|
const mapRef = useRef(null);
|
||||||
const ymapRef = useRef(null);
|
const ymapRef = useRef(null);
|
||||||
const placemarkRef = useRef(null);
|
const placemarkRef = useRef(null);
|
||||||
@@ -16,6 +23,8 @@ export function useYandexMap(enabled, initialCoords = null, initialAddress = "")
|
|||||||
const [address, setAddress] = useState(initialAddress ?? "");
|
const [address, setAddress] = useState(initialAddress ?? "");
|
||||||
const addressRef = useRef(initialAddress ?? "");
|
const addressRef = useRef(initialAddress ?? "");
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
|
// Ошибка загрузки API карт: без неё пользователь смотрел бы в вечный спиннер.
|
||||||
|
const [loadError, setLoadError] = useState("");
|
||||||
// Всегда хранит последние координаты, чтобы при повторной инициализации
|
// Всегда хранит последние координаты, чтобы при повторной инициализации
|
||||||
// карты (например, при повторном открытии модалки) маркер появлялся там,
|
// карты (например, при повторном открытии модалки) маркер появлялся там,
|
||||||
// где пользователь его оставил, а не сбрасывался на initialCoords.
|
// где пользователь его оставил, а не сбрасывался на initialCoords.
|
||||||
@@ -127,13 +136,30 @@ export function useYandexMap(enabled, initialCoords = null, initialAddress = "")
|
|||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!enabled || !mapRef.current) return;
|
if (!enabled || !mapRef.current) return;
|
||||||
if (initializedRef.current) return; // уже инициализировали
|
if (initializedRef.current) return; // уже инициализировали
|
||||||
initializedRef.current = true;
|
|
||||||
|
|
||||||
if (window.ymaps?.ready) {
|
let cancelled = false;
|
||||||
window.ymaps.ready(init);
|
|
||||||
}
|
// Сбрасываем прошлую ошибку на новой попытке, иначе после успешной
|
||||||
|
// загрузки карты старая плашка об ошибке осталась бы на экране.
|
||||||
|
setLoadError("");
|
||||||
|
|
||||||
|
whenYmapsReady()
|
||||||
|
.then((ymaps) => {
|
||||||
|
if (cancelled) return;
|
||||||
|
initializedRef.current = true;
|
||||||
|
ymaps.ready(init);
|
||||||
|
})
|
||||||
|
.catch((e) => {
|
||||||
|
if (cancelled) return;
|
||||||
|
// API карт так и не подгрузился: сбрасываем флаг, чтобы следующая
|
||||||
|
// попытка открытия карты её повторила, и гасим бесконечный спиннер.
|
||||||
|
initializedRef.current = false;
|
||||||
|
setLoadError(tRef.current("post.mapLoadFailed"));
|
||||||
|
console.warn("Yandex Maps API failed to load:", e);
|
||||||
|
});
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
|
cancelled = true;
|
||||||
ymapRef.current?.destroy();
|
ymapRef.current?.destroy();
|
||||||
ymapRef.current = null;
|
ymapRef.current = null;
|
||||||
placemarkRef.current = null;
|
placemarkRef.current = null;
|
||||||
@@ -146,5 +172,5 @@ export function useYandexMap(enabled, initialCoords = null, initialAddress = "")
|
|||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
}, [enabled, init]);
|
}, [enabled, init]);
|
||||||
|
|
||||||
return { mapRef, coords, address, addressRef, loading, moveTo };
|
return { mapRef, coords, address, addressRef, loading, loadError, moveTo };
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -80,7 +80,8 @@
|
|||||||
"registrationError": "Registration error",
|
"registrationError": "Registration error",
|
||||||
"nameLabel": "Name",
|
"nameLabel": "Name",
|
||||||
"loginMinChars": "Minimum 3 characters",
|
"loginMinChars": "Minimum 3 characters",
|
||||||
"accountCreatedLoginManually": "Account created. Log in manually."
|
"accountCreatedLoginManually": "Account created. Log in manually.",
|
||||||
|
"autoLoginFailed": "Account created, but automatic sign-in failed — please log in manually."
|
||||||
},
|
},
|
||||||
"post": {
|
"post": {
|
||||||
"editTitle": "Edit ad",
|
"editTitle": "Edit ad",
|
||||||
@@ -110,6 +111,7 @@
|
|||||||
"geoDenied": "Location access denied",
|
"geoDenied": "Location access denied",
|
||||||
"geoUnsupported": "Geolocation is not available in this browser",
|
"geoUnsupported": "Geolocation is not available in this browser",
|
||||||
"geoTimeout": "Unable to determine your location",
|
"geoTimeout": "Unable to determine your location",
|
||||||
|
"mapLoadFailed": "Could not load the map. Check your connection or ad blocker and try again.",
|
||||||
"addressLabel": "Address",
|
"addressLabel": "Address",
|
||||||
"addressPlaceholder": "E.g. 123 Main St, New York",
|
"addressPlaceholder": "E.g. 123 Main St, New York",
|
||||||
"phoneLabel": "Phone number",
|
"phoneLabel": "Phone number",
|
||||||
@@ -130,6 +132,8 @@
|
|||||||
"deleteError": "Failed to delete the ad",
|
"deleteError": "Failed to delete the ad",
|
||||||
"deleteErrorWithStatus": "Failed to delete ad (error {{status}})",
|
"deleteErrorWithStatus": "Failed to delete ad (error {{status}})",
|
||||||
"statusUpdateError": "Failed to change the ad status.",
|
"statusUpdateError": "Failed to change the ad status.",
|
||||||
|
"serverError": "The server returned an error ({{status}})",
|
||||||
|
"unknownError": "Unknown error",
|
||||||
"nextStep": "Next",
|
"nextStep": "Next",
|
||||||
"backStep": "Back"
|
"backStep": "Back"
|
||||||
},
|
},
|
||||||
@@ -205,7 +209,9 @@
|
|||||||
"loading": "Loading reviews...",
|
"loading": "Loading reviews...",
|
||||||
"emptyTitle": "No reviews yet",
|
"emptyTitle": "No reviews yet",
|
||||||
"emptySub": "Be the first — leave a review about the platform",
|
"emptySub": "Be the first — leave a review about the platform",
|
||||||
"you": "You"
|
"you": "You",
|
||||||
|
"notSaved": "not saved",
|
||||||
|
"submitError": "Failed to submit your review"
|
||||||
},
|
},
|
||||||
"rightSidebar": {
|
"rightSidebar": {
|
||||||
"advertisement": "Advertisement",
|
"advertisement": "Advertisement",
|
||||||
|
|||||||
@@ -80,7 +80,8 @@
|
|||||||
"registrationError": "Ошибка регистрации",
|
"registrationError": "Ошибка регистрации",
|
||||||
"nameLabel": "Имя",
|
"nameLabel": "Имя",
|
||||||
"loginMinChars": "Минимум 3 символа",
|
"loginMinChars": "Минимум 3 символа",
|
||||||
"accountCreatedLoginManually": "Аккаунт создан. Войдите вручную"
|
"accountCreatedLoginManually": "Аккаунт создан. Войдите вручную",
|
||||||
|
"autoLoginFailed": "Аккаунт создан, но войти автоматически не удалось — войдите вручную"
|
||||||
},
|
},
|
||||||
"post": {
|
"post": {
|
||||||
"editTitle": "Редактировать объявление",
|
"editTitle": "Редактировать объявление",
|
||||||
@@ -110,6 +111,7 @@
|
|||||||
"geoDenied": "Доступ к геолокации запрещён",
|
"geoDenied": "Доступ к геолокации запрещён",
|
||||||
"geoUnsupported": "Геолокация недоступна в этом браузере",
|
"geoUnsupported": "Геолокация недоступна в этом браузере",
|
||||||
"geoTimeout": "Не удалось определить местоположение",
|
"geoTimeout": "Не удалось определить местоположение",
|
||||||
|
"mapLoadFailed": "Не удалось загрузить карту. Проверьте интернет или блокировщик рекламы и попробуйте снова.",
|
||||||
"addressLabel": "Адрес",
|
"addressLabel": "Адрес",
|
||||||
"addressPlaceholder": "Например: Москва, ул. Ленина, 5",
|
"addressPlaceholder": "Например: Москва, ул. Ленина, 5",
|
||||||
"phoneLabel": "Номер телефона",
|
"phoneLabel": "Номер телефона",
|
||||||
@@ -130,6 +132,8 @@
|
|||||||
"deleteError": "Не удалось удалить объявление",
|
"deleteError": "Не удалось удалить объявление",
|
||||||
"deleteErrorWithStatus": "Не удалось удалить объявление (ошибка {{status}})",
|
"deleteErrorWithStatus": "Не удалось удалить объявление (ошибка {{status}})",
|
||||||
"statusUpdateError": "Не удалось изменить статус объявления",
|
"statusUpdateError": "Не удалось изменить статус объявления",
|
||||||
|
"serverError": "Сервер вернул ошибку {{status}}",
|
||||||
|
"unknownError": "Неизвестная ошибка",
|
||||||
"nextStep": "Далее",
|
"nextStep": "Далее",
|
||||||
"backStep": "Назад"
|
"backStep": "Назад"
|
||||||
|
|
||||||
@@ -206,7 +210,9 @@
|
|||||||
"loading": "Загружаем отзывы...",
|
"loading": "Загружаем отзывы...",
|
||||||
"emptyTitle": "Отзывов пока нет",
|
"emptyTitle": "Отзывов пока нет",
|
||||||
"emptySub": "Станьте первым — оставьте отзыв о площадке",
|
"emptySub": "Станьте первым — оставьте отзыв о площадке",
|
||||||
"you": "Вы"
|
"you": "Вы",
|
||||||
|
"notSaved": "не сохранён",
|
||||||
|
"submitError": "Не удалось отправить отзыв"
|
||||||
},
|
},
|
||||||
"rightSidebar": {
|
"rightSidebar": {
|
||||||
"advertisement": "Реклама",
|
"advertisement": "Реклама",
|
||||||
|
|||||||
@@ -64,7 +64,7 @@ export default function ChatPage() {
|
|||||||
return sortMessages([...list, ...extra]);
|
return sortMessages([...list, ...extra]);
|
||||||
});
|
});
|
||||||
})
|
})
|
||||||
.catch(() => setLoadError(t('chat.loadError')));
|
.catch(() => setLoadError(t('chats.loadError')));
|
||||||
|
|
||||||
markAsRead(chatId);
|
markAsRead(chatId);
|
||||||
clearChatUnread(chatId);
|
clearChatUnread(chatId);
|
||||||
@@ -83,7 +83,7 @@ export default function ChatPage() {
|
|||||||
|
|
||||||
const sent = sendMessage(trimmed);
|
const sent = sendMessage(trimmed);
|
||||||
if (!sent) {
|
if (!sent) {
|
||||||
setSendError(t('chat.sendError'));
|
setSendError(t('chats.sendError'));
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
setInput("");
|
setInput("");
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
import { useCallback, useEffect, useState } from "react";
|
import { useCallback, useEffect, useState } from "react";
|
||||||
import CloseIcon from "../components/icons/CloseIcon";
|
import CloseIcon from "../components/icons/CloseIcon";
|
||||||
import RulesModal from "./RulesModal";
|
import RulesModal from "./RulesModal";
|
||||||
import { EMPTY_FORM, CATEGORY_KEYS } from "../config/feedConstants";
|
import { EMPTY_FORM, CATEGORIES } from "../config/feedConstants";
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import { usePostMutation } from "../hooks/usePostMutation";
|
import { usePostMutation } from "../hooks/usePostMutation";
|
||||||
import { useImageUpload, ACCEPT, MAX_SIZE_MB } from "../hooks/useImageUpload";
|
import { useImageUpload, ACCEPT, MAX_SIZE_MB } from "../hooks/useImageUpload";
|
||||||
@@ -67,7 +67,7 @@ export default function CreateUpdatePost({ onClose, onSuccess, initialData, admi
|
|||||||
? { latitude: initialData.latitude, longitude: initialData.longitude }
|
? { latitude: initialData.latitude, longitude: initialData.longitude }
|
||||||
: null;
|
: null;
|
||||||
|
|
||||||
const { mapRef, coords, address, addressRef, loading: mapLoading, moveTo } = useYandexMap(
|
const { mapRef, coords, address, addressRef, loading: mapLoading, loadError: mapLoadError, moveTo } = useYandexMap(
|
||||||
mapModalOpen,
|
mapModalOpen,
|
||||||
initialCoords,
|
initialCoords,
|
||||||
isEdit ? (initialData.location || "") : ""
|
isEdit ? (initialData.location || "") : ""
|
||||||
@@ -301,7 +301,9 @@ export default function CreateUpdatePost({ onClose, onSuccess, initialData, admi
|
|||||||
onChange={e => set("category", e.target.value)}
|
onChange={e => set("category", e.target.value)}
|
||||||
>
|
>
|
||||||
<option value="">{t('categories.select')}</option>
|
<option value="">{t('categories.select')}</option>
|
||||||
{CATEGORY_KEYS.map(k => <option key={k} value={t(k)}>{t(k)}</option>)}
|
{CATEGORIES.map(c => (
|
||||||
|
<option key={c.value} value={c.value}>{t(c.labelKey)}</option>
|
||||||
|
))}
|
||||||
</select>
|
</select>
|
||||||
{errors.category && <p className="f-err-msg">{errors.category}</p>}
|
{errors.category && <p className="f-err-msg">{errors.category}</p>}
|
||||||
</div>
|
</div>
|
||||||
@@ -317,6 +319,7 @@ export default function CreateUpdatePost({ onClose, onSuccess, initialData, admi
|
|||||||
{form.address ? `📍 ${form.address}` : t('post.mapPickLabel')}
|
{form.address ? `📍 ${form.address}` : t('post.mapPickLabel')}
|
||||||
</button>
|
</button>
|
||||||
{!coords && <p className="f-hint">{t('post.mapHint')}</p>}
|
{!coords && <p className="f-hint">{t('post.mapHint')}</p>}
|
||||||
|
{mapLoadError && <p className="f-err-msg">{mapLoadError}</p>}
|
||||||
{errors.map && <p className="f-err-msg">{errors.map}</p>}
|
{errors.map && <p className="f-err-msg">{errors.map}</p>}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -27,9 +27,11 @@ import { useInfiniteScroll } from "../hooks/useInfiniteScroll";
|
|||||||
import { useModals } from "../hooks/useModals";
|
import { useModals } from "../hooks/useModals";
|
||||||
import { useFeedActions } from "../hooks/useFeedActions";
|
import { useFeedActions } from "../hooks/useFeedActions";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
|
import { CATEGORY_ITEM, CATEGORY_OTHER, CATEGORY_PET } from "../config/feedConstants";
|
||||||
import { useProfile } from "../hooks/useProfile";
|
import { useProfile } from "../hooks/useProfile";
|
||||||
import { useFullscreenAdTrigger } from "../hooks/useFullscreenAdTrigger";
|
import { useFullscreenAdTrigger } from "../hooks/useFullscreenAdTrigger";
|
||||||
import FullscreenAdOverlay from "../components/FullscreenAdOverlay";
|
import FullscreenAdOverlay from "../components/FullscreenAdOverlay";
|
||||||
|
import Toast from "../components/Toast";
|
||||||
import type { ComponentType } from "react";
|
import type { ComponentType } from "react";
|
||||||
|
|
||||||
// Legacy .jsx-модули: TS инферирует их типы из JS неточно (бывают «странные»
|
// Legacy .jsx-модули: TS инферирует их типы из JS неточно (бывают «странные»
|
||||||
@@ -328,10 +330,13 @@ export default function MainFeed() {
|
|||||||
result = feed.ads;
|
result = feed.ads;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Сравниваем с теми же значениями, что уходят на бэкенд (CATEGORIES),
|
||||||
|
// а не с русскими литералами: интерфейс-то может быть на английском.
|
||||||
if (activeNav === "items") {
|
if (activeNav === "items") {
|
||||||
result = result.filter(ad => ["Вещь", "Другое"].includes(ad.category));
|
result = result.filter((ad: AnyAds[number]) =>
|
||||||
|
[CATEGORY_ITEM, CATEGORY_OTHER].includes(ad.category));
|
||||||
} else if (activeNav === "pets") {
|
} else if (activeNav === "pets") {
|
||||||
result = result.filter(ad => ad.category === "Питомец");
|
result = result.filter((ad: AnyAds[number]) => ad.category === CATEGORY_PET);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (typeFilter) {
|
if (typeFilter) {
|
||||||
@@ -514,6 +519,14 @@ export default function MainFeed() {
|
|||||||
|
|
||||||
{fullscreenAd && <FullscreenAdOverlay ad={fullscreenAd} onClose={closeFullscreenAd} />}
|
{fullscreenAd && <FullscreenAdOverlay ad={fullscreenAd} onClose={closeFullscreenAd} />}
|
||||||
|
|
||||||
|
{/* Ошибки удаления/отметки «найдено»: без этого тоста неудачный запрос
|
||||||
|
выглядел бы как «ничего не произошло». */}
|
||||||
|
<Toast
|
||||||
|
message={actions.error}
|
||||||
|
type="error"
|
||||||
|
onDismiss={actions.clearError}
|
||||||
|
/>
|
||||||
|
|
||||||
<BottomNav
|
<BottomNav
|
||||||
activeTab={isMapView ? "map" : isSearchView ? "search" : "home"}
|
activeTab={isMapView ? "map" : isSearchView ? "search" : "home"}
|
||||||
hasFilters={hasActiveFilters}
|
hasFilters={hasActiveFilters}
|
||||||
|
|||||||
@@ -44,7 +44,7 @@ export default function PostOnFeed({ ad, onEdit, onDelete, onMarkFound, onReopen
|
|||||||
};
|
};
|
||||||
|
|
||||||
const imageUrl = getImageUrl(ad.images?.[0]);
|
const imageUrl = getImageUrl(ad.images?.[0]);
|
||||||
const address = ad.city;
|
const address = ad.address || ad.city || ad.district || ad.location;
|
||||||
const createdAt = ad.createdAt
|
const createdAt = ad.createdAt
|
||||||
? new Date(ad.createdAt).toLocaleDateString("ru-RU")
|
? new Date(ad.createdAt).toLocaleDateString("ru-RU")
|
||||||
: null;
|
: null;
|
||||||
|
|||||||
@@ -18,7 +18,7 @@ import { useProfile } from "../hooks/useProfile";
|
|||||||
export default function ReviewsPage() {
|
export default function ReviewsPage() {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const { user, token, isAuthenticated, updateUser } = useAuthContext();
|
const { user, isAuthenticated, updateUser } = useAuthContext();
|
||||||
const { fetchProfile } = useProfile();
|
const { fetchProfile } = useProfile();
|
||||||
|
|
||||||
const [sidebarOpen, setSidebarOpen] = useState(false);
|
const [sidebarOpen, setSidebarOpen] = useState(false);
|
||||||
@@ -45,7 +45,6 @@ export default function ReviewsPage() {
|
|||||||
reviews, loading, error, submitting, submitError,
|
reviews, loading, error, submitting, submitError,
|
||||||
loadReviews, submitReview, avgRating, distribution,
|
loadReviews, submitReview, avgRating, distribution,
|
||||||
} = useReviews({
|
} = useReviews({
|
||||||
token,
|
|
||||||
isAuthenticated,
|
isAuthenticated,
|
||||||
onAuthRequired: () => setAuthModalOpen(true),
|
onAuthRequired: () => setAuthModalOpen(true),
|
||||||
authorFallbackName: profileData.firstName || t('reviews.you'),
|
authorFallbackName: profileData.firstName || t('reviews.you'),
|
||||||
|
|||||||
@@ -2,6 +2,13 @@ const STORAGE_KEY = "nakhodka:chatPosts";
|
|||||||
|
|
||||||
const postByChatId = new Map();
|
const postByChatId = new Map();
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Map не приводит ключи к строке, а chat.id из JSON приходит числом, тогда как
|
||||||
|
* из useParams() — всегда строкой. Без нормализации запись просто не
|
||||||
|
* находилась (а после перезагрузки страницы в кеше жили оба варианта ключа).
|
||||||
|
*/
|
||||||
|
const key = (chatId) => String(chatId);
|
||||||
|
|
||||||
/** Восстанавливает кеш постов из localStorage (выживает при перезагрузке страницы). */
|
/** Восстанавливает кеш постов из localStorage (выживает при перезагрузке страницы). */
|
||||||
function loadFromStorage() {
|
function loadFromStorage() {
|
||||||
try {
|
try {
|
||||||
@@ -32,18 +39,18 @@ function persist() {
|
|||||||
loadFromStorage();
|
loadFromStorage();
|
||||||
|
|
||||||
export function setPostForChat(chatId, post) {
|
export function setPostForChat(chatId, post) {
|
||||||
postByChatId.set(chatId, post);
|
postByChatId.set(key(chatId), post);
|
||||||
persist();
|
persist();
|
||||||
}
|
}
|
||||||
|
|
||||||
export function getPostForChat(chatId) {
|
export function getPostForChat(chatId) {
|
||||||
return postByChatId.get(chatId);
|
return postByChatId.get(key(chatId));
|
||||||
}
|
}
|
||||||
|
|
||||||
export function cachePostsFromChats(chats) {
|
export function cachePostsFromChats(chats) {
|
||||||
for (const chat of chats) {
|
for (const chat of chats) {
|
||||||
if (chat.post) {
|
if (chat.post) {
|
||||||
postByChatId.set(chat.id, chat.post);
|
postByChatId.set(key(chat.id), chat.post);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (chats.length) persist();
|
if (chats.length) persist();
|
||||||
@@ -51,16 +58,6 @@ export function cachePostsFromChats(chats) {
|
|||||||
|
|
||||||
/** Удаляет запись при удалении конкретного чата. */
|
/** Удаляет запись при удалении конкретного чата. */
|
||||||
export function removePostForChat(chatId) {
|
export function removePostForChat(chatId) {
|
||||||
postByChatId.delete(chatId);
|
postByChatId.delete(key(chatId));
|
||||||
persist();
|
persist();
|
||||||
}
|
}
|
||||||
|
|
||||||
/** Полностью очищает кеш — вызывать при logout(), чтобы не хранить данные предыдущей сессии. */
|
|
||||||
export function clearPostCache() {
|
|
||||||
postByChatId.clear();
|
|
||||||
try {
|
|
||||||
localStorage.removeItem(STORAGE_KEY);
|
|
||||||
} catch (e) {
|
|
||||||
// ignore
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -1,308 +0,0 @@
|
|||||||
@import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700;800;900&display=swap');
|
|
||||||
|
|
||||||
/* ─── Page ──────────────────────────────────────────────────────────────────── */
|
|
||||||
.auth-page {
|
|
||||||
font-family: 'Onest', sans-serif;
|
|
||||||
min-height: 100vh;
|
|
||||||
display: flex; align-items: center; justify-content: center;
|
|
||||||
background: radial-gradient(ellipse at 30% 40%, #1a2340 0%, #0d1018 60%);
|
|
||||||
overflow: hidden; position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-glow {
|
|
||||||
position: fixed; top: 40%; right: 0;
|
|
||||||
width: 500px; height: 400px;
|
|
||||||
background: radial-gradient(ellipse, #0f2a22 0%, transparent 70%);
|
|
||||||
pointer-events: none; opacity: 0.7;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ─── Floating icons ────────────────────────────────────────────────────────── */
|
|
||||||
.fi {
|
|
||||||
position: fixed;
|
|
||||||
opacity: 0.13;
|
|
||||||
pointer-events: none;
|
|
||||||
user-select: none;
|
|
||||||
animation: float 7s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
@keyframes float {
|
|
||||||
0%, 100% { transform: translateY(0) rotate(-6deg); }
|
|
||||||
50% { transform: translateY(-18px) rotate(6deg); }
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ─── Card ──────────────────────────────────────────────────────────────────── */
|
|
||||||
.auth-card {
|
|
||||||
position: relative; z-index: 10; width: 375px;
|
|
||||||
background: linear-gradient(155deg, #1d2436 0%, #131720 100%);
|
|
||||||
border: 1px solid rgba(255,255,255,0.08);
|
|
||||||
border-radius: 30px; padding: 36px 38px 30px;
|
|
||||||
box-shadow: 0 40px 100px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.03);
|
|
||||||
/* height transition — карточка плавно меняет размер при смене формы */
|
|
||||||
transition: height 0.35s ease;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Появление карточки / контента */
|
|
||||||
.card-in {
|
|
||||||
animation: cardIn .45s cubic-bezier(.34,1.56,.64,1) both;
|
|
||||||
}
|
|
||||||
@keyframes cardIn {
|
|
||||||
from { opacity: 0; transform: scale(.92) translateY(30px); }
|
|
||||||
to { opacity: 1; transform: scale(1) translateY(0); }
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Уход карточки при переключении */
|
|
||||||
.card-out {
|
|
||||||
animation: cardOut .3s cubic-bezier(.4,0,.6,1) both;
|
|
||||||
}
|
|
||||||
@keyframes cardOut {
|
|
||||||
from { opacity: 1; transform: scale(1) translateY(0); }
|
|
||||||
to { opacity: 0; transform: scale(.94) translateY(-20px); }
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Контент формы — появляется снизу при смене */
|
|
||||||
.form-body {
|
|
||||||
animation: formIn .4s cubic-bezier(.34,1.56,.64,1) both;
|
|
||||||
}
|
|
||||||
@keyframes formIn {
|
|
||||||
from { opacity: 0; transform: translateY(22px); }
|
|
||||||
to { opacity: 1; transform: translateY(0); }
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Переход между шагами регистрации */
|
|
||||||
@keyframes stepIn {
|
|
||||||
from { opacity: 0; transform: translateX(18px) scale(.98); }
|
|
||||||
to { opacity: 1; transform: translateX(0) scale(1); }
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ─── Logo ──────────────────────────────────────────────────────────────────── */
|
|
||||||
.logo-wrap { text-align: center; margin-bottom: 2px; }
|
|
||||||
|
|
||||||
@keyframes logoPulse {
|
|
||||||
0%, 100% { filter: drop-shadow(0 0 18px rgba(45,224,200,.45)); }
|
|
||||||
50% { filter: drop-shadow(0 0 38px rgba(45,224,200,.8)); }
|
|
||||||
}
|
|
||||||
/* Apply this class to your MagnifierLogo svg if needed */
|
|
||||||
.logo-pulse { animation: logoPulse 3s ease-in-out infinite; }
|
|
||||||
|
|
||||||
/* ─── Typography ────────────────────────────────────────────────────────────── */
|
|
||||||
.auth-title {
|
|
||||||
text-align: center; color: #fff;
|
|
||||||
font-size: 2rem; font-weight: 900;
|
|
||||||
letter-spacing: -0.5px; margin: 12px 0 0;
|
|
||||||
}
|
|
||||||
.form-subtitle {
|
|
||||||
text-align: center; color: rgba(255,255,255,0.35);
|
|
||||||
font-size: 0.83rem; margin: 4px 0 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ─── Step dots ─────────────────────────────────────────────────────────────── */
|
|
||||||
.step-dots {
|
|
||||||
display: flex; align-items: center; justify-content: center;
|
|
||||||
gap: 6px; margin-bottom: 18px;
|
|
||||||
}
|
|
||||||
.dot {
|
|
||||||
width: 8px; height: 8px; border-radius: 50%;
|
|
||||||
background: rgba(255,255,255,0.15);
|
|
||||||
transition: all 0.35s cubic-bezier(.34,1.56,.64,1);
|
|
||||||
}
|
|
||||||
.dot-active {
|
|
||||||
width: 26px; border-radius: 4px;
|
|
||||||
background: #2de0c8;
|
|
||||||
}
|
|
||||||
.dot-done {
|
|
||||||
background: rgba(45,224,200,0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ─── Fields ────────────────────────────────────────────────────────────────── */
|
|
||||||
.field-wrap { margin-bottom: 12px; }
|
|
||||||
|
|
||||||
.field-label {
|
|
||||||
display: block; color: rgba(255,255,255,0.45);
|
|
||||||
font-size: 0.73rem; font-weight: 700;
|
|
||||||
letter-spacing: 0.6px; margin-bottom: 5px;
|
|
||||||
text-transform: uppercase; font-family: 'Onest', sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
.field {
|
|
||||||
width: 100%; box-sizing: border-box;
|
|
||||||
background: rgba(255,255,255,0.055);
|
|
||||||
border: 1.5px solid rgba(255,255,255,0.09);
|
|
||||||
border-radius: 14px; padding: 13px 18px;
|
|
||||||
color: #fff; font-family: 'Onest', sans-serif;
|
|
||||||
font-size: 0.93rem; outline: none;
|
|
||||||
transition: border-color .2s, background .2s, box-shadow .2s;
|
|
||||||
}
|
|
||||||
.field:focus {
|
|
||||||
border-color: #2de0c8;
|
|
||||||
background: rgba(45,224,200,.07);
|
|
||||||
box-shadow: 0 0 0 3px rgba(45,224,200,.12);
|
|
||||||
}
|
|
||||||
.field::placeholder { color: rgba(255,255,255,.32); }
|
|
||||||
|
|
||||||
.field-err { border-color: rgba(255,107,107,0.55) !important; box-shadow: 0 0 0 3px rgba(255,107,107,0.09) !important; }
|
|
||||||
.field-ok { border-color: rgba(45,224,200,0.45) !important; }
|
|
||||||
|
|
||||||
.eye-btn {
|
|
||||||
position: absolute; right: 13px; top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
background: none; border: none; cursor: pointer;
|
|
||||||
color: rgba(255,255,255,0.35); font-size: 1.05rem; line-height: 1;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-wrap {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-wrap .eye-btn {
|
|
||||||
position: absolute;
|
|
||||||
right: 13px;
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-wrap .field {
|
|
||||||
padding-right: 44px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ─── Password strength ──────────────────────────────────────────────────────── */
|
|
||||||
.strength-bar { display: flex; gap: 4px; margin-top: 7px; }
|
|
||||||
.seg {
|
|
||||||
flex: 1; height: 3px; border-radius: 2px;
|
|
||||||
background: rgba(255,255,255,0.1);
|
|
||||||
transition: background 0.3s;
|
|
||||||
}
|
|
||||||
.sw { background: #ff6b6b; }
|
|
||||||
.sm { background: #ffd166; }
|
|
||||||
.ss { background: #2de0c8; }
|
|
||||||
.strength-label { font-size: 0.72rem; text-align: right; margin-top: 3px; }
|
|
||||||
|
|
||||||
/* ─── Messages ──────────────────────────────────────────────────────────────── */
|
|
||||||
.err-msg {
|
|
||||||
color: #ff6b6b; font-size: 0.8rem;
|
|
||||||
margin-top: 5px; padding-left: 2px;
|
|
||||||
font-family: 'Onest', sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ─── Confirm box ───────────────────────────────────────────────────────────── */
|
|
||||||
.confirm-box {
|
|
||||||
background: rgba(255,255,255,0.04);
|
|
||||||
border: 1px solid rgba(255,255,255,0.08);
|
|
||||||
border-radius: 18px; padding: 16px 20px; margin-bottom: 14px;
|
|
||||||
}
|
|
||||||
.confirm-row { display: flex; justify-content: space-between; align-items: center; }
|
|
||||||
.confirm-label { color: rgba(255,255,255,0.4); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.5px; }
|
|
||||||
.confirm-val { color: #fff; font-weight: 700; }
|
|
||||||
.confirm-val.accent { color: #2de0c8; }
|
|
||||||
.confirm-divider { height: 1px; background: rgba(255,255,255,0.06); margin: 10px 0; }
|
|
||||||
|
|
||||||
/* ─── Buttons ───────────────────────────────────────────────────────────────── */
|
|
||||||
.btn-primary {
|
|
||||||
width: 100%;
|
|
||||||
background: linear-gradient(90deg, #1fc9b0, #2de0c8, #1fc9b0);
|
|
||||||
background-size: 200% 100%;
|
|
||||||
border: none; border-radius: 14px; padding: 15px;
|
|
||||||
color: #082320; font-family: 'Onest', sans-serif;
|
|
||||||
font-size: 1.05rem; font-weight: 900; cursor: pointer;
|
|
||||||
margin-top: 6px;
|
|
||||||
box-shadow: 0 6px 24px rgba(45,224,200,0.32);
|
|
||||||
animation: shimmer 3s linear infinite;
|
|
||||||
transition: opacity .15s, transform .15s;
|
|
||||||
}
|
|
||||||
.btn-primary:hover:not(:disabled) { opacity: .88; transform: translateY(-2px); }
|
|
||||||
.btn-primary:active:not(:disabled) { transform: translateY(0); }
|
|
||||||
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
|
|
||||||
|
|
||||||
@keyframes shimmer {
|
|
||||||
0% { background-position: 200% 0; }
|
|
||||||
100% { background-position: -200% 0; }
|
|
||||||
}
|
|
||||||
|
|
||||||
.ghost-btn {
|
|
||||||
display: block; width: 100%; text-align: center;
|
|
||||||
color: #2de0c8; font-size: 0.87rem; margin-top: 13px;
|
|
||||||
background: none; border: none; cursor: pointer;
|
|
||||||
font-family: 'Onest', sans-serif;
|
|
||||||
transition: opacity .15s;
|
|
||||||
}
|
|
||||||
.ghost-btn:hover { opacity: 0.75; }
|
|
||||||
|
|
||||||
.back-btn {
|
|
||||||
display: block; width: 100%; text-align: center;
|
|
||||||
color: rgba(255,255,255,0.35); font-size: 0.85rem; margin-top: 11px;
|
|
||||||
background: none; border: none; cursor: pointer;
|
|
||||||
font-family: 'Onest', sans-serif;
|
|
||||||
transition: color .15s;
|
|
||||||
}
|
|
||||||
.back-btn:hover { color: rgba(255,255,255,0.6); }
|
|
||||||
|
|
||||||
/* ─── Switch row ────────────────────────────────────────────────────────────── */
|
|
||||||
.switch-row {
|
|
||||||
text-align: center; color: rgba(255,255,255,0.4);
|
|
||||||
font-size: 0.87rem; margin-top: 13px;
|
|
||||||
}
|
|
||||||
.link-btn {
|
|
||||||
color: #2de0c8; background: none; border: none;
|
|
||||||
cursor: pointer; font-family: 'Onest', sans-serif;
|
|
||||||
font-size: inherit; font-weight: 700; padding: 0;
|
|
||||||
transition: opacity .15s;
|
|
||||||
}
|
|
||||||
.link-btn:hover { opacity: 0.75; text-decoration: underline; }
|
|
||||||
|
|
||||||
/* ─── Dots btn ──────────────────────────────────────────────────────────────── */
|
|
||||||
.dots-btn {
|
|
||||||
position: absolute; top: 18px; right: 20px;
|
|
||||||
background: none; border: none;
|
|
||||||
color: rgba(255,255,255,0.25); font-size: 1.3rem;
|
|
||||||
cursor: pointer; letter-spacing: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ─── Success ───────────────────────────────────────────────────────────────── */
|
|
||||||
.success-wrap { text-align: center; padding: 16px 0 8px; }
|
|
||||||
.success-icon {
|
|
||||||
font-size: 3.8rem; display: block; margin-bottom: 14px;
|
|
||||||
animation: pop .55s cubic-bezier(.34,1.56,.64,1) both;
|
|
||||||
}
|
|
||||||
@keyframes pop {
|
|
||||||
from { transform: scale(0) rotate(-20deg); opacity: 0; }
|
|
||||||
to { transform: scale(1) rotate(0deg); opacity: 1; }
|
|
||||||
}
|
|
||||||
.success-title { color: #2de0c8; font-size: 1.45rem; font-weight: 900; margin-bottom: 6px; }
|
|
||||||
.success-sub { color: rgba(255,255,255,0.4); font-size: 0.88rem; line-height: 1.5; }
|
|
||||||
|
|
||||||
.success-wrap {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.success-icon {
|
|
||||||
background-color: #2de0c8;
|
|
||||||
-webkit-mask: url("../assets/success.png") no-repeat center;
|
|
||||||
mask: url("../assets/success.png") no-repeat center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logoSvg {
|
|
||||||
width: 130px;
|
|
||||||
height: 130px;
|
|
||||||
animation: logoPulse 3s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-modal {
|
|
||||||
width: 420px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-form-error {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-submit-btn {
|
|
||||||
margin-top: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.auth-row {
|
|
||||||
text-align: center;
|
|
||||||
margin-top: 14px;
|
|
||||||
color: rgba(255,255,255,.45);
|
|
||||||
font-size: .85rem
|
|
||||||
}
|
|
||||||
@@ -1,54 +0,0 @@
|
|||||||
@import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700;800;900&display=swap');
|
|
||||||
|
|
||||||
.fi {
|
|
||||||
position: fixed;
|
|
||||||
opacity: 0.15;
|
|
||||||
filter: grayscale(1) brightness(2);
|
|
||||||
pointer-events: none;
|
|
||||||
user-select: none;
|
|
||||||
animation: float 7s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
@keyframes float {
|
|
||||||
0%, 100% { transform: translateY(0) rotate(-6deg); }
|
|
||||||
50% { transform: translateY(-18px) rotate(6deg); }
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-in {
|
|
||||||
animation: cardIn .7s cubic-bezier(.34,1.56,.64,1) both;
|
|
||||||
}
|
|
||||||
@keyframes cardIn {
|
|
||||||
from { opacity: 0; transform: scale(.86) translateY(40px); }
|
|
||||||
to { opacity: 1; transform: scale(1) translateY(0); }
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes logoPulse {
|
|
||||||
0%, 100% { filter: drop-shadow(0 0 18px rgba(var(--teal-rgb), .45)); }
|
|
||||||
50% { filter: drop-shadow(0 0 38px rgba(var(--teal-rgb), .8)); }
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes shimmer {
|
|
||||||
0% { background-position: 200% 0; }
|
|
||||||
100% { background-position: -200% 0; }
|
|
||||||
}
|
|
||||||
|
|
||||||
.li:focus {
|
|
||||||
border-color: var(--teal) !important;
|
|
||||||
background: rgba(var(--teal-rgb), .07) !important;
|
|
||||||
box-shadow: 0 0 0 3px rgba(var(--teal-rgb), .12) !important;
|
|
||||||
}
|
|
||||||
.li::placeholder { color: rgba(255,255,255,.32); }
|
|
||||||
|
|
||||||
.btn-l:hover { opacity: .88; transform: translateY(-2px); transition: all .15s; }
|
|
||||||
.btn-l:active { transform: translateY(0); }
|
|
||||||
|
|
||||||
.soc:hover {
|
|
||||||
background: rgba(255,255,255,.1) !important;
|
|
||||||
border-color: rgba(255,255,255,.22) !important;
|
|
||||||
transform: translateY(-1px);
|
|
||||||
transition: all .2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.div-line::before, .div-line::after {
|
|
||||||
content: ''; flex: 1;
|
|
||||||
height: 1px; background: rgba(255,255,255,.08);
|
|
||||||
}
|
|
||||||
@@ -12,10 +12,23 @@ function generateAdSessionId() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export function getAdSessionId() {
|
export function getAdSessionId() {
|
||||||
let sessionId = localStorage.getItem(AD_SESSION_KEY);
|
// localStorage бросает в приватном режиме Safari и при отключённом
|
||||||
if (!sessionId) {
|
// хранилище. Здесь это ломало не только трекинг, но и сам клик по рекламе
|
||||||
sessionId = generateAdSessionId();
|
// (id читается до window.open), поэтому падение деградируем до временного id.
|
||||||
|
let persisted = null;
|
||||||
|
try {
|
||||||
|
persisted = localStorage.getItem(AD_SESSION_KEY);
|
||||||
|
} catch {
|
||||||
|
persisted = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (persisted) return persisted;
|
||||||
|
|
||||||
|
const sessionId = generateAdSessionId();
|
||||||
|
try {
|
||||||
localStorage.setItem(AD_SESSION_KEY, sessionId);
|
localStorage.setItem(AD_SESSION_KEY, sessionId);
|
||||||
|
} catch {
|
||||||
|
// хранилище недоступно — отдаём id без persist
|
||||||
}
|
}
|
||||||
return sessionId;
|
return sessionId;
|
||||||
}
|
}
|
||||||
@@ -14,7 +14,10 @@ export function formatPhone(val) {
|
|||||||
: digits;
|
: digits;
|
||||||
let result = "+7";
|
let result = "+7";
|
||||||
if (local.length > 0) result += " (" + local.slice(0, 3);
|
if (local.length > 0) result += " (" + local.slice(0, 3);
|
||||||
|
// Скобку закрываем сразу же: иначе при 1–2 цифрах поле показывало
|
||||||
|
// «+7 (9» / «+7 (91» и каретка прыгала при каждом нажатии.
|
||||||
if (local.length >= 3) result += ") " + local.slice(3, 6);
|
if (local.length >= 3) result += ") " + local.slice(3, 6);
|
||||||
|
else if (local.length > 0) result += ")";
|
||||||
if (local.length >= 6) result += "-" + local.slice(6, 8);
|
if (local.length >= 6) result += "-" + local.slice(6, 8);
|
||||||
if (local.length >= 8) result += "-" + local.slice(8, 10);
|
if (local.length >= 8) result += "-" + local.slice(8, 10);
|
||||||
return result;
|
return result;
|
||||||
|
|||||||
@@ -1,3 +0,0 @@
|
|||||||
export function isMobileDevice() {
|
|
||||||
return /Mobi|Android|iPhone/i.test(navigator.userAgent);
|
|
||||||
}
|
|
||||||
@@ -2,14 +2,20 @@ import i18n from '../i18n';
|
|||||||
|
|
||||||
export function validatePostForm(form) {
|
export function validatePostForm(form) {
|
||||||
const errors = {};
|
const errors = {};
|
||||||
if (!form.title.trim()) errors.title = i18n.t('validation.titleRequired');
|
// Поля нормализуем через ??: форма могла прийти без ключа (например, из
|
||||||
if (!form.description.trim()) errors.description = i18n.t('validation.descriptionRequired');
|
// нового вызывающего кода), и .trim() на undefined уронил бы форму
|
||||||
if (!form.category) errors.category = i18n.t('validation.categoryRequired');
|
// с TypeError вместо нормального сообщения валидации.
|
||||||
|
const title = (form.title ?? "").trim();
|
||||||
|
const description = (form.description ?? "").trim();
|
||||||
|
|
||||||
|
if (!title) errors.title = i18n.t('validation.titleRequired');
|
||||||
|
if (!description) errors.description = i18n.t('validation.descriptionRequired');
|
||||||
|
if (!form.category) errors.category = i18n.t('validation.categoryRequired');
|
||||||
|
|
||||||
// Телефон обязателен для объявления (в отличие от профиля) — проверяем
|
// Телефон обязателен для объявления (в отличие от профиля) — проверяем
|
||||||
// количество цифр, а не просто пустоту, т.к. form.phone форматируется
|
// количество цифр, а не просто пустоту, т.к. form.phone форматируется
|
||||||
// через formatPhone и всегда содержит минимум "+7".
|
// через formatPhone и всегда содержит минимум "+7".
|
||||||
if (form.phone.replace(/\D/g, "").length < 11) {
|
if ((form.phone ?? "").replace(/\D/g, "").length < 11) {
|
||||||
errors.phone = i18n.t('validation.phoneRequired');
|
errors.phone = i18n.t('validation.phoneRequired');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user