mikhail_lanskikh
28091d732a
- Updated ActionsSidebarWrapper to accept a ref for improved positioning. - Enhanced SessionUsersPanel with new props for participant management, including mute and disable video functionalities. - Added vertical positioning option to ActionsPopover for better alignment. - Modified QRCodePopup and SharePopup to include a second argument in setPopup for type differentiation. - Refactored ControlButton and Tooltip components for improved accessibility and styling. - Updated UserCamera to integrate ActionsPopover for participant controls, enhancing user interaction. - Improved PopoverWrapper to handle dynamic positioning based on parent element. - Adjusted UserDevicesControls for better layout consistency and responsiveness. - Enhanced popup management in the popupStore to track popup types.
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 логика для запросов
- Оптимистичные обновления
- Автоматическая инвалидация кэша