119 lines
3.5 KiB
TypeScript
119 lines
3.5 KiB
TypeScript
import styles from "@/app/tabStyles/indexStyles";
|
|
import React from "react";
|
|
import {
|
|
Text,
|
|
View,
|
|
TextInput,
|
|
FlatList,
|
|
TouchableOpacity,
|
|
Keyboard,
|
|
TouchableWithoutFeedback,
|
|
} from "react-native";
|
|
import Feather from "@expo/vector-icons/Feather";
|
|
import { useDiscoveryContext } from "@/contexts/DiscoveryContext";
|
|
import { useShowContext } from "@/contexts/ShowContext";
|
|
|
|
export default function TabTwoScreen() {
|
|
const { query, setQuery, suggestions, loading, error, clear } =
|
|
useDiscoveryContext();
|
|
|
|
const { shows } = useShowContext();
|
|
|
|
const personSuggestions = React.useMemo(
|
|
() => suggestions.filter((s) => s.type === "PERSON"),
|
|
[suggestions]
|
|
);
|
|
|
|
const showSuggestions = React.useMemo(
|
|
() => suggestions.filter((s) => s.type === "SHOW"),
|
|
[suggestions]
|
|
);
|
|
|
|
const [tag, setTag] = React.useState<string | null>(null);
|
|
return (
|
|
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
|
|
<View style={styles.mainContainer}>
|
|
<View style={styles.header}>
|
|
<Text style={[styles.title, { fontSize: 28 }]}>Durchsuchen</Text>
|
|
</View>
|
|
|
|
<View style={styles.searchContainer}>
|
|
<TextInput
|
|
value={query}
|
|
onChangeText={setQuery}
|
|
placeholder="Wonach suchst du?"
|
|
placeholderTextColor=""
|
|
style={{
|
|
fontSize: 18,
|
|
fontWeight: "500",
|
|
color: "hsl(221, 39%, 80%)",
|
|
}}
|
|
returnKeyType="search"
|
|
onSubmitEditing={() => {
|
|
console.log("Search:", query);
|
|
}}
|
|
autoCapitalize="none"
|
|
/>
|
|
|
|
{query.length === 0 ? (
|
|
<Feather name="search" size={24} color="hsl(221, 39%, 80%)" />
|
|
) : (
|
|
<Feather
|
|
name="x"
|
|
size={24}
|
|
color="hsl(221, 39%, 80%)"
|
|
onPress={() => setQuery("")}
|
|
/>
|
|
)}
|
|
</View>
|
|
|
|
{tag && (
|
|
<View style={styles.tagContainer}>
|
|
<Text style={styles.tagLabel}>{tag}</Text>
|
|
<Feather
|
|
name="x"
|
|
size={18}
|
|
color="hsl(221, 39%, 80%)"
|
|
onPress={() => setTag(null)}
|
|
style={{ marginLeft: "auto", marginRight: 10 }}
|
|
/>
|
|
</View>
|
|
)}
|
|
|
|
{query.length > 0 && (
|
|
<>
|
|
<View style={styles.suggestionsSection}>
|
|
<Text style={styles.suggestionTitle}>Suchvorschläge</Text>
|
|
|
|
{showSuggestions.map((suggestion, idx) => (
|
|
<TouchableOpacity
|
|
key={suggestion.text + "_" + idx}
|
|
style={styles.suggestionContainer}
|
|
onPress={() => {
|
|
setTag(suggestion.text);
|
|
}}
|
|
>
|
|
<View style={styles.imageContainer}></View>
|
|
<Text style={styles.suggestionLabel}>{suggestion.text}</Text>
|
|
</TouchableOpacity>
|
|
))}
|
|
{personSuggestions.map((suggestion, idx) => (
|
|
<TouchableOpacity
|
|
key={suggestion.text + "_" + idx}
|
|
style={styles.suggestionContainer}
|
|
onPress={() => {
|
|
setTag(suggestion.text);
|
|
}}
|
|
>
|
|
<View style={styles.imageContainer}></View>
|
|
<Text style={styles.suggestionLabel}>{suggestion.text}</Text>
|
|
</TouchableOpacity>
|
|
))}
|
|
</View>
|
|
</>
|
|
)}
|
|
</View>
|
|
</TouchableWithoutFeedback>
|
|
);
|
|
}
|