React 19 Приложение "События"

Space of React

требуется вход

Войдите, чтобы смотреть видео

Видеоуроки, интерактивный редактор и сохранение прогресса — бесплатно, сразу после входа.

Войти Создать аккаунт — бесплатно

Закончили урок?

Войдите, чтобы отмечать прогресс

Войти

Урок

React 19 Приложение "События" — УрокСтраница редактирования события — React 19 Приложение "События" | Max Roslow | Space of React

Состояния формы редактирования события

Условный рендеринг для редиректа, загрузки, отсутствия события, ошибки загрузки и проверки прав владельца. Такой guard-подход часто используют для защиты экранов редактирования. reactrouter

client/src/pages/events/components/event-edit-form.tsx


if (!id) {
    return <Navigate to="/events" replace/>
}

if (loading) {
    return (
        <div className={cn('mx-auto w-full max-w-2xl space-y-6', className)}>
            Загрузка
        </div>
    )
}

if (notFound) {
    return (
        <div className={cn('mx-auto w-full max-w-2xl space-y-6', className)}>
            <p className="text-sm">Событие не найдено</p>
        </div>
    )
}

if (loadError || !event) {
    return (
        <div className={cn('mx-auto w-full max-w-2xl space-y-6', className)}>
            <p className="text-sm">Ошибка загрузки</p>
        </div>
    )
}

if (!user || event?.ownerId !== user.id) {
    return (
        <div className={cn('mx-auto w-full max-w-2xl space-y-6', className)}>
            <p className="text-sm">Редактировать может только организатор</p>
        </div>
    )
}