Need to add avatar and username to post - reactjs

Question

So, I'm trying to add the user avatar and username to my addPost. I've tried everything I can think of but nothing is working.
I've Tried;
firebase.auth().currentUser.avatar;
But that doesn't work, I'm assuming it's because "avatar" or "username" isn't firebase specific properties for auth.
I've also tried;
get uid() {
return firebase.auth().currentUser;
}
and then adding to addPost
avatar: this.uid.avatar,
username: this.uid.username
That doesn't work either.
I just need the user avatar and username to be available when called on the home screen.
import React from "react";
import { View, StyleSheet, FlatList, Platform, TouchableNativeFeedback, TouchableOpacity, Image, Button } from "react-native";
import Fire from '../../Fire';
import UsernameText from '../../components/Text/DefaultUsernameText';
import CreatedAtText from '../../components/Text/CreatedAtText';
import ThoughtTitleText from '../../components/Text/DefaultThoughtTitle';
import Colors from '../../constants/Colors';
import moment from 'moment';
let TouchableCmp = TouchableOpacity;
if (Platform.OS === 'android' && Platform.Version >= 21) {
TouchableCmp = TouchableNativeFeedback;
}
export default class HomeScreen extends React.Component {
state = {
latestPost: [],
}
displayLatestPost = (latestPost) => {
this.setState({latestPost: latestPost});
console.log("latest Post " + this.state.latestPost);
}
componentDidMount(){
Fire.shared.getPosts(this.displayLatestPost);
console.log("This is the displayLatestPost " + this.state.latestPost);
}
renderLatestPost = (post) => {
return (
<View>
<TouchableCmp onPress={() => {}} style={{flex: 1}}>
<View style={styles.container}>
<View style={styles.infoText}>
<Image style={styles.userAvatar}>{post.avatar}</Image>
<UsernameText style={styles.name} >{post.username}</UsernameText>
<CreatedAtText style={styles.timestamp}>{moment(post.timestamp).fromNow()}</CreatedAtText>
</View>
<View style={styles.container} >
<ThoughtTitleText style={styles.feedItem}>{post.thoughtTitle}</ThoughtTitleText>
</View>
</View>
</TouchableCmp>
</View>
);
};
render() {
return (
<View style={styles.container}>
<Button
onPress={() => {
Fire.shared.signOut();
}}
title="Log out"
/>
<FlatList
showsVerticalScrollIndicator={false}
keyExtractor={item => item.id}
style={styles.feed}
data={this.state.latestPost}
renderItem={( {item, index }) =>
this.renderLatestPost(item, index)
}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: Colors.background
},
feed: {
marginHorizontal: 16
},
feedItem: {
borderRadius: 5,
padding: 2,
flexDirection: "row",
marginVertical: 2
},
name: {
fontSize: 15,
fontWeight: "500",
color: "#454D65"
},
timestamp: {
fontSize: 11,
color: "#C4C6CE",
marginTop: 4
},
post: {
marginTop: 16,
fontSize: 14,
color: "#838899"
},
postImage: {
width: undefined,
height: 150,
borderRadius: 5,
marginVertical: 16
},
container: {
flex:1,
borderRadius: 10,
padding:15,
justifyContent: 'flex-end',
alignItems: 'flex-end'
},
thought: {
color: '#666',
fontSize: 18,
marginBottom: 5,
alignItems: 'center'
},
infoText:{
flexDirection: "row"
},
// icons: {
// flexDirection: 'row'
// },
userAvatar: {
backgroundColor: Colors.subheadings,
borderColor: Colors.accent,
borderWidth:3.5,
backgroundColor: Colors.maintext,
marginEnd: 15,
width: 35,
height: 35,
borderRadius: 20,
}
});
Here's my Fire.js
import FirebaseKeys from "./config/FirebaseKeys";
import firebase from "firebase/app";
import '#firebase/auth';
import 'firebase/database';
import '#firebase/firestore';
import "firebase/storage";
require("firebase/firestore");
class Fire {
constructor() {
firebase.initializeApp(FirebaseKeys);
}
getPosts = async (displayLatestPost) => {
const post = await
this.firestore.collection('thoughts').orderBy('timestamp', ' desc').limit(10).get()
let postArray =[]
post.forEach((post) => {
postArray.push({id: post.id, ...post.data()})
})
displayLatestPost(postArray)
}
addPost = async ({ thoughtTitle, thoughtText, localUri, avatar, username}) => {
const remoteUri = await this.uploadPhotoAsync(localUri, `photos/${this.uid}/${Date.now()}`);
return new Promise((res, rej) => {
this.firestore
.collection("thoughts")
.add({
uid: this.uid,
thoughtTitle,
thoughtText,
image: remoteUri,
timestamp: this.timestamp,
})
.then(ref => {
res(ref);
})
.catch(error => {
rej(error);
});
});
};
uploadPhotoAsync = (uri, filename) => {
return new Promise(async (res, rej) => {
const response = await fetch(uri);
const file = await response.blob();
let upload = firebase
.storage()
.ref(filename)
.put(file);
upload.on(
"state_changed",
snapshot => {},
err => {
rej(err);
},
async () => {
const url = await upload.snapshot.ref.getDownloadURL();
res(url);
}
);
});
};
createUser = async user => {
let remoteUri = null;
try {
await firebase.auth().createUserWithEmailAndPassword(user.email, user.password);
let db = this.firestore.collection("users").doc(this.uid);
db.set({
username: user.username,
email: user.email,
avatar: null
});
if (user.avatar) {
remoteUri = await this.uploadPhotoAsync(user.avatar, `avatars/${this.uid}`);
db.set({ avatar: remoteUri }, { merge: true });
}
} catch (error) {
alert("Error: ", error);
}
};
updateProfile = async user => {
let remoteUri = null;
try {
let db =
this.firestore.collection("users").doc(this.uid);
db.update({
username: user.username,
email: user.email,
avatar: null
});
if (user.avatar) {
remoteUri = await this.uploadPhotoAsync(user.avatar, `avatars/${this.uid}`);
db.set({ avatar: remoteUri }, { merge: true });
}
} catch (error) {
alert("Error: ", error);
}
}
signOut = () => {
firebase.auth().signOut();
};
get firestore() {
return firebase.firestore();
}
/* get username(){
return firebase.auth().currentUser.username;
} */
get uid() {
return (firebase.auth().currentUser || {}).uid;
}
/* get avatar(){
return firebase.auth().currentUser.avatar;
} */
get timestamp() {
return Date.now();
}
}
Fire.shared = new Fire();
export default Fire;

