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>

hooks/useNotificationListener.ts

@@ -1,25 +1,44 @@
 import * as Notifications from "expo-notifications";
 import { useEffect } from "react";
+import { Item } from "types/Item";
 
-export function useNotificationListener(
-	onNotificationReceived: (notification: Notifications.Notification) => void
-) {
+// Hook to listen for incoming notifications and map them into Item objects
+export function useNotificationListener(onItem: (item: Item) => void) {
 	useEffect(() => {
-		// Listener for notifications received while app is in foreground
-		const subscription = Notifications.addNotificationReceivedListener(notification => {
-			console.log("Notification received:", notification);
-			onNotificationReceived(notification);
+		// Listen for notification received while app is in foreground
+		const receivedSub = Notifications.addNotificationReceivedListener((notification) => {
+			const item = mapNotificationToItem(notification);
+			if (item) onItem(item);
 		});
 
-		// Listener for user interacting with a notification
-		const responseSubscription = Notifications.addNotificationResponseReceivedListener(response => {
-			console.log("Notification response:", response);
-			onNotificationReceived(response.notification);
+		// Listen for when user taps a notification
+		const responseSub = Notifications.addNotificationResponseReceivedListener((response) => {
+			const item = mapNotificationToItem(response.notification);
+			if (item) onItem(item);
 		});
 
+		// Cleanup on unmount
 		return () => {
-			subscription.remove();
-			responseSubscription.remove();
+			receivedSub.remove();
+			responseSub.remove();
 		};
-	}, []);
+	}, [onItem]);
+}
+
+// Helper: convert Expo notification → Item
+function mapNotificationToItem(notification: Notifications.Notification): Item | null {
+	try {
+		const content = notification.request.content;
+
+		return {
+			timestamp: Date.now(), // Or use content.data.timestamp if backend includes it
+			category: (content.data?.category as Item["category"]) ?? "home",
+			title: content.title ?? "No title",
+			info: content.body ?? "No details",
+			link: (content.data?.link as string) ?? "",
+		};
+	} catch (e) {
+		console.error("Failed to map notification to Item:", e);
+		return null;
+	}
 }

package.json

@@ -12,13 +12,19 @@
   },
   "dependencies": {
     "@expo/metro-runtime": "~6.1.2",
+    "@react-native-async-storage/async-storage": "2.2.0",
     "expo": "~54.0.11",
+    "expo-constants": "~18.0.9",
     "expo-device": "~8.0.9",
+    "expo-linking": "~8.0.8",
     "expo-notifications": "~0.32.12",
     "expo-router": "~6.0.9",
     "expo-splash-screen": "~31.0.10",
+    "expo-system-ui": "~6.0.7",
     "react": "19.1.0",
-    "react-native": "0.81.4"
+    "react-native": "0.81.4",
+    "react-native-safe-area-context": "~5.6.0",
+    "react-native-screens": "~4.16.0"
   },
   "devDependencies": {
     "@types/react": "~19.1.0",