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:
florian committed
1 parent
8895bc9c9d
commit
26e5b0ae6f
26 files changed
+6089
-1810
No files matched your search
+203
-7
@@ -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