Feat: move signout button

client/app/components/auth/AuthButtons.tsx

@@ -1,64 +1,64 @@
 import { useFonts } from "expo-font";
 import React, { useState } from "react";
 import {
   StyleSheet,
   Text,
   TouchableOpacity,
   Dimensions,
   Alert,
   Image,
   ImageSourcePropType,
 } from "react-native";
 
-import { appSignOut } from "../../services/AuthStore";
+// Migrated to SettingsScree.tsx
 
-interface SignOutButtonProps {}
+// import { appSignOut } from "../../services/AuthStore";
+// interface SignOutButtonProps {}
+// export const SignOutButton: React.FC<SignOutButtonProps> = () => {
+//   const [loading, setLoading] = useState(false);
 
-export const SignOutButton: React.FC<SignOutButtonProps> = () => {
-  const [loading, setLoading] = useState(false);
+//   const handleSignOut = async () => {
+//     Alert.alert(
+//       "Confirm Sign Out",
+//       "Are you sure you want to sign out?",
+//       [
+//         {
+//           text: "Cancel",
+//           style: "cancel",
+//         },
+//         {
+//           text: "Sign Out",
+//           onPress: async () => {
+//             setLoading(true);
+//             const response = await appSignOut();
+//             setLoading(false);
 
-  const handleSignOut = async () => {
-    Alert.alert(
-      "Confirm Sign Out",
-      "Are you sure you want to sign out?",
-      [
-        {
-          text: "Cancel",
-          style: "cancel",
-        },
-        {
-          text: "Sign Out",
-          onPress: async () => {
-            setLoading(true);
-            const response = await appSignOut();
-            setLoading(false);
+//             if (response?.user === null) {
+//               console.log("Sign out successful");
+//             } else if (response?.error) {
+//               console.log(response.error);
+//               Alert.alert(
+//                 "Sign Out Failed",
+//                 "An error occurred during sign out. Please try again.",
+//               );
+//             }
+//           },
+//         },
+//       ],
+//       { cancelable: false },
+//     );
+//   };
 
-            if (response?.user === null) {
-              console.log("Sign out successful");
-            } else if (response?.error) {
-              console.log(response.error);
-              Alert.alert(
-                "Sign Out Failed",
-                "An error occurred during sign out. Please try again.",
-              );
-            }
-          },
-        },
-      ],
-      { cancelable: false },
-    );
-  };
-
-  return (
-    <TouchableOpacity
-      style={styles.sign_out_button}
-      onPress={handleSignOut}
-      disabled={loading}>
-      <Text style={styles.button_text}>Sign Out</Text>
-    </TouchableOpacity>
+//   return (
+//     <TouchableOpacity
+//       style={styles.sign_out_button}
+//       onPress={handleSignOut}
+//       disabled={loading}>
+//       <Text style={styles.button_text}>Sign Out</Text>
+//     </TouchableOpacity>
 
-  );
-};
+//   );
+// };
 
 export const LogInButton: React.FC<{ onPress?: () => void }> = ({
   onPress,

client/app/screens/chat/ChatScreen.tsx

@@ -8,7 +8,7 @@
   Dimensions,
 } from "react-native";
 
 import { SignOutButton } from "../../components/auth/AuthButtons";
 import { ChatScreenFooter } from "../../components/chat/ChatScreenFooter";
 import MessageChannel from "../../components/chat/MessageChannel";
 import { useLocation } from "../../contexts/LocationContext";
@@ -100,7 +100,6 @@
               Chat Screen
             </Text>
           </View>
-          <SignOutButton />
           <View style={styles.chatContainer}>
             <MessageChannel messages={messages} />
           </View>

client/app/screens/settings/SettingsScreen.tsx

@@ -10,11 +10,14 @@ import {
   Modal,
   Button,
   FlatList,
-  TouchableWithoutFeedback
+  TouchableWithoutFeedback,
+  TouchableOpacity,
+  Alert
 } from "react-native";
 
 import { SettingsItem } from "../../components/settings/SettingsItem";
 import {ColorInput, DisplayNameInput} from "@app/components/settings/TextInputs";
+import { appSignOut } from "../../services/AuthStore";
 
 // List of settings items
 // toggle type: a switch
@@ -41,10 +44,13 @@ const Sections = [
     header: "Privacy",
     items: [{ id: "deleteMessages", title: "Delete messages", type: "toggle" }],
   },
+  {
+    header: "Manage Account",
+    items: [{ id: "signOut", title: "Sign Out", type: "select" }],
+  }
 ];
 
 const SettingsScreen: React.FC = () => {
-  // settings values (will be changed later to reflect the actual settings)
   const [data, setData] = useState({
     displayName: "Display Name",
     profilePicIndex: 0, // index for icons array
@@ -75,6 +81,40 @@ const SettingsScreen: React.FC = () => {
     require("../../../assets/icons/user/fake_pfp.jpg"),
   ];
 
+  const [loading, setLoading] = useState(false);
+
+  const handleSignOut = async () => {
+    Alert.alert(
+      "Confirm Sign Out",
+      "Are you sure you want to sign out?",
+      [
+        {
+          text: "Cancel",
+          style: "cancel",
+        },
+        {
+          text: "Sign Out",
+          onPress: async () => {
+            setLoading(true);
+            const response = await appSignOut();
+            setLoading(false);
+
+            if (response?.user === null) {
+              console.log("Sign out successful");
+            } else if (response?.error) {
+              console.log(response.error);
+              Alert.alert(
+                "Sign Out Failed",
+                "An error occurred during sign out. Please try again.",
+              );
+            }
+          },
+        },
+      ],
+      { cancelable: false }
+    );
+  };
+
   return (
     <SafeAreaView style={styles.safeAreaStyle}>
       <ScrollView style={styles.container}>
@@ -168,16 +208,31 @@ const SettingsScreen: React.FC = () => {
               <Text style={styles.sectionHeaderText}>{header}</Text>
             </View>
             <View style={styles.sectionContent}>
-              {items.map(({ id, title, type }) => (
-                <SettingsItem
-                  key={id}
-                  id={id}
-                  title={title}
-                  type={type}
-                  setter={setData}
-                  data={data}
-                />
-              ))}
+              {items.map(({ id, title, type }) => {
+                if (id === "signOut") {
+                  return (
+                    <TouchableOpacity
+                      key={id}
+                      style={styles.signOutRow}
+                      onPress={handleSignOut}
+                      disabled={loading}
+                    >
+                      <Text style={styles.signOutText}>Sign Out</Text>
+                    </TouchableOpacity>
+                  );
+                }
+
+                return (
+                  <SettingsItem
+                    key={id}
+                    id={id}
+                    title={title}
+                    type={type}
+                    setter={setData}
+                    data={data}
+                  />
+                );
+              })}
             </View>
           </View>
         ))}
@@ -187,7 +242,6 @@ const SettingsScreen: React.FC = () => {
 };
 
 const styles = StyleSheet.create({
-  // Styles
   safeAreaStyle: {
     flex: 1,
     backgroundColor: "#f6f6f6",
@@ -242,6 +296,20 @@ const styles = StyleSheet.create({
     marginLeft: "auto",
     height: "50%", // For some reason I can't get the view to auto fit height to children so just set to 50% for now
   },
+  signOutRow: {
+    paddingHorizontal: 24,
+    paddingVertical: 12,
+    borderBottomWidth: 1,
+    borderColor: "#e3e3e3",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  signOutText: {
+    fontSize: 16,
+    fontWeight: "600",
+    color: "red",
+  },
 });
 
 export default SettingsScreen;

client/tsconfig.json

@@ -13,4 +13,4 @@
   },
   "include": ["**/*.ts", "**/*.tsx", "env.d.ts"],
   "exclude": ["node_modules"]
-}
+}