Mobile main updated

archive/src/mobile/src/pages/CreatePostScreen.js

@@ -66,13 +66,12 @@ const CreatePost = () => {
         photoDate: date ?? "",
         animalName,
       });
-      console.log("Post created:", response);
       setTimeout(() => {
         navigation.navigate("Home");
       }, 2000); // 2000 milliseconds delay (2 seconds)
       // You can show a success message or navigate to another screen here
     } catch (error) {
-      console.error("Error creating post:", error);
+      console.log("Error creating post:", error);
       // You can show an error message here
     }
   };

archive/src/mobile/src/pages/GuestSearch.js

@@ -1,21 +1,20 @@
-import React, { useState } from 'react';
-import { View, TextInput, TouchableOpacity, Text, Alert } from 'react-native';
-import Icon from 'react-native-vector-icons/FontAwesome';
-import MaterialIcon from 'react-native-vector-icons/MaterialIcons'; // Renamed import
+import React, { useState } from "react";
+import { View, TextInput, TouchableOpacity, Text, Alert } from "react-native";
+import Icon from "react-native-vector-icons/FontAwesome";
+import MaterialIcon from "react-native-vector-icons/MaterialIcons"; // Renamed import
 function SearchScreen({ navigation }) {
-  const [searchQuery, setSearchQuery] = useState('');
+  const [searchQuery, setSearchQuery] = useState("");
   const [selectedButton, setSelectedButton] = useState(null);
 
   const handleSearch = (prefix) => {
-    if (searchQuery.trim() === '') {
-      Alert.alert('Error', 'Please enter a search query.');
+    if (searchQuery.trim() === "") {
+      Alert.alert("Error", "Please enter a search query.");
       return;
     }
     // Concatenate the selected prefix with the search input
     const prefixedSearchQuery = prefix + searchQuery;
-    console.log('Searching for:', prefixedSearchQuery);
     // Navigate to the search results screen with the prefixed search query
-    navigation.navigate('SearchResults', { searchQuery: prefixedSearchQuery });
+    navigation.navigate("SearchResults", { searchQuery: prefixedSearchQuery });
   };
 
   const handleButtonClick = (prefix) => {
@@ -24,50 +23,90 @@ function SearchScreen({ navigation }) {
   };
 
   return (
-    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', paddingHorizontal: 20 }}>
-      <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginBottom: 20 }}>
+    <View
+      style={{
+        flex: 1,
+        justifyContent: "center",
+        alignItems: "center",
+        paddingHorizontal: 20,
+      }}
+    >
+      <View
+        style={{
+          flexDirection: "row",
+          justifyContent: "space-between",
+          marginBottom: 20,
+        }}
+      >
         {/* Button for family search */}
         <TouchableOpacity
-          style={{ backgroundColor: selectedButton === 'f@' ? 'lightblue' : 'lightgray', padding: 10, borderRadius: 5 }}
-          onPress={() => handleButtonClick('f@')}
-          disabled={selectedButton === 'f@'}
+          style={{
+            backgroundColor:
+              selectedButton === "f@" ? "lightblue" : "lightgray",
+            padding: 10,
+            borderRadius: 5,
+          }}
+          onPress={() => handleButtonClick("f@")}
+          disabled={selectedButton === "f@"}
         >
           <Text>Family</Text>
         </TouchableOpacity>
         {/* Button for work search */}
         <TouchableOpacity
-          style={{ backgroundColor: selectedButton === 's@' ? 'lightgreen' : 'lightgray', padding: 10, borderRadius: 5 }}
-          onPress={() => handleButtonClick('s@')}
-          disabled={selectedButton === 's@'}
+          style={{
+            backgroundColor:
+              selectedButton === "s@" ? "lightgreen" : "lightgray",
+            padding: 10,
+            borderRadius: 5,
+          }}
+          onPress={() => handleButtonClick("s@")}
+          disabled={selectedButton === "s@"}
         >
           <Text>Species</Text>
         </TouchableOpacity>
         {/* Button for hobbies search */}
-
       </View>
       <TextInput
         placeholder="Enter search query"
         value={searchQuery}
-        onChangeText={text => setSearchQuery(text)}
-        style={{ width: '100%', marginBottom: 20, borderWidth: 1, borderColor: 'black', padding: 10 }}
+        onChangeText={(text) => setSearchQuery(text)}
+        style={{
+          width: "100%",
+          marginBottom: 20,
+          borderWidth: 1,
+          borderColor: "black",
+          padding: 10,
+        }}
       />
-      
+
       <TouchableOpacity
         onPress={() => handleSearch(selectedButton)}
-        style={{ backgroundColor: 'green', padding: 10, borderRadius: 5 }}
-        disabled={!searchQuery.trim() || selectedButton==null }
+        style={{ backgroundColor: "green", padding: 10, borderRadius: 5 }}
+        disabled={!searchQuery.trim() || selectedButton == null}
       >
-        <Text style={{ color: 'white' }}>Search</Text>
+        <Text style={{ color: "white" }}>Search</Text>
       </TouchableOpacity>
       {/* Bottom navigation bar */}
-      <View style={{ flexDirection: 'row', justifyContent: 'space-around', alignItems: 'center', height: 50, backgroundColor: '#f0f0f0', position: 'absolute', bottom: 0, left: 0, right: 0 }}>
-        <TouchableOpacity onPress={() => navigation.navigate('Guest')}>
+      <View
+        style={{
+          flexDirection: "row",
+          justifyContent: "space-around",
+          alignItems: "center",
+          height: 50,
+          backgroundColor: "#f0f0f0",
+          position: "absolute",
+          bottom: 0,
+          left: 0,
+          right: 0,
+        }}
+      >
+        <TouchableOpacity onPress={() => navigation.navigate("Guest")}>
           <MaterialIcon name="home" size={30} color="green" />
         </TouchableOpacity>
-        <TouchableOpacity onPress={() => navigation.navigate('GuestS')}>
+        <TouchableOpacity onPress={() => navigation.navigate("GuestS")}>
           <MaterialIcon name="search" size={30} color="green" />
         </TouchableOpacity>
-        <TouchableOpacity onPress={() => navigation.navigate('Sign-Up')}>
+        <TouchableOpacity onPress={() => navigation.navigate("Sign-Up")}>
           <MaterialIcon name="person-add" size={30} color="green" />
         </TouchableOpacity>
       </View>

archive/src/mobile/src/pages/GuestUserHome.js

@@ -1,11 +1,18 @@
-import React, {  useContext, useEffect, useState} from 'react';
-import { View, Text, FlatList, Image, TouchableOpacity, StyleSheet, Alert } from 'react-native';
-import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome'; // Renamed import
-import MaterialIcon from 'react-native-vector-icons/MaterialIcons'; // Renamed import
-import { getFeed } from '../services/feed.js';
+import React, { useContext, useEffect, useState } from "react";
+import {
+  View,
+  Text,
+  FlatList,
+  Image,
+  TouchableOpacity,
+  StyleSheet,
+  Alert,
+} from "react-native";
+import FontAwesomeIcon from "react-native-vector-icons/FontAwesome"; // Renamed import
+import MaterialIcon from "react-native-vector-icons/MaterialIcons"; // Renamed import
+import { getFeed } from "../services/feed.js";
 // Dummy data for posts
 
-
 function HomeScreen({ navigation }) {
   // State variables for like, dislike, comment counts, and flag status
   const [likeCounts, setLikeCounts] = useState({});
@@ -21,10 +28,9 @@ function HomeScreen({ navigation }) {
         if (!response.success) {
           throw new Error(response.message);
         }
-        console.log("here");
         setPosts(response.posts);
       } catch (error) {
-        console.error("Failed to fetch posts:", error);
+        console.log("Failed to fetch posts:", error);
       }
     };
 
@@ -97,32 +103,42 @@ function HomeScreen({ navigation }) {
   // Function to display an alert for guest users
   const displayGuestAlert = () => {
     Alert.alert(
-      'Guest User',
-      'You cannot do this action, you are a guest user.',
-      [{ text: 'OK', onPress: () => console.log('OK Pressed') }],
+      "Guest User",
+      "You cannot do this action, you are a guest user.",
+      [{ text: "OK", onPress: () => console.log("OK Pressed") }],
       { cancelable: false }
     );
   };
 
   const renderPost = ({ item }) => (
-    <View style={{ marginBottom: 20, backgroundColor:  'white' }}>
-      <View style={{ flexDirection: 'row', alignItems: 'center', marginBottom: 10 }}>
-        <Text style={{ fontWeight: 'bold', marginRight: 10 }}>{item.username}</Text>
-        <TouchableOpacity onPress={() => navigation.navigate('UserP', { username: item.username })}>
-          <Text style={{ color: 'blue' }}>View Profile</Text>
+    <View style={{ marginBottom: 20, backgroundColor: "white" }}>
+      <View
+        style={{ flexDirection: "row", alignItems: "center", marginBottom: 10 }}
+      >
+        <Text style={{ fontWeight: "bold", marginRight: 10 }}>
+          {item.username}
+        </Text>
+        <TouchableOpacity
+          onPress={() =>
+            navigation.navigate("UserP", { username: item.username })
+          }
+        >
+          <Text style={{ color: "blue" }}>View Profile</Text>
         </TouchableOpacity>
       </View>
       {item.media && (
         <Image
           source={{ uri: `data:image/jpeg;base64,${item.media}` }}
-          style={{ width: '100%', height: 300 }}
+          style={{ width: "100%", height: 300 }}
         />
       )}
-      <Text style={{ marginVertical: 10 }}>{item.animalName || 'No Animal Name'}</Text>
+      <Text style={{ marginVertical: 10 }}>
+        {item.animalName || "No Animal Name"}
+      </Text>
       <Text style={{ marginVertical: 10 }}>{item.caption}</Text>
       <Text style={{ marginVertical: 10 }}>Posted on: {item.postDate}</Text>
       <Text style={{ marginVertical: 10 }}>Location: {item.location}</Text>
-      <View style={{ flexDirection: 'row', marginTop: 10 }}>
+      <View style={{ flexDirection: "row", marginTop: 10 }}>
         <TouchableOpacity onPress={() => incrementLike(item.id)}>
           <FontAwesomeIcon name="thumbs-up" size={30} color="green" />
         </TouchableOpacity>
@@ -136,32 +152,33 @@ function HomeScreen({ navigation }) {
         </TouchableOpacity>
         <Text style={styles.iconText}>{commentCounts[item.id] || 0}</Text>
         <TouchableOpacity onPress={() => toggleBookmark(item.id)}>
-          <FontAwesomeIcon name={bookmarkedPosts[item.id] ? "bookmark" : "bookmark-o"} size={30} color="pink" />
+          <FontAwesomeIcon
+            name={bookmarkedPosts[item.id] ? "bookmark" : "bookmark-o"}
+            size={30}
+            color="pink"
+          />
         </TouchableOpacity>
-        <View style={styles.iconContainer}>
-
-        </View>
+        <View style={styles.iconContainer}></View>
       </View>
     </View>
   );
 
-
   return (
     <View style={{ flex: 1, paddingHorizontal: 20, paddingTop: 20 }}>
       <FlatList
         data={posts}
         renderItem={renderPost}
-        keyExtractor={item => item.postID.toString()}
+        keyExtractor={(item) => item.postID.toString()}
       />
       {/* Bottom navigation bar */}
       <View style={styles.bottomNavBar}>
-        <TouchableOpacity onPress={() => navigation.navigate('Guest')}>
+        <TouchableOpacity onPress={() => navigation.navigate("Guest")}>
           <MaterialIcon name="home" size={30} color="green" />
         </TouchableOpacity>
-        <TouchableOpacity onPress={() => navigation.navigate('GuestS')}>
+        <TouchableOpacity onPress={() => navigation.navigate("GuestS")}>
           <MaterialIcon name="search" size={30} color="green" />
         </TouchableOpacity>
-        <TouchableOpacity onPress={() => navigation.navigate('Sign-Up')}>
+        <TouchableOpacity onPress={() => navigation.navigate("Sign-Up")}>
           <MaterialIcon name="person-add" size={30} color="green" />
         </TouchableOpacity>
       </View>
@@ -171,11 +188,11 @@ function HomeScreen({ navigation }) {
 
 const styles = StyleSheet.create({
   bottomNavBar: {
-    flexDirection: 'row',
-    justifyContent: 'space-around',
-    alignItems: 'center',
+    flexDirection: "row",
+    justifyContent: "space-around",
+    alignItems: "center",
     height: 50,
-    backgroundColor: '#f0f0f0',
+    backgroundColor: "#f0f0f0",
   },
   iconText: {
     marginLeft: 3,