Examples - Tuturuuu Docs

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. The main WorkspaceWrapper documentation includes comprehensive code examples demonstrating various usage patterns.

Usage Patterns

Server Components

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

Client Components

'use client';

interface MyComponentProps {
  workspace: Workspace & { 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({ params }) {
  return (
    <WorkspaceWrapper 
      params={params}
      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({ params }) {
  return (
    <WorkspaceWrapper 
      params={params}
      fallback={<LoadingSkeleton />}
    >
      {({ workspace, wsId }) => (
        <Suspense fallback={<LoadingSpinner />}>
          <AsyncContent workspace={workspace} wsId={wsId} />
        </Suspense>
      )}
    </WorkspaceWrapper>
  );
}

Type Safety

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

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

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

Common Patterns

Dashboard Pages

Most dashboard pages follow this pattern:

Use WorkspaceWrapper for workspace resolution
Fetch additional data based on workspace
Render components with proper loading states
Handle permissions and access control

Settings Pages

Settings pages typically:

Validate user permissions
Show different UI based on user role
Handle form submissions with proper validation
Provide clear feedback to users

API Endpoints

API endpoints should:

Validate workspace access
Handle errors gracefully
Return appropriate HTTP status codes
Include proper error messages

Illustrative WorkspaceWrapper Examples

The following source sample demonstrates dashboard, settings, client-component, and helper usage in an application checkout. Its imports belong to the consuming application; this is displayed code, not a component executed by the docs site. As the sample notes, move the client component into its own module when using it in an application.

/**
 * Example usage of WorkspaceWrapper component
 * This file demonstrates various patterns for using the WorkspaceWrapper
 */

import { getPermissions } from '@tuturuuu/utils/workspace-helper';
import WorkspaceWrapper from '@/components/workspace-wrapper';

// Example 1: Basic Dashboard Page
export default async function DashboardPage({
  searchParams,
}: {
  searchParams: Promise<{ wsId: string }>;
}) {
  return (
    <WorkspaceWrapper searchParams={searchParams}>
      {({ workspace, wsId }) => (
        <div className="p-6">
          <h1 className="mb-4 font-bold text-2xl">
            {workspace.name || 'Unnamed Workspace'}
          </h1>
          <div className="grid gap-4">
            <div className="rounded bg-gray-100 p-4">
              <h2 className="font-semibold">Workspace Details</h2>
              <p>ID: {wsId}</p>
              <p>Type: {workspace.personal ? 'Personal' : 'Team'}</p>
              <p>Role: {workspace.role}</p>
              <p>Joined: {workspace.joined ? 'Yes' : 'No'}</p>
            </div>
          </div>
        </div>
      )}
    </WorkspaceWrapper>
  );
}

// Example 2: Settings Page with Loading State
export async function SettingsPage({
  searchParams,
}: {
  searchParams: Promise<{ wsId: string }>;
}) {
  return (
    <WorkspaceWrapper
      searchParams={searchParams}
      fallback={<div className="p-6">Loading workspace settings...</div>}
    >
      {async ({ workspace, wsId }) => {
        const { withoutPermission } = await getPermissions({ wsId });

        return (
          <div className="p-6">
            <h1 className="mb-4 font-bold text-2xl">Workspace Settings</h1>

            {withoutPermission('manage_workspace') ? (
              <div className="text-red-600">
                You don't have permission to manage this workspace.
              </div>
            ) : (
              <div className="space-y-4">
                <div>
                  <label className="mb-2 block font-medium text-sm">
                    Workspace Name
                  </label>
                  <input
                    type="text"
                    defaultValue={workspace.name || ''}
                    className="w-full rounded border p-2"
                  />
                </div>

                <div>
                  <label className="mb-2 block font-medium text-sm">
                    Workspace ID (Read-only)
                  </label>
                  <input
                    type="text"
                    value={wsId}
                    readOnly
                    className="w-full rounded border bg-gray-100 p-2"
                  />
                </div>
              </div>
            )}
          </div>
        );
      }}
    </WorkspaceWrapper>
  );
}

// Example 3: Client Component Integration. In production, move this component
// to a separate module with a top-level `use client` directive.

interface WorkspaceCardProps {
  workspace: {
    id: string;
    name: string | null;
    personal: boolean;
    role: string;
    joined: boolean;
  };
  wsId: string;
  onEdit?: () => void;
}

export function WorkspaceCard({ workspace, wsId, onEdit }: WorkspaceCardProps) {
  return (
    <div className="rounded-lg border p-4 shadow-sm">
      <div className="mb-2 flex items-start justify-between">
        <h3 className="font-semibold text-lg">
          {workspace.name || 'Unnamed Workspace'}
        </h3>
        {onEdit && (
          <button
            type="button"
            onClick={onEdit}
            className="text-blue-600 text-sm hover:text-blue-800"
          >
            Edit
          </button>
        )}
      </div>

      <div className="space-y-1 text-gray-600 text-sm">
        <p>ID: {wsId}</p>
        <p>Type: {workspace.personal ? 'Personal' : 'Team'}</p>
        <p>Your Role: {workspace.role}</p>
        <p>Status: {workspace.joined ? 'Active' : 'Pending'}</p>
      </div>
    </div>
  );
}

// Example 4: Using withWorkspace Helper
import { withWorkspace } from '@/components/workspace-wrapper';

export async function WorkspaceListPage({
  searchParams,
}: {
  searchParams: Promise<{ wsId: string }>;
}) {
  return withWorkspace(
    searchParams,
    WorkspaceCard,
    {
      onEdit: () => console.log('Edit workspace'),
    },
    <div className="p-6">Loading workspace...</div>
  );
}

Contributing Examples

When adding new examples:

Use realistic, practical scenarios
Include proper TypeScript types
Show error handling
Include both server and client examples
Update this index page

​Component Examples

​WorkspaceWrapper

​Usage Patterns

​Server Components

​Client Components

​API Routes

​Best Practices

​Error Handling

​Loading States

​Type Safety

​Common Patterns

​Dashboard Pages

​Settings Pages

​API Endpoints

​Illustrative WorkspaceWrapper Examples

​Contributing Examples