inmake
775ba52cd0
- Changed VITE_API_URL and VITE_WEBRTC_URL in .env to point to local IP addresses. - Added react-hot-toast for user notifications in the application. - Integrated toast notifications for control acquisition in SessionPage. - Enhanced PixelStreamingWrapper and SessionUsersPanel to manage control states for participants. - Implemented grant and revoke control functionalities in the WebRTC service, allowing dynamic control management among users. - Updated various components to reflect control states and improve user experience during sessions.
Client - React Query Integration
Установленные пакеты
@tanstack/react-query- управление серверным состояниемky- современный HTTP-клиент
Структура
/src/lib
api.ts- конфигурация HTTP-клиента (ky)queryClient.ts- конфигурация React Query
/src/hooks
useAuth.ts- хуки для аутентификацииuseLogin()- входuseRegister()- регистрацияuseMe()- получение текущего пользователяuseLogout()- выход
/src/types
auth.ts- TypeScript типы для аутентификации
Примеры использования
Логин
import { useLogin } from "../hooks/useAuth";
function LoginPage() {
const loginMutation = useLogin();
const handleSubmit = async (data) => {
try {
await loginMutation.mutateAsync(data);
// Успешный логин
} catch (error) {
// Обработка ошибки
}
};
return (
<form onSubmit={handleSubmit}>
{/* форма */}
{loginMutation.isPending && <p>Загрузка...</p>}
{loginMutation.isError && <p>Ошибка!</p>}
</form>
);
}
Получение текущего пользователя
import { useMe } from "../hooks/useAuth";
function Profile() {
const { data: user, isLoading, isError } = useMe();
if (isLoading) return <div>Загрузка...</div>;
if (isError) return <div>Ошибка</div>;
return <div>Привет, {user?.name}!</div>;
}
Выход
import { useLogout } from "../hooks/useAuth";
function LogoutButton() {
const logoutMutation = useLogout();
return (
<button onClick={() => logoutMutation.mutate()}>
Выйти
</button>
);
}
Фичи
API клиент (ky)
- Автоматическое добавление Bearer токена из localStorage
- Префикс URL для всех запросов
- JSON по умолчанию
React Query
- Автоматическое кэширование (5 минут)
- Retry логика для запросов
- Оптимистичные обновления
- Автоматическая инвалидация кэша