Theme und Dark Mode

import { Stack } from 'expo-router';
import { type ReactElement, useState } from 'react';
import {
  ActivityIndicator,
  Pressable,
  ScrollView,
  StyleSheet,
  Text,
  View,
} from 'react-native';
 
import type { City } from '@/model/city';
import type { CurrentWeather } from '@/model/current-weather';
import { typography, useAppColors } from '@/ui/theme';
import { useWeather } from '@/ui/use-weather';
import {
  conditionEmoji,
  conditionLabel,
  formatTemperature,
} from '@/ui/weather-condition-ui';
import type { WeatherUiState } from '@/ui/weather-ui-state';
 
type WeatherScreenProps = {
  city: City;
};
 
// Holt den Zustand aus dem Hook und hält den UI-State für °C/°F
export function WeatherScreen({ city }: WeatherScreenProps) {
  const uiState = useWeather(city);
  const [isCelsius, setIsCelsius] = useState(true);
 
  return (
    <WeatherContent
      city={city}
      uiState={uiState}
      isCelsius={isCelsius}
      onToggleUnit={() => setIsCelsius(!isCelsius)}
    />
  );
}
 
type WeatherContentProps = {
  city: City;
  uiState: WeatherUiState;
  isCelsius: boolean;
  onToggleUnit: () => void;
};
 
// Zeigt nur an, was es über Props bekommt
function WeatherContent({
  city,
  uiState,
  isCelsius,
  onToggleUnit,
}: WeatherContentProps) {
  return (
    <>
      <Stack.Screen
        options={{
          title: city.name,
          headerRight: () => (
            <UnitToggle isCelsius={isCelsius} onToggle={onToggleUnit} />
          ),
        }}
      />
      <WeatherBody uiState={uiState} isCelsius={isCelsius} />
    </>
  );
}
 
type WeatherBodyProps = {
  uiState: WeatherUiState;
  isCelsius: boolean;
};
 
function WeatherBody({ uiState, isCelsius }: WeatherBodyProps): ReactElement {
  const colors = useAppColors();
 
  switch (uiState.status) {
    case 'loading':
      return (
        <View style={styles.centered}>
          <ActivityIndicator size="large" color={colors.primary} />
        </View>
      );
    case 'success':
      return (
        <ScrollView>
          <CurrentWeatherCard
            city={uiState.city}
            weather={uiState.weather}
            isCelsius={isCelsius}
          />
        </ScrollView>
      );
    case 'error':
      return (
        <View style={styles.centered}>
          <Text style={[typography.bodyLarge, { color: colors.text }]}>
            {uiState.message}
          </Text>
        </View>
      );
  }
}
 
type UnitToggleProps = {
  isCelsius: boolean;
  onToggle: () => void;
};
 
function UnitToggle({ isCelsius, onToggle }: UnitToggleProps) {
  const colors = useAppColors();
 
  return (
    <Pressable onPress={onToggle} hitSlop={12}>
      <Text style={[styles.toggle, { color: colors.primary }]}>
        {isCelsius ? '°C' : '°F'}
      </Text>
    </Pressable>
  );
}
 
type CurrentWeatherCardProps = {
  city: City;
  weather: CurrentWeather;
  isCelsius: boolean;
};
 
function CurrentWeatherCard({
  city,
  weather,
  isCelsius,
}: CurrentWeatherCardProps) {
  const colors = useAppColors();
  const textColor = { color: colors.onPrimaryContainer };
 
  return (
    <View style={[styles.card, { backgroundColor: colors.primaryContainer }]}>
      <Text style={[typography.headlineMedium, textColor]}>{city.name}</Text>
      <Text style={styles.emoji}>{conditionEmoji[weather.condition]}</Text>
      <Text style={[typography.displayLarge, textColor]}>
        {formatTemperature(weather.temperature, isCelsius)}
      </Text>
      <View style={styles.row}>
        <Text style={[typography.bodyLarge, textColor]}>
          Wind: {Math.round(weather.windSpeed)} km/h
        </Text>
        <Text style={[typography.bodyLarge, textColor]}>
          {conditionLabel[weather.condition]}
        </Text>
      </View>
    </View>
  );
}
 
const styles = StyleSheet.create({
  centered: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    padding: 16,
  },
  toggle: { fontSize: 18, paddingHorizontal: 8 },
  card: {
    margin: 16, // außen
    padding: 24, // innen
    borderRadius: 24,
    alignItems: 'center',
  },
  emoji: { fontSize: 72 },
  row: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignSelf: 'stretch',
    marginTop: 16,
  },
});

import { router, Stack } from 'expo-router';
import { FlatList, Pressable, StyleSheet, Text, View } from 'react-native';
 
import type { City } from '@/model/city';
import { typography, useAppColors } from '@/ui/theme';
 
type CityListScreenProps = {
  cities: City[];
};
 
export function CityListScreen({ cities }: CityListScreenProps) {
  return (
    <>
      <Stack.Screen options={{ title: 'Städte' }} />
      <FlatList
        data={cities}
        keyExtractor={(city) => city.name}
        renderItem={({ item }) => <CityRow city={item} />}
        ItemSeparatorComponent={Divider}
      />
    </>
  );
}
 
function CityRow({ city }: { city: City }) {
  const colors = useAppColors();
 
  function openWeather() {
    // Navigieren = neuen Screen auf den Stack legen
    router.push({
      pathname: '/weather',
      params: {
        name: city.name,
        latitude: city.latitude,
        longitude: city.longitude,
      },
    });
  }
 
  return (
    <Pressable
      onPress={openWeather}
      style={({ pressed }) => [
        styles.row,
        pressed && { backgroundColor: colors.pressed },
      ]}
    >
      <Text style={[typography.titleMedium, { color: colors.text }]}>
        {city.name}
      </Text>
      <Text style={[typography.bodyMedium, { color: colors.textSecondary }]}>
        {city.latitude.toFixed(2)}° N, {city.longitude.toFixed(2)}° O
      </Text>
    </Pressable>
  );
}
 
function Divider() {
  const colors = useAppColors();
 
  return (
    <View style={[styles.divider, { backgroundColor: colors.divider }]} />
  );
}
 
const styles = StyleSheet.create({
  row: { paddingHorizontal: 16, paddingVertical: 12 },
  divider: { height: StyleSheet.hairlineWidth },
});