Dashboard

Overview

The Dashboard feature provides users with an overview of their repositories and activities. It aggregates data related to repository statuses, user interactions, and allows for filtering based on various parameters such as language and status. This feature is crucial for users to manage their repositories effectively and stay updated on their activities.

User-facing behavior

User Interface: The Dashboard presents a clean and organized layout where users can view their repositories at a glance.
Search and Filter: Users can search for repositories using keywords and filter results by language and status, enhancing the usability of the dashboard.
Status Indicators: Each repository displays its current status (e.g., Not generated, Generating, Ready, Failed) using color-coded badges for quick visual identification.
Session Management: If a user is not authenticated, they are redirected to the sign-in page, ensuring secure access to the dashboard.

Architecture and data flow

Data Fetching: The Dashboard fetches data from the getRepositoryDashboardData function, which retrieves repository information based on user parameters.
Session Handling: The user's session is validated before any data is fetched. If the session is invalid, the user is redirected to sign in.
Asynchronous Operations: The dashboard uses asynchronous calls to gather data, ensuring that the UI remains responsive while data is being loaded.
Error Handling: The implementation includes error handling for fetching data, allowing for graceful degradation in case of issues.

Key implementation details

Dashboard Page Component: The main component for rendering the dashboard interface is defined in page.tsx. It handles session validation and data fetching.

const DashboardPage = async ({ searchParams }: DashboardPageProps) => {
  const session = await getSession();
  if (!session) {
    redirect('/sign-in?redirect=/dashboard');
  }
  // Fetching data logic follows...
};

Status Management: The dashboard uses predefined status variants and labels to represent the state of each repository.

const STATUS_VARIANTS: Record<WikiStatus, 'secondary' | 'outline' | 'destructive'> = {
  not_generated: 'outline',
  generating: 'secondary',
  ready: 'secondary',
  failed: 'destructive',
};

Data Structure: The RepositoryDashboardData interface defines the structure of the data returned from the repository service, including items, available languages, and pagination information.

export interface RepositoryDashboardData {
  items: RepositoryDashboardItem[];
  availableLanguages: string[];
  pageInfo: {
    previousCursor: string | null;
    nextCursor: string | null;
  };
}

Error Handling in Data Fetching: The dashboard gracefully handles errors during data fetching, providing a fallback mechanism to ensure the user experience is not severely impacted.

const [dailyUsage, dashboardResult] = await Promise.all([
  getDailyGenerationUsage(session.user.workosId).catch(() => ({
    used: 0,
    limit: 5,
    resetAt: '',
  })),
  getRepositoryDashboardData({
    workosUserId: session.user.workosId,
    query,
    language: languageFilter,
    status: statusFilter as WikiStatus | 'all',
    cursor,
    refresh,
  })
  // Error handling logic follows...
]);

Key files