Initial draft
This commit is contained in:
160
app/HomeScreen.tsx
Normal file
160
app/HomeScreen.tsx
Normal file
@@ -0,0 +1,160 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Linking, SafeAreaView, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
|
||||
import { Item } from 'types/Item';
|
||||
|
||||
const API_URL = "http://192.168.178.22:8000";
|
||||
|
||||
export default function HomeScreen() {
|
||||
const [data, setData] = useState<Item[]>([]);
|
||||
const [selected, setSelected] = useState<'home' | 'royal-road' | 'podcasts' | 'mixtapes'>('home');
|
||||
const [menuOpen, setMenuOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
fetch(API_URL)
|
||||
.then(res => res.json())
|
||||
.then(json => {
|
||||
if (json.status === "ok" && Array.isArray(json.data)) {
|
||||
setData(json.data);
|
||||
}
|
||||
})
|
||||
.catch(err => console.error("API error:", err));
|
||||
}, []);
|
||||
|
||||
// Filter items for current category
|
||||
const filteredData =
|
||||
selected === "home" ? data : data.filter(item => item.category === selected);
|
||||
|
||||
const menuItems = [
|
||||
{ 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 as any);
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
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',
|
||||
},
|
||||
});
|
||||
94
app/MainContent.tsx
Normal file
94
app/MainContent.tsx
Normal file
@@ -0,0 +1,94 @@
|
||||
import React from 'react';
|
||||
import { Linking, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
|
||||
import { Item } from 'types/Item';
|
||||
|
||||
type MainContentProps = {
|
||||
selected: string;
|
||||
onToggleMenu: () => void;
|
||||
data: Item[];
|
||||
};
|
||||
|
||||
export default function MainContent({ selected, onToggleMenu, data }: MainContentProps) {
|
||||
const getTitle = () => {
|
||||
switch (selected) {
|
||||
case 'home': return 'Welcome to Home!';
|
||||
case 'royal-road': return 'Royal Road Updates';
|
||||
case 'podcasts': return 'Latest Podcasts';
|
||||
case 'mixtapes': return 'Mixtapes';
|
||||
default: return '';
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<View style={styles.mainContent}>
|
||||
<TouchableOpacity style={styles.menuButton} onPress={onToggleMenu}>
|
||||
<Text style={styles.menuButtonText}>☰</Text>
|
||||
</TouchableOpacity>
|
||||
<Text style={styles.title}>{getTitle()}</Text>
|
||||
|
||||
<ScrollView style={styles.dataContainer}>
|
||||
{data.map(item => (
|
||||
<TouchableOpacity key={item.timestamp} 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,
|
||||
shadowColor: '#000',
|
||||
shadowOpacity: 0.05,
|
||||
shadowRadius: 4,
|
||||
elevation: 2,
|
||||
},
|
||||
dataTitle: {
|
||||
fontSize: 18,
|
||||
fontWeight: 'bold',
|
||||
color: '#222',
|
||||
marginBottom: 4,
|
||||
},
|
||||
dataDescription: {
|
||||
fontSize: 15,
|
||||
color: '#555',
|
||||
},
|
||||
});
|
||||
52
app/SideMenu.tsx
Normal file
52
app/SideMenu.tsx
Normal file
@@ -0,0 +1,52 @@
|
||||
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,
|
||||
},
|
||||
});
|
||||
6
app/index.tsx
Normal file
6
app/index.tsx
Normal file
@@ -0,0 +1,6 @@
|
||||
import React from 'react';
|
||||
import HomeScreen from './HomeScreen';
|
||||
|
||||
export default function App() {
|
||||
return <HomeScreen />;
|
||||
}
|
||||
Reference in New Issue
Block a user