From 688e3e6f9a6862e7f421cf66332a6713496378fb Mon Sep 17 00:00:00 2001
From: heyethereum <heyethereum@gmail.com>
Date: Mon, 8 Jul 2024 23:09:17 +0800
Subject: [PATCH] created useFetchUserAttributes custom hooks

---
 App.tsx                         |  8 +-----
 hooks/useFetchUserAttributes.ts | 37 ++++++++++++++++++++++++++
 screens/SettingsScreen.tsx      | 46 +++++++++++++++++++++++++++++----
 3 files changed, 79 insertions(+), 12 deletions(-)
 create mode 100644 hooks/useFetchUserAttributes.ts

diff --git a/App.tsx b/App.tsx
index ef7129a..0093817 100644
--- a/App.tsx
+++ b/App.tsx
@@ -7,8 +7,7 @@ import SettingsScreen from './screens/SettingsScreen';
 import { QRCodeContext } from './types';
 import CustomTabBar from './components/CustomTabBar';
 
-import { Button } from 'react-native';
-import { Authenticator, useAuthenticator, withAuthenticator } from '@aws-amplify/ui-react-native';
+import { withAuthenticator } from '@aws-amplify/ui-react-native';
 import { Amplify } from 'aws-amplify';
 import config from './src/aws-exports';
 import { enableScreens } from 'react-native-screens';
@@ -17,11 +16,6 @@ enableScreens();
 
 Amplify.configure(config);
 
-function SignOutButton() {
-  const { signOut } = useAuthenticator();
-  return <Button title="Sign Out" onPress={signOut} />;
-}
-
 const Tab = createBottomTabNavigator();
 
 const App: React.FC = () => {
diff --git a/hooks/useFetchUserAttributes.ts b/hooks/useFetchUserAttributes.ts
new file mode 100644
index 0000000..5e8d30d
--- /dev/null
+++ b/hooks/useFetchUserAttributes.ts
@@ -0,0 +1,37 @@
+import { useState, useEffect } from 'react';
+import { fetchUserAttributes } from 'aws-amplify/auth';
+
+interface UserAttributes {
+  email: string;
+  email_verified: string;
+  family_name: string;
+  given_name: string;
+  identities: string;
+  name: string;
+  sub: string;
+}
+
+const useFetchUserAttributes = () => {
+  const [userAttributes, setUserAttributes] = useState<UserAttributes | null>(null);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const handleFetchUserAttributes = async () => {
+      try {
+        const attributes = await fetchUserAttributes();
+        setUserAttributes(attributes as unknown as UserAttributes);
+      } catch (error: any) {
+        setError(error.message);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    handleFetchUserAttributes();
+  }, []);
+
+  return { userAttributes, loading, error };
+};
+
+export default useFetchUserAttributes;
diff --git a/screens/SettingsScreen.tsx b/screens/SettingsScreen.tsx
index 3fe5b72..01e2878 100644
--- a/screens/SettingsScreen.tsx
+++ b/screens/SettingsScreen.tsx
@@ -1,10 +1,35 @@
-import React, { useContext } from 'react';
-import { View, Text, StyleSheet, TouchableOpacity, Linking } from 'react-native';
+import React, { useContext, useState } from 'react';
+import { View, Text, StyleSheet, TouchableOpacity, Linking, Button } from 'react-native';
 import { QRCodeContext } from '../types';
+import { useAuthenticator } from '@aws-amplify/ui-react-native';
+import { fetchUserAttributes } from 'aws-amplify/auth';
+import useFetchUserAttributes from '../hooks/useFetchUserAttributes';
+
+async function handleFetchUserAttributes() {
+  try {
+    const userAttributes = await fetchUserAttributes();
+    console.log(userAttributes);
+  } catch (error) {
+    console.log(error);
+  }
+}
+
+function SignOutButton() {
+  const { signOut } = useAuthenticator();
+  return <Button title="Sign Out" onPress={signOut} />;
+}
 
 const SettingsScreen: React.FC = () => {
   const qrCodeContext = useContext(QRCodeContext);
   const setQrCodes = qrCodeContext ? qrCodeContext.setQrCodes : () => {};
+  const { userAttributes } = useFetchUserAttributes();
+
+  const { user } = useAuthenticator((context) => {
+    console.log(context.user);
+    handleFetchUserAttributes();
+    return [context.user]
+  });
+  
 
   const clearHistory = () => {
     setQrCodes([]);
@@ -19,9 +44,16 @@ const SettingsScreen: React.FC = () => {
       <Text style={styles.header}>Settings</Text>
       <View style={styles.profileSection}>
         <Text style={styles.sectionTitle}>Profile</Text>
-        <TouchableOpacity style={styles.loginButton}>
-          <Text style={styles.loginButtonText}>Log In</Text>
-        </TouchableOpacity>
+        {user ? (
+          <View>
+            <Text style={styles.userName}>Hello, {userAttributes?.name}</Text>
+            <SignOutButton />
+          </View>
+        ) : (
+          <TouchableOpacity style={styles.loginButton}>
+            <Text style={styles.loginButtonText}>Log In</Text>
+          </TouchableOpacity>
+        )}
       </View>
       <View style={styles.divider} />
       <View style={styles.aboutUsSection}>
@@ -42,6 +74,10 @@ const SettingsScreen: React.FC = () => {
 };
 
 const styles = StyleSheet.create({
+  userName: {
+    fontSize: 16,
+    marginBottom: 10,
+  },
   container: {
     flex: 1,
     backgroundColor: '#f8f0fc',