Skip to main content
The App component is the main entry point of the Been application. It manages the application’s layout, handles data loading, and coordinates communication between the Globe and Menu components.

​
Overview

The App component:
  • Loads country data asynchronously
  • Manages loading and error states
  • Provides a responsive grid layout
  • Handles menu fullscreen toggle on mobile devices

​
Component Structure

export const App: FC = memo(() => {
  // Component implementation
});
The App component takes no props and uses Jotai atoms for state management.

​
State Management

The component manages several pieces of local state:
  • loading - Boolean indicating if country data is being loaded
  • error - Error object if data loading fails
  • menuFullscreen - Boolean controlling menu expansion on mobile

​
Layout Structure

The App uses a responsive grid layout that adapts to different screen sizes: 
<div className="grid size-full grid-rows-[auto,1fr,auto] md:grid-cols-3 md:grid-rows-[auto,1fr]">
  <div>Header</div>
  <Menu />
  <Globe />
</div>

​
Desktop Layout (md and up)

  • 3-column grid
  • Header spans 1 column
  • Menu takes 1 column (full height)
  • Globe takes 2 columns (full height)

​
Mobile Layout

  • Single column with 3 rows
  • Header at top
  • Globe in middle (60vh minimum)
  • Menu at bottom (expandable)

​
Usage Example

import { App } from './components/app';
import { createRoot } from 'react-dom/client';

const root = createRoot(document.getElementById('root')!);
root.render(<App />);

​
Data Loading

The component loads country data on mount: 
useEffect(() => {
  import('../data/countries')
    .then(({ countries }) => {
      const countryMap = Object.fromEntries(
        countries.map((c) => [c.iso3166, c]),
      );
      setRawCountries(countryMap);
      setLoading(false);
    })
    .catch((error) => {
      setError(error);
    });
}, [setRawCountries]);

​
Error Handling

When an error occurs during data loading, a user-friendly error message is displayed with a retry button: 
{error ? (
  <div className="flex size-full flex-col items-center justify-center gap-2">
    <span>Oops! Something went wrong whilst loading the list of countries.</span>
    <button onClick={reload}>Try again</button>
  </div>
) : (
  <Menu />
)}

​
Mobile Features

On mobile devices, the menu can be toggled to fullscreen mode using the toggleMenuFullscreen callback, which is passed to the Menu component.

​
Dependencies

  • jotai - State management
  • classnames - Conditional CSS classes
  • react - Core React functionality

​
Source Code

Location: src/components/app.tsx

Build docs developers (and LLMs) love

Get started for freeTalk to us