update

2025-10-08 17:26:35 +02:00
parent a01ffcd2bb
commit 21d2cb158e
3 changed files with 222 additions and 90 deletions
--- a/app/(tabs)/explore.tsx
+++ b/app/(tabs)/explore.tsx
@@ -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>
  );
 }
--- a/app/tabStyles/indexStyles.tsx
+++ b/app/tabStyles/indexStyles.tsx
@@ -4,6 +4,7 @@ export default StyleSheet.create({
  mainContainer: {
    flex: 1,
    backgroundColor: "hsl(221, 39%, 11%)",
+    // paddingHorizontal: 10,
  },
  header: {
    height: 125,
@@ -43,7 +44,7 @@ export default StyleSheet.create({
    marginTop: 20,
  },
  searchContainer: {
-    width: "90%",
+    width: "100%",
    height: 60,
    marginHorizontal: "auto",
    backgroundColor: "hsl(221, 39%, 8%)",
@@ -71,7 +72,10 @@ export default StyleSheet.create({
    fontWeight: "500",
  },
  suggestionsSection: {
-    width: "90%",
+    position: "absolute",
+    zIndex: 10,
+    top: 70,
+    width: "100%",
    height: "auto",
    paddingBottom: 15,
    borderRadius: 20,
@@ -89,6 +93,7 @@ export default StyleSheet.create({
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
+    // opacity: 0.9,
  },
  suggestionTitle: {
    color: "hsl(0, 0%, 60%)",
@@ -119,26 +124,46 @@ export default StyleSheet.create({
    fontWeight: "500",
    marginLeft: 10,
  },
-  tagContainer: {
+  tag: {
    flexDirection: "row",
    alignItems: "center",
-    backgroundColor: "hsl(221, 39%, 8%)",
-    borderWidth: 1.5,
-    borderColor: "hsl(221, 39%, 15%)",
-    height: "auto",
-    width: "auto",
-    paddingVertical: 10,
-    borderRadius: 50,
-    marginTop: 15,
-    marginLeft: 20,
-
-    justifyContent: "space-between",
+    backgroundColor: "#333",
+    borderRadius: 999,
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+    marginRight: 8,
+    marginBottom: 8,
+    marginTop: 5,
  },
  tagLabel: {
-    color: "hsl(0, 0%, 90%)",
-    fontSize: 14,
-    fontWeight: "500",
-    marginLeft: 15,
-    textAlign: "center",
+    color: "white", 
+    marginRight: 5
  },
+  tagContainer: {
+    width: "100%",
+    flexDirection: "row",
+    flexWrap: "wrap",
+    marginTop: 10,
+  },
+  personRow: {
+    width: "100%",
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: "#1b1e2b",
+    borderRadius: 10,
+    paddingHorizontal: 10,
+    paddingVertical: 10,
+    marginBottom: 8,
+  },
+  avatarCircle: {
+    width: 40,
+    height: 40,
+    borderRadius: 999,
+    backgroundColor: "#2a2f45",
+    alignItems: "center",
+    justifyContent: "center",
+    marginRight: 10,
+  },
+  personName: { color: "white", fontSize: 16, fontWeight: "600" },
+  personMeta: { color: "#bbb", fontSize: 12, marginTop: 2 },
 });