From b5f4d810eed266fdfdbd8d1cbe5ded95d73fccbd Mon Sep 17 00:00:00 2001 From: Dao Ho <84757503+Dao-Ho@users.noreply.github.com> Date: Wed, 4 Dec 2024 03:28:31 -0500 Subject: [PATCH] completed views for search --- frontend/src/components/SearchBar.tsx | 3 + frontend/src/constants.ts | 4 +- frontend/src/navigation/ExploreNavigator.tsx | 4 +- .../src/screens/explore/components/Search.tsx | 16 +++- .../explore/components/SearchResults.tsx | 95 +++++++++++++++++++ frontend/src/screens/explore/explore.tsx | 6 +- .../home/components/RecentlyViewedCards.tsx | 2 +- .../signup_flow/ConnectAccountsScreen.tsx | 4 +- 8 files changed, 121 insertions(+), 13 deletions(-) create mode 100644 frontend/src/screens/explore/components/SearchResults.tsx diff --git a/frontend/src/components/SearchBar.tsx b/frontend/src/components/SearchBar.tsx index 7f5c277..e04c222 100644 --- a/frontend/src/components/SearchBar.tsx +++ b/frontend/src/components/SearchBar.tsx @@ -43,6 +43,7 @@ type SearchBarProps = VariantProps & { value: string; onValueChange: (text: string) => void; onPressed: (event: GestureResponderEvent) => void; + onSubmit: (event: GestureResponderEvent) => void; intent: string; icon: string; textColor: string; @@ -59,6 +60,7 @@ const SearchBar: React.FC = ({ height, onValueChange, onPressed, + onSubmit, }) => { const { height: screenHeight, width: screenWidth } = Dimensions.get('window'); @@ -75,6 +77,7 @@ const calculatedHeight = (height / 100) * screenHeight; placeholder={value} placeholderTextColor={textColor} onChangeText={onValueChange} + onSubmitEditing={onSubmit} /> diff --git a/frontend/src/constants.ts b/frontend/src/constants.ts index c90d1e6..99d081e 100644 --- a/frontend/src/constants.ts +++ b/frontend/src/constants.ts @@ -1,4 +1,4 @@ -export const API_URL = 'https://e6c6-155-33-133-58.ngrok-free.app'; -export const SUPABASE_URL = 'https://ff75-155-33-133-58.ngrok-free.app'; +export const API_URL = 'https://e966-155-33-133-58.ngrok-free.app'; +export const SUPABASE_URL = 'https://c462-155-33-133-58.ngrok-free.app'; export const SUPABASE_JWT_SECRET = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6ImFub24iLCJleHAiOjE5ODM4MTI5OTZ9.CRXP1A7WOeoJeXxjNni43kdQwgnWNReilDMblYTn_I0'; diff --git a/frontend/src/navigation/ExploreNavigator.tsx b/frontend/src/navigation/ExploreNavigator.tsx index 833cc4a..c7d9793 100644 --- a/frontend/src/navigation/ExploreNavigator.tsx +++ b/frontend/src/navigation/ExploreNavigator.tsx @@ -4,6 +4,7 @@ import { createNativeStackNavigator } from '@react-navigation/native-stack'; import SearchScreen from '../screens/explore/components/Search'; import ProjectUpdatesScreen from '../screens/project/ProjectUpdatesScreen'; import ExploreScreen from '../screens/explore/explore'; +import SearchResults from '../screens/explore/components/SearchResults'; const Stack = createNativeStackNavigator(); @@ -23,7 +24,8 @@ export default function ExploreNavigator() { /> diff --git a/frontend/src/screens/explore/components/Search.tsx b/frontend/src/screens/explore/components/Search.tsx index 57215e1..df6fe8a 100644 --- a/frontend/src/screens/explore/components/Search.tsx +++ b/frontend/src/screens/explore/components/Search.tsx @@ -4,6 +4,7 @@ import { NavigationScreenProp } from 'react-navigation'; import { styled } from 'nativewind'; import SearchBar from '../../../components/SearchBar'; import logo from '../../../../assets/images/Logo x 100.png'; +import { useSearchProjects } from '../../../services/project'; interface ExploreScreenProps { // This actually should be `any`, so disabling the linter rule @@ -12,11 +13,15 @@ interface ExploreScreenProps { } const StyledView = styled(View); -const StyledTouchableOpacity = styled(TouchableOpacity); const StyledText = styled(Text); const StyledImage = styled(Image); export default function SearchScreen({ navigation }: ExploreScreenProps) { + const [searchValue, setSearchValue] = React.useState(''); + const { projectResults, isLoading } = useSearchProjects(searchValue); + console.log(projectResults); + console.log("searchValue: ", searchValue); + return ( {/* Explore Header */} @@ -29,11 +34,12 @@ export default function SearchScreen({ navigation }: ExploreScreenProps) { {}} - onPressed={(evt) => {}} + onValueChange={setSearchValue} + onPressed={() => {}} + onSubmit={(evt) => {navigation.navigate('search-results', {searchQuery: searchValue});}} textColor='' /> @@ -44,7 +50,7 @@ export default function SearchScreen({ navigation }: ExploreScreenProps) { No recent searches yet. - + Try searching for something or explore the categories to find what you are looking for. diff --git a/frontend/src/screens/explore/components/SearchResults.tsx b/frontend/src/screens/explore/components/SearchResults.tsx new file mode 100644 index 0000000..4a2eacd --- /dev/null +++ b/frontend/src/screens/explore/components/SearchResults.tsx @@ -0,0 +1,95 @@ +import React from 'react'; +import { Text, View, TouchableOpacity, Image, ScrollView } from 'react-native'; +import { NavigationScreenProp } from 'react-navigation'; +import { styled } from 'nativewind'; +import SearchBar from '../../../components/SearchBar'; +import logo from '../../../../assets/images/Logo x 100.png'; +import { useSearchProjects } from '../../../services/project'; +import RecentlyViewedCard from '../../home/components/RecentlyViewedCards'; + +interface ExploreScreenProps { + // This actually should be `any`, so disabling the linter rule + // eslint-disable-next-line @typescript-eslint/no-explicit-any + navigation: NavigationScreenProp; + // This actually should be `any`, so disabling the linter rule + // eslint-disable-next-line @typescript-eslint/no-explicit-any + route: any; +} + +const StyledView = styled(View); +const StyledTouchableOpacity = styled(TouchableOpacity); +const StyledText = styled(Text); +const StyledImage = styled(Image); +const StyledScrollView = styled(ScrollView); + +export default function SearchResults({ route, navigation }: ExploreScreenProps) { + const { searchQuery } = route.params || ''; + console.log('searchQuery: ', searchQuery); + const { projectResults, isLoading } = useSearchProjects(searchQuery); + console.log(projectResults); + + return ( + + {/* Explore Header */} + + Explore + + + {/* Search Bar */} + + { + navigation.navigate('search'); + }} + > + { + navigation.navigate('search'); + }} + > + + {}} + onPressed={(evt) => { + navigation.navigate('search'); + }} + textColor='' + /> + + + {/* Display Properties */} + + + {projectResults.length > 0 ? ( + projectResults.map((project) => ( + navigation.navigate('Project')} + key={project?.id} + className='mt-[3vh] w-[90vw] h-[22vh]' + > + + + )) + ) : ( + + + + No results found for "{searchQuery}". + + + Try a new search or explore the categories to find what you are looking for. + + + )} + + + + ); +} diff --git a/frontend/src/screens/explore/explore.tsx b/frontend/src/screens/explore/explore.tsx index 3bafeab..822f783 100644 --- a/frontend/src/screens/explore/explore.tsx +++ b/frontend/src/screens/explore/explore.tsx @@ -33,9 +33,11 @@ export default function ExploreScreen({ navigation }: ExploreScreenProps) { {/* Search Bar */} - { + + { navigation.navigate('search'); - }}> + }}> + { ); }; return ( - + diff --git a/frontend/src/screens/login/signup_flow/ConnectAccountsScreen.tsx b/frontend/src/screens/login/signup_flow/ConnectAccountsScreen.tsx index 689cec8..a3642f8 100644 --- a/frontend/src/screens/login/signup_flow/ConnectAccountsScreen.tsx +++ b/frontend/src/screens/login/signup_flow/ConnectAccountsScreen.tsx @@ -6,7 +6,7 @@ import PlaidLink from '../../../expo-plaid-link/Index'; import { useLink } from '../../../services/plaid'; import TextField from '../../../components/TextField'; import TextInputComponent from '../components/TextInputComponent'; -import { BodyBoldText, BodyText, CaptionText } from '../../../components/Typography'; +import { BodyBoldText, BodyText, CaptionText } from '../../../components/typography'; import Button from '../../../components/Button'; import NavProgressBar from '../components/NavProgressBar'; import OnboardingScreenWrapper from '../components/OnboardingScreenWrapper'; @@ -19,7 +19,7 @@ const StyledTouchableOpacity = styled(TouchableOpacity); const StyledImage = styled(Image); export default function ConnectAccountsScreen({ navigation }) { - const [search, setSearch] = useState("") + const [search, setSearch] = useState(""); const banks = [ {