completed views for search

GenerateNU · Dec 4, 2024 · b5f4d81 · b5f4d81
1 parent e360c13
commit b5f4d81
Show file tree

Hide file tree

Showing 8 changed files with 121 additions and 13 deletions.
diff --git a/frontend/src/components/SearchBar.tsx b/frontend/src/components/SearchBar.tsx
@@ -43,6 +43,7 @@ type SearchBarProps = VariantProps<typeof searchBarVariants> & {
   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<SearchBarProps> = ({
   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}
       />
       <StyledPressable className='ml-2' onPress={onPressed}>
         <StyledImage source={iconVariants[icon || 'clear']} style={{ width: 14, height: 14 }} />

diff --git 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
@@ -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() {
       />
       <Stack.Screen
         name='search-results'
-        component={ProjectUpdatesScreen}
+        component={SearchResults}
+
         options={{ title: 'Search Results', headerShown: true }}
       />
     </Stack.Navigator>

diff --git 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 (
     <StyledView className='flex-1 bg-surfaceBG'>
       {/* Explore Header */}
@@ -29,11 +34,12 @@ export default function SearchScreen({ navigation }: ExploreScreenProps) {
         <SearchBar
           intent='unselected'
           icon='search-default'
-          value='Explore investments'
+          value={searchValue}
           width={90}
           height={6}
-          onValueChange={() => {}}
-          onPressed={(evt) => {}}
+          onValueChange={setSearchValue}
+          onPressed={() => {}}
+          onSubmit={(evt) => {navigation.navigate('search-results', {searchQuery: searchValue});}}
           textColor=''
         />
 
@@ -44,7 +50,7 @@ export default function SearchScreen({ navigation }: ExploreScreenProps) {
           <StyledText className='mt-[2vh] font-sourceSans3Bold text-[4vw]'>
             No recent searches yet.
           </StyledText>
-          <StyledText className='mt-[1vh] font-body text-[3w]'>
+          <StyledText className='mt-[1vh] font-body text-[3w] text-center'>
             Try searching for something or explore the categories to find what you are looking for.
           </StyledText>
         </StyledView>

diff --git a/frontend/src/screens/explore/components/SearchResults.tsx 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<any, any>;
+  // 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 (
+    <StyledScrollView className='flex-1 bg-surfaceBG'>
+      {/* Explore Header */}
+      <StyledView className='pt-[2vh] pl-[2vh]'>
+        <StyledText className='text-[8vw] font-heading'>Explore</StyledText>
+      </StyledView>
+
+      {/* Search Bar */}
+      <StyledView className='flex items-center'>
+        <StyledTouchableOpacity
+          className='pt-[2vh]'
+          onPress={(evt) => {
+            navigation.navigate('search');
+          }}
+        >
+          <StyledTouchableOpacity
+            className='pt-[2vh] absolute z-20 w-[100vw] h-[8vh]'
+            onPress={(evt) => {
+              navigation.navigate('search');
+            }}
+          ></StyledTouchableOpacity>
+
+          <SearchBar
+            intent='unselected'
+            icon='search-default'
+            value={searchQuery}
+            width={90}
+            height={5}
+            onValueChange={() => {}}
+            onPressed={(evt) => {
+              navigation.navigate('search');
+            }}
+            textColor=''
+          />
+        </StyledTouchableOpacity>
+
+        {/* Display Properties */}
+
+        <StyledView className='w-[100vw] flex items-center justify-center overflow-scroll'>
+          {projectResults.length > 0 ? (
+            projectResults.map((project) => (
+              <StyledTouchableOpacity
+                onPress={() => navigation.navigate('Project')}
+                key={project?.id}
+                className='mt-[3vh] w-[90vw] h-[22vh]'
+              >
+                <RecentlyViewedCard projectId={project?.id} />
+              </StyledTouchableOpacity>
+            ))
+          ) : (
+            <StyledView className='w-[80vw] h-[30vh] mt-[6vh] flex items-center justify-center'>
+              <StyledImage source={logo} className='w-[26vw] h-[30vw]' />
+              <StyledText className='mt-[2vh] font-sourceSans3Bold text-[4vw]'>
+                No results found for "{searchQuery}".
+              </StyledText>
+              <StyledText className='mt-[1vh] font-body text-[3w] flex text-center'>
+                Try a new search or explore the categories to find what you are looking for.
+              </StyledText>
+            </StyledView>
+          )}
+        </StyledView>
+      </StyledView>
+    </StyledScrollView>
+  );
+}
diff --git a/frontend/src/screens/explore/explore.tsx b/frontend/src/screens/explore/explore.tsx
@@ -33,9 +33,11 @@ export default function ExploreScreen({ navigation }: ExploreScreenProps) {
       </StyledView>
 
       {/* Search Bar */}
-      <StyledTouchableOpacity className='pt-[3vh] pl-[2vh]' onPress={(evt) => {
+      <StyledTouchableOpacity className='pt-[3vh] pl-[2vh]'>
+         <StyledTouchableOpacity className='pt-[3vh] pl-[2vh] absolute z-20 w-[100vw] h-[8vh]' onPress={(evt) => {
             navigation.navigate('search');
-          }}>
+          }}></StyledTouchableOpacity>
+
         <SearchBar
           intent='unselected'
           icon='search-default'

diff --git a/frontend/src/screens/home/components/RecentlyViewedCards.tsx b/frontend/src/screens/home/components/RecentlyViewedCards.tsx
@@ -82,7 +82,7 @@ const RecentlyViewedCard = ({ projectId }: { projectId: string }) => {
     );
   };
   return (
-    <Card className='w-full h-auto flex flex-col justify-center items-center border-borderPrimary'>
+    <Card className='w-full h-full flex flex-col justify-center items-center border-borderPrimary'>
       <StyledView className='flex flex-row flex-1 h-[15vh]'>
         <StyledView className='flex-1 flex-col '>
           <ProjectInformation />

diff --git 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 = [
     {