From 42bb3487e62d28ff2ead6348342ec22b19620045 Mon Sep 17 00:00:00 2001
From: Forrest Sun <Ddeosun@gmail.com>
Date: Wed, 14 Aug 2024 16:27:56 -0500
Subject: [PATCH] Added error feedback when choosing invalid name

---
 app/(tabs)/account/choose-full-name.tsx | 69 +++++++++++++++++--------
 1 file changed, 47 insertions(+), 22 deletions(-)

diff --git a/app/(tabs)/account/choose-full-name.tsx b/app/(tabs)/account/choose-full-name.tsx
index 96ade95..e8cff76 100644
--- a/app/(tabs)/account/choose-full-name.tsx
+++ b/app/(tabs)/account/choose-full-name.tsx
@@ -4,31 +4,14 @@ import { StyleSheet, Text, TextInput, View } from "react-native";
 import { Theme, useTheme } from "../../../utils/ThemeProvider";
 import { supabase } from "../../../utils/supabase";
 import { TouchableOpacity } from "react-native-gesture-handler";
+import { ERROR_MESSAGES } from "../../../utils/ErrorMessages";
 
 export default function ChooseFullName() {
   const styles = getStyles(useTheme());
-  const [fullName, setFullName] = useState("");
   const { userId } = useLocalSearchParams();
 
-  const handleSubmitFullName = async () => {
-    try {
-      const { error } = await supabase.from("profiles").upsert([
-        {
-          id: userId,
-          updated_at: new Date(),
-          full_name: fullName,
-        },
-      ]);
-      if (error) {
-        throw error;
-      } else {
-        router.replace("/account/profile");
-        router.setParams({ userId: userId });
-      }
-    } catch (error) {
-      console.error("Error saving: ", error);
-    }
-  };
+  const [fullName, setFullName] = useState("");
+  const [errorMessage, setErrorMessage] = useState(" ");
 
   return (
     <View style={styles.container}>
@@ -41,9 +24,10 @@ export default function ChooseFullName() {
         style={styles.input}
         value={fullName}
       />
+      <Text style={styles.errorText}>{errorMessage}</Text>
       <TouchableOpacity
         disabled={!fullName}
-        onPress={handleSubmitFullName}
+        onPress={() => handleSubmitFullName(userId, fullName, setErrorMessage)}
         style={styles.button}
       >
         <Text style={fullName ? styles.buttonText : styles.buttonDisabled}>
@@ -54,6 +38,42 @@ export default function ChooseFullName() {
   );
 }
 
+const handleSubmitFullName = async (
+  userId: string | string[],
+  fullName: string,
+  setErrorMessage: (message: string) => void,
+) => {
+  try {
+    if (!isValidName(fullName)) {
+      setErrorMessage(ERROR_MESSAGES[90001]);
+      return;
+    }
+
+    const { error } = await supabase.from("profiles").upsert([
+      {
+        id: userId,
+        updated_at: new Date(),
+        full_name: fullName,
+      },
+    ]);
+    if (error) {
+      throw error;
+    } else {
+      router.replace("/account/profile");
+      router.setParams({ userId: userId });
+    }
+  } catch (error) {
+    const typedError = error as { code: number };
+    setErrorMessage(ERROR_MESSAGES[typedError.code] || "Error saving");
+  }
+};
+
+// Validate full name with regex pattern
+const isValidName = (username: string) => {
+  const regex = /^(?!\s|-)[a-zA-Z\s-]{3,19}[a-zA-Z]$/;
+  return regex.test(username);
+};
+
 const getStyles = (theme: Theme) =>
   StyleSheet.create({
     container: {
@@ -73,7 +93,6 @@ const getStyles = (theme: Theme) =>
     button: {
       alignItems: "center",
       borderRadius: 10,
-      marginTop: "20%",
       padding: 10,
     },
     buttonDisabled: {
@@ -86,4 +105,10 @@ const getStyles = (theme: Theme) =>
       color: theme.secondary,
       fontSize: 24,
     },
+    errorText: {
+      color: theme.error,
+      fontSize: 16,
+      marginTop: "5%",
+      minHeight: "15%",
+    },
   });