Merge pull request #165 from bounswe/mobile/hotfix

Mobile/hotfix

mobile/melodify/app.json

@@ -23,7 +23,10 @@
         "foregroundImage": "./assets/adaptive-icon.png",
         "backgroundColor": "#ffffff"
       },
-      "package": "com.roacar.melodify"
+      "package": "com.roacar.melodify",
+      "permissions": [
+        "android.permission.INTERNET"
+      ]
     },
     "web": {
       "favicon": "./assets/favicon.png"

mobile/melodify/assets/example.txt

@@ -0,0 +1,4 @@
+{"_bodyBlob": {"_data": {"__collector": [Object], "blobId": "80881ed4-3ce3-4155-838c-1936ec5d9d6f", "offset": 0, "size": 86}}, "_bodyInit": {"_data": {"__collector": [Object], "blobId": "80881ed4-3ce3-4155-838c-1936ec5d9d6f", "offset": 0, "size": 86}}, "bodyUsed": false, 
+"headers": {"map": {"cache-control": "no-cache, no-store, max-age=0, must-revalidate", "connection": "keep-alive", "content-length": "86", 
+"content-type": "application/json", "date": "Tue, 30 Apr 2024 17:23:37 GMT", "expires": "0", "pragma": "no-cache", "server": "nginx/1.25.5", "vary": "Origin, Access-Control-Request-Method, Access-Control-Request-Headers", "x-content-type-options": "nosniff", "x-frame-options": 
+"DENY", "x-xss-protection": "0"}}, "ok": false, "status": 401, "statusText": "", "type": "default", "url": "http://34.118.44.165/api/auth/login"}

mobile/melodify/components/CustomModal.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import { View, Text, Modal, StyleSheet } from "react-native";
+import CustomButton from "./CustomButton";
+
+const CustomModal = ({ visible, message, onClose }) => {
+  return (
+    <Modal
+      visible={visible}
+      animationType="slide"
+      transparent={true}
+      onRequestClose={onClose}
+    >
+      <View style={styles.centeredView}>
+        <View style={styles.modalView}>
+          <Text style={styles.modalText}>{message}</Text>
+          <CustomButton title="Return to Feed" onPress={onClose} />
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  centeredView: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    marginTop: 22,
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+  },
+  modalView: {
+    margin: 20,
+    backgroundColor: "#111927",
+    borderRadius: 20,
+    padding: 35,
+    alignItems: "center",
+    shadowColor: "#000",
+    shadowOpacity: 0.25,
+    shadowRadius: 4,
+    elevation: 5,
+  },
+  modalText: {
+    marginBottom: 15,
+    textAlign: "center",
+    color: "white",
+    fontSize: 18,
+    fontWeight: "bold",
+  },
+});
+
+export default CustomModal;

mobile/melodify/screens/AuthProvider.tsx

@@ -1,20 +1,20 @@
 import React, { createContext, useContext, useState } from "react";
 
-export const AuthContext = createContext(null);
+const AuthContext = createContext(null);
 
 export const AuthProvider = ({ children }) => {
-  const [user, setUser] = useState(null);
+  const [token, setToken] = useState(null);
 
-  const login = (userData) => {
-    setUser(userData);
+  const login = (newToken) => {
+    setToken(newToken);
   };
 
   const logout = () => {
-    setUser(null);
+    setToken(null);
   };
 
   return (
-    <AuthContext.Provider value={{ user, login, logout }}>
+    <AuthContext.Provider value={{ token, login, logout }}>
       {children}
     </AuthContext.Provider>
   );

mobile/melodify/screens/CreatePostScreen.tsx

@@ -7,47 +7,27 @@ import {
   TouchableOpacity,
   Alert,
 } from "react-native";
-import { useAuth } from "./AuthProvider"; // Adjust path as needed
-import { Ionicons } from "@expo/vector-icons"; // Import Ionicons
-
+import { useAuth } from "./AuthProvider";
+import { Ionicons } from "@expo/vector-icons";
+import CustomModal from "../components/CustomModal";
 
 const CreatePostScreen = ({ navigation }) => {
-  const { user } = useAuth(); // Destructure to get user from context
+  const { user } = useAuth();
   const [postContent, setPostContent] = useState("");
   const [loading, setLoading] = useState(false);
+  const [modalVisible, setModalVisible] = useState(false);
 
   const handlePostCreation = async () => {
-    if (!postContent.trim()) {
-      Alert.alert("Post content is required");
-      return;
-    }
+    // if (!postContent.trim()) {
+    //   Alert.alert("Post content is required");
+    //   return;
+    // }
 
     setLoading(true);
-    try {
-      const response = await fetch("https://api.yourdomain.com/v1/posts", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-          Authorization: `Bearer ${user.token}`, // Use token from context
-        },
-        body: JSON.stringify({
-          username: user.username, // Use username from context
-          content: postContent,
-        }),
-      });
-
-      if (response.ok) {
-        Alert.alert("Success", "Your post has been created!");
-        navigation.goBack();
-      } else {
-        const errorData = await response.json();
-        Alert.alert("Error", errorData.message || "Failed to create post");
-      }
-    } catch (error) {
-      Alert.alert("Error", "An unexpected error occurred");
-    } finally {
+    setTimeout(() => {
       setLoading(false);
-    }
+      setModalVisible(true);
+    }, 0);
   };
 
   return (
@@ -75,10 +55,17 @@ const CreatePostScreen = ({ navigation }) => {
       >
         <Text style={styles.buttonText}>Post</Text>
       </TouchableOpacity>
+      <CustomModal
+        visible={modalVisible}
+        message="Cannot post something now."
+        onClose={() => {
+          setModalVisible(false);
+          navigation.goBack();
+        }}
+      />
     </View>
   );
 };
-
 const styles = StyleSheet.create({
   container: {
     flex: 1,
@@ -115,7 +102,7 @@ const styles = StyleSheet.create({
     marginTop: 20,
     top: 10,
     left: 10,
-  }
+  },
 });
 
 export default CreatePostScreen;