Projekt: Galaktyczne Centrum Dowodzenia

Przez cały ten moduł budowałeś wiedzę krok po kroku: Context API, reducery, łączenie tych narzędzi, optymalizacja. Teraz czas połączyć to wszystko w jeden projekt - Galaktyczne Centrum Dowodzenia (Galactic Command Center).

To nie jest kolejna lekcja teoretyczna. To projekt, który sam zbudujesz, używając wszystkiego czego się nauczyłeś.

Co zbudujesz?

Aplikację zarządzającą flotą statków kosmicznych z trzema niezależnymi systemami, z których każdy ma własny kontekst:

• ThemeContext - przełącznik motywu (tryb dzienny "Sunrise" / nocny "Deep Space")
• AuthContext - system autoryzacji (Kapitan zalogowany / wylogowany)
• MissionContext - serce aplikacji: zarządzanie misjami przez useReducer

Komponenty na ekranie będą konsumować różne konteksty, zależnie od swoich potrzeb.

Wymagania projektu

1. ThemeContext

Kontekst przechowuje aktualny motyw i funkcję przełączającą. Komponent

ThemeToggle

zmienia motyw, a reszta aplikacji reaguje na zmianę (np. klasa CSS na głównym kontenerze).

1// Oczekiwana struktura kontekstu
2{
3  theme: 'dark' | 'light',
4  toggleTheme: () => void
5}

2. AuthContext

Kontekst przechowuje dane kapitana i umożliwia logowanie/wylogowanie. Formularz logowania powinien przyjmować imię kapitana. Po zalogowaniu wyświetlaj powitanie i przycisk wylogowania.

1// Oczekiwana struktura kontekstu
2{
3  captain: { name: string } | null,
4  login: (name: string) => void,
5  logout: () => void
6}

3. MissionContext z useReducer

To główna część projektu. Reducer obsługuje co najmniej 4 typy akcji:

1// Typy akcji do zaimplementowania
2'ADD_MISSION'      // dodaje nową misję do listy
3'UPDATE_STATUS'    // zmienia status istniejącej misji
4'ASSIGN_SHIP'      // przypisuje statek do misji
5'COMPLETE_MISSION' // oznacza misję jako zakończoną
6
7// Przykładowy kształt stanu
8{
9  missions: [
10    {
11      id: 1,
12      name: 'Eksploracja Marsa',
13      status: 'planning' | 'active' | 'completed',
14      assignedShip: string | null
15    }
16  ],
17  availableShips: ['USS Nova', 'Orion-7', 'Celestia']
18}

Struktura komponentów

Aplikacja powinna składać się z następujących komponentów:

1function App() {
2  return (
3    <ThemeProvider>
4      <AuthProvider>
5        <MissionProvider>
6          <div className="app">
7            <Header />        {/* używa AuthContext + ThemeContext */}
8            <MissionDashboard /> {/* używa MissionContext + AuthContext */}
9            <ThemeToggle />   {/* używa ThemeContext */}
10          </div>
11        </MissionProvider>
12      </AuthProvider>
13    </ThemeProvider>
14  );
15}

Header - wyświetla tytuł aplikacji, status zalogowania (z AuthContext) i aktualny motyw.

MissionDashboard - lista misji, formularz dodawania nowej misji, przypisywanie statków. Dostępny tylko dla zalogowanego kapitana.

ThemeToggle - przycisk przełączający między trybem dziennym i nocnym.

Wskazówki implementacyjne

Zacznij od zbudowania każdego providera osobno i przetestowania go zanim połączysz wszystkie razem. Dobrą kolejnością jest: ThemeProvider (najprostszy) → AuthProvider → MissionProvider.

Pamiętaj o niestandardowych hookach dla każdego kontekstu:

1function useTheme() {
2  const ctx = useContext(ThemeContext);
3  if (!ctx) throw new Error('useTheme musi być wewnątrz ThemeProvider');
4  return ctx;
5}
6
7function useAuth() {
8  const ctx = useContext(AuthContext);
9  if (!ctx) throw new Error('useAuth musi być wewnątrz AuthProvider');
10  return ctx;
11}
12
13function useMissions() {
14  const ctx = useContext(MissionContext);
15  if (!ctx) throw new Error('useMissions musi być wewnątrz MissionProvider');
16  return ctx;
17}

Dla MissionContext zastosuj wzorzec podziału na kontekst stanu i kontekst dispatch, którego nauczyłeś się w poprzedniej lekcji - to dobra praktyka przy złożonym stanie z useReducer.

Co demonstrować w projekcie

Gotowy projekt powinien pokazywać:

1. Trzy niezależne systemy kontekstu działające równocześnie
2. Komponent

   Header

   korzystający jednocześnie z

   AuthContext

   i

   ThemeContext

3. Zmianę motywu natychmiast widoczną w całej aplikacji
4. Dodawanie misji i zmianę ich statusu przez dispatch
5. Blokadę panelu misji dla niezalogowanych użytkowników
6. Przypisanie statku do misji (akcja

   ASSIGN_SHIP

   z payloadem)

Projekt jest celowo opisany ogólnie - to Twoja szansa na twórcze podejście do rozwiązania. Skorzystaj z edytora poniżej, żeby zbudować swoją wersję Galaktycznego Centrum Dowodzenia.