Cron1cle/fltr-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
DevOFVictory
2025-10-08 17:26:35 +02:00
parent a01ffcd2bb
commit 21d2cb158e
3 changed files with 222 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

220
app/(tabs)/explore.tsx
View File

@@ -1,41 +1,70 @@
import { AutoCompleteItem } from "@/apis/autoCompleteApi";
import { getSearchResults, SearchResultItem } from "@/apis/searchApi";
import styles from "@/app/tabStyles/indexStyles";
import { useDiscoveryContext } from "@/contexts/DiscoveryContext";
import { FontAwesome } from "@expo/vector-icons";
import Feather from "@expo/vector-icons/Feather";
import React from "react";
import {
Text,
View,
TextInput,
FlatList,
TouchableOpacity,
Keyboard,
TouchableWithoutFeedback,
ScrollView,
Text,
TextInput,
TouchableOpacity,
View
} 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 { query, setQuery, suggestions } = useDiscoveryContext();
const { shows } = useShowContext();
const [tags, setTags] = React.useState<AutoCompleteItem[]>([]);
const [searchResults, setSearchResults] = React.useState<SearchResultItem[]>([]);
const getIconName = (type: AutoCompleteItem["type"]) => {
switch (type) {
case "PERSON":
return "user";
case "SHOW":
return "television";
case "YEAR":
return "calendar";
default:
return "tag";
}
};
function tagAdded(tag: AutoCompleteItem) {
console.log("Tag added:", tag);
const nextTags = tags.some((t) => t.text === tag.text)
? tags
: [...tags, tag];
setTags(nextTags);
const tagStrings = nextTags.map((t) => t.text);
getSearchResults(tagStrings, 20)
.then(setSearchResults)
.catch(console.error);
setQuery("");
Keyboard.dismiss();
console.log("Searching with tags:", tagStrings);
}
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.mainContainer]}>
<View style={styles.header}>
<Text style={[styles.title, { fontSize: 28 }]}>Durchsuchen</Text>
</View>
<View style={{ paddingHorizontal: 10 }}>
<View style={styles.searchContainer}>
<TextInput
@@ -47,11 +76,11 @@ export default function TabTwoScreen() {
fontSize: 18,
fontWeight: "500",
color: "hsl(221, 39%, 80%)",
width: "90%",
height: "100%",
}}
returnKeyType="search"
onSubmitEditing={() => {
console.log("Search:", query);
}}
onSubmitEditing={() => console.log("Search:", query)}
autoCapitalize="none"
/>
@@ -67,52 +96,101 @@ export default function TabTwoScreen() {
)}
</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>
)}
<View style={styles.tagContainer}>
{tags.map((tag) => (
<TouchableOpacity
key={tag.text}
onPress={() =>
setTags((prev) => prev.filter((t) => t.text !== tag.text))
}
>
<View style={styles.tag}>
<FontAwesome
name={getIconName(tag.type)}
size={16}
color="#bbb"
style={{ marginRight: 6 }}
/>
<Text style={styles.tagLabel}>{tag.text}</Text>
<FontAwesome
name="times-circle"
size={16}
color="#bbb"
style={{ marginLeft: 6 }}
/>
</View>
</TouchableOpacity>
))}
</View>
{query.length > 0 && (
<>
<View style={styles.suggestionsSection}>
<Text style={styles.suggestionTitle}>Suchvorschläge</Text>
<View style={styles.suggestionsSection}>
<Text style={styles.suggestionTitle}>Suchvorschläge</Text>
<ScrollView keyboardShouldPersistTaps="handled">
{suggestions.map((suggestion, idx) => (
<TouchableOpacity
key={suggestion.text + "_" + idx}
style={styles.suggestionContainer}
onPress={() => {
tagAdded(suggestion);
}}
>
<FontAwesome
name={getIconName(suggestion.type)}
size={16}
color="hsl(0, 0%, 90%)"
/>
<Text style={styles.suggestionLabel}>{suggestion.text}</Text>
</TouchableOpacity>
))}
{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>
</>
</ScrollView>
</View>
)}
</View>
</TouchableWithoutFeedback>
<View style={{ flex: 1 }} >
<ScrollView keyboardShouldPersistTaps="handled">
{searchResults.map((result: SearchResultItem, idx) => {
switch (result.type) {
case "PERSON":
return (
<View key={result.data.id + "_" + idx} style={styles.personRow}>
<View style={styles.avatarCircle}>
<FontAwesome name="user" size={22} color="#ccc" />
</View>
{/* Text */}
<View style={{ flex: 1 }}>
<Text style={styles.personName}>{result.data.name || "Unbekannt"} ({"25"})</Text>
<Text style={styles.personMeta}>
aus: {"unterscheidlichen Shows"}
</Text>
</View>
{/* Chevron */}
<FontAwesome name="chevron-right" size={14} color="#888" />
</View>
);
case "SHOW":
return (
<View key={result.data.id + "_" + idx}>
<Text style={{ color: "skyblue" }}>
{result.data.title} (Show)
</Text>
</View>
);
default:
return null;
}
})}
</ScrollView>
</View>
</View>
);
}