Polish pt. 1 - going to submit a pr

GenerateNU · Apr 17, 2024 · b2a7d6d · b2a7d6d
1 parent 18932ce
commit b2a7d6d
Show file tree

Hide file tree

Showing 11 changed files with 175 additions and 126 deletions.
diff --git a/frontend/sac-mobile/app/(app)/search/_components/club-card.tsx b/frontend/sac-mobile/app/(app)/search/_components/club-card.tsx
@@ -1,35 +1,42 @@
+import { useClubTags } from "@/hooks/use-club-tags";
 import { Club } from "@/types/club";
 import { useState, useEffect } from "react";
-import { ScrollView, Text, View, ViewProps } from "react-native";
+import { Pressable, ScrollView, Text, View, ViewProps } from "react-native";
 
-export interface ClubCardProps extends ViewProps {}
+export interface ClubCardProps extends ViewProps {
+    club?: Club
+    showTags?: boolean,
+}
 
 
 // @refresh reset
 export const ClubCard = (p: ClubCardProps) => {
-    const tags = [
-        "Club Sport",
-        "Competitive",
-        "Yearly",
-        "Coed",
-        "Beginners Welcomed",
-    ].map((val, ind, arr) => {
+    const { data: tags, isLoading, error } = useClubTags(p.club ? p.club.id : "tester");
+
+    const tagComponents = !isLoading && error == null ? tags!.map((val, ind, arr) => {
         return (
-            <View key={val} className="border-zinc-200 border py-1 px-2 rounded-full mr-1">
-                <Text className="text-base font-light">{val}</Text>
+            <View key={val.name} className="border-zinc-200 border py-1 px-2 rounded-full mr-1">
+                <Text className="text-base font-light">{val.name}</Text>
             </View>
         );
-    });
+    }) : [];
+
     return (
-        <View {...p} className="elevation bg-white rounded-xl flex flex-col p-3">
-            <View className="w-full h-1/2 flex flex-row items-center">
-                <View className="w-12 h-12 rounded-full bg-zinc-200"></View>
-                <Text className="ml-4 text-base">Club Name</Text>
+        <Pressable
+            onPress={() => {
+                console.log("TODO: Club page")
+            }}>
+            <View {...p} className="elevation bg-white rounded-xl flex flex-col p-3">
+                <View className="w-full h-1/2 flex flex-row items-center">
+                    <View className="w-12 h-12 rounded-full bg-zinc-200"></View>
+                    <Text className="ml-4 text-base">{p.club ? p.club.name : "Club"}</Text>
+                </View>
+                {p.showTags ? <ScrollView horizontal className="w-full h-1/2 flex flex-row mt-2" showsHorizontalScrollIndicator={false}>
+                    {tagComponents}
+                    </ScrollView> : <></>}
             </View>
-            <ScrollView horizontal className="w-full h-1/2 flex flex-row mt-2" showsHorizontalScrollIndicator={false}>
-                {tags}
-            </ScrollView>
-        </View>
+        </Pressable>
+
     );
 }
 

diff --git a/frontend/sac-mobile/app/(app)/search/_components/search-bar.tsx b/frontend/sac-mobile/app/(app)/search/_components/search-bar.tsx
@@ -5,10 +5,12 @@ import { useContext, useEffect, useRef, useState } from "react";
 import { Text, GestureResponderEvent, TextInput, TouchableOpacity, TouchableWithoutFeedback, View, ViewProps, Pressable } from "react-native";
 
 import SearchIcon from '@/assets/images/svg/search.svg';
