React - I can't dispatch data and show it

Viewed 18

I am fairly new to overall app development. I am stuck with this issue.

My objective here is to fetch user data from database and show user's email on "My profile screen".

I am able fetch data from MongoDB using FirebaseID which I already sent during sign up process. I can see it succesfully logged on console. However it doesnt automatically re-renders on the page. I spent 4 days trying to figure out on multiple platforms but I am completely stuck.

Thank you for any kind of help to get me there.

import { Button, StyleSheet, Text, TextInput, View, ScrollView, Image, FlatList} from 'react-native';
import React, {useState, useEffect} from 'react'

import { useDispatch, useSelector } from 'react-redux';


import { auth } from '../firebase';

import * as profilePageAction from '../redux/actions/profilePageAction';



const MyProfileScreen = () => {

  const [email, setEmail] = useState('');
  
  const user = auth.currentUser;
  const dispatch = useDispatch();

  const FirebaseID = user.uid;

  console.log("firebaseID", FirebaseID);

  const {profilePages} = useSelector(state => state.profilePage);

  const myProfile = {...profilePages};
  
  useEffect(() =>{
    dispatch(profilePageAction.fetchOwnProfile(FirebaseID))
    .then((response) => {

      console.log("response: ", response)
      setEmail(response.Email);

    })
    .catch(err => console.log(err));
  }, [dispatch]);
  

  return (
    <View style={styles.container}>      
              <View style={styles.list}>               
                 <Text style={styles.email}>text</Text>         
                 <Text style={styles.email}>{myProfile.Email}</Text>
              </View>            
    </View>     
);
   
    
}

const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
    },
    list:{
      shadowColor: 'black',   
      shadowOpacity: 0.25,
      shadowOffset: {width: 0 , height: 2},
      shadowRadius: 8,
      borderRadius: 10,
      backgroundColor: 'white',
      elevation: 5,
      height: 300,
      width: 200,
      margin: 10
  },
    email: {
      fontSize: 30,
      color: '#000000',
      margin: 10
  },
  });
  

export default MyProfileScreen;

0 Answers
Related