7c8695cacf
- Update package.json to Expo ~54.0.35, expo-router ~6.0.24, RN 0.81.5 - Remove NativeWind/Tailwind dependencies - Fix babel.config.js: presets babel-preset-expo only - Rewrite all screens with StyleSheet.create (no className) - Add lucide-react-native + react-native-svg - Export design tokens C from _layout.tsx for shared usage - Install node_modules (702 packages) Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
83 lines
3.2 KiB
TypeScript
83 lines
3.2 KiB
TypeScript
import { useEffect, useState } from 'react'
|
|
import {
|
|
View, Text, FlatList, TouchableOpacity, ActivityIndicator, RefreshControl, StyleSheet,
|
|
} from 'react-native'
|
|
import { SafeAreaView } from 'react-native-safe-area-context'
|
|
import { useLocalSearchParams, useRouter } from 'expo-router'
|
|
import { ArrowLeft } from 'lucide-react-native'
|
|
import { apiFetch } from '@/lib/api'
|
|
import { ENDPOINTS } from '@/lib/config'
|
|
import { C } from '../_layout'
|
|
|
|
interface Note {
|
|
id: string
|
|
title: string
|
|
updatedAt: string
|
|
}
|
|
|
|
export default function NotebookScreen() {
|
|
const { id } = useLocalSearchParams<{ id: string }>()
|
|
const [notes, setNotes] = useState<Note[]>([])
|
|
const [notebookName, setNotebookName] = useState('')
|
|
const [loading, setLoading] = useState(true)
|
|
const [refreshing, setRefreshing] = useState(false)
|
|
const router = useRouter()
|
|
|
|
const load = async () => {
|
|
try {
|
|
const res = await apiFetch(ENDPOINTS.notes(id))
|
|
if (res.ok) {
|
|
const data = await res.json()
|
|
setNotes(data.notes ?? [])
|
|
setNotebookName(data.notebookName ?? '')
|
|
}
|
|
} finally {
|
|
setLoading(false)
|
|
setRefreshing(false)
|
|
}
|
|
}
|
|
|
|
useEffect(() => { load() }, [id])
|
|
|
|
return (
|
|
<SafeAreaView style={s.safe}>
|
|
<View style={s.header}>
|
|
<TouchableOpacity onPress={() => router.back()} style={{ padding: 4 }}>
|
|
<ArrowLeft size={22} color={C.ink} />
|
|
</TouchableOpacity>
|
|
<Text style={s.headerTitle}>{notebookName || 'Carnet'}</Text>
|
|
</View>
|
|
|
|
{loading
|
|
? <View style={s.center}><ActivityIndicator color={C.brand} /></View>
|
|
: <FlatList
|
|
data={notes}
|
|
keyExtractor={(item) => item.id}
|
|
contentContainerStyle={s.list}
|
|
refreshControl={<RefreshControl refreshing={refreshing} onRefresh={() => { setRefreshing(true); load() }} tintColor={C.brand} />}
|
|
renderItem={({ item }) => (
|
|
<TouchableOpacity onPress={() => router.push(`/note/${item.id}`)} style={s.card}>
|
|
<Text style={s.cardTitle} numberOfLines={1}>{item.title || 'Sans titre'}</Text>
|
|
<Text style={s.cardDate}>
|
|
{new Date(item.updatedAt).toLocaleDateString('fr-FR', { day: 'numeric', month: 'short' })}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
)}
|
|
ListEmptyComponent={<Text style={s.empty}>Carnet vide.</Text>}
|
|
/>}
|
|
</SafeAreaView>
|
|
)
|
|
}
|
|
|
|
const s = StyleSheet.create({
|
|
safe: { flex: 1, backgroundColor: C.paper },
|
|
header: { flexDirection: 'row', alignItems: 'center', gap: 12, paddingHorizontal: 16, paddingVertical: 12, borderBottomWidth: 1, borderBottomColor: C.border },
|
|
headerTitle: { fontSize: 17, fontWeight: '600', color: C.ink, flex: 1 },
|
|
center: { flex: 1, alignItems: 'center', justifyContent: 'center' },
|
|
list: { paddingHorizontal: 20, paddingTop: 16, paddingBottom: 32 },
|
|
card: { backgroundColor: C.white, borderWidth: 1, borderColor: C.border, borderRadius: 16, padding: 16, marginBottom: 10 },
|
|
cardTitle: { fontSize: 15, fontWeight: '600', color: C.ink },
|
|
cardDate: { fontSize: 12, color: C.concrete, marginTop: 4 },
|
|
empty: { textAlign: 'center', color: C.concrete, marginTop: 48 },
|
|
})
|