129 lines
4.1 KiB
TypeScript
129 lines
4.1 KiB
TypeScript
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 { usePushNotifications } from "../hooks/usePushNotifications";
|
|
import { styles } from "./HomeScreen.styles";
|
|
|
|
const API_URL = "https://notifier.gansejunge.com";
|
|
const STORAGE_KEY = "notifications";
|
|
|
|
type Category = "home" | "royal-road" | "podcasts" | "mixtapes";
|
|
|
|
export default function HomeScreen() {
|
|
const [data, setData] = useState<Item[]>([]);
|
|
const [selected, setSelected] = useState<Category>("home");
|
|
const [menuOpen, setMenuOpen] = useState(false);
|
|
|
|
// Register push notifications
|
|
usePushNotifications({
|
|
userId: 1,
|
|
apiKey: "super-secret-api-key",
|
|
backendUrl: API_URL,
|
|
appVersion: "1.0.0",
|
|
locale: "en-uk",
|
|
});
|
|
|
|
// Load saved notifications on startup
|
|
useEffect(() => {
|
|
(async () => {
|
|
try {
|
|
const stored = await AsyncStorage.getItem(STORAGE_KEY);
|
|
if (stored) {
|
|
setData(JSON.parse(stored));
|
|
}
|
|
} catch (err) {
|
|
console.error("Failed to load stored notifications:", err);
|
|
}
|
|
})();
|
|
}, []);
|
|
|
|
// 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 }[] = [
|
|
{ label: "Home", key: "home" },
|
|
{ label: "Royal Road", key: "royal-road" },
|
|
{ label: "Podcasts", key: "podcasts" },
|
|
{ label: "Mixtapes", key: "mixtapes" },
|
|
];
|
|
|
|
return (
|
|
<SafeAreaView style={styles.container}>
|
|
{/* Side Menu */}
|
|
<View style={[styles.sideMenu, menuOpen && styles.sideMenuOpen]}>
|
|
{menuItems.map(item => (
|
|
<TouchableOpacity
|
|
key={item.key}
|
|
style={[styles.menuItem, selected === item.key && styles.menuItemSelected]}
|
|
onPress={() => {
|
|
setSelected(item.key);
|
|
setMenuOpen(false);
|
|
}}
|
|
>
|
|
<Text style={styles.menuText}>{item.label}</Text>
|
|
</TouchableOpacity>
|
|
))}
|
|
</View>
|
|
|
|
{/* Main Content */}
|
|
<View style={styles.mainContent}>
|
|
<TouchableOpacity style={styles.menuButton} onPress={() => setMenuOpen(!menuOpen)}>
|
|
<Text style={styles.menuButtonText}>☰</Text>
|
|
</TouchableOpacity>
|
|
|
|
<Text style={styles.title}>
|
|
{selected === "home" && "Welcome to Home!"}
|
|
{selected === "royal-road" && "Royal Road Updates"}
|
|
{selected === "podcasts" && "Latest Podcasts"}
|
|
{selected === "mixtapes" && "New Mixtapes"}
|
|
</Text>
|
|
|
|
<ScrollView style={styles.dataContainer}>
|
|
{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>
|
|
);
|
|
}
|