fca42db4d2
- PRD: vollständige Produktspezifikation (5 Module, Scope, Akzeptanzkriterien) - ARCHITECTURE: Tech Stack, Ordnerstruktur, Multi-Tenancy, Push, Kosten - DATABASE_SCHEMA: Vollständiges SQL-Schema mit RLS Policies und Views - USER_STORIES: 40+ Stories nach Rolle (Admin, Mitglied, Azubi, Obermeister) - PERSONAS: 5 detaillierte Nutzerprofile mit Alltag, Zitaten und Erwartungen - BUSINESS_MODEL: Preistabellen, Unit Economics, Revenue-Projektionen, Distribution - ROADMAP: 6 Phasen, Sprint-Planung, Meilensteine und KPIs - COMPETITIVE_ANALYSIS: Wettbewerbsmatrix, USPs, Preispositionierung - API_DESIGN: Supabase Query Patterns, Edge Functions, Realtime Subscriptions - ONBOARDING_FLOWS: 7 User Flows von Setup bis Fehlerfall - GTM_STRATEGY: 3-Phasen-Vertrieb, Outreach-Sequenz, Einwandbehandlung - AZUBI_MODULE: Video-Feed, 1-Click-Apply, Chat, Berichtsheft, Quiz - DSGVO_KONZEPT: Rechtsgrundlagen, TOMs, AVV, Minderjährige, Incident Response - FEATURES_BACKLOG: 72 Features nach MoSCoW + Technische Schulden Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
101 lines
3.0 KiB
TypeScript
101 lines
3.0 KiB
TypeScript
import {
|
|
View,
|
|
Text,
|
|
FlatList,
|
|
TouchableOpacity,
|
|
RefreshControl,
|
|
ScrollView,
|
|
} from 'react-native'
|
|
import { SafeAreaView } from 'react-native-safe-area-context'
|
|
import { useState } from 'react'
|
|
import { trpc } from '@/lib/trpc'
|
|
import { useRouter } from 'expo-router'
|
|
import { NewsCard } from '@/components/news/NewsCard'
|
|
import { EmptyState } from '@/components/ui/EmptyState'
|
|
import { LoadingSpinner } from '@/components/ui/LoadingSpinner'
|
|
import { NEWS_KATEGORIE_LABELS } from '@innungsapp/shared'
|
|
|
|
const FILTER_OPTIONS = [
|
|
{ value: undefined, label: 'Alle' },
|
|
{ value: 'Wichtig', label: 'Wichtig' },
|
|
{ value: 'Pruefung', label: 'Prüfung' },
|
|
{ value: 'Foerderung', label: 'Förderung' },
|
|
{ value: 'Veranstaltung', label: 'Veranstaltung' },
|
|
]
|
|
|
|
export default function NewsScreen() {
|
|
const router = useRouter()
|
|
const [kategorie, setKategorie] = useState<string | undefined>(undefined)
|
|
const { data, isLoading, refetch, isRefetching } = trpc.news.list.useQuery({
|
|
kategorie: kategorie as never,
|
|
})
|
|
|
|
return (
|
|
<SafeAreaView className="flex-1 bg-gray-50" edges={['top']}>
|
|
{/* Header */}
|
|
<View className="bg-white px-4 py-3 border-b border-gray-100">
|
|
<Text className="text-xl font-bold text-gray-900">News</Text>
|
|
</View>
|
|
|
|
{/* Kategorie Filter */}
|
|
<ScrollView
|
|
horizontal
|
|
showsHorizontalScrollIndicator={false}
|
|
className="bg-white border-b border-gray-100"
|
|
contentContainerStyle={{ paddingHorizontal: 12, paddingVertical: 10, gap: 8 }}
|
|
>
|
|
{FILTER_OPTIONS.map((opt) => (
|
|
<TouchableOpacity
|
|
key={String(opt.value)}
|
|
onPress={() => setKategorie(opt.value)}
|
|
className={`px-4 py-1.5 rounded-full border ${
|
|
kategorie === opt.value
|
|
? 'bg-brand-500 border-brand-500'
|
|
: 'bg-white border-gray-200'
|
|
}`}
|
|
>
|
|
<Text
|
|
className={`text-sm font-medium ${
|
|
kategorie === opt.value ? 'text-white' : 'text-gray-600'
|
|
}`}
|
|
>
|
|
{opt.label}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
))}
|
|
</ScrollView>
|
|
|
|
{/* List */}
|
|
{isLoading ? (
|
|
<LoadingSpinner />
|
|
) : (
|
|
<FlatList
|
|
data={data ?? []}
|
|
keyExtractor={(item) => item.id}
|
|
contentContainerStyle={{ padding: 12, gap: 8 }}
|
|
refreshControl={
|
|
<RefreshControl
|
|
refreshing={isRefetching}
|
|
onRefresh={refetch}
|
|
tintColor="#E63946"
|
|
/>
|
|
}
|
|
renderItem={({ item }) => (
|
|
<NewsCard
|
|
news={item}
|
|
onPress={() => router.push(`/(app)/news/${item.id}`)}
|
|
/>
|
|
)}
|
|
ListEmptyComponent={
|
|
<EmptyState
|
|
icon="📰"
|
|
title="Keine News"
|
|
subtitle="Noch keine Beiträge für diese Kategorie"
|
|
/>
|
|
}
|
|
/>
|
|
)}
|
|
</SafeAreaView>
|
|
)
|
|
}
|