Completely reworked the app by starting fresh
- Now you can just swipe to access categories - Redone side menu - Inital API input screen is more legible - A goose as an icon - Proper display and internal name - Correct handling of incoming data
This commit is contained in:
@@ -1,144 +0,0 @@
|
||||
import AsyncStorage from "@react-native-async-storage/async-storage";
|
||||
import * as Notifications from "expo-notifications";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Linking, ScrollView, Text, TextInput, TouchableOpacity, View } from "react-native";
|
||||
import { SafeAreaView } from "react-native-safe-area-context";
|
||||
import { Category, categories, categoryKeys, categoryTitles } from "types/Category";
|
||||
import { Item } from "types/Item";
|
||||
import { usePushNotifications } from "../hooks/usePushNotifications";
|
||||
import { styles } from "../styles/HomeScreen.styles";
|
||||
|
||||
const API_URL = "https://notifier.gansejunge.com";
|
||||
const STORAGE_KEY = "notifications";
|
||||
const API_KEY_STORAGE = "api_key";
|
||||
|
||||
export default function HomeScreen() {
|
||||
const [data, setData] = useState<Item[]>([]);
|
||||
const [selected, setSelected] = useState<Category>("home");
|
||||
const [menuOpen, setMenuOpen] = useState(false);
|
||||
const [apiKey, setApiKey] = useState<string | null>(null);
|
||||
const [tempKey, setTempKey] = useState("");
|
||||
|
||||
const pushToken = usePushNotifications({
|
||||
apiKey,
|
||||
backendUrl: API_URL,
|
||||
appVersion: "1.0.0",
|
||||
locale: "en-uk",
|
||||
});
|
||||
|
||||
// Load API key on startup
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
const storedKey = await AsyncStorage.getItem(API_KEY_STORAGE);
|
||||
if (storedKey) setApiKey(storedKey);
|
||||
})();
|
||||
}, []);
|
||||
|
||||
// Load saved notifications
|
||||
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 => {
|
||||
const rawCategory = notification.request.content.data?.category as Category | undefined;
|
||||
const category: Category = rawCategory && categoryKeys.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));
|
||||
return updated;
|
||||
});
|
||||
});
|
||||
return () => subscription.remove();
|
||||
}, []);
|
||||
|
||||
const filteredData = selected === "home" ? data : data.filter(item => item.category === selected);
|
||||
const menuItems = categories;
|
||||
|
||||
if (!apiKey) {
|
||||
return (
|
||||
<SafeAreaView style={styles.container}>
|
||||
<View style={{ padding: 20 }}>
|
||||
<Text style={{ marginBottom: 10 }}>Enter API Key:</Text>
|
||||
<TextInput
|
||||
value={tempKey}
|
||||
onChangeText={setTempKey}
|
||||
style={{ borderWidth: 1, padding: 8, marginBottom: 10 }}
|
||||
/>
|
||||
<TouchableOpacity
|
||||
onPress={async () => {
|
||||
await AsyncStorage.setItem(API_KEY_STORAGE, tempKey);
|
||||
setApiKey(tempKey);
|
||||
}}
|
||||
style={{ backgroundColor: "blue", padding: 10 }}
|
||||
>
|
||||
<Text style={{ color: "white" }}>Save</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
|
||||
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}>{categoryTitles[selected]}</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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,83 +0,0 @@
|
||||
import React from 'react';
|
||||
import { Linking, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
|
||||
import { Category, categoryTitles } from 'types/Category';
|
||||
import { Item } from 'types/Item';
|
||||
|
||||
type MainContentProps = {
|
||||
selected: Category;
|
||||
onToggleMenu: () => void;
|
||||
data: Item[];
|
||||
};
|
||||
|
||||
export default function MainContent({ selected, onToggleMenu, data }: MainContentProps) {
|
||||
return (
|
||||
<View style={styles.mainContent}>
|
||||
<TouchableOpacity style={styles.menuButton} onPress={onToggleMenu}>
|
||||
<Text style={styles.menuButtonText}>☰</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
<Text style={styles.title}>{categoryTitles[selected]}</Text>
|
||||
|
||||
<ScrollView style={styles.dataContainer}>
|
||||
{data.map(item => (
|
||||
<TouchableOpacity key={`${item.timestamp}-${item.title}`} onPress={() => Linking.openURL(item.link)}>
|
||||
<View style={styles.dataItem}>
|
||||
<Text style={styles.dataTitle}>{item.title}</Text>
|
||||
<Text style={styles.dataDescription}>{item.info}</Text>
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</ScrollView>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
mainContent: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
position: 'relative',
|
||||
backgroundColor: '#f2f2f2',
|
||||
},
|
||||
menuButton: {
|
||||
position: 'absolute',
|
||||
top: 40,
|
||||
left: 16,
|
||||
zIndex: 1,
|
||||
backgroundColor: '#333',
|
||||
borderRadius: 20,
|
||||
padding: 8,
|
||||
},
|
||||
menuButtonText: {
|
||||
color: '#fff',
|
||||
fontSize: 24,
|
||||
},
|
||||
title: {
|
||||
fontSize: 24,
|
||||
fontWeight: 'bold',
|
||||
color: '#333',
|
||||
marginTop: 60,
|
||||
marginBottom: 16,
|
||||
},
|
||||
dataContainer: {
|
||||
width: '90%',
|
||||
},
|
||||
dataItem: {
|
||||
backgroundColor: '#fff',
|
||||
borderRadius: 8,
|
||||
padding: 16,
|
||||
marginBottom: 12,
|
||||
boxShadow: '0 2px 4px rgba(0,0,0,0.05)',
|
||||
},
|
||||
dataTitle: {
|
||||
fontSize: 18,
|
||||
fontWeight: 'bold',
|
||||
color: '#222',
|
||||
marginBottom: 4,
|
||||
},
|
||||
dataDescription: {
|
||||
fontSize: 15,
|
||||
color: '#555',
|
||||
},
|
||||
});
|
||||
@@ -1,52 +0,0 @@
|
||||
import React from 'react';
|
||||
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
|
||||
|
||||
export type MenuItem = {
|
||||
label: string;
|
||||
key: string;
|
||||
};
|
||||
|
||||
type SideMenuProps = {
|
||||
menuItems: MenuItem[];
|
||||
selected: string;
|
||||
onSelect: (key: string) => void;
|
||||
};
|
||||
|
||||
export default function SideMenu({ menuItems, selected, onSelect }: SideMenuProps) {
|
||||
return (
|
||||
<View style={styles.sideMenu}>
|
||||
{menuItems.map(item => (
|
||||
<TouchableOpacity
|
||||
key={item.key}
|
||||
style={[
|
||||
styles.menuItem,
|
||||
selected === item.key && styles.menuItemSelected,
|
||||
]}
|
||||
onPress={() => onSelect(item.key)}>
|
||||
<Text style={styles.menuText}>{item.label}</Text>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
sideMenu: {
|
||||
width: 180,
|
||||
backgroundColor: '#333',
|
||||
paddingTop: 40,
|
||||
paddingHorizontal: 16,
|
||||
},
|
||||
menuItem: {
|
||||
paddingVertical: 16,
|
||||
borderRadius: 4,
|
||||
marginBottom: 8,
|
||||
},
|
||||
menuItemSelected: {
|
||||
backgroundColor: '#555',
|
||||
},
|
||||
menuText: {
|
||||
color: '#fff',
|
||||
fontSize: 18,
|
||||
},
|
||||
});
|
||||
210
app/index.tsx
210
app/index.tsx
@@ -1,11 +1,207 @@
|
||||
import React from 'react';
|
||||
import { SafeAreaProvider } from "react-native-safe-area-context";
|
||||
import HomeScreen from './HomeScreen';
|
||||
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 { usePushNotifications } from '../hooks/usePushNotifications';
|
||||
import { useNotificationListener, STORAGE_KEY } from '../hooks/useNotificationListener';
|
||||
import { version as appVersion } from '../package.json';
|
||||
|
||||
const Drawer = createDrawerNavigator();
|
||||
const API_KEY_STORAGE = 'API_KEY';
|
||||
const API_URL = 'https://notifier.gansejunge.com';
|
||||
|
||||
type ApiKeyScreenProps = {
|
||||
onApiKeySaved: (key: string) => void;
|
||||
};
|
||||
|
||||
|
||||
function ApiKeyScreen({ onApiKeySaved }: ApiKeyScreenProps) {
|
||||
const [apiKey, setApiKey] = useState('');
|
||||
|
||||
const saveApiKey = async () => {
|
||||
if (apiKey.trim()) {
|
||||
await AsyncStorage.setItem(API_KEY_STORAGE, apiKey);
|
||||
onApiKeySaved(apiKey);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<View style={styles.centered}>
|
||||
<Text style={styles.label}>Enter your API Key:</Text>
|
||||
<TextInput
|
||||
style={[styles.input, { color: '#000', backgroundColor: '#fff' }]}
|
||||
value={apiKey}
|
||||
onChangeText={setApiKey}
|
||||
secureTextEntry
|
||||
placeholder="API Key"
|
||||
placeholderTextColor="#030303ff"
|
||||
/>
|
||||
<Button title="Save" onPress={saveApiKey} />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
function CategoryScreen({
|
||||
category,
|
||||
notifications,
|
||||
registered,
|
||||
registrationError,
|
||||
}: {
|
||||
category: Category;
|
||||
notifications: Item[];
|
||||
registered: boolean;
|
||||
registrationError: string | null;
|
||||
}) {
|
||||
const [showBanner, setShowBanner] = useState(true);
|
||||
|
||||
// Auto-hide banner after 4 seconds whenever it changes
|
||||
useEffect(() => {
|
||||
if (!registered && !registrationError) return; // nothing to show
|
||||
setShowBanner(true); // reset visibility
|
||||
const timer = setTimeout(() => setShowBanner(false), 4000);
|
||||
return () => clearTimeout(timer);
|
||||
}, [registered, registrationError]);
|
||||
|
||||
const filtered = category === "home"
|
||||
? notifications
|
||||
: notifications.filter(n => n.category === category);
|
||||
|
||||
const sorted = filtered.sort((a, b) => b.timestamp - a.timestamp);
|
||||
|
||||
const openLink = (url: string) => {
|
||||
if (url && url !== "#") Linking.openURL(url).catch(console.error);
|
||||
};
|
||||
|
||||
return (
|
||||
<ScrollView contentContainerStyle={{ padding: 16 }}>
|
||||
{/* Banner */}
|
||||
{showBanner && registrationError && (
|
||||
<View style={{ padding: 8, backgroundColor: "#F44336", borderRadius: 4, marginBottom: 12 }}>
|
||||
<Text style={{ color: "#fff", textAlign: "center", fontSize: 12 }}>
|
||||
{registrationError}
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
|
||||
<Text style={{ fontSize: 20, marginBottom: 16, color: "#fff", textAlign: "center" }}>
|
||||
{categoryTitles[category]}
|
||||
</Text>
|
||||
|
||||
{sorted.length === 0 ? (
|
||||
<View style={{ backgroundColor: "#444", padding: 16, borderRadius: 10, alignItems: "center", justifyContent: "center", marginTop: 20 }}>
|
||||
<Text style={{ color: "#ccc", fontSize: 14 }}>No notifications yet.</Text>
|
||||
</View>
|
||||
) : (
|
||||
sorted.map((item, index) => (
|
||||
<View key={index} style={{ backgroundColor: "#444", padding: 12, borderRadius: 10, marginBottom: 12 }}>
|
||||
<Text style={{ color: "#fff", fontWeight: "bold", marginBottom: 4 }}>{item.title}</Text>
|
||||
<Text style={{ color: "#ccc", fontSize: 12, marginBottom: 4 }}>{new Date(item.timestamp).toLocaleString()}</Text>
|
||||
<Text style={{ color: "#fff", marginBottom: item.link && item.link !== "#" ? 8 : 0 }}>{item.info}</Text>
|
||||
{item.link && item.link !== "#" && (
|
||||
<TouchableOpacity onPress={() => openLink(item.link)}>
|
||||
<Text style={{ color: "#4da6ff", textDecorationLine: "underline" }}>Click here</Text>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
</View>
|
||||
))
|
||||
)}
|
||||
</ScrollView>
|
||||
);
|
||||
}
|
||||
|
||||
// Custom Drawer with Logout at bottom
|
||||
function CustomDrawerContent({ onLogout, ...props }: any) {
|
||||
return (
|
||||
<View style={{ flex: 1, backgroundColor: '#333' }}>
|
||||
<DrawerContentScrollView {...props} contentContainerStyle={{ paddingTop: 0 }}>
|
||||
<View style={{ flex: 1 }}>
|
||||
<DrawerItemList {...props} />
|
||||
</View>
|
||||
</DrawerContentScrollView>
|
||||
|
||||
{/* Logout Button */}
|
||||
<View style={{ padding: 20, borderTopWidth: 1, borderTopColor: '#444' }}>
|
||||
<TouchableOpacity onPress={onLogout} style={styles.logoutButton}>
|
||||
<Text style={styles.logoutText}>Logout</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
export default function App() {
|
||||
const [apiKeySaved, setApiKeySaved] = useState<boolean | null>(null);
|
||||
const [apiKey, setApiKey] = useState<string | null>(null);
|
||||
const [notifications, setNotifications] = useState<Item[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
const checkApiKey = async () => {
|
||||
const key = await AsyncStorage.getItem(API_KEY_STORAGE);
|
||||
setApiKey(key);
|
||||
setApiKeySaved(!!key);
|
||||
};
|
||||
checkApiKey();
|
||||
}, []);
|
||||
|
||||
const { expoPushToken, registered, registrationError, unregisterToken } = usePushNotifications({
|
||||
apiKey: apiKey ?? undefined,
|
||||
backendUrl: API_URL,
|
||||
appVersion,
|
||||
locale: 'en-uk',
|
||||
});
|
||||
|
||||
const handleLogout = async () => {
|
||||
if (unregisterToken) await unregisterToken();
|
||||
await AsyncStorage.removeItem(API_KEY_STORAGE);
|
||||
await AsyncStorage.removeItem(STORAGE_KEY);
|
||||
setApiKey(null);
|
||||
setApiKeySaved(false);
|
||||
setNotifications([]);
|
||||
};
|
||||
|
||||
useNotificationListener(setNotifications);
|
||||
|
||||
if (apiKeySaved === null) return null;
|
||||
|
||||
if (!apiKeySaved) {
|
||||
return (
|
||||
<ApiKeyScreen
|
||||
onApiKeySaved={(key) => {
|
||||
setApiKey(key);
|
||||
setApiKeySaved(true);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<SafeAreaProvider>
|
||||
<HomeScreen />
|
||||
</SafeAreaProvider>
|
||||
<Drawer.Navigator
|
||||
initialRouteName="home"
|
||||
drawerContent={props => <CustomDrawerContent {...props} onLogout={handleLogout} />}
|
||||
screenOptions={{
|
||||
headerStyle: { backgroundColor: '#222' },
|
||||
headerTintColor: '#fff',
|
||||
drawerStyle: { backgroundColor: '#333', width: 240 },
|
||||
drawerActiveTintColor: '#fff',
|
||||
drawerInactiveTintColor: '#ccc',
|
||||
drawerLabelStyle: { textAlign: 'center', fontSize: 16 },
|
||||
}}
|
||||
>
|
||||
{categories.map(c => (
|
||||
<Drawer.Screen key={c.key} name={c.key} options={{ title: c.label }}>
|
||||
{() => (
|
||||
< CategoryScreen
|
||||
category={c.key}
|
||||
notifications={notifications}
|
||||
registered={registered}
|
||||
registrationError={registrationError}
|
||||
/>
|
||||
)}
|
||||
</Drawer.Screen>
|
||||
))}
|
||||
</Drawer.Navigator>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user