MainPage Component

   ██████╗ ██╗████████╗██████╗  █████╗ ██╗   ██╗
  ██╔════╝ ██║╚══██╔══╝██╔══██╗██╔══██╗╚██╗ ██╔╝
  ██║  ███╗██║   ██║   ██████╔╝███████║ ╚████╔╝ 
  ██║   ██║██║   ██║   ██╔══██╗██╔══██║  ╚██╔╝  
  ╚██████╔╝██║   ██║   ██║  ██║██║  ██║   ██║   
   ╚═════╝ ╚═╝   ╚═╝   ╚═╝  ╚═╝╚═╝  ╚═╝   ╚═╝   
    Official Wiki of the GitRay Repository!

Back to Home

---

Table of Contents

• Description
• Implementation
• Structure
  • Project path and file name
  • Related files
  • Technology
• UML-Diagrams
  • Package diagram
  • Activity diagram
  • Object diagram
  • Class diagram

Description

Overview of MainPage:

• Main application page that serves as the central hub for GitRay's repository visualization functionality.
• Orchestrates repository input and displays commit information with interactive visualizations.
• Provides a responsive layout with header (including logo and login/signup buttons), main content area, and footer.
• Features dynamic switching between commit list and activity heatmap views.
• Handles loading states, error management, and user interactions for repository data visualization.
• Includes placeholder explanation buttons when no repository data is loaded.

Implementation

What does this component exactly do:

• The MainPage component serves as the primary interface for users to analyze Git repositories.
• A user can enter a repository URL through the RepoInput component.
• The component manages authentication UI elements (login/signup buttons in the header).
• Displays explanatory placeholder buttons when no data is loaded.

What is the trigger of this component:

• User input of a repository URL through the RepoInput component, followed by clicking the "Visualize" button.

What happens with the GUI:

• Displays a loading animation (RiveLoader) with message "Loading repository data..." while fetching data.
• Shows error messages in red-bordered containers (red-900 background with red-700 border) if requests fail.
• Renders navigation buttons to switch between "Commit List" and "Activity Heatmap" views with green styling for active state.
• Dynamically displays either the CommitList or ActivityHeatmap component based on user selection.
• Shows heatmap view by default after successful data fetch.
• Displays placeholder explanation buttons (Explanation 1, 2, 3) when no repository data is loaded.
• Header includes animated logo and login/signup buttons.
• Footer contains placeholder text for impressum, privacy policy, and about us information.

What happens in the background/Backend:

• Calls the getRepositoryFullData API endpoint with the repository URL and 'day' time period.
• Uses POST request to /api/repositories/full-data endpoint.
• Fetches comprehensive repository data including both commits and heatmap information in a single optimized request.
• Returns structured data with commits array and heatmapData object.
• Updates component state with received commit data.
• Handles error cases with detailed error messages and displays appropriate user feedback.
• Automatically enables heatmap view upon successful data fetch.

Structure

Project path and file name

MainPage Component:

• File name: MainPage.tsx
• Project path: gitray/apps/frontend/src/pages/MainPage.tsx

Unit-Test:

• File name: MainPage.test.tsx
• Project path: gitray/apps/frontend/__tests__/pages/MainPage.test.tsx

Related files

1. RepoInput Component: gitray/apps/frontend/src/components/RepoInput.tsx
   • Handles repository URL input form
2. CommitList Component: gitray/apps/frontend/src/components/CommitList.tsx
   • Displays commits in list format
3. ActivityHeatmap Component: gitray/apps/frontend/src/components/ActivityHeatmap.tsx
   • Visualizes commit activity as heatmap
4. RiveLoader Component: gitray/apps/frontend/src/components/RiveLoader.tsx
   • Animated loading indicator
5. RiveLogo Component: gitray/apps/frontend/src/components/RiveLogo.tsx
   • Animated logo component
6. API Service: gitray/apps/frontend/src/services/api.ts
   • Contains getRepositoryFullData function
7. Shared Types: gitray/packages/shared-types/src/index.ts
   • Defines Commit interface and related types

Technology

List of Technologies:

• React (Functional Component with Hooks)
• TypeScript
• Tailwind CSS (for styling and responsive design)
• React State Management (useState hooks)
• Axios (for API calls via api service)
• Rive (for animated logo and loader components)
• Vitest (for unit testing)
• React Testing Library (for component testing)

UML-Diagrams

Package diagram

Activity diagram

Object diagram

Class diagram