Skip to content

Commit

Permalink
navigation bugs fixed
Browse files Browse the repository at this point in the history
  • Loading branch information
@asad-abd
asad-abd committed Dec 1, 2020
1 parent ed077d8 commit 14305e9
Show file tree
Hide file tree
Showing 4 changed files with 79 additions and 49 deletions.
10 changes: 6 additions & 4 deletions app/screens/feed.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,8 @@ class feed extends React.Component{
url: photoObj.url,
caption: photoObj.caption,
posted: that.timeConverter(photoObj.posted),
author: data
author: data,
authorId: photoObj.author
});

that.setState({
Expand Down Expand Up @@ -109,8 +110,8 @@ class feed extends React.Component{
<View style={{flex:1, justifyContent: 'center', alignItems:'center'}}>
<Text>Loading...</Text>
</View>
):
(<FlatList
): (
<FlatList
refreshing={this.state.refresh}
onRefresh={this.loadNew}
data={this.state.photo_feed}
Expand All @@ -120,7 +121,8 @@ class feed extends React.Component{
<View key={index} style={{width: '100%', overflow:'hidden', marginBottom: 5, justifyContent: 'space-between', borderBottomWidth: 1, borderColor:'grey'}}>
<View style={{padding:5, width: '100%', flexDirection:'row', justifyContent:'space-between'}}>
<Text>{item.posted}</Text>
<TouchableOpacity onPress={() => this.props.navigation.navigate('User')}>

<TouchableOpacity onPress={()=> this.props.navigation.navigate('User',{userId: item.authorId})}>
<Text>{item.author}</Text>
</TouchableOpacity>
</View>
Expand Down
1 change: 1 addition & 0 deletions app/screens/profile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@ class profile extends React.Component{
</View>
</View>
):(
//not logged in
<View style={{flex:1, justifyContent: 'center', alignItems: 'center'}}>
<Text>You are not logged in</Text>
<Text>Please login to view your profile</Text>
Expand Down
101 changes: 57 additions & 44 deletions app/screens/userProfile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,75 +6,88 @@ class userProfile extends React.Component{
constructor(props){
super(props);
this.state = {
loggedin: false
loaded: false
}
}

checkParams= () =>{
//checks the sent thru feed.js
var params = this.props.route.params;
//const datas = getNavigationParams
if(params.userId){//if the userID exists
this.setState({
userId: params.userId
});
this.fetchUserInfo(params.userId);
}
}

fetchUserInfo= (userId) =>{
//fetch the info of the user requested from feed.js after checking is done.
var that= this;

database.ref('users').child(userId).child('username').once('value').then(function(snapshot) {
// first check if the data exists
const exists = (snapshot.val() !== null);
if(exists) data = snapshot.val();
that.setState({username:data});
}).catch(error => console.log(error));

database.ref('users').child(userId).child('name').once('value').then(function(snapshot) {
// first check if the data exists
const exists = (snapshot.val() !== null);
if(exists) data = snapshot.val();
that.setState({name:data});
}).catch(error => console.log(error));

database.ref('users').child(userId).child('avatar').once('value').then(function(snapshot) {
// first check if the data exists
const exists = (snapshot.val() !== null);
if(exists) data = snapshot.val();
that.setState({avatar:data,
loaded:true});
}).catch(error => console.log(error));

}

componentDidMount = () =>{
var that=this; //need a reference for firebase because this cannot be used it that
// check if the user is logged in or not
f.auth().onAuthStateChanged(function(user){
if(user){// if user exists
//logged in
that.setState({
loggedin: true
});
}else{
that.setState({
loggedin: false
});
}
})
this.checkParams();
}
// <View style={{flex:1, height:70 ,paddingTop:30, borderColor: '#d3d3d3', backgroundColor: 'white', borderBottomWidth: 0.5, justifyContent: 'center', alignItems: 'center'}}>
render(){
return (
<View style={{flex:1}}>
{this.state.loggedin == true ? (
// are logged in
{ this.state.loaded == false ? (
<View>
<Text>Loading...</Text>
</View>
):(
<View style={{flex:1}}>
<View style={{height:70 ,paddingTop:30, borderColor: '#d3d3d3', backgroundColor: 'white', borderBottomWidth: 0.5, justifyContent: 'center', alignItems: 'center'}}>
<View style={{flexDirection:'row',height:70 ,paddingTop:30, borderColor: '#d3d3d3', backgroundColor: 'white', borderBottomWidth: 0.5, justifyContent: 'space-between', alignItems: 'center'}}>
<TouchableOpacity style={{width:100}} onPress={()=> this.props.navigation.goBack()}>
<Text style={{fontSize:12, fontWeight:'bold', paddingLeft: 10}}>Go Back</Text>
</TouchableOpacity>
<Text>Profile</Text>
<Text style={{width:100}}> </Text>

</View>
<View style={{justifyContent:'space-evenly', alignItems:'center', flexDirection: 'row', paddingVertical: 10}}>
<Image source={{ uri: 'https://picsum.photos/300'}} style={{marginLeft: 10, width:100, height:100, borderRadius: 50}}/>
<Image source={{ uri: this.state.avatar }} style={{marginLeft: 10, width:100, height:100, borderRadius: 50}}/>
<View style={{marginRight:10}}>
<Text>Name</Text>
<Text>@username</Text>
<Text>{this.state.name}</Text>
<Text>{this.state.username}</Text>
</View>
</View>

<View style={{paddingBottom: 20, borderBottomWidth: 1}}>
<TouchableOpacity style={{marginTop:10, marginHorizontal:40, paddingVertical: 15, borderRadius:20, borderColor: 'grey', borderWidth:1.5}}>
<Text style={{textAlign:'center', color:'grey'}}>Logout</Text>
</TouchableOpacity>

<TouchableOpacity style={{marginTop:10, marginHorizontal:40, paddingVertical: 15, borderRadius:20, borderColor: 'grey', borderWidth:1.5}}>
<Text style={{textAlign:'center', color:'grey'}}>Edit Profile</Text>
</TouchableOpacity>

<TouchableOpacity
onPress={() => this.props.navigation.navigate('Upload')}
style={{backgroundColor:'grey', marginTop:10, marginHorizontal:40, paddingVertical: 25, borderRadius:25, borderColor: 'grey', borderWidth:1.5}}>
<Text style={{textAlign:'center', color:'white'}}>Upload New+</Text>
</TouchableOpacity>
</View>

<View style={{flex:1, justifyContent:'center', alignItems: 'center', backgroundColor:'green'}}>
<Text>Loading photos</Text>
</View>
</View>
):(
<View style={{flex:1, justifyContent: 'center', alignItems: 'center'}}>
<Text>You are not logged in</Text>
<Text>Please login to view your profile</Text>
</View>
)}

</View>


);
)
}
}

Expand Down
16 changes: 15 additions & 1 deletion problems.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,4 +10,18 @@ while testing, 'login()' function was created and I had to use **react hooks' us
## Important notes/observations/ silly mistakes corrections
1. firebase.signInWithEmailAndPassword() doesn't create new users! it just signs them in. So first create a sample user in firebase then use it

2.
2. Viewing the UserProfile of other users in the Feed
<TouchableOpacity onPress={() => this.props.navigation navigate('User',{userId: item.authorId})}>
This allows the currently logged-in user to see the userProfile of some other user by extracting out the authorId from the photo object of the photo that we are currently seeing on the feed page.

3. Navigation between pages while passing parameters (took a lot of time to fix)
(in userProfile.js)
"this.props.navigation.state.params" -> doesn't work for 5.x

instead use: "this.props.route.params"

(This one took a lot of time to identify the actual problem.)

4. Observation/Note: in fetchUserInfo() in "userProfile.js", we cannot directly fetch the whole user object and have to make 3 separate calls for it.

This is because of the way we have written our security rules. only the actual user can fetch the whole user object.

0 comments on commit 14305e9

Please sign in to comment.