add flash message

apps/saladeaula.digital/app/routes/layout.tsx

@@ -3,6 +3,7 @@ import type { Route } from './+types/layout'
 import { useToggle } from 'ahooks'
 import { MenuIcon } from 'lucide-react'
 import { Link, NavLink, Outlet } from 'react-router'
+import { toast } from 'sonner'
 
 import { Toaster } from '@repo/ui/components/ui/sonner'
 import { userContext } from '@repo/auth/context'
@@ -23,12 +24,31 @@ import {
   SheetTrigger
 } from '@repo/ui/components/ui/sheet'
 import type { User } from '@repo/auth/auth'
+import { createSessionStorage } from '@repo/auth/session'
+import { data } from 'react-router'
+import { useEffect } from 'react'
 
 export const middleware: Route.MiddlewareFunction[] = [authMiddleware]
 
-export async function loader({ context }: Route.ActionArgs) {
+export async function loader({ context, request }: Route.ActionArgs) {
   const user = context.get(userContext) as User
-  return Response.json({ user })
+  const sessionStorage = createSessionStorage(context.cloudflare.env)
+  const session = await sessionStorage.getSession(request.headers.get('cookie'))
+
+  const flash = {
+    error: session.get('error'),
+    success: session.get('success'),
+    info: session.get('info')
+  }
+
+  return data(
+    { user, flash },
+    {
+      headers: new Headers({
+        'Set-Cookie': await sessionStorage.commitSession(session)
+      })
+    }
+  )
 }
 
 const navMain = [
@@ -47,10 +67,16 @@ const navMain = [
 ]
 
 export default function Component({
-  loaderData: { user }
+  loaderData: { user, flash }
 }: Route.ComponentProps) {
   const [isOpen, { toggle }] = useToggle()
 
+  useEffect(() => {
+    if (flash.error) toast.error(flash.error)
+    if (flash.success) toast.success(flash.success)
+    if (flash.info) toast.info(flash.info)
+  }, [flash])
+
   return (
     <div className="relative flex flex-col flex-1 min-w-0 h-full">
       <header

apps/saladeaula.digital/app/routes/settings/emails/index.tsx

@@ -42,7 +42,6 @@ import { request as req } from '@repo/util/request'
 import { Skeleton } from '@repo/ui/components/skeleton'
 import { Button } from '@repo/ui/components/ui/button'
 import { useOutletContext } from 'react-router'
-import type { User as AuthUser } from '@repo/auth/auth'
 import type { User } from '@repo/ui/routes/users/data'
 import {
   Item,
@@ -59,7 +58,8 @@ import { Primary } from './primary'
 const ActionMenuContext = createContext<Email | null>(null)
 
 export async function loader({ request, context }: Route.LoaderArgs) {
-  const user = context.get(userContext) as AuthUser
+  const user = context.get(userContext)
+
   const data = req({
     url: `/users/${user.sub}/emails`,
     request,

apps/saladeaula.digital/app/routes/settings/emails/verify.tsx

@@ -0,0 +1,33 @@
+import type { Route } from './+types/verify'
+
+import { redirect } from 'react-router'
+
+import { userContext } from '@repo/auth/context'
+import { createSessionStorage } from '@repo/auth/session'
+import { HttpMethod, request as req } from '@repo/util/request'
+
+export async function loader({ params, request, context }: Route.LoaderArgs) {
+  const { code } = params
+  const sessionStorage = createSessionStorage(context.cloudflare.env)
+  const session = await sessionStorage.getSession(request.headers.get('cookie'))
+  const user = context.get(userContext)
+
+  const r = await req({
+    url: `/users/${user.sub}/emails/${code}/verify`,
+    method: HttpMethod.POST,
+    request,
+    context
+  })
+
+  if (r.ok) {
+    session.flash('success', 'Seu email foi verificado.')
+  } else {
+    session.flash('info', 'O email já está verificado.')
+  }
+
+  return redirect('/settings/emails', {
+    headers: new Headers({
+      'Set-Cookie': await sessionStorage.commitSession(session)
+    })
+  })
+}