​
Examples

This section contains practical examples and code samples demonstrating how to use various components and features of the Tuturuuu platform.

​
Component Examples

​
WorkspaceWrapper

Examples showing how to use the WorkspaceWrapper component in different scenarios.

​
Usage Patterns

​
Server Components

// Basic server component with WorkspaceWrapper
export default async function MyPage({ 
  searchParams 
}: { 
  searchParams: Promise<{ wsId: string }> 
}) {
  return (
    <WorkspaceWrapper searchParams={searchParams}>
      {({ workspace, wsId }) => (
        <div>{workspace.name}</div>
      )}
    </WorkspaceWrapper>
  );
}

​
Client Components

'use client';

interface MyComponentProps {
  workspace: Workspace & { role: WorkspaceUserRole; joined: boolean };
  wsId: string;
}

export function MyComponent({ workspace, wsId }: MyComponentProps) {
  return <div>{workspace.name}</div>;
}

​
API Routes

// API route with workspace validation
export async function GET(
  request: Request,
  { params }: { params: Promise<{ wsId: string }> }
) {
  const { wsId } = await params;
  const workspace = await getWorkspace(wsId);
  
  if (!workspace) {
    return Response.json({ error: 'Workspace not found' }, { status: 404 });
  }
  
  return Response.json({ workspace });
}

​
Best Practices

​
Error Handling

// Proper error handling in components
export default async function MyPage({ searchParams }) {
  return (
    <WorkspaceWrapper 
      searchParams={searchParams}
      fallback={<ErrorBoundary />}
    >
      {({ workspace, wsId }) => {
        try {
          return <MyComponent workspace={workspace} wsId={wsId} />;
        } catch (error) {
          return <ErrorMessage error={error} />;
        }
      }}
    </WorkspaceWrapper>
  );
}

​
Loading States

// Proper loading state handling
export default async function MyPage({ searchParams }) {
  return (
    <WorkspaceWrapper 
      searchParams={searchParams}
      fallback={<LoadingSkeleton />}
    >
      {({ workspace, wsId }) => (
        <Suspense fallback={<LoadingSpinner />}>
          <AsyncContent workspace={workspace} wsId={wsId} />
        </Suspense>
      )}
    </WorkspaceWrapper>
  );
}

​
Type Safety

// Proper TypeScript usage
interface PageProps {
  searchParams: Promise<{ wsId: string }>;
}

interface WorkspaceData {
  workspace: Workspace & { role: WorkspaceUserRole; joined: boolean };
  wsId: string;
}

export default async function MyPage({ searchParams }: PageProps) {
  return (
    <WorkspaceWrapper searchParams={searchParams}>
      {({ workspace, wsId }: WorkspaceData) => (
        <MyComponent workspace={workspace} wsId={wsId} />
      )}
    </WorkspaceWrapper>
  );
}

​
Common Patterns

​
Dashboard Pages

Most dashboard pages follow this pattern:
  1. Use WorkspaceWrapper for workspace resolution
  2. Fetch additional data based on workspace
  3. Render components with proper loading states
  4. Handle permissions and access control

​
Settings Pages

Settings pages typically:
  1. Validate user permissions
  2. Show different UI based on user role
  3. Handle form submissions with proper validation
  4. Provide clear feedback to users

​
API Endpoints

API endpoints should:
  1. Validate workspace access
  2. Handle errors gracefully
  3. Return appropriate HTTP status codes
  4. Include proper error messages

​
Contributing Examples

When adding new examples:
  1. Use realistic, practical scenarios
  2. Include proper TypeScript types
  3. Show error handling
  4. Include both server and client examples
  5. Update this index page