99 lines
3.1 KiB
TypeScript
99 lines
3.1 KiB
TypeScript
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";
|
|
|
|
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);
|
|
const [lastNotification, setLastNotification] = useState<Notifications.Notification | null>(null);
|
|
|
|
const expoPushToken = usePushNotifications({
|
|
userId: 1,
|
|
apiKey: "super-secret-api-key",
|
|
backendUrl: API_URL,
|
|
appVersion: "1.0.0",
|
|
locale: "en-uk",
|
|
});
|
|
|
|
useNotificationListener(notification => {
|
|
setLastNotification(notification);
|
|
});
|
|
|
|
useEffect(() => {
|
|
async function fetchData() {
|
|
try {
|
|
const res = await fetch(`${API_URL}/`);
|
|
const json = await res.json();
|
|
setData(json.data);
|
|
} catch (err) {
|
|
console.error("Failed to fetch data:", err);
|
|
}
|
|
}
|
|
fetchData();
|
|
}, []);
|
|
|
|
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.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>
|
|
);
|
|
}
|