fet: profile screen

* fet: sign in screen completed

* fet: support for web

components/home/tabs.fragment.tsx

@@ -1,5 +1,5 @@
-import { useEffect, useMemo, useRef, useState } from "react";
-import { View, FlatList, ScrollView } from "react-native";
+import { useMemo, useState } from "react";
+import { View, FlatList } from "react-native";
 import { makeStyles, Tab, TabView, useTheme } from "@rneui/themed";
 
 import ListOfCards from "../list-of-cards.component";

components/profile/profile-detail.fragment.tsx

@@ -0,0 +1,72 @@
+import { Image, makeStyles, Text } from "@rneui/themed";
+import { View } from "react-native";
+
+import _get from "lodash/get";
+
+import useSession from "../../hooks/use-session.hook";
+
+export default function ProfileDetailFragment() {
+  const { currentUser } = useSession();
+
+  const styles = useStyles();
+
+  return (
+    <View style={styles.profileContainer}>
+      <View style={styles.profileCard}>
+        <Image
+          source={{ uri: _get(currentUser, "photoURL", "") as string }}
+          style={styles.profileImage}
+        />
+
+        <View style={styles.profileInfoContainer}>
+          <Text h4>{_get(currentUser, "displayName", "")}</Text>
+          <Text style={styles.emailText}>{_get(currentUser, "email", "")}</Text>
+        </View>
+      </View>
+    </View>
+  );
+}
+
+const useStyles = makeStyles((theme) => ({
+  screen: {
+    flex: 1,
+  },
+
+  profileContainer: {
+    justifyContent: "center",
+    alignItems: "center",
+    marginTop: 10,
+    marginBottom: 15,
+    width: "100%",
+  },
+  profileCard: {
+    justifyContent: "center",
+    alignItems: "center",
+    minHeight: 220,
+    width: "75%",
+
+    backgroundColor: theme.colors.primaryLight,
+    borderRadius: 16,
+
+    shadowColor: "#52006A",
+    elevation: 5,
+    shadowOffset: { width: -2, height: 4 },
+    shadowOpacity: 0.1,
+    shadowRadius: 3,
+  },
+  profileImage: {
+    width: 100,
+    height: 100,
+    borderRadius: 50,
+  },
+
+  profileInfoContainer: {
+    marginTop: 12,
+  },
+
+  emailText: {
+    fontSize: 16,
+    color: theme.colors.grey5,
+    textAlign: "center",
+  },
+}));

hooks/use-auth.hook.ts

@@ -1,21 +1,22 @@
 import { useEffect } from "react";
 import { GoogleAuthProvider, signInWithCredential } from "firebase/auth";
-import { useAuthRequest } from "expo-auth-session/providers/google";
-import { useNavigation } from "@react-navigation/core";
+import * as Google from "expo-auth-session/providers/google";
+import * as WebBrowser from "expo-web-browser";
 import { auth } from "../firebase";
 import config from "../config/app.config";
 