-import { SearchContext } from "../_layout";
 
 export interface SearchBarProps extends ViewProps {
     searchBoxEditable: boolean,
+    /** Will only be shown if searchBox is not editable. */
+    searchBoxText?: string,
+    focusOnLayout?: boolean,
     onSearchBoxPressed?: () => ("Focus" | undefined),
     onSearchSubmitted?: (query: string) => void,
     cancelOrBackButton?: "Cancel" | "Back",
@@ -18,8 +20,7 @@ export const SearchBar = (p: SearchBarProps) => {
     const [text, setText] = useState("");
     const textInputRef: React.Ref<TextInput> = useRef(null);
 
-
-    const searchBoxMargin = p.cancelOrBackButton == "Cancel" ? "ml-2" : "mr-2";
+    // FIXME: needs to filter, users cannot search with '/' in the query
     const backButton = (
         <Button
             onPress={() => {
@@ -65,12 +66,18 @@ export const SearchBar = (p: SearchBarProps) => {
                         editable={p.searchBoxEditable}
                         placeholder={"Search"}
                         ref={textInputRef}
-                        value={text}
+                        value={!p.searchBoxEditable && p.searchBoxText ? p.searchBoxText : text}
                         onChangeText={setText}
                         onSubmitEditing={(evt) => {
                             if (p.onSearchSubmitted) {
                                 p.onSearchSubmitted(text)
                             }
+                        }}
+                        onLayout={(evt) => {
+                            // FIXME: works when going from discover, but not when coming back from results or results/expanded
+                            if (p.focusOnLayout !== undefined && p.focusOnLayout) {
+                                textInputRef.current?.focus()
+                            }
                         }}/>
                 </View>
             </Pressable>

diff --git a/frontend/sac-mobile/app/(app)/search/_components/top-search.tsx b/frontend/sac-mobile/app/(app)/search/_components/top-search.tsx
@@ -1,16 +1,25 @@
 import { Club } from "@/types/club";
 import { useState, useEffect } from "react";
-import { ScrollView, Text, View, ViewProps } from "react-native";
+import { ScrollView, Text, TouchableOpacity, View, ViewProps } from "react-native";
 
 import SearchIcon from "@/assets/images/svg/search.svg";
+import { router } from "expo-router";
 
-export interface TopSearchProps extends ViewProps {}
+export interface TopSearchProps extends ViewProps {
+    search: string
+}
 
 export const TopSearch = (p: TopSearchProps) => {
     return (
-        <View {...p} className="elevation bg-white rounded-xl flex flex-row p-3 items-center">
-            <SearchIcon className="w-5 h-5"></SearchIcon>
-            <Text className="ml-2 text-xs">Top Search</Text>
-        </View>
+        <TouchableOpacity
+            onPress={() => {
+                router.push(`/search/results/${p.search}`)
+            }}>
+            <View {...p} className="elevation bg-white rounded-xl flex flex-row p-3 items-center">
+                <SearchIcon className="w-5 h-5"></SearchIcon>
+                <Text className="ml-2 text-xs">{p.search}</Text>
+            </View>
+        </TouchableOpacity>
+
     );
 }
diff --git a/frontend/sac-mobile/app/(app)/search/_layout.tsx b/frontend/sac-mobile/app/(app)/search/_layout.tsx
@@ -4,58 +4,14 @@ import { Club } from '@/types/club';
 import { queryClubs } from '@/services/club';
 import DiscoverPage from './discover';
 
-export type QueryState = "NoQuery" | "Loading" | "Done";
-export type SearchContextState = {
-    query: string,
-    queryState: QueryState,
-    clubs: Club[],
-}
 
 // @refresh reset
-
-export const SearchContext = createContext<SearchContextState>({
-    query: "",
-    queryState: "NoQuery",
-    clubs: []
-});
-
-const SearchLayout = () => {
-    const [query, setQuery] = useState("");
-    const [queryState, setQueryState] = useState<QueryState>("NoQuery");
-    const [clubs, setClubs] = useState<Club[]>([]);
-
-
-
-    useEffect(() => {
-        if (query == "") {
-            setQueryState("NoQuery");
-            return;
-        } else {
-            setQueryState("Loading");
-            queryClubs(query).then((clubs) => {
-                // FIXME: major race condition - try making a search, then deleting/clearing it
-                // before its loaded.
-                setClubs(clubs)
-                setQueryState("Done");                
-            }).catch((x) => {
-                console.log(":(")
-            })
-        }
-    }, [query])
-
-
+const SearchLayout = () => {    
     return (
-        <SearchContext.Provider value={{
-            query: query,
-            queryState: queryState,
-            clubs: clubs
-        }}>
-            <Stack screenOptions={{ headerShown: false }}>
-                <Stack.Screen 
-                    name="discover"/>
-            </Stack>
-        </SearchContext.Provider>
-
+        <Stack screenOptions={{ headerShown: false }}>
+            <Stack.Screen 
+                name="discover"/>
+        </Stack>        
     );
 };
 

diff --git a/frontend/sac-mobile/app/(app)/search/discover.tsx b/frontend/sac-mobile/app/(app)/search/discover.tsx
@@ -25,14 +25,14 @@ const Discover = () => {
                 flexDirection: "column"
             }}>
                 <View className="flex flex-row">
-                    <TopSearch className="mr-2 w-40"/>
-                    <TopSearch className="mr-2 w-40"/>
-                    <TopSearch className="mr-2 w-40"/>
+                    <TopSearch search={"COExist"} className="mr-2 w-40"/>
+                    <TopSearch search={"Volleyball"} className="mr-2 w-40"/>
+                    <TopSearch search={"iGEM"} className="mr-2 w-40"/>
                 </View>
                 <View className="mt-2 flex flex-row">
-                    <TopSearch className="mr-2 w-40"/>
-                    <TopSearch className="mr-2 w-40"/>
-                    <TopSearch className="mr-2 w-40"/>
+                    <TopSearch search={"Jiu Jitsu"} className="mr-2 w-40"/>
+                    <TopSearch search={"Music"} className="mr-2 w-40"/>
+                    <TopSearch search={"Kappa Sigma"} className="mr-2 w-40"/>
                 </View>
             </ScrollView>
 

diff --git a/frontend/sac-mobile/app/(app)/search/recents.tsx b/frontend/sac-mobile/app/(app)/search/recents.tsx
@@ -1,5 +1,5 @@
 import React, {  } from 'react';
-import { SafeAreaView, ScrollView, Text, TouchableOpacity, View } from 'react-native';
+import { Pressable, SafeAreaView, ScrollView, Text, TouchableOpacity, View } from 'react-native';
 import { ClubCardNoTags } from './_components/club-card';
 import { SearchBar } from './_components/search-bar';
 import { HorizontalEventCard } from './_components/event-card';
@@ -17,15 +17,24 @@ const Recents = () => {
         "Generate"
     ].map((val, ind, arr) => {
         return (
-            <View className="w-full flex flex-row mb-4 items-center">
-                <SearchIcon className="w-5 h-5 mr-2"></SearchIcon>
-                <Text className="text-base flex-grow">{val}</Text>
-                <TouchableOpacity>
-                    <MaterialCommunityIcons
-                        name="close" size={20} className="w-5 h-5">
-                    </MaterialCommunityIcons>
-                </TouchableOpacity>
-            </View>
+            <Pressable
+                onPress={(evt) => {
+                    router.push(`/search/results/${val}`)
+                }}>
+                <View className="w-full flex flex-row mb-4 items-center">
+                    <SearchIcon className="w-5 h-5 mr-2"></SearchIcon>
+                    <Text className="text-base flex-grow">{val}</Text>
+                    <TouchableOpacity
+                        onPress={(evt) => {
+                            console.log("Recents removed.")
+                        }}>
+                        {/* <MaterialCommunityIcons
+                            name="close" size={20} className="w-5 h-5">
+                        </MaterialCommunityIcons> */}
+                    </TouchableOpacity>
+                </View>
+            </Pressable>
+
         )
     })
     return (
@@ -36,9 +45,10 @@ const Recents = () => {
                 onSearchBoxPressed={() => {
                     return "Focus"
                 }}
-                onSearchSubmitted={() => {
-                    router.push('/search/results')
-                }}/>
+                onSearchSubmitted={(text) => {
+                    router.push(`/search/results/${text}`)
+                }}
+                focusOnLayout={true}/>
             <View className="flex flex-col mt-6">
                 <Text className="font-bold text-base mb-2">Recents</Text>
                 {searchRecents}

diff --git a/...d/sac-mobile/app/(app)/search/results.tsx → ...bile/app/(app)/search/results/[query].tsx b/...d/sac-mobile/app/(app)/search/results.tsx → ...bile/app/(app)/search/results/[query].tsx
@@ -1,32 +1,42 @@
 import React, {  } from 'react';
 import { SafeAreaView, ScrollView, Text, TouchableOpacity, View } from 'react-native';
-import { ClubCard, ClubCardNoTags } from './_components/club-card';
-import { SearchBar } from './_components/search-bar';
-import { EventCard, HorizontalEventCard } from './_components/event-card';
-import { TopSearch } from './_components/top-search';
-import { router } from 'expo-router';
+import { ClubCard, ClubCardNoTags } from '../_components/club-card';
+import { SearchBar } from '../_components/search-bar';
+import { EventCard, HorizontalEventCard } from '../_components/event-card';
+import { TopSearch } from '../_components/top-search';
+import { router, useLocalSearchParams } from 'expo-router';
+import { queryClubs } from '@/services/club';
+import { useClubSearch } from '@/hooks/use-club-search';
+
+const Results = () => {
+    // TODO: Add grayboxing.   
+    const search: string = (useLocalSearchParams().query as any) as string
+    const { data, error, isLoading } = useClubSearch(search)
+
+    const clubCards = !isLoading && error == null ? data!.slice(0,2).map((club, ind, arr) => {
+        return (<ClubCard club={club} className="h-28 mb-2"/>);
+    }) : [];
 
-const Results = () => {    
     return (
         <SafeAreaView className="w-full h-full bg-[#fafafa] pt-[50px] flex flex-col px-[5%]">
              <SearchBar
                 searchBoxEditable={false} 
+                searchBoxText={search}  
                 cancelOrBackButton='Back'/>
             <ScrollView className="flex flex-col mt-6">
                 <View className="w-full flex flex-row justify-between items-center">
                     <Text className="font-bold text-base mb-2">Recommended Clubs</Text>
                     <TouchableOpacity
                         onPress={() => {
-                            router.push("/search/results-expanded")
+                            router.push(`/search/results/expanded/${search}`)
                         }}>
                         <Text className="text-xs text-zinc-600">
                             View All
                         </Text>
                     </TouchableOpacity>
                 </View>
 
-                <ClubCard className="h-28 mb-2"/>
-                <ClubCard className="h-28 mb-2"/>
+                {clubCards}
 
                 <View className="w-full flex flex-row justify-between items-center">
                     <Text className="font-bold text-base mb-2">Recommended Events</Text>
@@ -36,10 +46,16 @@ const Results = () => {
                         </Text>
                     </TouchableOpacity>
                 </View>
+
+                <View className="w-full h-56 flex flex-row mb-2 justify-between">
+                    <EventCard className="w-1/2"/>
+                    <EventCard className="w-1/2"/>    
+                </View>
 
-                <EventCard className="w-full mb-2"/>
-                <EventCard className="w-full mb-2"/>
-                <EventCard className="w-full mb-2"/>
+                <View className="w-full h-56 flex flex-row mb-2 justify-between">
+                    <EventCard className="w-1/2"/>
+                    <EventCard className="w-1/2"/>    
+                </View>
             </ScrollView>
         </SafeAreaView>
     );