Works

apk/components/birthdate-list.tsx

@@ -1,60 +1,23 @@
-// birthdate-list.tsx
-import { useRouter } from "expo-router";
 import {
   SectionList,
   StyleSheet,
   Text,
-  TouchableOpacity,
   View,
 } from "react-native";
+import { BirthdayEntry, useBirthdays } from "@/context/birthdays-context";
 import { BirthdayItem } from "./birthdate-item";
 
-const DATA = [
-  { id: "1", name: "John Doe", date: "2024-01-15" },
-  { id: "2", name: "Jane Smith", date: "2024-01-15" },
-  { id: "3", name: "Bob Johnson", date: "2024-02-10" },
-  { id: "4", name: "Alice Brown", date: "2024-02-10" },
-  { id: "5", name: "Charlie Wilson", date: "2024-01-20" },
-  { id: "6", name: "Bob Johnson", date: "2024-02-10" },
-  { id: "7", name: "Alice Brown", date: "2024-02-10" },
-  { id: "8", name: "Charlie Wilson", date: "2024-01-20" },
-  { id: "9", name: "Bob Johnson", date: "2024-02-10" },
-  { id: "10", name: "Alice Brown", date: "2024-02-10" },
-  { id: "11", name: "Charlie Wilson", date: "2024-01-20" },
-  { id: "12", name: "Charlie Wilson", date: "2024-01-20" },
-  { id: "13", name: "Charlie Wilson", date: "2024-01-20" },
-  { id: "14", name: "Charlie Wilson", date: "2024-01-20" },
-];
-
-interface BirthdayItemData {
-  id: string;
-  name: string;
-  date: string;
-}
-
 interface SectionData {
   title: string;
-  data: BirthdayItemData[];
+  data: BirthdayEntry[];
 }
 
 export function BirthdayList() {
-  const router = useRouter();
-  const groupedData = groupBirthdaysByDate(DATA);
+  const { birthdays } = useBirthdays();
+  const groupedData = groupBirthdaysByDate(birthdays);
 
   return (
     <View style={styles.container}>
-      <View style={styles.titleContainer}>
-        <Text style={{ fontSize: 24, fontWeight: "bold" }}>
-          Upcoming Birthdays
-        </Text>
-        <TouchableOpacity
-          onPress={() => router.push("/add")}
-          style={styles.addButton}
-        >
-          <Text style={styles.addButtonText}>+</Text>
-        </TouchableOpacity>
-      </View>
-
       <SectionList
         sections={groupedData}
         keyExtractor={(item) => item.id}
@@ -64,9 +27,17 @@ export function BirthdayList() {
         style={styles.list}
         contentContainerStyle={styles.listContent}
         showsVerticalScrollIndicator={false}
+        ListEmptyComponent={
+          <View style={styles.emptyState}>
+            <Text style={styles.emptyTitle}>No birthdays yet</Text>
+            <Text style={styles.emptyText}>
+              Add one from the form and it will appear here.
+            </Text>
+          </View>
+        }
         renderSectionHeader={({ section: { title } }) => (
           <View style={styles.headerContainer}>
-            <Text style={styles.sectionHeader}>{title}</Text>
+            <Text style={styles.sectionHeader}>{formatDisplayDate(title)}</Text>
           </View>
         )}
       />
@@ -75,10 +46,10 @@ export function BirthdayList() {
 }
 
 // Helper function to group and sort
-function groupBirthdaysByDate(data: BirthdayItemData[]): SectionData[] {
+function groupBirthdaysByDate(data: BirthdayEntry[]): SectionData[] {
   // Sort by date
   const sorted = [...data].sort((a, b) => {
-    return new Date(a.date).getTime() - new Date(b.date).getTime();
+    return parseBirthdayDate(a.date).getTime() - parseBirthdayDate(b.date).getTime();
   });
 
   // Group by date
@@ -97,37 +68,28 @@ function groupBirthdaysByDate(data: BirthdayItemData[]): SectionData[] {
   return grouped;
 }
 
+function parseBirthdayDate(date: string) {
+  return new Date(`${date}T00:00:00`);
+}
+
+function formatDisplayDate(date: string) {
+  return parseBirthdayDate(date).toLocaleDateString(undefined, {
+    month: "long",
+    day: "numeric",
+    year: "numeric",
+  });
+}
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,
   },
-  titleContainer: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-    gap: 12,
-    paddingHorizontal: 5,
-    paddingVertical: 10,
-  },
   list: {
     flex: 1,
   },
   listContent: {
     paddingBottom: 20,
   },
-  addButton: {
-    width: 40,
-    height: 40,
-    borderRadius: 20,
-    backgroundColor: "#007AFF",
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  addButtonText: {
-    fontSize: 24,
-    color: "white",
-    fontWeight: "bold",
-  },
   headerContainer: {
     paddingVertical: 10,
     paddingHorizontal: 5,
@@ -136,4 +98,17 @@ const styles = StyleSheet.create({
     fontSize: 18,
     fontWeight: "bold",
   },
+  emptyState: {
+    paddingHorizontal: 5,
+    paddingTop: 24,
+    gap: 6,
+  },
+  emptyTitle: {
+    fontSize: 18,
+    fontWeight: "bold",
+  },
+  emptyText: {
+    color: "#666",
+    fontSize: 15,
+  },
 });