Merge pull request #134 from bounswe/new-mobile

Sync mobile updates with main branch

.gitignore

@@ -0,0 +1 @@
+.idea/

application/mobile/.env.example

@@ -0,0 +1 @@
+VITE_API_URL=http://localhost:8080

application/mobile/.gitignore

@@ -28,8 +28,9 @@ yarn-error.*
 .DS_Store
 *.pem
 
-# local env files
+# env files
 .env*.local
+.env
 
 # typescript
 *.tsbuildinfo

application/mobile/App.js

@@ -4,6 +4,8 @@ import LoginScreen from "./App/Screens/LoginScreen";
 import RegisterScreen from "./App/Screens/RegisterScreen";
 import FeedScreen from "./App/Screens/FeedScreen";
 import ProfileScreen from "./App/Screens/ProfileScreen";
+import PostCreationScreen from "./App/Screens/PostCreationScreen";
+import SearchResultScreen from "./App/Screens/SearchResultScreen";
 
 const Stack = createNativeStackNavigator();
 
@@ -31,6 +33,16 @@ export default function App() {
           component={ProfileScreen}
           options={{ headerShown: false }}
         />
+        <Stack.Screen
+          name="Post"
+          component={PostCreationScreen}
+          options={{ headerShown: false }}
+        />
+        <Stack.Screen
+          name="Search"
+          component={SearchResultScreen}
+          options={{ headerShown: false }}
+        />
       </Stack.Navigator>
     </NavigationContainer>
   );

application/mobile/App/Screens/FeedScreen.js

@@ -14,7 +14,7 @@ import {
 import Icon from "react-native-vector-icons/Entypo";
 import Post from "../components/Post";
 
-export default function FeedScreen({ navigation }) {
+export default function FeedScreen({ navigation, route }) {
   const getPosts = () => {
     return [
       {
@@ -81,17 +81,21 @@ export default function FeedScreen({ navigation }) {
   };
 
   const [isMenuVisible, setIsMenuVisible] = useState(false);
+  const [text, setText] = useState("");
+  const [error, setError] = useState("");
 
   const toggleMenu = () => {
     console.log("Toggle menu");
     setIsMenuVisible(!isMenuVisible);
   };
 
   const createPost = () => {
+    navigation.navigate("Post");
     console.log("create post");
   };
   const viewProfile = () => {
     console.log("view profile");
+    setIsMenuVisible(false);
     navigation.navigate("Profile");
   };
   const settings = () => {
@@ -102,18 +106,26 @@ export default function FeedScreen({ navigation }) {
     navigation.navigate("Login");
   };
 
+  const search = () => {
+    navigation.navigate("Search", {
+      param: text,
+      authToken: route.params.accessToken,
+    });
+  };
+
   return (
     <View style={styles.backgroundContainer}>
       <View style={styles.headerContainer}>
-        <Image source={require("../assets/favicon.jpeg")}></Image>
-        <Text style={styles.header}>Fanatic</Text>
-        <TouchableOpacity onPress={toggleMenu}>
-          <Icon
-            name="dots-three-vertical"
-            size={20}
-            style={styles.headerMenuIcon}
-          ></Icon>
-        </TouchableOpacity>
+        <View style={{ height: 25, width: 25 }}></View>
+        <View style={styles.logoContainer}>
+          <Image source={require("../assets/favicon.jpeg")} />
+          <Text style={styles.header}>appFanatic.</Text>
+        </View>
+        <View style={styles.menuButtonContainer}>
+          <TouchableOpacity onPress={toggleMenu}>
+            <Icon name="dots-three-vertical" size={25}></Icon>
+          </TouchableOpacity>
+        </View>
       </View>
       <Modal visible={isMenuVisible} animationType="slide" transparent={true}>
         <View style={styles.modalContainer}>
@@ -140,7 +152,12 @@ export default function FeedScreen({ navigation }) {
         </View>
       </Modal>
       <View style={styles.searchContainer}>
-        <TextInput placeholder="Search" />
+        <TextInput
+          placeholder="Search"
+          onChangeText={setText}
+          value={text}
+          onSubmitEditing={search}
+        />
       </View>
       <FlatList
         data={getPosts()}
@@ -166,18 +183,26 @@ const styles = StyleSheet.create({
     alignItems: "center",
     minHeight: Math.round(Dimensions.get("window").height),
   },
-
   headerContainer: {
     marginTop: "5%",
     flexDirection: "row",
+    justifyContent: "space-evenly",
+    alignItems: "center",
+    width: "90%",
+  },
+  logoContainer: {
+    height: "100%",
+    flexDirection: "row",
     justifyContent: "center",
     alignItems: "center",
+    marginHorizontal: "15%",
   },
   header: {
     color: "blue",
     fontSize: 25,
     fontWeight: "600",
   },
+  menuButtonContainer: {},
   headerMenuIcon: {
     right: -100,
   },

application/mobile/App/Screens/LoginScreen.js

@@ -8,20 +8,39 @@ import {
   TouchableOpacity,
   Dimensions,
 } from "react-native";
+import {VITE_API_URL} from "@env";
+import axios from "axios";
 
 export default function LoginScreen({ navigation }) {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
 
   const ref_password = useRef();
 
   const onLoginClick = () => {
-    console.log(email + " logged in with password " + password);
-    navigation.navigate("Feed");
+    const userParams = {
+      email: email,
+      password: password,
+    };
+
+    axios
+      .post(`${VITE_API_URL}/api/v1/auth/authenticate`, userParams)
+      .then((response) => {
+        console.log(response.data);
+        navigation.navigate("Feed", {
+          email: email,
+          authToken: response.data.accessToken,
+        });
+      })
+      .catch((error) => {
+        setError("Incorrect e-mail or password!");
+        console.log(error.response.data);
+        console.log(error.response.status);
+      });
   };
 
   const onSignupClick = () => {
-    console.log("sign up");
     navigation.navigate("Register");
   };
 
@@ -52,6 +71,7 @@ export default function LoginScreen({ navigation }) {
             ref={ref_password}
           />
         </View>
+        {error && <Text style={styles.errorText}>{error}</Text>}
         <View style={styles.buttonContainer}>
           <TouchableOpacity onPress={onLoginClick} style={styles.loginButton}>
             <Text style={styles.loginButtonText}>Log In</Text>
@@ -108,6 +128,10 @@ const styles = StyleSheet.create({
     borderColor: "lightgrey",
     fontSize: 15,
   },
+  errorText: {
+    color: "red",
+    textAlign: "center",
+  },
   buttonContainer: {
     height: "10%",
     width: "90%",