+import AsyncStorage from "@react-native-async-storage/async-storage";
+
+WebBrowser.maybeCompleteAuthSession();
+
 const { GOOGLE_IOS_CLIENT_ID, GOOGLE_EXPO_CLIENT_ID } = config();
 
 export default function useAuth() {
-  const [_request, response, googlePromptLogin] = useAuthRequest({
-    // TODO: Move this to env file
+  const [_request, response, googlePromptLogin] = Google.useAuthRequest({
     iosClientId: GOOGLE_IOS_CLIENT_ID,
     expoClientId: GOOGLE_EXPO_CLIENT_ID,
   });
 
-  const navigation = useNavigation();
-
   const signIn = async () => {
     try {
       await googlePromptLogin();
@@ -28,6 +29,7 @@ export default function useAuth() {
   const signOut = async () => {
     try {
       await auth.signOut();
+      await AsyncStorage.clear();
     } catch (err) {
       // TODO: Handler error
       console.error(err);
@@ -48,12 +50,6 @@ export default function useAuth() {
     }
   }, [response]);
 
-  useEffect(() => {
-    auth.onAuthStateChanged(() => {
-      // navigation.navigate(RootRoutes.Main as never);
-    });
-  }, []);
-
   return {
     signIn,
     signOut,

navigation/root.navigator.tsx

@@ -5,10 +5,19 @@ import AuthNavigator from "./auth.navigator";
 import MainNavigator from "./main.navigator";
 
 import useSession from "../hooks/use-session.hook";
+import { useEffect } from "react";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import { auth } from "../firebase";
 
 const RootNavigator: React.FC = () => {
   const { currentUser } = useSession();
 
+  useEffect(() => {
+    // auth.
+    // AsyncStorage.clear()
+    // AsyncStorage.getItem("@fancywallet:googleAccessToken").then(console.log);
+  }, []);
+
   return (
     <RootStack.Navigator screenOptions={{ headerShown: false }}>
       {currentUser ? (

navigation/routes.ts

@@ -17,6 +17,7 @@ export enum MainRoutes {
 
 export enum TabsRoutes {
   Home = "Home",
+  Profile = "Profile",
 }
 
 export type RootStackParamList = {
@@ -35,6 +36,7 @@ export type MainStackParamList = {
 
 export type TabsStackParamList = {
   [TabsRoutes.Home]: undefined;
+  [TabsRoutes.Profile]: undefined;
 };
 
 export const RootStack = createStackNavigator<RootStackParamList>();

navigation/tabs.navigator.tsx

@@ -3,6 +3,8 @@ import { Icon, useTheme } from "@rneui/themed";
 import { TabsStack, TabsRoutes } from "./routes";
 
 import HomeScreen from "../screens/dashboard/home.screen";
+import ProfileScreen from "../screens/dashboard/profile.screen";
+
 import { TABS_ICONS } from "../theme/tabs.customization";
 
 export default function TabsNavigator() {
@@ -13,24 +15,22 @@ export default function TabsNavigator() {
       initialRouteName={TabsRoutes.Home}
       screenOptions={({ route }) => ({
         headerShown: false,
-        tabBarIcon: ({ focused, color, size }) => {
+        tabBarIcon: ({ color, size }) => {
           const iconName = TABS_ICONS[route.name];
-
-          return <Icon name={iconName} size={size} color={color} />;
+          return (
+            <Icon name={iconName} type="ionicon" size={size} color={color} />
+          );
         },
 
         tabBarActiveTintColor: theme.colors.white,
-        tabBarInactiveTintColor: "gray",
+        tabBarInactiveTintColor: theme.colors.primaryLight,
         tabBarStyle: {
-          margin: 0,
           backgroundColor: theme.colors.pink,
         },
-        tabBarLabelStyle: {
-          margin: 0,
-        },
       })}
     >
       <TabsStack.Screen name={TabsRoutes.Home} component={HomeScreen} />
+      <TabsStack.Screen name={TabsRoutes.Profile} component={ProfileScreen} />
     </TabsStack.Navigator>
   );
 }

screens/auth/sign-in.screen.tsx

@@ -1,12 +1,13 @@
-import { StyleSheet } from "react-native";
+import { View, StyleSheet } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
-import { Button, Icon, useTheme, makeStyles } from "@rneui/themed";
+import { Button, Icon, Text, useTheme, makeStyles } from "@rneui/themed";
 import { LinearGradient } from "expo-linear-gradient";
 
 import useAuth from "../../hooks/use-auth.hook";
 
 export default function SignScreen() {
   const { signIn } = useAuth();
+
   const { theme } = useTheme();
   const styles = useStyles();
 
@@ -17,10 +18,28 @@ export default function SignScreen() {
         style={[styles.background, StyleSheet.absoluteFill]}
       />
 
+      <View style={styles.welcomeContainer}>
+        <Icon
+          name="wallet-outline"
+          type="ionicon"
+          color={theme.colors.white}
+          size={100}
+          containerStyle={styles.walletIconContainer}
+        />
+
+        <Text h2 style={styles.welcomeText}>
+          Welcome to Fancy wallet
+        </Text>
+
+        <Text style={styles.welcomeSubtitleText}>
+          The best wallet of the market
+        </Text>
+      </View>
+
       <Button
         title="Sign in with Google"
         onPress={signIn}
-        buttonStyle={{ backgroundColor: theme.colors.pink }}
+        buttonStyle={styles.signInButton}
         icon={
           <Icon
             name="logo-google"
@@ -33,17 +52,45 @@ export default function SignScreen() {
   );
 }
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles((theme) => ({
   screen: {
     flex: 1,
-    justifyContent: "center",
+    flexDirection: "column",
+    justifyContent: "space-evenly",
     alignItems: "center",
   },
 
   background: {
     flex: 1,
   },
 
+  welcomeContainer: {
+    alignItems: "center",
+    marginTop: 15,
+  },
+  walletIconContainer: {
+    justifyContent: "center",
+    alignItems: "center",
+    marginBottom: 20,
+    backgroundColor: theme.colors.pink,
+    borderRadius: 100,
+    width: 140,
+    height: 140,
+  },
+  welcomeText: {
+    textAlign: "center",
+    marginBottom: 10,
+  },
+  welcomeSubtitleText: {
+    textAlign: "center",
+    fontSize: 18,
+  },
+
+  signInButton: {
+    backgroundColor: theme.colors.pink,
+    maxWidth: 300,
+  },
+
   iconContainer: {
     marginRight: 12.5,
   },

screens/dashboard/home.screen.tsx

@@ -1,25 +1,32 @@
+import { View } from "react-native";
 import { makeStyles } from "@rneui/themed";
-import { SafeAreaView } from "react-native-safe-area-context";
+import { EdgeInsets, useSafeAreaInsets } from "react-native-safe-area-context";
 
 import HomeHeaderFragment from "../../components/home/header.fragment";
 import HomeBalanceFragment from "../../components/home/balance.fragment";
 import HomeTabsFragment from "../../components/home/tabs.fragment";
 
 export default function HomeScreen() {
-  const styles = useStyles();
+  const safeAreaInset = useSafeAreaInsets();
+  const styles = useStyles({ safeAreaInset });
 
   return (
-    <SafeAreaView style={styles.screen}>
+    <View style={styles.screen}>
       <HomeHeaderFragment />
       <HomeBalanceFragment />
       <HomeTabsFragment />
-    </SafeAreaView>
+    </View>
   );
 }
 
-const useStyles = makeStyles(() => ({
-  screen: {
-    flex: 1,
-    paddingHorizontal: 15,
-  },
-}));
+const useStyles = makeStyles(
+  (_theme, { safeAreaInset }: { safeAreaInset: EdgeInsets }) => ({
+    screen: {
+      flex: 1,
+      top: safeAreaInset.top,
+      marginBottom: safeAreaInset.bottom / 2,
+      paddingBottom: safeAreaInset.bottom,
+      paddingHorizontal: 10,
+    },
+  })
+);