feat(notifications): add sonner toasts to auth and onboarding flows
This commit is contained in:
@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
|
|||||||
import { Loader2 } from 'lucide-react';
|
import { Loader2 } from 'lucide-react';
|
||||||
import { cn } from '@/lib/utils';
|
import { cn } from '@/lib/utils';
|
||||||
import { trpc } from '@/lib/trpc';
|
import { trpc } from '@/lib/trpc';
|
||||||
|
import { useNotify } from '@/hooks/useNotify';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
import { Input } from '@/components/ui/input';
|
import { Input } from '@/components/ui/input';
|
||||||
@@ -34,6 +35,7 @@ function SignInForm({
|
|||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
const loginMutation = trpc.auth.login.useMutation();
|
const loginMutation = trpc.auth.login.useMutation();
|
||||||
const oauthMutation = trpc.auth.loginWithOAuth.useMutation();
|
const oauthMutation = trpc.auth.loginWithOAuth.useMutation();
|
||||||
|
const { notifyError } = useNotify();
|
||||||
|
|
||||||
const [email, setEmail] = useState('');
|
const [email, setEmail] = useState('');
|
||||||
const [password, setPassword] = useState('');
|
const [password, setPassword] = useState('');
|
||||||
@@ -50,7 +52,10 @@ function SignInForm({
|
|||||||
if (!res.success) setError(res.error ?? 'Authentication failed');
|
if (!res.success) setError(res.error ?? 'Authentication failed');
|
||||||
else void utils.auth.status.invalidate();
|
else void utils.auth.status.invalidate();
|
||||||
},
|
},
|
||||||
onError: (err) => setError(err.message),
|
onError: (err) => {
|
||||||
|
setError(err.message);
|
||||||
|
notifyError('toast.auth.loginError', err);
|
||||||
|
},
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -61,7 +66,10 @@ function SignInForm({
|
|||||||
if (!res.success) setError(res.error ?? 'Google sign-in failed');
|
if (!res.success) setError(res.error ?? 'Google sign-in failed');
|
||||||
else void utils.auth.status.invalidate();
|
else void utils.auth.status.invalidate();
|
||||||
},
|
},
|
||||||
onError: (err) => setError(err.message),
|
onError: (err) => {
|
||||||
|
setError(err.message);
|
||||||
|
notifyError('toast.auth.oauthError', err);
|
||||||
|
},
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -157,6 +165,7 @@ function SignUpForm({
|
|||||||
const utils = trpc.useUtils();
|
const utils = trpc.useUtils();
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
const registerMutation = trpc.auth.register.useMutation();
|
const registerMutation = trpc.auth.register.useMutation();
|
||||||
|
const { notifyError } = useNotify();
|
||||||
|
|
||||||
const [name, setName] = useState('');
|
const [name, setName] = useState('');
|
||||||
const [surname, setSurname] = useState('');
|
const [surname, setSurname] = useState('');
|
||||||
@@ -178,7 +187,10 @@ function SignUpForm({
|
|||||||
if (!res.success) setError(res.error ?? 'Registration failed');
|
if (!res.success) setError(res.error ?? 'Registration failed');
|
||||||
else void utils.auth.status.invalidate();
|
else void utils.auth.status.invalidate();
|
||||||
},
|
},
|
||||||
onError: (err) => setError(err.message),
|
onError: (err) => {
|
||||||
|
setError(err.message);
|
||||||
|
notifyError('toast.auth.registerError', err);
|
||||||
|
},
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -15,6 +15,7 @@ import {
|
|||||||
SquarePen,
|
SquarePen,
|
||||||
} from 'lucide-react';
|
} from 'lucide-react';
|
||||||
import { trpc } from '@/lib/trpc';
|
import { trpc } from '@/lib/trpc';
|
||||||
|
import { useNotify } from '@/hooks/useNotify';
|
||||||
import { useDoubleClickAI } from '@/hooks/useDoubleClickAI';
|
import { useDoubleClickAI } from '@/hooks/useDoubleClickAI';
|
||||||
import { useTheme } from '@/components/theme-provider';
|
import { useTheme } from '@/components/theme-provider';
|
||||||
import {
|
import {
|
||||||
@@ -278,6 +279,7 @@ function NavUser({
|
|||||||
const { theme, setTheme } = useTheme();
|
const { theme, setTheme } = useTheme();
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
const logoutMutation = trpc.auth.logout.useMutation();
|
const logoutMutation = trpc.auth.logout.useMutation();
|
||||||
|
const { notify } = useNotify();
|
||||||
const utils = trpc.useUtils();
|
const utils = trpc.useUtils();
|
||||||
|
|
||||||
const email = profile?.email ?? 'User';
|
const email = profile?.email ?? 'User';
|
||||||
@@ -288,7 +290,10 @@ function NavUser({
|
|||||||
|
|
||||||
function handleLogout() {
|
function handleLogout() {
|
||||||
logoutMutation.mutate(undefined, {
|
logoutMutation.mutate(undefined, {
|
||||||
onSuccess: () => void utils.auth.status.invalidate(),
|
onSuccess: () => {
|
||||||
|
notify('info', 'toast.auth.loggedOut');
|
||||||
|
void utils.auth.status.invalidate();
|
||||||
|
},
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -3,6 +3,7 @@ import { motion, AnimatePresence } from 'framer-motion';
|
|||||||
import { ChevronRight, ChevronLeft, Pencil, Check, Loader2 } from 'lucide-react';
|
import { ChevronRight, ChevronLeft, Pencil, Check, Loader2 } from 'lucide-react';
|
||||||
import { cn } from '@/lib/utils';
|
import { cn } from '@/lib/utils';
|
||||||
import { trpc } from '@/lib/trpc';
|
import { trpc } from '@/lib/trpc';
|
||||||
|
import { useNotify } from '@/hooks/useNotify';
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from '@/components/ui/button';
|
||||||
import { Input } from '@/components/ui/input';
|
import { Input } from '@/components/ui/input';
|
||||||
import { Card, CardContent } from '@/components/ui/card';
|
import { Card, CardContent } from '@/components/ui/card';
|
||||||
@@ -122,6 +123,7 @@ export function OnboardingFlow({ profile }: OnboardingFlowProps) {
|
|||||||
const [saveError, setSaveError] = useState(false);
|
const [saveError, setSaveError] = useState(false);
|
||||||
|
|
||||||
const utils = trpc.useUtils();
|
const utils = trpc.useUtils();
|
||||||
|
const { notify, notifyError } = useNotify();
|
||||||
|
|
||||||
const normalizeMutation = trpc.auth.normalizeOnboarding.useMutation();
|
const normalizeMutation = trpc.auth.normalizeOnboarding.useMutation();
|
||||||
const updateMemoryMutation = trpc.auth.updateMemory.useMutation();
|
const updateMemoryMutation = trpc.auth.updateMemory.useMutation();
|
||||||
@@ -244,11 +246,17 @@ export function OnboardingFlow({ profile }: OnboardingFlowProps) {
|
|||||||
updateMemoryMutation.mutate(
|
updateMemoryMutation.mutate(
|
||||||
{ memory, markOnboarded: true },
|
{ memory, markOnboarded: true },
|
||||||
{
|
{
|
||||||
onSuccess: () => void utils.auth.status.invalidate(),
|
onSuccess: () => {
|
||||||
onError: () => setSaveError(true),
|
notify('success', 'toast.onboarding.completed', { descriptionKey: 'toast.onboarding.completedDescription' });
|
||||||
|
void utils.auth.status.invalidate();
|
||||||
|
},
|
||||||
|
onError: (err) => {
|
||||||
|
setSaveError(true);
|
||||||
|
notifyError('toast.onboarding.error', err);
|
||||||
|
},
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
}, [reviewValues, profile, updateMemoryMutation, utils]);
|
}, [reviewValues, profile, updateMemoryMutation, utils, notify, notifyError]);
|
||||||
|
|
||||||
const handleEditStart = useCallback(
|
const handleEditStart = useCallback(
|
||||||
(key: string) => {
|
(key: string) => {
|
||||||
|
|||||||
Reference in New Issue
Block a user