rss-reader/app/feed_list.tsx

73 lines
1.7 KiB
TypeScript

import { View, Text, StyleSheet, ScrollView, Pressable } from 'react-native'
import { useEffect, useState } from 'react'
import axios from 'axios'
import { useAuthStore, useSubscription } from '../store'
import { useRouter } from 'expo-router'
const Separator = () => <View style={styles.separator} />
const styles = StyleSheet.create({
separator: {
borderBottomColor: '#cccccc',
borderBottomWidth: 1
},
entryItem: {
padding: 16,
gap: 4
},
entryTitle: {
fontSize: 20
},
entryMetadata: {
color: '#aaaaaa'
}
})
export default function FeedListView() {
const router = useRouter()
const { credential } = useAuthStore()
const { fetch: fetchSubs, subscriptions } = useSubscription()
fetchSubs()
const [entries, setEntries] = useState<Entry[]>([])
useEffect(() => {
if (!credential) return
fetchList()
}, [])
async function fetchList() {
try {
const res = await axios.get("https://api.feedbin.com/v2/entries.json", { auth: credential })
const entriesRes = res.data as Entry[]
setEntries(entriesRes)
} catch (e) {
console.log("`fetchList has an error`")
console.log(e)
}
}
function goToPost(entryId: number) {
router.push(`./post?id=${entryId}`)
}
return (
<ScrollView>
{ entries.length > 0 ?
entries.map(entry => <View key={entry.id}>
<Pressable onPress={() => goToPost(entry.id)}>
<View style={styles.entryItem}>
<Text style={styles.entryTitle}>{entry.title}</Text>
<Text style={styles.entryMetadata}>{entry.author && <Text>{entry.author} &middot; </Text>}{subscriptions[entry.feed_id].title}</Text>
</View>
</Pressable>
<Separator />
</View>)
: <Text>No entries</Text> }
</ScrollView>
)
}