diff --git a/app/screens/ChatListScreen/chatListScreen.js b/app/screens/ChatListScreen/chatListScreen.js index 842a1dd..53b53fb 100644 --- a/app/screens/ChatListScreen/chatListScreen.js +++ b/app/screens/ChatListScreen/chatListScreen.js @@ -4,7 +4,9 @@ import styles from "./style"; import ConversationBanner from "../../components/ConversationBanner/conversationBanner"; import SuggestCardView from "../../components/SuggestionsCardView/suggestionsCardView"; import HeaderNavigationBar from "../../components/HeaderNavigationBar/HeaderNavigationBar"; -import { f, auth, storage, database } from "../../../config/config.js"; +import { auth, database } from "../../../config/config.js"; +import { onAuthStateChanged } from "firebase/auth"; +import { onValue, ref } from "firebase/database"; export default class ChatListScreen extends Component { constructor(props) { super(props); @@ -19,11 +21,10 @@ export default class ChatListScreen extends Component { fetchUsers = () => { var that = this; var userId = auth.currentUser.uid; - database.ref("users").once( - "value", + onValue(ref(database, 'users'), function (snapshot) { - const exsist = snapshot.val() != null; - if (exsist) { + const exist = snapshot.val() != null; + if (exist) { let data = snapshot.val(); var userList = that.state.userList; for (var user in data) { @@ -66,12 +67,7 @@ export default class ChatListScreen extends Component { if (this.state.loggedin == true) { var that = this; var userId = auth.currentUser.uid; - database - .ref("users") - .child(userId) - .child("userChats") - .on( - "value", + onValue(ref(database, `users/${userId}/userChats`), function (snapshot) { const exist = snapshot.exists(); that.setState({ @@ -175,7 +171,7 @@ export default class ChatListScreen extends Component { }; componentDidMount = () => { var that = this; - auth.onAuthStateChanged(function (user) { + onAuthStateChanged(auth, function (user) { if (user) { that.setState({ loggedin: true, diff --git a/app/screens/LoginScreen/loginScreen.js b/app/screens/LoginScreen/loginScreen.js index 319f953..abcec19 100644 --- a/app/screens/LoginScreen/loginScreen.js +++ b/app/screens/LoginScreen/loginScreen.js @@ -10,10 +10,12 @@ import { ScrollView, } from "react-native"; import { AccessToken, LoginManager } from "react-native-fbsdk"; -import { f, auth } from "../../../config/config.js"; +import { auth, database } from "../../../config/config.js"; import * as EmailValidator from "email-validator"; import styles from "./style"; import { SocialIcon } from "react-native-elements"; +import { onAuthStateChanged, signInWithEmailAndPassword } from "firebase/auth"; +import { ref, update } from "firebase/database"; export default class LoginScreen extends Component { constructor(props) { super(props); @@ -25,8 +27,7 @@ export default class LoginScreen extends Component { componentDidMount() { var that = this; - - auth.onAuthStateChanged(function (user) { + onAuthStateChanged(auth, function (user) { if (user) { that.redirectUser(); } @@ -38,14 +39,12 @@ export default class LoginScreen extends Component { let password = this.state.Password; let { navigate } = this.props.navigation; - - auth - .signInWithEmailAndPassword(email, password) - .then(function (data) { + signInWithEmailAndPassword(auth, email, password).then( + function (data) { navigate("App"); }) .catch(function (error) { - var errorMessage = error.message; + const errorMessage = error.message; alert(errorMessage.toString()); }); } @@ -118,10 +117,7 @@ export default class LoginScreen extends Component { dp, ageRange: [20, 30], }; - f.database() - .ref("users") - .child(uid) - .update({ ...userData, ...defaults }); + update(ref(database, "users/" + uid), { ...userData, ...defaults }); }; _signInAsync = async () => { diff --git a/app/screens/MessaginScreen/messaginScreen.js b/app/screens/MessaginScreen/messaginScreen.js index a1d20c1..9d3a4a9 100644 --- a/app/screens/MessaginScreen/messaginScreen.js +++ b/app/screens/MessaginScreen/messaginScreen.js @@ -12,7 +12,9 @@ import { } from "react-native"; import styles from "./style"; import Ionicons from "react-native-vector-icons/FontAwesome"; -import { f, auth, storage, database } from "../../../config/config.js"; +import { auth, database } from "../../../config/config.js"; +import { onValue, ref, set, update } from "firebase/database"; +import { onAuthStateChanged } from "firebase/auth"; export default class MessageScreen extends Component { constructor(props) { super(props); @@ -61,32 +63,23 @@ export default class MessageScreen extends Component { friendId: params.userId, }); var that = this; - database - .ref("users") - .child(params.userId) - .child("firstName") - .once("value") - .then(function (snapshot) { - const exist = snapshot.val() != null; - if (exist) data = snapshot.val(); - console.log(data); - that.setState({ - friendName: data, - }); + onValue(ref(database, "users/" + params.userId + "/firstName"), (snapshot) => { + const exist = snapshot.val() != null; + if (exist) data = snapshot.val(); + console.log("First Name" + data); + console.log(data); + that.setState({ + friendName: data, }); - database - .ref("users") - .child(params.userId) - .child("avatar") - .once("value") - .then(function (snapshot) { - const exist = snapshot.val() != null; - if (exist) data = snapshot.val(); - console.log(data); - that.setState({ - friendAvatar: data, - }); + }); + onValue(ref(database, "users/" + params.userId + "/avatar"), (snapshot) => { + const exist = snapshot.val() != null; + if (exist) data = snapshot.val(); + console.log(data); + that.setState({ + friendAvatar: data, }); + }); this.fetchMessages(params.userId); } @@ -136,60 +129,48 @@ export default class MessageScreen extends Component { fetchMessages = () => { var that = this; var userId = auth.currentUser.uid; - database - .ref("users") - .child(userId) - .child("userChats") - .child(this.state.friendId) - .on( - "value", - function (snapshot) { - const exist = snapshot.exists(); - if (exist) { + onValue(database, ref(`users/${userId}/userChats/${this.state.friendId}`), (snapshot) => { + const exist = snapshot.exists(); + if (exist) { + var data = snapshot.val(); + onValue(database, ref(`chatMessages/${Object.keys(data)[0]}`), (snapshot) => { + const exsist = snapshot.exists(); + if (exsist) { + that.setState({ + messageList: [], + }); var data = snapshot.val(); - database - .ref("chatMessages") - .child(Object.keys(data)[0]) - .on( - "value", - function (snapshot) { - const exsist = snapshot.exists(); - if (exsist) { - that.setState({ - messageList: [], - }); - var data = snapshot.val(); - console.log(Object.keys(data)[0].message); - var messageList = that.state.messageList; - Object.keys(data).forEach(key => { - messageList.push({ - message: data[key].message, - posted: data[key].posted, - sendby: data[key].sendby, - }); - }); + console.log(Object.keys(data)[0].message); + var messageList = that.state.messageList; + Object.keys(data).forEach(key => { + messageList.push({ + message: data[key].message, + posted: data[key].posted, + sendby: data[key].sendby, + }); + }); - console.log(messageList); - that.setState({ - loaded: true, - }); - } else { - that.setState({ - messageList: [], - loaded: true, - }); - } - }, - function (errorObject) { - console.log("The read failed: " + errorObject.code); - } - ); + console.log(messageList); + that.setState({ + loaded: true, + }); + } else { + that.setState({ + messageList: [], + loaded: true, + }); } }, - function (errorObject) { - console.log("The read failed: " + errorObject.code); - } - ); + function (errorObject) { + console.log("The read failed: " + errorObject.code); + } + ); + } + }, + function (errorObject) { + console.log("The read failed: " + errorObject.code); + } + ); }; sendMessage = () => { @@ -202,82 +183,52 @@ export default class MessageScreen extends Component { var date = Date.now(); var posted = Math.floor(date / 1000); var userId = auth.currentUser.uid; - database - .ref("users") - .child(userId) - .child("userChats") - .child(this.state.friendId) - .once("value") - .then(function (snapshot) { - const exist = snapshot.exists(); - if (exist) { - data = snapshot.val(); - let cId = Object.keys(data)[0]; - var newMessage = { - sendby: userId, - message: that.state.newMessage, - status: 0, - posted: posted, - }; - that.setState({ - newMessageId: that.uniqueId(), - }); - database.ref("/chatMessages/" + cId + "/" + that.state.newMessageId).set(newMessage); - database - .ref("/users/" + userId + "/userChats/" + that.state.friendId + "/" + cId) - .update({ posted: posted, lastMessage: that.state.newMessage }); - database - .ref("/users/" + that.state.friendId + "/userChats/" + userId + "/" + cId) - .update({ posted: posted, lastMessage: that.state.newMessage }); - that.setState({ - newMessage: "", - }); - } else { - var chatUserf = { - lastMessage: that.state.newMessage, - posted: posted, - friend: that.state.friendId, - name: that.state.friendName, - avatar: that.state.friendAvatar, - }; - var chatUser = { - lastMessage: that.state.newMessage, - posted: posted, - friend: userId, - name: auth.currentUser.displayName, - avatar: that.state.avatar, - }; - var newMessage = { - sendby: userId, - message: that.state.newMessage, - status: 0, - posted: posted, - }; - database - .ref( - "/users/" + - userId + - "/userChats/" + - that.state.friendId + - "/" + - that.state.newChatId - ) - .set(chatUserf); - database - .ref( - "/users/" + - that.state.friendId + - "/userChats/" + - userId + - "/" + - that.state.newChatId - ) - .set(chatUser); - database - .ref("/chatMessages/" + that.state.newChatId + "/" + that.state.newMessageId) - .set(newMessage); - } - }) + onValue(database, ref(`users/${userId}/userChats/${this.state.friendId}`), (snapshot) => { + const exist = snapshot.exists(); + if (exist) { + data = snapshot.val(); + let cId = Object.keys(data)[0]; + var newMessage = { + sendby: userId, + message: that.state.newMessage, + status: 0, + posted: posted, + }; + that.setState({ + newMessageId: that.uniqueId(), + }); + set(ref(database, `/chatMessages/${cId}/${that.state.newMessageId}`), newMessage); + update(ref(database, `/users/${userId}/userChats/${that.state.friendId}/${cId}`), { posted: posted, lastMessage: that.state.newMessage }); + update(ref(database, `/users/${that.state.friendId}/userChats/${userId}/${cId}`), { posted: posted, lastMessage: that.state.newMessage }); + that.setState({ + newMessage: "", + }); + } else { + var chatUserf = { + lastMessage: that.state.newMessage, + posted: posted, + friend: that.state.friendId, + name: that.state.friendName, + avatar: that.state.friendAvatar, + }; + var chatUser = { + lastMessage: that.state.newMessage, + posted: posted, + friend: userId, + name: auth.currentUser.displayName, + avatar: that.state.avatar, + }; + var newMessage = { + sendby: userId, + message: that.state.newMessage, + status: 0, + posted: posted, + }; + set(ref(database, `/users/${userId}/userChats/${that.state.friendId}/${that.state.newChatId}`), chatUserf); + set(ref(database, `/users/${that.state.friendId}/userChats/${userId}/${that.state.newChatId}`), chatUser); + set(ref(database, `/chatMessages/${that.state.newChatId}/${that.state.newMessageId}`), newMessage); + } + }) .catch(); that.textInput.clear(); } @@ -285,39 +236,29 @@ export default class MessageScreen extends Component { componentDidMount = () => { var that = this; - auth.onAuthStateChanged(function (user) { + onAuthStateChanged(auth, function (user) { if (user) { that.setState({ loggedin: true, }); that.check(); var userId = auth.currentUser.uid; - database - .ref("users") - .child(userId) - .child("name") - .once("value") - .then(function (snapshot) { - const exist = snapshot.val() != null; - if (exist) data = snapshot.val(); - console.log(data); - that.setState({ - name: data, - }); + onValue(database, ref(`users/${userId}/name`), function (snapshot) { + const exist = snapshot.val() != null; + if (exist) data = snapshot.val(); + console.log(data); + that.setState({ + name: data, }); - database - .ref("users") - .child(userId) - .child("avatar") - .once("value") - .then(function (snapshot) { - const exist = snapshot.val() != null; - if (exist) data = snapshot.val(); - console.log(data); - that.setState({ - avatar: data, - }); + }); + onValue(database, ref(`users/${userId}/avatar`), (snapshot) => { + const exist = snapshot.val() != null; + if (exist) data = snapshot.val(); + console.log(data); + that.setState({ + avatar: data, }); + }); } else { that.setState({ loggedin: false, diff --git a/app/screens/NewPostScreen/NewPostScreen.js b/app/screens/NewPostScreen/NewPostScreen.js index 631a67e..4a3afdd 100644 --- a/app/screens/NewPostScreen/NewPostScreen.js +++ b/app/screens/NewPostScreen/NewPostScreen.js @@ -16,8 +16,11 @@ import { Card, ListItem, Button } from "react-native-elements"; import { TextInput } from "react-native-gesture-handler"; import { launchImageLibrary } from "react-native-image-picker"; import Icon from "react-native-vector-icons/FontAwesome"; -import { f, auth, storage, database } from "../../../config/config.js"; +import { auth, storage, database } from "../../../config/config.js"; import EvilIcons from "react-native-vector-icons/EvilIcons"; +import { getDownloadURL, ref, uploadBytesResumable } from "firebase/storage"; +import { set, ref as dbRef } from "firebase/database"; + export default class NewPostScreen extends Component { constructor() { super(); @@ -31,9 +34,9 @@ export default class NewPostScreen extends Component { }; } componentDidMount = () => { - this.equestCameraPermission(); + this.requestCameraPermission(); }; - equestCameraPermission = async () => { + requestCameraPermission = async () => { try { const granted = await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.CAMERA, { title: "Go Social Camera Permission", @@ -121,13 +124,12 @@ export default class NewPostScreen extends Component { xhr.open("GET", uri, true); xhr.send(null); }); - var filePath = postId + "." + ext; - var uploadTask = storage.ref("post/img").child(filePath).put(blob); - + const filePath = postId + "." + ext; + const uploadTask = uploadBytesResumable(ref(storage, "post/img/" + filePath), blob); uploadTask.on( "state_changed", function (snapshot) { - let progress = ((snapshot.bytesTransferred / snapshot.totalBytes) * 100).toFixed(0); + const progress = ((snapshot.bytesTransferred / snapshot.totalBytes) * 100).toFixed(0); that.setState({ progress: progress, }); @@ -139,14 +141,14 @@ export default class NewPostScreen extends Component { that.setState({ progress: 100, }); - uploadTask.snapshot.ref.getDownloadURL().then(function (downloadURL) { + getDownloadURL(uploadTask.snapshot.ref).then(function (downloadURL) { that.setDatabse(downloadURL); }); } ); }; - setDatabse = imageURL => { + setDatabse = async imageURL => { var date = Date.now(); var postId = this.state.postId; var userID = auth.currentUser.uid; @@ -157,7 +159,7 @@ export default class NewPostScreen extends Component { image: imageURL, posted: posted, }; - database.ref("/post/" + postId).set(postObj); + await set(dbRef(database, "post/" + postId), postObj); alert("SuccessFully Published!!"); this.setState({ imageSelected: false, diff --git a/app/screens/ProfileScreen/profileScreen.js b/app/screens/ProfileScreen/profileScreen.js index a473a18..ec66b9c 100644 --- a/app/screens/ProfileScreen/profileScreen.js +++ b/app/screens/ProfileScreen/profileScreen.js @@ -14,10 +14,13 @@ import { import { Info, DeatilView } from ".."; import HeaderNavigationBar from "../../components/HeaderNavigationBar/HeaderNavigationBar"; import styles from "./style"; -import { f, auth, storage, database } from "../../../config/config.js"; +import { auth, storage, database } from "../../../config/config.js"; import { Avatar } from "react-native-elements"; -import ImagePicker from "react-native-image-picker"; +import { launchImageLibrary } from "react-native-image-picker"; import AsyncStorage from "@react-native-async-storage/async-storage"; +import { onValue, ref, set, update } from "firebase/database"; +import { onAuthStateChanged, signOut, updateProfile } from "firebase/auth"; +import { uploadBytesResumable, ref as storageRef, getDownloadURL } from "firebase/storage"; // import { TouchableOpacity } from "react-native-gesture-handler"; export default class ProfileScreen extends Component { @@ -36,42 +39,40 @@ export default class ProfileScreen extends Component { componentDidMount() { var that = this; - auth.onAuthStateChanged(function (user) { + onAuthStateChanged(auth, function (user) { if (user) { that.state.email = auth.currentUser.email; - database - .ref("users") - .child(auth.currentUser.uid) - .once("value", function (snapshot) { - if (snapshot.child("firstName").val() != null) { - that.setState({ - firstName: snapshot.child("firstName").val(), - }); - } - if (snapshot.child("lastName").val() != null) { - that.setState({ - lastName: snapshot.child("lastName").val(), - }); - } - if (snapshot.child("contact").val() != null) { - that.setState({ - contact: snapshot.child("contact").val(), - }); - } - if (snapshot.child("address").val() != null) { - that.setState({ - address: snapshot.child("address").val(), - }); - } - if (snapshot.child("avatar").val != null) { - that.setState({ - avatar: snapshot.child("avatar").val(), - }); - } + const userRef = ref(database, 'users/' + auth.currentUser.uid); + onValue(userRef, function (snapshot) { + if (snapshot.child("firstName").val() != null) { that.setState({ - isLoading: false, + firstName: snapshot.child("firstName").val(), }); + } + if (snapshot.child("lastName").val() != null) { + that.setState({ + lastName: snapshot.child("lastName").val(), + }); + } + if (snapshot.child("contact").val() != null) { + that.setState({ + contact: snapshot.child("contact").val(), + }); + } + if (snapshot.child("address").val() != null) { + that.setState({ + address: snapshot.child("address").val(), + }); + } + if (snapshot.child("avatar").val != null) { + that.setState({ + avatar: snapshot.child("avatar").val(), + }); + } + that.setState({ + isLoading: false, }); + }); } else { that.setState({ firstName: "John", @@ -106,7 +107,7 @@ export default class ProfileScreen extends Component { _handleButtonPress = () => { //console.log("User hihi!"); - ImagePicker.showImagePicker({ title: "Pick an Image", maxWidth: 800, maxHeight: 600 }, res => { + launchImageLibrary({ title: "Pick an Image", maxWidth: 800, maxHeight: 600 }, res => { if (res.didCancel) { console.log("User cancelled!"); } else if (res.error) { @@ -116,14 +117,13 @@ export default class ProfileScreen extends Component { pickedImage: res.uri, imageSelected: true, }); - this.uploadImage(); + this.uploadImage(res.assets[0].uri); } }); }; - uploadImage = async () => { + uploadImage = async (uri) => { console.log("Uploading Image!!!!"); - var uri = this.state.pickedImage; var that = this; var userId = auth.currentUser.uid; var re = /(?:\.([^.]+))?$/; @@ -146,9 +146,9 @@ export default class ProfileScreen extends Component { xhr.open("GET", uri, true); xhr.send(null); }); - var filePath = userId + "." + that.state.currentFileType; + const filePath = userId + "." + ext; - var uploadTask = storage.ref("user/img").child(filePath).put(blob); + const uploadTask = uploadBytesResumable(storageRef(storage, 'user/img/' + filePath), blob); uploadTask.on( "state_changed", @@ -165,19 +165,20 @@ export default class ProfileScreen extends Component { that.setState({ progress: 100, }); - uploadTask.snapshot.ref.getDownloadURL().then(function (downloadURL) { + getDownloadURL(uploadTask.snapshot.ref).then(function (downloadURL) { + console.log("File available at", downloadURL); that.setDatabse(downloadURL); }); } ); }; - setDatabse = imageURL => { - var user = auth.currentUser; - var userID = auth.currentUser.uid; - database.ref("/users/" + userID).update({ avatar: imageURL }); + setDatabse = async imageURL => { + const user = auth.currentUser; + const userID = auth.currentUser.uid; + await update(ref(database, "users/" + userID), { avatar: imageURL }); console.log("User: " + user); - user.updateProfile({ + await updateProfile(user, { photoURL: imageURL, }); alert("SuccessFully Published!!"); @@ -293,17 +294,17 @@ export default class ProfileScreen extends Component { logout = () => { this.props.navigation.navigate("Login"); - auth.signOut(); + signOut(auth); }; save = () => { - var firstName = this.state.firstName; - var lastName = this.state.lastName; - var contact = this.state.contact; - var address = this.state.address; - var email = this.state.email; + const firstName = this.state.firstName; + const lastName = this.state.lastName; + const contact = this.state.contact; + const address = this.state.address; + const email = this.state.email; - let user = { + const user = { firstName: firstName, lastName: lastName, email: email, @@ -312,6 +313,12 @@ export default class ProfileScreen extends Component { }; console.log(user); - f.database().ref("users/").child(auth.currentUser.uid).set(user); + update(ref(database, "users/" + auth.currentUser.uid), { + firstName: firstName, + lastName: lastName, + email: email, + contact: contact, + address: address, + }); }; } diff --git a/app/screens/SignupScreen/signupScreen.js b/app/screens/SignupScreen/signupScreen.js index e66cfee..369e390 100644 --- a/app/screens/SignupScreen/signupScreen.js +++ b/app/screens/SignupScreen/signupScreen.js @@ -12,8 +12,10 @@ import { import styles from "./style"; import * as EmailValidator from "email-validator"; import { AccessToken, LoginManager } from "react-native-fbsdk"; -import { f, auth } from "../../../config/config.js"; +import { auth, database } from "../../../config/config.js"; import { SocialIcon } from "react-native-elements"; +import { FacebookAuthProvider, createUserWithEmailAndPassword, onAuthStateChanged, signInWithCredential, updateProfile } from "firebase/auth"; +import { ref, update } from "firebase/database"; export default class SignUpScreen extends Component { constructor(props) { @@ -28,7 +30,7 @@ export default class SignUpScreen extends Component { componentDidMount() { var that = this; - auth.onAuthStateChanged(function (user) { + onAuthStateChanged(auth, function (user) { if (user) { that.redirectUser(); } @@ -77,10 +79,9 @@ export default class SignUpScreen extends Component { } } - authenticate = token => { - const provider = auth.FacebookAuthProvider; - const credential = provider.credential(token); - let ret = auth.signInWithCredential(credential); + authenticate = async (token) => { + const credential = FacebookAuthProvider.credential(token); + const ret = await signInWithCredential(auth, credential); return ret; }; @@ -91,10 +92,7 @@ export default class SignUpScreen extends Component { dp, ageRange: [20, 30], }; - f.database() - .ref("users") - .child(uid) - .update({ ...userData, ...defaults }); + update(ref(database, "users/" + uid), { ...userData, ...defaults }); }; render() { @@ -173,13 +171,11 @@ export default class SignUpScreen extends Component { const { navigate } = this.props.navigation; - auth - .createUserWithEmailAndPassword(email, password) + createUserWithEmailAndPassword(auth, email, password) .then(function (data) { - data.user - .updateProfile({ - displayName: name, - }) + updateProfile(data.user, { + displayName: name, + }) .then( function () { console.log("Updated User Data.."); diff --git a/config/config.example.js b/config/config.example.js index b5b9722..581e702 100644 --- a/config/config.example.js +++ b/config/config.example.js @@ -1,4 +1,7 @@ -import firebase from "firebase"; +import { initializeApp } from "firebase/app"; +import { getAuth } from 'firebase/auth' +import { getDatabase } from 'firebase/database' +import { getStorage } from 'firebase/storage' var config = { apiKey: "", @@ -8,12 +11,12 @@ var config = { storageBucket: "", messagingSenderId: "", }; -firebase.initializeApp(config); +const app = initializeApp(config); var MAP_API_KEY = ""; -export const f = firebase; -export const database = firebase.database(); -export const auth = firebase.auth(); -export const storage = firebase.storage(); +export const f = app; +export const database = getDatabase(); +export const auth = getAuth(); +export const storage = getStorage(); export const MAP_API = MAP_API_KEY;