Added saving of push notifications

app/HomeScreen.tsx

@@ -1,12 +1,13 @@
+import AsyncStorage from "@react-native-async-storage/async-storage";
 import * as Notifications from "expo-notifications";
 import React, { useEffect, useState } from "react";
 import { Linking, SafeAreaView, ScrollView, Text, TouchableOpacity, View } from "react-native";
 import { Item } from "types/Item";
-import { useNotificationListener } from "../hooks/useNotificationListener";
 import { usePushNotifications } from "../hooks/usePushNotifications";
 import { styles } from "./HomeScreen.styles";
 
-const API_URL = "http://167.86.73.246:8100";
+const API_URL = "https://notifier.gansejunge.com";
+const STORAGE_KEY = "notifications";
 
 type Category = "home" | "royal-road" | "podcasts" | "mixtapes";
 
@@ -14,9 +15,9 @@ export default function HomeScreen() {
 	const [data, setData] = useState<Item[]>([]);
 	const [selected, setSelected] = useState<Category>("home");
 	const [menuOpen, setMenuOpen] = useState(false);
-	const [lastNotification, setLastNotification] = useState<Notifications.Notification | null>(null);
 
-	const expoPushToken = usePushNotifications({
+	// Register push notifications
+	usePushNotifications({
 		userId: 1,
 		apiKey: "super-secret-api-key",
 		backendUrl: API_URL,
@@ -24,23 +25,48 @@ export default function HomeScreen() {
 		locale: "en-uk",
 	});
 
-	useNotificationListener(notification => {
-		setLastNotification(notification);
-	});
-
+	// Load saved notifications on startup
 	useEffect(() => {
-		async function fetchData() {
+		(async () => {
 			try {
-				const res = await fetch(`${API_URL}/`);
-				const json = await res.json();
-				setData(json.data);
+				const stored = await AsyncStorage.getItem(STORAGE_KEY);
+				if (stored) {
+					setData(JSON.parse(stored));
+				}
 			} catch (err) {
-				console.error("Failed to fetch data:", err);
+				console.error("Failed to load stored notifications:", err);
 			}
-		}
-		fetchData();
+		})();
 	}, []);
 
+	// Listen for incoming notifications
+	useEffect(() => {
+		const subscription = Notifications.addNotificationReceivedListener(notification => {
+			// Try to extract category from push payload
+			const rawCategory = notification.request.content.data?.category as Category | undefined;
+			const category: Category = rawCategory && ["royal-road", "podcasts", "mixtapes"].includes(rawCategory)
+				? rawCategory
+				: "home";
+
+			const item: Item = {
+				timestamp: Date.now(),
+				category,
+				title: notification.request.content.title || "No title",
+				info: notification.request.content.body || "No description",
+				link: (notification.request.content.data?.link as string) || "#",
+			};
+
+			setData(prev => {
+				const updated = [...prev, item].sort((a, b) => b.timestamp - a.timestamp);
+				AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(updated)); // persist
+				return updated;
+			});
+		});
+
+		return () => subscription.remove();
+	}, []);
+
+	// Filtered view: home shows everything
 	const filteredData = selected === "home" ? data : data.filter(item => item.category === selected);
 
 	const menuItems: { label: string; key: Category }[] = [
@@ -82,15 +108,19 @@ export default function HomeScreen() {
 				</Text>
 
 				<ScrollView style={styles.dataContainer}>
-					{filteredData.map(item => (
-						<View key={`${item.timestamp}-${item.title}`} style={styles.dataItem}>
-							<Text style={styles.dataTitle}>{item.title}</Text>
-							<Text style={styles.dataDescription}>{item.info}</Text>
-							<TouchableOpacity onPress={() => Linking.openURL(item.link)}>
-								<Text style={{ color: "blue" }}>Read more</Text>
-							</TouchableOpacity>
-						</View>
-					))}
+					{filteredData.length === 0 ? (
+						<Text style={{ textAlign: "center", marginTop: 20 }}>No items yet</Text>
+					) : (
+						filteredData.map(item => (
+							<View key={`${item.timestamp}-${item.title}`} style={styles.dataItem}>
+								<Text style={styles.dataTitle}>{item.title}</Text>
+								<Text style={styles.dataDescription}>{item.info}</Text>
+								<TouchableOpacity onPress={() => Linking.openURL(item.link)}>
+									<Text style={{ color: "blue" }}>Read more</Text>
+								</TouchableOpacity>
+							</View>
+						))
+					)}
 				</ScrollView>
 			</View>
 		</SafeAreaView>