Saving API key on startup and fixed various deprecated messages
This commit is contained in:
@@ -1,82 +0,0 @@
|
||||
import { StyleSheet } from "react-native";
|
||||
|
||||
export const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
flexDirection: "row",
|
||||
backgroundColor: "#f2f2f2",
|
||||
},
|
||||
sideMenu: {
|
||||
width: 0,
|
||||
backgroundColor: "#333",
|
||||
paddingTop: 40,
|
||||
paddingHorizontal: 0,
|
||||
overflow: "hidden",
|
||||
},
|
||||
sideMenuOpen: {
|
||||
width: 180,
|
||||
paddingHorizontal: 16,
|
||||
},
|
||||
menuItem: {
|
||||
paddingVertical: 16,
|
||||
paddingHorizontal: 8,
|
||||
borderRadius: 4,
|
||||
marginBottom: 8,
|
||||
},
|
||||
menuItemSelected: {
|
||||
backgroundColor: "#555",
|
||||
},
|
||||
menuText: {
|
||||
color: "#fff",
|
||||
fontSize: 18,
|
||||
},
|
||||
mainContent: {
|
||||
flex: 1,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
position: "relative",
|
||||
},
|
||||
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",
|
||||
marginTop: 60,
|
||||
color: "#333",
|
||||
},
|
||||
dataContainer: {
|
||||
marginTop: 24,
|
||||
width: "90%",
|
||||
},
|
||||
dataItem: {
|
||||
backgroundColor: "#fff",
|
||||
borderRadius: 8,
|
||||
padding: 16,
|
||||
marginBottom: 12,
|
||||
shadowColor: "#000",
|
||||
shadowOpacity: 0.05,
|
||||
shadowRadius: 4,
|
||||
elevation: 2,
|
||||
},
|
||||
dataTitle: {
|
||||
fontSize: 18,
|
||||
fontWeight: "bold",
|
||||
color: "#222",
|
||||
marginBottom: 4,
|
||||
},
|
||||
dataDescription: {
|
||||
fontSize: 15,
|
||||
color: "#555",
|
||||
},
|
||||
});
|
||||
@@ -1,50 +1,57 @@
|
||||
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 { 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 "./HomeScreen.styles";
|
||||
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("");
|
||||
|
||||
// Register push notifications
|
||||
usePushNotifications({
|
||||
userId: 1,
|
||||
apiKey: "super-secret-api-key",
|
||||
const pushToken = usePushNotifications({
|
||||
apiKey,
|
||||
backendUrl: API_URL,
|
||||
appVersion: "1.0.0",
|
||||
locale: "en-uk",
|
||||
});
|
||||
|
||||
// Load saved notifications on startup
|
||||
// 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));
|
||||
}
|
||||
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 category: Category = rawCategory && categoryKeys.includes(rawCategory) ? rawCategory : "home";
|
||||
|
||||
const item: Item = {
|
||||
timestamp: Date.now(),
|
||||
@@ -60,15 +67,36 @@ export default function HomeScreen() {
|
||||
return updated;
|
||||
});
|
||||
});
|
||||
|
||||
return () => subscription.remove();
|
||||
}, []);
|
||||
|
||||
// Filtered view: home shows everything
|
||||
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 */}
|
||||
@@ -92,7 +120,6 @@ export default function HomeScreen() {
|
||||
<TouchableOpacity style={styles.menuButton} onPress={() => setMenuOpen(!menuOpen)}>
|
||||
<Text style={styles.menuButtonText}>☰</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
<Text style={styles.title}>{categoryTitles[selected]}</Text>
|
||||
|
||||
<ScrollView style={styles.dataContainer}>
|
||||
@@ -114,3 +141,4 @@ export default function HomeScreen() {
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -68,10 +68,7 @@ const styles = StyleSheet.create({
|
||||
borderRadius: 8,
|
||||
padding: 16,
|
||||
marginBottom: 12,
|
||||
shadowColor: '#000',
|
||||
shadowOpacity: 0.05,
|
||||
shadowRadius: 4,
|
||||
elevation: 2,
|
||||
boxShadow: '0 2px 4px rgba(0,0,0,0.05)',
|
||||
},
|
||||
dataTitle: {
|
||||
fontSize: 18,
|
||||
|
||||
@@ -1,6 +1,11 @@
|
||||
import React from 'react';
|
||||
import { SafeAreaProvider } from "react-native-safe-area-context";
|
||||
import HomeScreen from './HomeScreen';
|
||||
|
||||
export default function App() {
|
||||
return <HomeScreen />;
|
||||
return (
|
||||
<SafeAreaProvider>
|
||||
<HomeScreen />
|
||||
</SafeAreaProvider>
|
||||
);
|
||||
}
|
||||
@@ -1,35 +0,0 @@
|
||||
import * as Device from 'expo-device';
|
||||
import * as Notifications from 'expo-notifications';
|
||||
import { Platform } from 'react-native';
|
||||
|
||||
export async function registerForPushNotificationsAsync() {
|
||||
if (!Device.isDevice) {
|
||||
alert('Must use physical device for Push Notifications');
|
||||
return null;
|
||||
}
|
||||
|
||||
const { status: existingStatus } = await Notifications.getPermissionsAsync();
|
||||
let finalStatus = existingStatus;
|
||||
|
||||
if (existingStatus !== 'granted') {
|
||||
const { status } = await Notifications.requestPermissionsAsync();
|
||||
finalStatus = status;
|
||||
}
|
||||
|
||||
if (finalStatus !== 'granted') {
|
||||
alert('Failed to get push token for push notification!');
|
||||
return null;
|
||||
}
|
||||
|
||||
const token = (await Notifications.getExpoPushTokenAsync()).data;
|
||||
console.log('Expo Push Token:', token);
|
||||
|
||||
if (Platform.OS === 'android') {
|
||||
await Notifications.setNotificationChannelAsync('default', {
|
||||
name: 'default',
|
||||
importance: Notifications.AndroidImportance.MAX,
|
||||
});
|
||||
}
|
||||
|
||||
return token;
|
||||
}
|
||||
Reference in New Issue
Block a user