refactor: user & teams fetching & remove: swr package

Author: ben-fornefeld

bun.lock

@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "<<<<<<< Next.js": "",
-    "dev": "bun scripts:check-app-env && FORCE_COLOR=1 next dev --turbo",
+    "dev": "bun scripts:check-app-env && next dev --turbo",
     "build": "next build",
     "start": "next start",
     "preview": "bun run build && bun start",
@@ -105,7 +105,6 @@
     "remark-math": "^6.0.0",
     "remark-mermaid": "^0.2.0",
     "shiki": "^2.3.2",
-    "swr": "^2.3.0",
     "tailwind-merge": "^2.6.0",
     "usehooks-ts": "^3.1.0",
     "vaul": "^1.1.2",

package.json

@@ -7,6 +7,8 @@ import {
   resolveTeamIdInServerComponent,
   resolveTeamSlugInServerComponent,
 } from '@/lib/utils/server'
+import { getUserTeams } from '@/server/team/get-team'
+import { getSessionInsecure } from '@/server/auth/get-session'
 
 interface DashboardLayoutProps {
   children: React.ReactNode
@@ -23,8 +25,21 @@ export default async function DashboardLayout({
   const teamId = await resolveTeamIdInServerComponent(teamIdOrSlug)
   const teamSlug = await resolveTeamSlugInServerComponent()
 
+  const session = await getSessionInsecure()
+
+  const res = await getUserTeams()
+
+  if (!res?.data || res.serverError) {
+    throw new Error(res?.serverError || 'Error loading teams.')
+  }
+
   return (
-    <ServerContextProvider teamId={teamId} teamSlug={teamSlug}>
+    <ServerContextProvider
+      teamId={teamId}
+      teamSlug={teamSlug}
+      teams={res?.data}
+      user={session!.user}
+    >
       <div className="fixed inset-0 flex max-h-full w-full flex-col overflow-hidden">
         <NetworkStateBanner />
         <div className="flex h-full max-h-full w-full flex-1 overflow-hidden">

src/app/api/teams/select/route.ts

@@ -2,24 +2,21 @@
 
 import { LogOut } from 'lucide-react'
 import { Avatar, AvatarFallback, AvatarImage } from '@/ui/primitives/avatar'
-import { User } from '@supabase/supabase-js'
 import { cn } from '@/lib/utils'
 import Link from 'next/link'
 import { Button } from '@/ui/primitives/button'
 import { PROTECTED_URLS } from '@/configs/urls'
 import { useTransition } from 'react'
 import { signOutAction } from '@/server/auth/auth-actions'
 import { Loader } from '@/ui/loader'
+import { useUser } from '@/lib/hooks/use-user'
 
 interface UserDetailsTileProps {
-  user: User
   className?: string
 }
 
-export default function UserDetailsTile({
-  user,
-  className,
-}: UserDetailsTileProps) {
+export default function UserDetailsTile({ className }: UserDetailsTileProps) {
+  const { user } = useUser()
   const [isSigningOut, startTransition] = useTransition()
 
   const handleSignOut = () => {

src/app/api/teams/user/route.ts

@@ -13,16 +13,10 @@ import { signOutAction } from '@/server/auth/auth-actions'
 import Link from 'next/link'
 import { PROTECTED_URLS } from '@/configs/urls'
 import UserDetailsTile from './user-details-tile'
-import { useState } from 'react'
-import { User } from '@supabase/supabase-js'
+import { useUser } from '@/lib/hooks/use-user'
 
-interface UserMenuProps {
-  user: User
-  apiDomain?: string
-}
-
-export default function UserMenu({ user, apiDomain }: UserMenuProps) {
-  const [developerSettingsOpen, setDeveloperSettingsOpen] = useState(false)
+export default function UserMenu() {
+  const { user } = useUser()
 
   return (
     <>
@@ -45,18 +39,12 @@ export default function UserMenu({ user, apiDomain }: UserMenuProps) {
         <DropdownMenuContent>
           <DropdownMenuItem asChild className="p-1">
             <Link href={PROTECTED_URLS.ACCOUNT_SETTINGS}>
-              <UserDetailsTile user={user} />
+              <UserDetailsTile />
             </Link>
           </DropdownMenuItem>
 
           <DropdownMenuSeparator />
 
-          <DropdownMenuItem onClick={() => setDeveloperSettingsOpen(true)}>
-            Developer Settings
-          </DropdownMenuItem>
-
-          <DropdownMenuSeparator />
-
           <DropdownMenuItem
             className="text-error"
             onClick={() => signOutAction()}

src/app/dashboard/layout.tsx

@@ -1,28 +1,17 @@
 'use client'
 
-import { useState, useLayoutEffect } from 'react'
-import { preloadTeams } from '@/lib/hooks/use-teams'
 import posthog from 'posthog-js'
 import { PostHogProvider as PHProvider } from 'posthog-js/react'
 import { useEffect } from 'react'
 import { RootProvider } from 'fumadocs-ui/provider'
 import { TooltipProvider } from '@/ui/primitives/tooltip'
 import { ToastProvider } from '@/ui/primitives/toast'
-import { useUser } from '@/lib/hooks/use-user'
 
 interface ClientProvidersProps {
   children: React.ReactNode
 }
 
 export default function ClientProviders({ children }: ClientProvidersProps) {
-  const { user } = useUser()
-
-  useLayoutEffect(() => {
-    if (!user) return
-
-    preloadTeams()
-  }, [user])
-
   return (
     <PostHogProvider>
       <RootProvider

src/features/auth/user-details-tile.tsx

@@ -41,7 +41,7 @@ interface EmailSettingsProps {
 export function EmailSettings({ className }: EmailSettingsProps) {
   'use no memo'
 
-  const { user, setUser, refetch: refetchUser } = useUser()
+  const { user } = useUser()
   const searchParams = useSearchParams()
   const { toast } = useToast()
 
@@ -81,18 +81,18 @@ export function EmailSettings({ className }: EmailSettingsProps) {
 
     if (searchParams.get('type') === 'update_email') {
       if (searchParams.has('success')) {
-        if (searchParams.has('new_email')) {
+        /*         if (searchParams.has('new_email')) {
           setUser((state) => ({
             ...state!,
             email: searchParams.get('new_email')!,
           }))
-        }
+        } */
 
         toast(
           defaultSuccessToast(decodeURIComponent(searchParams.get('success')!))
         )
 
-        refetchUser()
+        /*         refetchUser() */
       } else {
         toast(defaultErrorToast(decodeURIComponent(searchParams.get('error')!)))
       }

src/features/auth/user-menu.tsx

@@ -39,7 +39,7 @@ interface NameSettingsProps {
 export function NameSettings({ className }: NameSettingsProps) {
   'use no memo'
 
-  const { user, refetch: refetchUser } = useUser()
+  const { user } = useUser()
   const { toast } = useToast()
 
   const form = useForm<FormValues>({
@@ -54,7 +54,6 @@ export function NameSettings({ className }: NameSettingsProps) {
 
   const { execute: updateName, isPending } = useAction(updateUserAction, {
     onSuccess: async () => {
-      await refetchUser()
       toast(defaultSuccessToast('Name updated.'))
     },
     onError: (error) => {