Answer 1

I hope the following information helps.
You can store Name & Profile Picture URL like this:
var user = firebase.auth().currentUser;
// Update User Profile
user.updateProfile({
displayName: "Jane Doe",
photoURL: "https://example.com/1hdfabSesfE/profile.jpg"
}).then(function() {
// Update successful.
}).catch(function(error) {
// An error happened.
});
// Use these parameters inside the add post function
var profilePicture = user.photoURL;
var name = user.displayName;

Answer 2

So, I changed my createUser and updateUser
createUser = async user => {
let remoteUri = null;
try {
await firebase.auth().createUserWithEmailAndPassword(user.email, user.password);
let db = this.firestore.collection("users").doc(this.uid);
db.set({
displayName: user.displayName,
email: user.email,
photoURL: null
});
if (user.photoURL) {
remoteUri = await this.uploadPhotoAsync(user.photoURL, `avatars/${this.uid}`);
db.set({ photoURL: remoteUri }, { merge: true });
}
} catch (error) {
alert("Error: ", error);
}
};
updateProfile = async user => {
let remoteUri = null;
try {
let db = this.firestore.collection("users").doc(this.uid);
db.update({
displayName: user.displayName,
photoURL: user.photoURL
});
if (user.photoURL) {
remoteUri = await this.uploadPhotoAsync(user.photoURL, `avatars/${this.uid}`);
db.set({ photoURL: remoteUri }, { merge: true });
}
} catch (error) {
alert("Error: ", error);
}
}
Then I changed my addPost
addPost = async ({ thoughtTitle, thoughtText, localUri, photoURL, displayName}) => {
const remoteUri = await this.uploadPhotoAsync(localUri, `photos/${this.uid}/${Date.now()}`);
return new Promise((res, rej) => {
this.firestore
.collection("thoughts")
.add({
uid: this.uid,
displayName,
photoURL,
thoughtTitle,
thoughtText,
image: remoteUri,
timestamp: this.timestamp,
})
.then(ref => {
res(ref);
})
.catch(error => {
rej(error);
});
});
};
Thanks for all the help - It's working!.
Here's my account screen where I update the displayName and photoURL
import React from "react";
import { View, Text, StyleSheet, Button, Image, TextInput, TouchableOpacity} from
"react-native";
import Fire from "../../Fire";
import { MaterialIcons } from "#expo/vector-icons"
import * as ImagePicker from "expo-image-picker";
import UserPermissions from "../../utilities/UserPermissions";
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
//import Avatar from '../../components/User/Avatar';
export default class AccountScreen extends React.Component {
state = {
user: {},
updatedUser: {
photoURL: null,
displayName: ""
}
};
unsubscribe = null;
componentDidMount() {
const user = this.props.uid || Fire.shared.uid;
this.unsubscribe = Fire.shared.firestore
.collection("users")
.doc(user)
.onSnapshot(doc => {
this.setState({ user: doc.data() });
});
}
componentWillUnmount() {
this.unsubscribe();
}
handleUpdate = () => {
Fire.shared.updateProfile(this.state.updatedUser);
};
handlePickAvatar = async () => {
UserPermissions.getCameraPermission();
let result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.Images,
allowsEditing: true,
aspect: [1, 1],
quality: 0.1
});
if (!result.cancelled) {
this.setState({ updatedUser: { ...this.state.updatedUser, photoURL: result.uri
} });
}
};
render() {
return (
<View style={styles.container}>
<KeyboardAwareScrollView
style={{ flex: 1, width: '100%' }}
keyboardShouldPersistTaps="always">
<View style={styles.container}>
<TouchableOpacity style={styles.avatarContainer} onPress=.
{this.handlePickAvatar}>
<Image
source={
this.state.updatedUser.photoURL
? { uri: this.state.user.photoURL }
: require("../../assets/tempAvatar.jpg")
}
style={styles.avatar}
/>
<MaterialIcons
name="photo-camera"
size={40} color="grey"
style={{ marginTop: 6, marginLeft: 2 }}
/>
</TouchableOpacity>
<View>
<TextInput
style={styles.border}
placeholder= "change username"
onChangeText={displayName => this.setState({ updatedUser: { ...this.state.updatedUser, displayName } })}
value={this.state.updatedUser.displayName}
></TextInput>
</View>
<TouchableOpacity onPress={this.handleUpdate}>
<MaterialIcons name="check" size={24} color="black" />
</TouchableOpacity>
</View>
</KeyboardAwareScrollView>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center'
},
profile: {
marginTop: 64,
alignItems: "center"
},
avatarContainer: {
shadowColor: "#151734",
shadowRadius: 30,
shadowOpacity: 0.4
},
avatar: {
width: 100,
height: 100,
borderRadius: 68
},
name: {
marginTop: 24,
fontSize: 16,
fontWeight: "600"
},
statsContainer: {
flexDirection: "row",
justifyContent: "space-between",
margin: 32
},
stat: {
alignItems: "center",
flex: 1
},
statAmount: {
color: "#4F566D",
fontSize: 18,
fontWeight: "300"
},
statTitle: {
color: "#C3C5CD",
fontSize: 12,
fontWeight: "500",
marginTop: 4
},
border: {
width: 200,
margin: 10,
padding: 15,
fontSize: 16,
borderColor: '#d3d3d3',
borderBottomWidth: 1,
textAlign: 'center'
},
});
Here's my Home.js
import React from "react";
import { View, StyleSheet, FlatList, Platform,
TouchableNativeFeedback,
TouchableOpacity, Image, Button } from "react-native";
import Fire from '../../Fire';
import UsernameText from '
../../components/Text/DefaultUsernameText';
import CreatedAtText from '../../components/Text/CreatedAtText';
import ThoughtTitleText from '
../../components/Text/DefaultThoughtTitle';
import Colors from '../../constants/Colors';
import moment from 'moment';
let TouchableCmp = TouchableOpacity;
if (Platform.OS === 'android' && Platform.Version >= 21) {
TouchableCmp = TouchableNativeFeedback;
}
export default class HomeScreen extends React.Component {
state = {
latestPost: [],
}
displayLatestPost = (latestPost) => {
this.setState({latestPost: latestPost});
console.log("latest Post " + this.state.latestPost);
}
componentDidMount(){
Fire.shared.getPosts(this.displayLatestPost);
console.log("This is the displayLatestPost " + this.state.latestPost);
}
renderLatestPost = (post) => {
return (
<View>
<TouchableCmp onPress={() => {}} style={{flex: 1}}>
<View style={styles.container}>
<View style={styles.infoText}>
<Image style={styles.userAvatar} source={{uri:
post.photoURL}} />
<UsernameText style={styles.name} >{post.displayName}.
</UsernameText>
<CreatedAtText style={styles.timestamp}>.
{moment(post.timestamp).fromNow()}</CreatedAtText>
</View>
<View style={styles.container} >
<ThoughtTitleText style={styles.feedItem}>{post.thoughtTitle}.
</ThoughtTitleText>
</View>
</View>
</TouchableCmp>
</View>
);
};
render() {
return (
<View style={styles.container}>
<Button
onPress={() => {
Fire.shared.signOut();
}}
title="Log out"
/>
<FlatList
showsVerticalScrollIndicator={false}
keyExtractor={item => item.id}
style={styles.feed}
data={this.state.latestPost}
renderItem={( {item, index }) =>
this.renderLatestPost(item, index)
}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: Colors.background
},
feed: {
marginHorizontal: 16
},
feedItem: {
borderRadius: 5,
padding: 2,
flexDirection: "row",
marginVertical: 2
},
name: {
fontSize: 15,
fontWeight: "500",
color: "#454D65"
},
timestamp: {
fontSize: 11,
color: "#C4C6CE",
marginTop: 4
},
post: {
marginTop: 16,
fontSize: 14,
color: "#838899"
},
postImage: {
width: undefined,
height: 150,
borderRadius: 5,
marginVertical: 16
},
container: {
flex:1,
borderRadius: 10,
padding:15,
justifyContent: 'flex-end',
alignItems: 'flex-end'
},
thought: {
color: '#666',
fontSize: 18,
marginBottom: 5,
alignItems: 'center'
},
infoText:{
flexDirection: "row"
},
// icons: {
// flexDirection: 'row'
// },
userAvatar: {
backgroundColor: Colors.subheadings,
borderColor: Colors.accent,
borderWidth:3.5,
backgroundColor: Colors.maintext,
marginEnd: 15,
width: 35,
height: 35,
borderRadius: 20,
}
});