107 lines
4.0 KiB
TypeScript
107 lines
4.0 KiB
TypeScript
import React, { useState, useMemo } from "react";
|
|
import {
|
|
View,
|
|
Text,
|
|
ScrollView,
|
|
useColorScheme,
|
|
} from "react-native";
|
|
import { SafeAreaView } from "react-native-safe-area-context";
|
|
import SearchBar from "../components/SearchBar";
|
|
import CollapsibleCategory, { Category } from "../components/CollapsibleCategory";
|
|
import { ALL_CATEGORIES } from "@/data/mockData";
|
|
|
|
export default function AllFeed() {
|
|
const [query, setQuery] = useState("");
|
|
const scheme = useColorScheme();
|
|
const dark = scheme === "dark";
|
|
|
|
const totalCount = ALL_CATEGORIES.reduce(
|
|
(sum, cat) => sum + cat.items.length,
|
|
0
|
|
);
|
|
|
|
// Filter items within each category based on search query
|
|
const filteredCategories = useMemo((): Category[] => {
|
|
if (!query.trim()) return ALL_CATEGORIES;
|
|
const lower = query.toLowerCase();
|
|
return ALL_CATEGORIES.map((cat) => ({
|
|
...cat,
|
|
items: cat.items.filter(
|
|
(item) =>
|
|
item.title.toLowerCase().includes(lower) ||
|
|
item.author.toLowerCase().includes(lower) ||
|
|
item.tag.toLowerCase().includes(lower) ||
|
|
cat.label.toLowerCase().includes(lower)
|
|
),
|
|
})).filter((cat) => cat.items.length > 0);
|
|
}, [query]);
|
|
|
|
return (
|
|
<SafeAreaView
|
|
className={`flex-1 ${dark ? "bg-obsidian-200" : "bg-parchment-50"}`}
|
|
>
|
|
|
|
<View
|
|
className={`border-b ${
|
|
dark ? "border-border-dark" : "border-border-light"
|
|
}`}
|
|
>
|
|
<View className="px-4 pt-2 pb-1">
|
|
<Text
|
|
className={`text-2xl font-display font-bold ${
|
|
dark ? "text-ink-dark" : "text-ink-light"
|
|
}`}
|
|
>
|
|
Discover
|
|
</Text>
|
|
<Text
|
|
className={`text-xs mt-0.5 font-sans ${
|
|
dark ? "text-muted-dark" : "text-muted-light"
|
|
}`}
|
|
>
|
|
{ALL_CATEGORIES.length} categories · {totalCount} articles
|
|
</Text>
|
|
</View>
|
|
|
|
<SearchBar
|
|
placeholder="Search all Subjects and Titles…"
|
|
onSearch={setQuery}
|
|
/>
|
|
</View>
|
|
|
|
<ScrollView
|
|
contentContainerStyle={{ paddingTop: 16, paddingBottom: 40 }}
|
|
showsVerticalScrollIndicator={false}
|
|
keyboardDismissMode="on-drag"
|
|
>
|
|
{filteredCategories.length === 0 ? (
|
|
<View className="items-center mt-16 px-8">
|
|
<Text className="text-4xl mb-3">🔍</Text>
|
|
<Text
|
|
className={`text-base font-sans font-semibold text-center ${
|
|
dark ? "text-ink-dark" : "text-ink-light"
|
|
}`}
|
|
>
|
|
No results for "{query}"
|
|
</Text>
|
|
<Text
|
|
className={`text-sm font-sans text-center mt-1 ${
|
|
dark ? "text-muted-dark" : "text-muted-light"
|
|
}`}
|
|
>
|
|
Try searching by category name, author, or topic.
|
|
</Text>
|
|
</View>
|
|
) : (
|
|
filteredCategories.map((cat, index) => (
|
|
<CollapsibleCategory
|
|
key={cat.id}
|
|
category={cat}
|
|
defaultOpen={index === 0} // first category open by default TODO maybe set option to change what is default
|
|
/>
|
|
))
|
|
)}
|
|
</ScrollView>
|
|
</SafeAreaView>
|
|
);
|
|
} |