Fixed notifications not being saved unless you clicked on them

- Added automatic cleanup of old notifications after 60 days
- Added deduplicateItems function to prevent the same notification to appear multiple times
- Fixed timestamp

README.md

@@ -1,50 +1,119 @@
-# Welcome to your Expo app 👋
+# Notifier app
 
-This is an [Expo](https://expo.dev) project created with [`create-expo-app`](https://www.npmjs.com/package/create-expo-app).
+A React Native mobile application for receiving push notifications.
 
-## Get started
+## Features
 
-1. Install dependencies
+- **Secure API Authentication** - API key-based authentication to connect to the `backend-api`
+- **Notification Storage** - Notifications are saved locally and deleted after 60 days
+- **Category Organization** - Notifications are organized into categories and a complete history is displayed in Home
+- **Drawer Navigation** - Easy navigation between different notification categories
+- **Interactive Links** - Tap on notification links to open them in your device's browser
+- **Logout Functionality** - Securely unregister your device and clear all local data
 
+<p align="center">
+  <img src="assets/images/main_menu.jpg" alt="Main Menu" width="30%"/>
+  <img src="assets/images/sidemenu.jpg" alt="Side Menu" width="30%"/>
+  <img src="assets/images/rr_category.jpg" alt="RR Category" width="30%"/>
+</p>
+
+## Prerequisites
+
+- Node.js (v14 or higher)
+- Firebase account with google-services.json
+- Expo account with Firebase Admin SDK private key imported
+- Installed eas-cli
+- Android SDK 36
+- Physical Android device (push notifications don't work on simulators/emulators)
+- API key
+
+
+
+## Building from scratch
+
+1. Clone the repository:
+```bash
+git clone <repository-url>
+cd <project-directory>
+```
+
+2. Install dependencies:
 ```bash
 npm install
 ```
 
-2. Start the app
+3. Copy google-services.json to root directory and delete .gitignore file (or comment out google-services.json)
 
+4. Use EAS to build and follow along
 ```bash
-   npx expo start
+eas build --profile release --local --platform android
 ```
 
-In the output, you'll find options to open the app in a
+## Configuration
 
-- [development build](https://docs.expo.dev/develop/development-builds/introduction/)
-- [Android emulator](https://docs.expo.dev/workflow/android-studio-emulator/)
-- [iOS simulator](https://docs.expo.dev/workflow/ios-simulator/)
-- [Expo Go](https://expo.dev/go), a limited sandbox for trying out app development with Expo
+### Backend URL
 
-You can start developing by editing the files inside the **app** directory. This project uses [file-based routing](https://docs.expo.dev/router/introduction).
-
-## Get a fresh project
-
-When you're ready, run:
-
-```bash
-npm run reset-project
+The app connects to the notification backend at:
+```
+https://notifier.gansejunge.com
 ```
 
-This command will move the starter code to the **app-example** directory and create a blank **app** directory where you can start developing.
+To change this, modify the `API_URL` constant in `index.tsx`.
 
-## Learn more
+### Categories
 
-To learn more about developing your project with Expo, look at the following resources:
+Categories are defined in `types/Category.ts`. Special categories:
+- **Home** - View all notifications
+- **Utility** - Default category for uncategorized notifications
 
-- [Expo documentation](https://docs.expo.dev/): Learn fundamentals, or go into advanced topics with our [guides](https://docs.expo.dev/guides).
-- [Learn Expo tutorial](https://docs.expo.dev/tutorial/introduction/): Follow a step-by-step tutorial where you'll create a project that runs on Android, iOS, and the web.
 
-## Join the community
 
-Join our community of developers creating universal apps.
+## Technical Details
 
-- [Expo on GitHub](https://github.com/expo/expo): View our open source platform and contribute.
-- [Discord community](https://chat.expo.dev): Chat with Expo users and ask questions.
+### Notification Data Structure
+
+Notifications should include the following data fields from your backend:
+
+```json
+{
+  "title": "Notification Title",
+  "body": "Notification message text",
+  "data": {
+    "category": "utility",
+    "link": "https://example.com",
+    "timestamp": 1760734800
+  }
+}
+```
+
+- `category` - Optional. Defaults to "utility" if not provided
+- `link` - Optional. Set to "#" if no link should be shown
+- `timestamp` - Optional. Defaults to when the notification was received when empty
+
+
+## Project Structure
+
+```
+├── index.tsx                      # Main app component
+├── hooks/
+│   ├── usePushNotifications.ts    # Push notification registration
+│   └── useNotificationListener.ts # Notification receiving and storage
+├── types/
+│   ├── Category.ts                # Category definitions
+│   └── Item.ts                    # Notification item type
+└── styles/
+    └── styles.ts                  # App styling
+```
+
+
+## API Endpoints
+
+The app communicates with these backend endpoints:
+
+- **POST /register-token** - Register device for push notifications
+  - Headers: `X-API-Key: <your-api-key>`
+  - Body: `{ token, platform, app_ver, locale, topics }`
+
+- **POST /unregister-token** - Unregister device
+  - Headers: `X-API-Key: <your-api-key>`
+  - Body: `{ token, platform, app_ver, locale, topics }`

app/index.tsx

@@ -1,13 +1,13 @@
-import React, { useEffect, useState } from 'react';
-import { View, Text, TextInput, Button, Linking, TouchableOpacity, ScrollView } from 'react-native';
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import { createDrawerNavigator, DrawerContentScrollView, DrawerItemList } from '@react-navigation/drawer';
-import { categories, categoryTitles, Category } from '../types/Category';
-import { Item } from "../types/Item";
-import { styles } from '../styles/styles';
+import React, { useEffect, useState } from 'react';
+import { Button, Linking, ScrollView, Text, TextInput, TouchableOpacity, View } from 'react-native';
+import { STORAGE_KEY, useNotificationListener } from '../hooks/useNotificationListener';
 import { usePushNotifications } from '../hooks/usePushNotifications';
-import { useNotificationListener, STORAGE_KEY } from '../hooks/useNotificationListener';
 import { version as appVersion } from '../package.json';
+import { styles } from '../styles/styles';
+import { categories, Category, categoryTitles } from '../types/Category';
+import { Item } from "../types/Item";
 
 const Drawer = createDrawerNavigator();
 const API_KEY_STORAGE = 'API_KEY';
@@ -86,7 +86,7 @@ function CategoryScreen({
 				</View>
 			)}
 
-			<Text style={{ fontSize: 20, marginBottom: 16, color: "#fff", textAlign: "center" }}>
+			<Text style={{ fontSize: 30, marginBottom: 16, color: "#000", textAlign: "center" }}>
 				{categoryTitles[category]}
 			</Text>
 
@@ -116,14 +116,14 @@ function CategoryScreen({
 function CustomDrawerContent({ onLogout, ...props }: any) {
 	return (
 		<View style={{ flex: 1, backgroundColor: '#333' }}>
-			<DrawerContentScrollView {...props} contentContainerStyle={{ paddingTop: 0 }}>
-				<View style={{ flex: 1 }}>
+			<DrawerContentScrollView {...props} contentContainerStyle={{ paddingTop: 20 }}>
+				<View style={{ flex: 1, paddingVertical: 10 }}>
 					<DrawerItemList {...props} />
 				</View>
 			</DrawerContentScrollView>
 
 			{/* Logout Button */}
-			<View style={{ padding: 20, borderTopWidth: 1, borderTopColor: '#444' }}>
+			<View style={{ padding: 20,paddingBottom: 30, borderTopWidth: 1, borderTopColor: '#444' }}>
 				<TouchableOpacity onPress={onLogout} style={styles.logoutButton}>
 					<Text style={styles.logoutText}>Logout</Text>
 				</TouchableOpacity>
@@ -188,6 +188,7 @@ export default function App() {
 					drawerActiveTintColor: '#fff',
 					drawerInactiveTintColor: '#ccc',
 					drawerLabelStyle: { textAlign: 'center', fontSize: 16 },
+					drawerItemStyle: { paddingVertical: 5, marginVertical: 2 },
 				}}
 			>
 				{categories.map(c => (

hooks/useNotificationListener.ts

@@ -1,53 +1,159 @@
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import * as Notifications from "expo-notifications";
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 import { Category, categoryKeys } from "../types/Category";
 import { Item } from "../types/Item";
 
 export const STORAGE_KEY = "notifications-data";
+const MAX_STORED_NOTIFICATIONS = 100;
+const MAX_AGE_DAYS = 60;
+
+// Simple queue to prevent race conditions
+class StorageQueue {
+	private queue: Array<() => Promise<void>> = [];
+	private processing = false;
+
+	async add(task: () => Promise<void>) {
+		this.queue.push(task);
+		if (!this.processing) {
+			await this.process();
+		}
+	}
+
+	private async process() {
+		this.processing = true;
+		while (this.queue.length > 0) {
+			const task = this.queue.shift();
+			if (task) {
+				try {
+					await task();
+				} catch (e) {
+					console.error("Storage task failed:", e);
+				}
+			}
+		}
+		this.processing = false;
+	}
+}
+
+const storageQueue = new StorageQueue();
 
-// Hook: listens for incoming notifications → Item + persists them
 export function useNotificationListener(onItems: (items: Item[]) => void) {
+	const onItemsRef = useRef(onItems);
+	const mountedRef = useRef(true);
+	
+	// Keep ref updated but don't trigger effect re-runs
 	useEffect(() => {
-		// Load saved notifications on mount
+		onItemsRef.current = onItems;
+	}, [onItems]);
+
+	useEffect(() => {
+		mountedRef.current = true;
+
 		(async () => {
 			try {
 				const saved = await AsyncStorage.getItem(STORAGE_KEY);
-				if (saved) {
-					const parsed: Item[] = JSON.parse(saved);
-					// sort newest first
-					onItems(parsed.sort((a, b) => b.timestamp - a.timestamp));
+				let existing: Item[] = saved ? JSON.parse(saved) : [];
+
+				// Parse timestamp correctly
+				existing = existing.map((i) => ({
+					...i,
+					timestamp: Number(i.timestamp),
+				}));
+
+				// Load delivered notifications from the system
+				const delivered = await Notifications.getPresentedNotificationsAsync?.();
+				const deliveredItems: Item[] = delivered
+					?.map(mapNotificationToItem)
+					.filter((i): i is Item => i !== null) ?? [];
+
+				// Combine, deduplicate, and clean
+				const combined = deduplicateItems([...deliveredItems, ...existing]);
+				const cleaned = cleanOldItems(combined);
+
+				await AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(cleaned));
+				
+				if (mountedRef.current) {
+					onItemsRef.current(cleaned);
 				}
 			} catch (e) {
-				console.error("Failed to load notifications from storage:", e);
+				console.error("Failed to load notifications:", e);
 			}
 		})();
 
-		// Listen for notification received while app is in foreground
 		const receivedSub = Notifications.addNotificationReceivedListener(async (notification) => {
 			const item = mapNotificationToItem(notification);
-			if (item) {
-				await addItem(item, onItems);
+			if (item && mountedRef.current) {
+				await addItem(item, (items) => {
+					if (mountedRef.current) {
+						onItemsRef.current(items);
+					}
+				});
 			}
 		});
 
-		// Listen for when user taps a notification
 		const responseSub = Notifications.addNotificationResponseReceivedListener(async (response) => {
 			const item = mapNotificationToItem(response.notification);
-			if (item) {
-				await addItem(item, onItems);
+			if (item && mountedRef.current) {
+				await addItem(item, (items) => {
+					if (mountedRef.current) {
+						onItemsRef.current(items);
+					}
+				});
 			}
 		});
 
-		// Cleanup on unmount
 		return () => {
+			mountedRef.current = false;
 			receivedSub.remove();
 			responseSub.remove();
 		};
-	}, [onItems]);
+	}, []); // Empty deps - only run once
+}
+
+function normalizeTimestamp(timestamp: any): number {
+	const num = Number(timestamp);
+
+	if (!num || isNaN(num)) {
+		return Date.now();
+	}
+
+	// If timestamp appears to be in seconds, convert to milliseconds
+	if (num < 1000000000000) {
+		return num * 1000;
+	}
+
+	return num;
+}
+
+function generateItemId(item: Item): string {
+	// Create a unique ID based on timestamp, title, and info
+	return `${item.timestamp}-${item.title}-${item.info}`.substring(0, 100);
+}
+
+function deduplicateItems(items: Item[]): Item[] {
+	const seen = new Set<string>();
+	const unique: Item[] = [];
+
+	for (const item of items) {
+		const id = generateItemId(item);
+		if (!seen.has(id)) {
+			seen.add(id);
+			unique.push(item);
+		}
+	}
+
+	return unique.sort((a, b) => b.timestamp - a.timestamp);
+}
+
+function cleanOldItems(items: Item[]): Item[] {
+	const maxAge = Date.now() - (MAX_AGE_DAYS * 24 * 60 * 60 * 1000);
+	
+	return items
+		.filter(item => item.timestamp > maxAge)
+		.slice(0, MAX_STORED_NOTIFICATIONS);
 }
 
-// Convert Expo notification → Item
 export function mapNotificationToItem(notification: Notifications.Notification): Item | null {
 	try {
 		const content = notification.request.content;
@@ -58,8 +164,12 @@ export function mapNotificationToItem(notification: Notifications.Notification):
 			? (rawCategory as Category)
 			: "utility";
 
+		const timestamp = data.timestamp
+			? normalizeTimestamp(data.timestamp)
+			: Date.now();
+
 		return {
-			timestamp: data.timestamp ? Number(data.timestamp) : Date.now(),
+			timestamp,
 			category,
 			title: content.title ?? "No title",
 			info: content.body ?? "No description",
@@ -71,19 +181,27 @@ export function mapNotificationToItem(notification: Notifications.Notification):
 	}
 }
 
-// Save a new item into storage and update state
 async function addItem(item: Item, onItems: (items: Item[]) => void) {
+	await storageQueue.add(async () => {
 		try {
 			const saved = await AsyncStorage.getItem(STORAGE_KEY);
 			const prev: Item[] = saved ? JSON.parse(saved) : [];
 
-		const updated = [item, ...prev].sort((a, b) => b.timestamp - a.timestamp);
+			const combined = [item, ...prev]
+				.map((i) => ({ ...i, timestamp: Number(i.timestamp) }));
 
-		await AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(updated));
-		onItems(updated);
+			// Deduplicate and clean
+			const deduplicated = deduplicateItems(combined);
+			const cleaned = cleanOldItems(deduplicated);
+
+			await AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(cleaned));
+			onItems(cleaned);
 		} catch (e) {
 			console.error("Failed to persist notification:", e);
+			// Still call onItems with the new item so UI updates even if persistence fails
+			onItems([item]);
 		}
+	});
 }
 
 export default null;