Show Name and Email on the Drawer Tab

[ashayp22]

Goals

We need to show the user's name and email on the Drawer Tab. We can do this by building off of the Redux and Async (Persistent) Storage code for saving/loading the user's Google idToken.

1. Update the functions in client/src/utils/auth.jsto take in the user's email and name and save, load, and remove the email and name from Async Storage. You can change the name of the function from loadUserIDToken to loadUserData, saveUserIDToken to saveUserData, and so on...

2. Update the redux code in client/src/redux/slices/auth.slice.js. In initialState, add a field for name and email. In the authenticate and logout reducer:

   authenticate: (state, { payload }) => {
     state.loggedIn = payload.loggedIn
     state.idToken = payload.idToken
   // update the email and name with the data from payload - it should look exactly like above
   },
   logout: (state) => {
     state.loggedIn = initialState.loggedIn
     state.idToken = initialState.idToken
   // update the email and name with the data from the initialState
   },

3. In Landing.js, update the calls to Redux and Async Storage by passing in name and email also. You can get the user name and email from Expo with the following line:

   // Save to Async Storage
   await saveUserIDToken(idToken)
   // Update Redux Store
   dispatch(authenticate({ loggedIn: true, idToken }))

   const { idToken } = await Google.logInAsync({
       iosClientId: Constants.manifest.extra.iosClientId,
       androidClientId: Constants.manifest.extra.androidClientId,
     })

4. In Navigator.js, update the code in useEffect to fetch the name and email from Async Storage and save it in Redux.

5. In DrawerLogoutButton.js, update any outdated code.