Add user details in reducer, set up dummy profile page

app/AuthContainer.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { connect } from 'react-redux';
 import * as WebBrowser from 'expo-web-browser';
 import * as Google from 'expo-auth-session/providers/google';
@@ -9,7 +9,7 @@ import { IAction } from './redux/actions/ActionType';
 import { save, getValueFor } from './utils/SecureStore';
 import { authenticateGoogleAccessToken } from './api/Auth';
 
-import SplashScreen from './screens/general/SplashScreen';
+import SplashScreen from './screens/misc/SplashScreen';
 import Router from './Router';
 
 WebBrowser.maybeCompleteAuthSession();
@@ -18,7 +18,12 @@ type OwnProps = {
 }
 
 type DispatchProps = {
-  login: (userId: string, userToken: string) => IAction,
+  login: (
+    userId: string,
+    userName: string,
+    userAvatar: string,
+    userToken: string
+    ) => IAction,
   logout: () => IAction,
   retrieveToken: (userToken: string | null) => IAction
 };
@@ -31,10 +36,14 @@ const AuthContainer = (props: OwnProps & DispatchProps) => {
       '455617521342-htliucvfap8nuqqoid8l31k463luh0ii.apps.googleusercontent.com'
   });
 
+  // temp solution for triggering splash screen.
+  const [isLoading, setIsLoading] = useState(false);
+
   const authContext = useMemo(
     () => ({
       login: () => {
         promptAsync();
+        setIsLoading(true);
       },
       logout: () => {
         props.logout();
@@ -44,38 +53,41 @@ const AuthContainer = (props: OwnProps & DispatchProps) => {
   );
 
   // check if userToken exists in secure store
-  useEffect(() => {
-    getValueFor('userToken')
-      .then((userToken) => {
-        props.retrieveToken(userToken);
-      })
-      .catch((err) => console.error(err));
-  }, []);
+  // useEffect(() => {
+  //   getValueFor('userToken')
+  //     .then((userToken) => {
+  //       props.retrieveToken(userToken);
+  //     })
+  //     .catch((err) => console.error(err));
+  // }, []);
 
   // once accessToken is valid, retreives token for use with server
   useEffect(() => {
     if (res?.type === 'success') {
-      // auth data including access token
       const { authentication } = res;
       if (authentication?.accessToken) {
         authenticateGoogleAccessToken(authentication.accessToken)
-          .then((jwt) => {
-            if (jwt.data) {
-              save('userToken', jwt.data).then(() =>
-                props.login('PLACEHOLDER ID', jwt.data)
-              );
+          .then(({ data }) => {
+            if (data && data.userToken) {
+              // save('userToken', data.token).then(() =>
+              props.login(
+                data.userId,
+                data.userName,
+                data.userAvatar,
+                data.userToken);
+              // );
             } else {
               console.error('No valid JWT retrieved.');
             }
-          })
+          }).then(() => setIsLoading(false))
           .catch((err) => console.error(err));
       }
     }
   }, [res, request]);
 
   return (
   <>
-    {!request
+    {!request || isLoading
       ? (
           // TODO: fix splash screen with expo splash screen
           <SplashScreen />

app/Router.tsx

@@ -4,7 +4,7 @@ import { NavigationContainer } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
 
 import HomeScreen from './screens/main/HomePage';
-import LoginScreen from './screens/auth/LoginScreen';
+import LoginScreen from './screens/auth/Login';
 import { generateStackNavigatorWithScreens } from './utils/Navigator';
 
 // Defines the screens on the root path
@@ -33,8 +33,6 @@ type OwnProps = {
 };
 
 const Router: React.FC<OwnProps> = ({ userToken }: OwnProps) => {
-  console.log('UserToken', userToken);
-
   return (
     <NavigationContainer>
       {userToken

app/api/Auth.tsx

@@ -1,6 +1,7 @@
 import axios from 'axios';
 
-const resourceServerAuthURL = 'https://orbital-pets.herokuapp.com/auth/google';
+// const resourceServerAuthURL = 'https://orbital-pets.herokuapp.com/auth/google';
+const resourceServerAuthURL = 'http://localhost:3000/auth/google';
 
 export const authenticateGoogleAccessToken = (accessToken: string) => {
   const config = {

app/redux/actions/AuthActions.tsx

@@ -1,9 +1,15 @@
 import { IAction } from './ActionType';
 
-export const login = (userId: string, userToken: string): IAction => ({
+export const login = (
+  userId: string,
+  userName: string,
+  userAvatar: string,
+  userToken: string): IAction => ({
   type: 'LOGIN',
   payload: {
     userId,
+    userName,
+    userAvatar,
     userToken
   }
 });

app/redux/reducers/AuthReducer.tsx

@@ -17,12 +17,18 @@ export default (prevState = INITIAL_AUTH_STATE, action: IAction) => {
     case 'LOGIN':
       return {
         ...prevState,
-        userToken: action.payload.userToken
+        userToken: action.payload.userToken,
+        userId: action.payload.userId,
+        userName: action.payload.userName,
+        userAvatar: action.payload.userAvatar
       };
     case 'LOGOUT':
       return {
         ...prevState,
-        userToken: null
+        userToken: null,
+        userId: null,
+        userName: null,
+        userAvatar: null
       };
     default:
       return prevState;

app/screens/auth/Login.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { Layout } from '@ui-kitten/components';
+
+import LoginStyles from '../../styles/Login.Styles';
+import IconButton from '../../components/user/IconButton';
+import LoginAvatar from '../../components/user/Avatar';
+import AuthContext from '../../contexts/AuthContext';
+
+type OwnProps = {
+  userName?: string,
+  userAvatar?: string,
+  userId?: string
+};
+
+const LoginScreen: React.FC<OwnProps> = (props: OwnProps) => {
+  const { login } = React.useContext(AuthContext);
+
+  return (
+    <Layout style={LoginStyles.container}>
+      <LoginAvatar
+        greetingMessage={props.userName ? `Welcome ${props.userName}` : 'Welcome Stranger!'}
+        avatarImgSource={props.userAvatar}
+        actionMessage={props.userId ? undefined : 'Please log in to continue.'}
+      />
+      <IconButton
+        iconName="google"
+        buttonText="Login with Google"
+        handleButtonPress={login}
+      />
+    </Layout>
+  );
+};
+
+const mapStateToProps = ({ auth } : any) => ({
+  userName: auth.userName,
+  userAvatar: auth.userAvatar,
+  userId: auth.userId
+});
+
+export default connect(mapStateToProps)(LoginScreen);

app/screens/main/Profile.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { Layout } from '@ui-kitten/components';
+
+import LoginStyles from '../../styles/Login.Styles';
+import IconButton from '../../components/user/IconButton';
+import LoginAvatar from '../../components/user/Avatar';
+import AuthContext from '../../contexts/AuthContext';
+
+type OwnProps = {
+    userName?: string,
+    userAvatar?: string,
+    userId?: string
+  };
+
+// TODO: WIP - just testing the redux store.
+const ProfileScreen: React.FC<OwnProps> = (props: OwnProps) => {
+  const { login } = React.useContext(AuthContext);
+
+  return (
+      <Layout style={LoginStyles.container}>
+        <LoginAvatar
+          greetingMessage={props.userName ? `Welcome ${props.userName}` : 'Welcome Stranger!'}
+          avatarImgSource={props.userAvatar}
+          actionMessage={props.userId ? undefined : 'Please log in to continue.'}
+        />
+        <IconButton
+          iconName="google"
+          buttonText="Login with Google"
+          handleButtonPress={login}
+        />
+      </Layout>
+  );
+};
+
+const mapStateToProps = ({ auth } : any) => ({
+  userName: auth.userName,
+  userAvatar: auth.userAvatar,
+  userId: auth.userId
+});
+
+export default connect(mapStateToProps)(ProfileScreen);

package.json

@@ -48,6 +48,7 @@
     "react-native-svg": "12.1.0",
     "react-native-web": "^0.16.3",
     "react-redux": "^7.2.4",
+    "realm": "^10.4.1",
     "redux": "^4.1.0",
     "redux-thunk": "^2.3.0",
     "sharp-cli": "^1.15.0"