admin/nahodka-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed code v2

Browse Source
This commit is contained in:
SlimusMinus
2026-08-12 00:38:04 +03:00
parent fe3c91446a
commit e45c9326ed
19 changed files with 233 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/profile/ProfileFormFields.jsx
View File

@@ -124,13 +124,12 @@ function ContactFields({ form, errors, onChange, onPhoneChange }) {
}
// ─── Submit button ──────────────────────────────────────────────────────────
function SubmitButton({ loading, onSubmit }) {
function SubmitButton({ loading }) {
const { t } = useTranslation();
return (
<button
className="f-m-submit"
type="submit"
onClick={onSubmit}
disabled={loading}
>
<div className="f-m-submit-row">

12
src/components/profile/ProfileModal.jsx
View File

@@ -69,12 +69,12 @@ export default function ProfileModal({ onClose, initialData = {} }) {
avatar: newAvatars.length > 0 ? newAvatars[0] : (keptExisting.length > 0 ? keptExisting[0] : null),
};
const updatedUser = await updateProfile(user?.id, profileData);
if (updatedUser) {
updateUser(updatedUser);
const result = await updateProfile(user?.id, profileData);
if (result.success) {
updateUser(result.data);
onClose();
}
// при неудаче result.error уже отражена в saveError через error state хука
};
return (
@@ -116,9 +116,9 @@ export default function ProfileModal({ onClose, initialData = {} }) {
onPhoneChange={handlePhoneChange}
/>
{saveError && <p className="f-err-msg" style={{ marginBottom: 10 }}>{saveError}</p>}
{saveError && <p className="f-err-msg auth-form-error">{saveError}</p>}
<SubmitButton loading={compressing || saving} onSubmit={handleSubmit} />
<SubmitButton loading={compressing || saving} />
<button
type="button"

2
src/config/authConstants.js
View File

@@ -7,4 +7,4 @@ export function getImageUrl(filename) {
return `${API_URL}/api/v1/files/${filename}`;
}
export const SUPPORT_EMAIL = import.meta.env.VITE_SUPPORT_EMAIL || "support@nakhodka.app";
export const SUPPORT_EMAIL = process.env.REACT_APP_SUPPORT_EMAIL || "support@nakhodka.app";

10
src/context/AuthContext.jsx
View File

@@ -1,5 +1,7 @@
// src/context/AuthContext.jsx
import { createContext, useContext, useState, useCallback } from "react";
import { saveTokens, clearTokens, getAccessToken } from "../api/apiClient";
import { clearPostCache } from "../stores/chatPostStore";
const AuthContext = createContext(null);
@@ -32,9 +34,15 @@ export function AuthProvider({ children }) {
setToken(tokenStr);
}, []);
/** Очищает все данные аутентификации (access, refresh, user). */
/**
* Очищает все данные аутентификации (access, refresh, user) и модульные
* кеши, привязанные к сессии пользователя (например, chatPostStore), —
* иначе данные предыдущего пользователя могут "пережить" logout на этом
* же устройстве.
*/
const logout = useCallback(() => {
clearTokens();
clearPostCache();
setUser(null);
setToken(null);
}, []);

56
src/hooks/useChatSocket.js
View File

@@ -1,60 +1,22 @@
import { useEffect, useRef, useState, useCallback } from "react";
import { Client } from "@stomp/stompjs";
import SockJS from "sockjs-client";
import { API_URL } from "../config/authConstants";
import { getAccessToken, refreshAccessToken } from "../api/apiClient";
// src/hooks/useChatSocket.js
import { useEffect, useRef, useCallback } from "react";
import { useStompClient, parseStompMessage } from "./useStompClient";
export function useChatSocket(chatId, onMessage) {
const clientRef = useRef(null);
const onMessageRef = useRef(onMessage);
const [connected, setConnected] = useState(false);
// Держим актуальный колбэк в ref, чтобы не пересоздавать соединение
// при каждом ре-рендере родителя из-за нового onMessage
useEffect(() => {
onMessageRef.current = onMessage;
}, [onMessage]);
useEffect(() => {
if (!chatId) return;
const client = new Client({
webSocketFactory: () => new SockJS(`${API_URL}/ws`),
reconnectDelay: 3000,
beforeConnect: async () => {
client.connectHeaders = {
Authorization: `Bearer ${getAccessToken()}`,
};
},
onConnect: () => {
setConnected(true);
client.subscribe(`/topic/chat/${chatId}`, (msg) => {
try {
const body = JSON.parse(msg.body);
onMessageRef.current(body);
} catch (e) {
console.error("Failed to parse chat message:", e);
}
});
},
onDisconnect: () => setConnected(false),
onStompError: async (frame) => {
if (frame.headers?.message?.includes("Unauthorized")) {
try {
await refreshAccessToken();
} catch {
// refresh тоже не удался — дальше решает общий логин-флоу (redirect на /)
}
}
},
const handleConnect = useCallback((client) => {
client.subscribe(`/topic/chat/${chatId}`, (msg) => {
parseStompMessage(msg, (body) => onMessageRef.current(body));
});
client.activate();
clientRef.current = client;
return () => client.deactivate();
}, [chatId]);
const { clientRef, connected } = useStompClient(!!chatId, handleConnect);
/** @returns {boolean} true если сообщение реально ушло в сокет, false если соединения нет */
const sendMessage = useCallback((content) => {
if (!clientRef.current?.connected) return false;
@@ -63,7 +25,7 @@ export function useChatSocket(chatId, onMessage) {
body: JSON.stringify({ chatId, content }),
});
return true;
}, [chatId]);
}, [chatId, clientRef]);
return { connected, sendMessage };
}

20
src/hooks/useDeleteChat.js
View File

@@ -1,9 +1,21 @@
// src/hooks/useDeleteChat.js
import { useState, useCallback } from "react";
import { useTranslation } from 'react-i18next';
import { API_URL } from "../config/authConstants";
import { apiFetch } from "../api/apiClient";
import { useUnread } from "../context/UnreadContext";
import { removePostForChat } from "../stores/chatPostStore";
/**
* useDeleteChat — хук для удаления чата.
*
* deleteChat возвращает { success, error } вместо голого boolean — так
* вызывающий код получает актуальный текст ошибки сразу, без риска прочитать
* устаревшее значение error state до его обновления React'ом (тот же паттерн,
* что в useDeletePost/useFavorites/usePostStatus).
*
* @returns {Object} { deleteChat, loading, error }
*/
export function useDeleteChat() {
const { t } = useTranslation();
const [loading, setLoading] = useState(false);
@@ -25,10 +37,12 @@ export function useDeleteChat() {
}
clearChatUnread(chatId);
return true;
removePostForChat(chatId);
return { success: true, error: null };
} catch (err) {
setError(err.message || t('chat.deleteError'));
return false;
const message = err.message || t('chat.deleteError');
setError(message);
return { success: false, error: message };
} finally {
setLoading(false);
}

74
src/hooks/useStompClient.js Normal file
View File

@@ -0,0 +1,74 @@
// src/hooks/useStompClient.js
import { useEffect, useRef, useState } from "react";
import { Client } from "@stomp/stompjs";
import SockJS from "sockjs-client";
import { API_URL } from "../config/authConstants";
import { getAccessToken, refreshAccessToken } from "../api/apiClient";
/**
* useStompClient — общая инфраструктура STOMP-подключения поверх SockJS.
* Инкапсулирует авторизацию (Bearer-токен + авто-refresh при "Unauthorized")
* и переподключение. Конкретные топики и обработку сообщений задаёт вызывающий
* хук через onConnect.
*
* @param {boolean} enabled — активировать соединение (например, есть ли userId/chatId)
* @param {(client: Client) => void} onConnect — вызывается при успешном коннекте,
* внутри обычно делают client.subscribe(...)
* @returns {{ clientRef: React.MutableRefObject, connected: boolean }}
*/
export function useStompClient(enabled, onConnect) {
const clientRef = useRef(null);
const onConnectRef = useRef(onConnect);
const [connected, setConnected] = useState(false);
// Держим актуальный колбэк в ref, чтобы не пересоздавать соединение
// при каждом ре-рендере родителя из-за нового onConnect
useEffect(() => {
onConnectRef.current = onConnect;
}, [onConnect]);
useEffect(() => {
if (!enabled) return;
const client = new Client({
webSocketFactory: () => new SockJS(`${API_URL}/ws`),
reconnectDelay: 3000,
beforeConnect: () => {
client.connectHeaders = {
Authorization: `Bearer ${getAccessToken()}`,
};
},
onConnect: () => {
setConnected(true);
onConnectRef.current?.(client);
},
onDisconnect: () => setConnected(false),
onStompError: async (frame) => {
if (frame.headers?.message?.includes("Unauthorized")) {
try {
await refreshAccessToken();
} catch {
// refresh не удался — общий логин-флоу разберётся при следующем apiFetch
}
}
},
});
client.activate();
clientRef.current = client;
return () => client.deactivate();
}, [enabled]);
return { clientRef, connected };
}
/** Безопасный парсинг тела STOMP-сообщения — не роняет подписчика на невалидном JSON. */
export function parseStompMessage(msg, onParsed) {
try {
const body = JSON.parse(msg.body);
onParsed(body);
} catch (e) {
console.error("Failed to parse STOMP message:", e);
}
}

48
src/hooks/useUnreadSocket.js
View File

@@ -1,47 +1,19 @@
import { useEffect, useRef } from "react";
import { Client } from "@stomp/stompjs";
import SockJS from "sockjs-client";
import { API_URL } from "../config/authConstants";
import { useCallback } from "react";
import { useStompClient, parseStompMessage } from "./useStompClient";
import { useUnread } from "../context/UnreadContext";
import { getActiveChatId } from "../stores/activeChatStore";
import { getAccessToken, refreshAccessToken } from "../api/apiClient";
export function useUnreadSocket(userId) {
const { setChatUnread } = useUnread();
const clientRef = useRef(null);
useEffect(() => {
if (!userId) return;
const client = new Client({
webSocketFactory: () => new SockJS(`${API_URL}/ws`),
reconnectDelay: 3000,
beforeConnect: () => {
client.connectHeaders = {
Authorization: `Bearer ${getAccessToken()}`,
};
},
onConnect: () => {
client.subscribe(`/topic/user/${userId}/unread`, (msg) => {
const body = JSON.parse(msg.body);
if (body.chatId === getActiveChatId()) return;
setChatUnread(body.chatId, body.unreadCount);
});
},
onStompError: async (frame) => {
if (frame.headers?.message?.includes("Unauthorized")) {
try {
await refreshAccessToken();
} catch {
// refresh не удался — общий логин-флоу разберётся при следующем apiFetch
}
}
},
const handleConnect = useCallback((client) => {
client.subscribe(`/topic/user/${userId}/unread`, (msg) => {
parseStompMessage(msg, (body) => {
if (String(body.chatId) === getActiveChatId()) return;
setChatUnread(body.chatId, body.unreadCount);
});
});
client.activate();
clientRef.current = client;
return () => client.deactivate();
}, [userId, setChatUnread]);
useStompClient(!!userId, handleConnect);
}

31
src/hooks/useUpdateProfile.js
View File

@@ -1,16 +1,27 @@
import {useState} from "react";
import {API_URL} from "../config/authConstants";
import {apiFetch} from "../api/apiClient";
import { useState, useCallback } from "react";
import { useTranslation } from 'react-i18next';
import { API_URL } from "../config/authConstants";
import { apiFetch } from "../api/apiClient";
/**
* useUpdateProfile — хук для обновления профиля пользователя.
* Отправляет PUT /api/v1/users/{id} с FormData (поддерживает загрузку аватара).
*
* updateProfile возвращает { success, data, error } — data содержит
* обновлённого пользователя при успехе, error — текст ошибки при неудаче.
*/
export function useUpdateProfile() {
const { t } = useTranslation();
const [loading, setLoading] = useState(false);
const [error, setError] = useState("");
const updateProfile = async (userId, profileData) => {
const updateProfile = useCallback(async (userId, profileData) => {
if (!userId) {
const message = t('profile.updateMissingUserId');
setError(message);
return { success: false, data: null, error: message };
}
setLoading(true);
setError("");
@@ -36,17 +47,19 @@ export function useUpdateProfile() {
if (!res.ok) {
const data = await res.json().catch(() => ({}));
throw new Error(data.message || `Ошибка ${res.status}`);
throw new Error(data.message || t('profile.updateErrorWithStatus', { status: res.status }));
}
return await res.json();
const updatedUser = await res.json();
return { success: true, data: updatedUser, error: null };
} catch (err) {
setError(err.message || "Failed to save profile");
return null;
const message = err.message || t('profile.updateError');
setError(message);
return { success: false, data: null, error: message };
} finally {
setLoading(false);
}
};
}, [t]);
return { updateProfile, loading, error };
}

11
src/hooks/useYandexMap.js
View File

@@ -1,6 +1,6 @@
import { useCallback, useEffect, useRef, useState } from "react";
const YANDEX_GEOCODER_API_KEY = import.meta.env.VITE_YANDEX_GEOCODER_KEY;
const YANDEX_GEOCODER_API_KEY = process.env.REACT_APP_YANDEX_GEOCODER_KEY;
export function useYandexMap(enabled, initialCoords = null, initialAddress = "") {
const mapRef = useRef(null);
@@ -21,8 +21,6 @@ export function useYandexMap(enabled, initialCoords = null, initialAddress = "")
)
.then(r => r.json())
.then(data => {
// Игнорируем ответ, если пришёл более новый запрос — иначе
// устаревший ответ может перезаписать адрес актуальных координат.
if (requestId !== requestIdRef.current) return;
const found =
@@ -104,7 +102,12 @@ export function useYandexMap(enabled, initialCoords = null, initialAddress = "")
placemarkRef.current = null;
initializedRef.current = false;
};
}, [enabled, initialCoords, resolveAddress]);
// initialCoords намеренно не в deps — нужен только при первой инициализации,
// а initializedRef защищает от повторного запуска. Объект initialCoords
// пересоздаётся на каждый рендер родителя, поэтому включение его в deps
// приводило бы к пересозданию карты на каждый ввод в форме.
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [enabled, resolveAddress]);
return { mapRef, coords, address, addressRef };
}

5
src/locales/en.json
View File

@@ -234,7 +234,10 @@
"validateNameRequired": "Enter your first name",
"validateSurnameRequired": "Enter your last name",
"validateEmailInvalid": "Invalid email",
"validatePhoneInvalid": "Invalid phone number"
"validatePhoneInvalid": "Invalid phone number",
"updateError": "Failed to save the profile",
"updateErrorWithStatus": "Failed to save profile (error {{status}})",
"updateMissingUserId": "Could not identify the user"
},
"validation": {
"titleRequired": "Enter a title",

5
src/locales/ru.json
View File

@@ -235,7 +235,10 @@
"validateNameRequired": "Введите имя",
"validateSurnameRequired": "Введите фамилию",
"validateEmailInvalid": "Некорректный email",
"validatePhoneInvalid": "Некорректный номер телефона"
"validatePhoneInvalid": "Некорректный номер телефона",
"updateError": "Не удалось сохранить профиль",
"updateErrorWithStatus": "Не удалось сохранить профиль (ошибка {{status}})",
"updateMissingUserId": "Не удалось определить пользователя"
},
"validation": {
"titleRequired": "Введите название",

21
src/pages/ChatListPage.jsx
View File

@@ -1,4 +1,4 @@
import { useEffect, useCallback } from "react";
import { useEffect, useState, useCallback } from "react";
import { useNavigate } from "react-router-dom";
import { useTranslation } from 'react-i18next';
import { useChats } from "../hooks/useChats";
@@ -8,6 +8,7 @@ import { getPostForChat } from "../stores/chatPostStore";
import { useDeleteChat } from "../hooks/useDeleteChat";
import ChatHeader from "../components/chat/ChatHeader";
import ChatListItem from "../components/chat/ChatListItem";
import Toast from "../components/Toast";
export default function ChatListPage() {
const { t } = useTranslation();
@@ -16,6 +17,7 @@ export default function ChatListPage() {
const { isAuthenticated } = useAuthContext();
const { unreadMap } = useUnread();
const { deleteChat } = useDeleteChat();
const [deleteError, setDeleteError] = useState("");
useEffect(() => {
if (isAuthenticated) {
@@ -25,8 +27,12 @@ export default function ChatListPage() {
const handleDeleteChat = useCallback(async (chatId) => {
if (!window.confirm(t('chat.confirmDeleteChat'))) return;
const ok = await deleteChat(chatId);
if (ok) fetchChats();
const result = await deleteChat(chatId);
if (result.success) {
fetchChats();
} else {
setDeleteError(result.error);
}
}, [t, deleteChat, fetchChats]);
const goBack = () => navigate("/feed");
@@ -63,12 +69,21 @@ export default function ChatListPage() {
chat={chat}
post={getPostForChat(chat.id)}
unreadMap={unreadMap}
t={t}
onOpen={openChat}
onDelete={handleDeleteChat}
/>
))}
</div>
</div>
{deleteError && (
<Toast
message={deleteError}
type="error"
onDismiss={() => setDeleteError("")}
/>
)}
</div>
);
}

10
src/pages/ChatPage.jsx
View File

@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
import { useChats } from "../hooks/useChats";
import { useChatSocket } from "../hooks/useChatSocket";
import { getPostForChat } from "../stores/chatPostStore";
import { sortMessages } from "../utils/chatDisplay";
import { setActiveChatId } from "../stores/activeChatStore";
import { useUnread } from "../context/UnreadContext";
import { useAuthContext } from "../context/AuthContext";
@@ -33,7 +34,7 @@ export default function ChatPage() {
const addMessage = useCallback((msg) => {
setMessages((prev) => {
if (msg.id != null && prev.some((m) => m.id === msg.id)) return prev;
return [...prev, msg];
return sortMessages([...prev, msg]);
});
}, []);
@@ -53,11 +54,14 @@ export default function ChatPage() {
.then((list) => {
// Мержим историю с уже пришедшими по сокету сообщениями,
// а не затираем их — иначе можно потерять сообщение, пришедшее
// по WS, пока REST-запрос ещё letел.
// по WS, пока REST-запрос ещё летел. История приходит DESC (новые
// сверху), поэтому всегда сортируем по времени — иначе после
// обновления страницы все сообщения последнего собеседника
// оказываются наверху и идут подряд.
setMessages((prev) => {
const byId = new Map(list.map((m) => [m.id, m]));
const extra = prev.filter((m) => !byId.has(m.id));
return [...list, ...extra];
return sortMessages([...list, ...extra]);
});
})
.catch(() => setLoadError(t('chat.loadError')));

13
src/stores/activeChatStore.js
View File

@@ -1,9 +1,18 @@
let activeChatId = null;
/**
* Простой модульный синглтон — НЕ реактивен. Не используйте getActiveChatId()
* напрямую в JSX компонента, рендер не обновится при изменении значения.
* Предназначен для чтения в императивном коде (WebSocket-колбэки и т.п.),
* где React-реактивность не нужна.
*/
export function setActiveChatId(id) {
activeChatId = id;
// Приводим к строке — chatId из useParams() всегда строка, а id из
// WS-сообщений сервера может прийти числом. Без нормализации сравнение
// через === в useUnreadSocket будет ложно негативным.
activeChatId = id != null ? String(id) : null;
}
export function getActiveChatId() {
return activeChatId;
}
}

10
src/stores/chatPostStore.js
View File

@@ -15,3 +15,13 @@ export function cachePostsFromChats(chats) {
}
}
}
/** Удаляет запись при удалении конкретного чата. */
export function removePostForChat(chatId) {
postByChatId.delete(chatId);
}
/** Полностью очищает кеш — вызывать при logout(), чтобы не хранить данные предыдущей сессии. */
export function clearPostCache() {
postByChatId.clear();
}

20
src/utils/chatDisplay.jsx
View File

@@ -4,6 +4,26 @@ import { getImageUrl } from "../config/authConstants";
* Резолвит данные для отображения одного чата в списке:
* заголовок, картинку/эмодзи-аватар и счётчик непрочитанных.
*/
/** Парсит ISO-дату без таймзоны ("2026-08-12T00:24:50.383077") в мс. Устойчив к Safari/старым браузерам. */
function toTimeMs(iso) {
if (!iso) return 0;
const parsed = Date.parse(iso);
if (Number.isFinite(parsed)) return parsed;
const m = /^(\d{4})-(\d{2})-(\d{2})[T ](\d{2}):(\d{2}):(\d{2})(?:\.(\d+))?/.exec(iso);
if (!m) return 0;
const [, y, mo, d, h, mi, s, frac = ""] = m;
const millis = Number(frac.padEnd(3, "0").slice(0, 3));
return new Date(+y, +mo - 1, +d, +h, +mi, +s, millis).getTime();
}
/** Сортирует сообщения по времени создания (старые сверху), id — как страховка от одинаковых timestamp. */
export function sortMessages(messages) {
return [...messages].sort((a, b) => {
const t = toTimeMs(a.createdAt) - toTimeMs(b.createdAt);
return t !== 0 ? t : (a.id ?? 0) - (b.id ?? 0);
});
}
export function getChatDisplayInfo(chat, post, unreadMap, t) {
const title = post?.title || chat.otherUser?.name || t('chat.user');
const imgSrc = getImageUrl(post?.images?.[0]);