project setup

2025-11-02 10:08:56 +01:00
commit 568838003e
174 changed files with 27100 additions and 0 deletions
@@ -0,0 +1,140 @@
+import { useEffect, useState, useCallback, useMemo } from "react";
+import { View, Text, FlatList } from "react-native";
+import { useLocalSearchParams, router } from "expo-router";
+import { ActivityIndicator } from "react-native-paper";
+import { useAppSelector } from "@/store/hooks";
+import { selectIsMobile } from "@/store/screen/screenSizeSlice";
+
+import { SearchResult, useGlobalSearchQuery } from "@/store/api/searchApi";
+import { SearchBar } from "@/components/ui/SearchBar";
+import { SizeEnum } from "@/constants/sizeEnum";
+import { ResultRow } from "@/components/features/search/ResultRow";
+import { normalizeEnumLike } from "@/utils/formattingUtils";
+import { useDebounce } from "@/hooks/useDebounce";
+import { Button } from "@/components/ui/Button";
+
+const SearchPage = () => {
+  const params = useLocalSearchParams<{ q?: string }>();
+  const [q, setQ] = useState(params.q ?? "");
+  const isMobile = useAppSelector(selectIsMobile);
+
+  useEffect(() => {
+    setQ(params.q ?? "");
+  }, [params.q]);
+
+  const debouncedQ = useDebounce(q, 300);
+
+  const [limit] = useState(100);
+  const { data, isFetching, isLoading, isError } = useGlobalSearchQuery(
+    { q: debouncedQ, page: 1, limit },
+    {
+      skip: !debouncedQ || debouncedQ.trim().length < 2,
+      refetchOnMountOrArgChange: true,
+      refetchOnFocus: true,
+    }
+  );
+
+  const results = useMemo(() => data?.results ?? [], [data?.results]);
+
+  const [expandedIds, setExpandedIds] = useState<Record<string, boolean>>({});
+  const toggleExpanded = useCallback((id: string) => {
+    setExpandedIds((prev) => ({ ...prev, [id]: !prev[id] }));
+  }, []);
+  const isExpanded = useCallback(
+    (id: string) => !!expandedIds[id],
+    [expandedIds]
+  );
+
+  // Reset expansions when new query results arrive
+  useEffect(() => {
+    if (data?.results) setExpandedIds({});
+  }, [debouncedQ, data?.results]);
+
+  // Update route param only after debounce
+  useEffect(() => {
+    router.setParams({ q: debouncedQ || "" });
+  }, [debouncedQ]);
+
+  // Preprocess heavy formatting outside render
+  const formattedResults = useMemo(
+    () =>
+      results.map((item) => ({
+        ...item,
+        subtitle: item.subtitle ? normalizeEnumLike(item.subtitle) : null,
+        description: item.description
+          ? normalizeEnumLike(item.description)
+          : null,
+        createdAtFormatted: item.createdAt
+          ? new Date(item.createdAt).toLocaleString()
+          : null,
+      })),
+    [results]
+  );
+
+  const renderResult = useCallback(
+    ({ item }: { item: SearchResult }) => (
+      <ResultRow
+        item={item}
+        expanded={isExpanded(item.id)}
+        onToggle={toggleExpanded}
+      />
+    ),
+    [isExpanded, toggleExpanded]
+  );
+
+  return (
+    <View className="flex-1 p-4">
+      <View>
+        {isMobile && (
+          <Button
+            onPress={() => router.push("/dashboard/user-dashboard")}
+            disabled={isFetching}
+            className="mb-2"
+          >
+            Go to User Dashboard
+          </Button>
+        )}
+        <SearchBar
+          searchQuery={q}
+          onChange={setQ}
+          placeholderText="Search"
+          size={SizeEnum.Regular}
+        />
+      </View>
+
+      {!q || q.trim().length < 2 ? (
+        <View className="mt-6">
+          <Text className="text-gray-600">Start typing to search.</Text>
+        </View>
+      ) : isLoading && results.length === 0 ? (
+        <View className="mt-6">
+          <ActivityIndicator />
+        </View>
+      ) : isError && results.length === 0 ? (
+        <View className="mt-6">
+          <Text className="text-red-500">Search failed. Please try again.</Text>
+        </View>
+      ) : (
+        <View className="flex-1">
+          <Text className="text-gray-700 mb-2 mt-2">
+            Results: {results.length}
+          </Text>
+          <FlatList
+            data={formattedResults as SearchResult[]}
+            keyExtractor={(item) => `${item.type}-${item.id}`}
+            renderItem={renderResult}
+            contentContainerStyle={{ paddingBottom: 16 }}
+            ItemSeparatorComponent={() => <View style={{ height: 12 }} />}
+          />
+          {isFetching && (
+            <View className="my-3">
+              <ActivityIndicator />
+            </View>
+          )}
+        </View>
+      )}
+    </View>
+  );
+};
+
+export default SearchPage;