wip: use cookie scope

packages/app/src/actions/team-switcher.action.tsx

@@ -4,9 +4,11 @@ import 'server-only'
 import { cookies } from 'next/headers'
 import { z } from 'zod'
 import { rhfActionSetScopeSchema } from './teams-switcher.schema'
+import { redirect } from 'next/navigation'
 
 export async function rhfActionSetScope(
   opts: z.infer<typeof rhfActionSetScopeSchema>
 ) {
   cookies().set('scope', opts)
+  redirect(`/teams/${opts}`)
 }

packages/app/src/actions/teams-switcher.schema.tsx

@@ -1,3 +1,4 @@
 import { z } from 'zod'
 
 export const rhfActionSetScopeSchema = z.string()
+export type rhfActionSetScopeSchema = z.infer<typeof rhfActionSetScopeSchema>

packages/app/src/app/teams/layout.tsx

@@ -1,20 +1,17 @@
 import type { PropsWithChildren } from 'react'
+import { cookies } from 'next/headers'
 import { MainNav } from '@/components/teams/main-nav'
 import DefaultLayout from '@/components/default-layout'
 
-export interface NextPageProps<TeamSlug = string> {
-  params: { team: TeamSlug }
-  searchParams?: { [key: string]: string | string[] | undefined }
-}
+export default function Layout({ children }: PropsWithChildren) {
+  const cookiesList = cookies()
+  const hasScope = cookiesList.has('scope')
+  const scope = cookiesList.get('scope')
 
-export default function Layout({
-  params,
-  children
-}: PropsWithChildren<NextPageProps>) {
   return (
     <>
       <DefaultLayout
-        fallback={<MainNav teamId={params.team} className="mx-6" />}
+        fallback={<MainNav scope={scope?.value} className="mx-6" />}
       >
         {children}
       </DefaultLayout>

packages/app/src/components/default-layout.tsx

@@ -1,6 +1,7 @@
 import '@/styles/globals.css'
 import type { ReactNode } from 'react'
 
+import { cookies } from 'next/headers'
 import { MainNav } from '@/components/main-nav'
 import { Search } from '@/components/search'
 import TeamSwitcher from '@/components/team-switcher'
@@ -11,21 +12,22 @@ import Footer from '@/components/footer'
 
 interface DefaultLayoutProps {
   children?: ReactNode | undefined
-
-  /** A fallback react tree to show when a Suspense child (like React.lazy) suspends */
   fallback?: ReactNode
 }
 
 export default function DefaultLayout({
   children,
   fallback = <MainNav className="mx-6" />
 }: DefaultLayoutProps) {
+  const cookiesList = cookies()
+  const scope = cookiesList.get('scope')
+
   return (
     <>
       <div className="flex-col">
         <div className="border-b">
           <div className="flex h-16 items-center px-4">
-            <TeamSwitcher />
+            <TeamSwitcher scope={scope?.value} />
             {fallback}
             <div className="ml-auto flex items-center space-x-4">
               <Search />

packages/app/src/components/main-nav.tsx

@@ -16,7 +16,6 @@ export function MainNav({
 }: React.HTMLAttributes<HTMLElement>) {
   const headerList = headers()
   const pathname = headerList.get('x-pathname')
-  console.log(pathname)
 
   return (
     <nav

packages/app/src/components/team-switcher.tsx

@@ -12,6 +12,8 @@ import { TeamsCreateSchema } from '@/server/routers/schemas/teams'
 import { useAction } from '@/trpc/client'
 import { rhfAction } from '@/components/teams/new-form.action'
 import { Textarea } from '@/components/ui/textarea'
+import { rhfActionSetScopeSchema } from '@/actions/teams-switcher.schema'
+import { rhfActionSetScope } from '@/actions/team-switcher.action'
 import {
   Form,
   FormControl,
@@ -51,26 +53,26 @@ import { usePathname, useRouter } from 'next/navigation'
 
 export type TeamSwitcherProps = {
   className?: string
+  scope?: string
 }
 
 export default function TeamSwitcher({
-  className
+  className,
+  scope = 'personal'
 }: React.PropsWithChildren<TeamSwitcherProps>) {
   const user = React.use(api.users.get.query())
+
   const groups = React.useMemo(
     () => [
       {
         label: 'Personal Acount',
-        teams: [
-          { label: user?.name, value: 'personal', pathname: '/dashboard' }
-        ]
+        teams: [{ label: user?.name, value: 'personal' }]
       },
       {
         label: 'Teams',
         teams: user?.teams?.map(team => ({
           label: team.name,
-          value: team.slug,
-          pathname: `/teams/${team.slug}`
+          value: team.slug
         }))
       }
     ],
@@ -79,10 +81,8 @@ export default function TeamSwitcher({
   const pathname = usePathname()
   const selectedTeam = React.useMemo(
     () =>
-      groups
-        .flatMap(group => group.teams)
-        .find(team => team?.pathname === pathname),
-    [groups, pathname]
+      groups.flatMap(group => group.teams).find(team => scope === team?.value),
+    [groups, scope]
   )
 
   const [open, setOpen] = React.useState(false)
@@ -95,6 +95,12 @@ export default function TeamSwitcher({
     mode: 'onChange'
   })
 
+  const updateScope = (opts: rhfActionSetScopeSchema) => {
+    React.startTransition(() => {
+      rhfActionSetScope(opts)
+    })
+  }
+
   const mutation = useAction(rhfAction)
   const handleSubmit = async (data: NewTeamFormValues) =>
     await mutation.mutateAsync({ ...data })
@@ -130,7 +136,7 @@ export default function TeamSwitcher({
                   {group?.teams?.map(team => (
                     <CommandItem
                       key={team.value}
-                      onSelect={() => router.push(team.pathname)}
+                      onSelect={() => updateScope(team.value)}
                       className="text-sm"
                     >
                       <Avatar className="mr-2 h-5 w-5">
@@ -145,9 +151,7 @@ export default function TeamSwitcher({
                       <CheckIcon
                         className={cn(
                           'ml-auto h-4 w-4',
-                          pathname.startsWith(team.pathname)
-                            ? 'opacity-100'
-                            : 'opacity-0'
+                          scope === team.value ? 'opacity-100' : 'opacity-0'
                         )}
                       />
                     </CommandItem>

packages/app/src/components/teams/main-nav.tsx

@@ -1,36 +1,41 @@
 import Link from 'next/link'
-import { headers } from 'next/headers'
+import { headers, cookies } from 'next/headers'
 import { cn } from '@/lib/utils'
 import { buttonVariants } from '@/components/ui/button'
+import { PropsWithChildren } from 'react'
 
 export interface MainNavProps extends React.HTMLAttributes<HTMLElement> {
-  teamId: string
+  scope?: string
 }
 
-export function MainNav({ className, teamId, ...props }: MainNavProps) {
+export function MainNav({
+  className,
+  scope,
+  ...props
+}: PropsWithChildren<MainNavProps>) {
   const headerList = headers()
   const pathname = headerList.get('x-pathname')
 
   const nav = [
     {
       name: 'Dashboard',
-      link: `/team/${teamId}/dashboard`
+      link: `/teams/${scope}/dashboard`
     },
     {
       name: 'Workloads',
-      link: `/team/${teamId}/workloads`
+      link: `/teams/${scope}/workloads`
     },
     {
       name: 'Solutions',
-      link: `/team/${teamId}/solutions`
+      link: `/teams/${scope}/solutions`
     },
     {
       name: 'Lenses',
-      link: `/team/${teamId}/lenses`
+      link: `/teams/${scope}/lenses`
     },
     {
       name: 'Profiles',
-      link: `/team/${teamId}/profiles`
+      link: `/teams/${scope}/profiles`
     }
   ]