Merge pull request #328 from bounswe/issue#324-add-search-mechanism-m…

…obile Issue#324 - Add Search Mechanism Mobile
bounswe · Dec 16, 2024 · c0c6dd6 · c0c6dd6
2 parents 827d3ba + 8533716
commit c0c6dd6
Show file tree

Hide file tree

Showing 8 changed files with 599 additions and 126 deletions.
diff --git a/mobile/App.js b/mobile/App.js
@@ -15,6 +15,7 @@ import UserProfile from './components/UserProfile';
 import Label from './components/Label';
 import SearchBar from './components/SearchBar';
 import SearchResult from './components/SearchResult';
+import SearchResults from './components/SearchResults';
 import ProgressTracker from './components/ProgressTracker';
 import WorkoutDetails from './components/WorkoutDetails';
 import JoinedWorkout from './components/JoinedWorkout';
@@ -26,6 +27,7 @@ import Survey from './components/Survey'
 import FeedbackCard from './components/FeedbackCard';
 import FeedbackDetail from './components/FeedbackDetail';
 import CreateFeedback from './components/CreateFeedback';
+import SearchPage from './components/SearchPage';
 
 
 import { Provider as ReduxProvider } from 'react-redux';
@@ -80,6 +82,8 @@ const App = () => {
                 <Stack.Screen name="Label" component={Label} />
                 <Stack.Screen name="SearchBar" component={SearchBar} />
                 <Stack.Screen name="SearchResult" component={SearchResult} />
+                <Stack.Screen name="SearchResults" component={SearchResults} />
+
                 <Stack.Screen name="ProgressTracker" component={ProgressTracker} />
                 <Stack.Screen name="WorkoutDetails" component={WorkoutDetails} />
                 <Stack.Screen name="JoinedWeek" component={JoinedWeek} />
@@ -92,6 +96,7 @@ const App = () => {
                 <Stack.Screen name="FeedbackCard" component={FeedbackCard} />
                 <Stack.Screen name="FeedbackDetail" component={FeedbackDetail} />
 
+                <Stack.Screen name="SearchPage" component={SearchPage} />
 
 
               </Stack.Navigator>

diff --git a/mobile/components/Home.js b/mobile/components/Home.js
@@ -9,6 +9,7 @@ import CreatePost from './CreatePost';
 import CreateProgram from './CreateProgram';
 import Create from './Create';
 import SearchResults from './SearchResults';
+import SearchPage from './SearchPage';
 import { isLoggedIn, userSessionToken } from '../user';
 import { useDispatch } from 'react-redux'
 import apiInstance from '../Api';
@@ -46,7 +47,7 @@ const Home = ({ navigation }) => {
 
   const SearchPageContainer = () => (
       <View style={currentStyles.page}>
-        <SearchResults/>
+        <SearchResults navigation={navigation}/>
       </View>
     );
     const handleLogOut = async () => {

diff --git a/mobile/components/PostCard.js b/mobile/components/PostCard.js
@@ -2,7 +2,8 @@ import React from 'react';
 import { View, Text, StyleSheet, Image, TouchableOpacity } from 'react-native';
 import Icon from 'react-native-vector-icons/FontAwesome5';
 
-const PostCard = ({ tags, program_id,post_id, description, owner, date, likeCount, commentList, liked, navigation }) => {
+const PostCard = ({ tags, program_id,post_id, description, owner, date, likeCount, liked, navigation }) => {
+var commentList = [];
   return (
     <TouchableOpacity
               style={styles.card}

diff --git a/mobile/components/SearchBar.js b/mobile/components/SearchBar.js
@@ -1,56 +1,73 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { View, TextInput, TouchableOpacity, ActivityIndicator, StyleSheet } from 'react-native';
 import Toast from 'react-native-toast-message';
 import Icon from 'react-native-vector-icons/FontAwesome5'; // Import search icon from react-native-vector-icons
 import apiInstance from '../Api';
+import { useSelector } from "react-redux";
+import { userSessionToken } from "../user";
 
-function SearchBar({ screen, setResults, setLoading, loading }) {
+function SearchBar({ searchResults, screen, setResults, setLoading, loading }) {
   const [searchQuery, setSearchQuery] = useState('');
+const titleString = (str) => {
+    return str.toLowerCase().split(' ').map(word => word.charAt(0).toUpperCase() + word.substring(1)).join(' ');
+}
+  const sessionToken = useSelector(userSessionToken);
+
+  const handleSearch = async () => {
+           setLoading(true);
+           console.log(searchQuery);
+           try {
+               if (!searchQuery) {
+                   setLoading(false);
+                   return;
+               }
 
-  const handleSearch = async (val) => {
-    if (!val.trim()) {
-      Toast.show({
-        type: 'info',
-        position: 'bottom',
-        text1: 'Empty Search Query',
-        text2: 'Please enter a search term.',
-        visibilityTime: 2000,
-        autoHide: true,
-        topOffset: 30,
-        bottomOffset: 40,
-      });
-      return;
-    }
+               const response = await apiInstance(sessionToken).get(`/api/search`, {
+                   params: {
+                       q: titleString(searchQuery)
+                   }
+               });
 
-    /*try {
-      setLoading(true);
-      const response = await apiInstance().post('search', {
-        query: val,
-      });
+               if (response.status === 200) {
+                   const data = response.data;
+                   setResults(data);
+                   setSearchQuery("");
+                   Toast.show({
+                                   type: 'success',
+                                   position: 'bottom',
+                                   text1: 'Search successfully done',
+                                   visibilityTime: 2000,
+                                   autoHide: true,
+                                   topOffset: 30,
+                                   bottomOffset: 40
+                               });
+               }
 
-      if (response.status === 200) {
-        const data = response.data;
-        console.log(data);
-        setResults(data);
-        setSearchQuery('');
+               setLoading(false);
+           } catch (e) {
+               console.log(e);
+               Toast.show({
+                               type: 'error',
+                               position: 'bottom',
+                               text1: 'Search Error',
+                               text2: 'There is an error searching. Please try again.',
+                               visibilityTime: 2000,
+                               autoHide: true,
+                               topOffset: 30,
+                               bottomOffset: 40
+                           });
+               setLoading(false);
+           }
+       };
+    useEffect(() => {
+      if (!searchResults) {
+        console.log('Search results are null');
+        return;
       }
-    } catch (e) {
-      console.error(e);
-      Toast.show({
-        type: 'error',
-        position: 'bottom',
-        text1: 'Search Error',
-        text2: 'There was an error while searching. Please try again.',
-        visibilityTime: 2000,
-        autoHide: true,
-        topOffset: 30,
-        bottomOffset: 40,
-      });
-    } finally {
-      setLoading(false);
+      console.log('Search results have changed:', searchResults);
+    }, [searchResults]);
+
 
-  };*/
-  };
 
   return (
     <View style={styles.container}>