From 8656ffea9a319de1a7e196b0f631a5b4624d11a4 Mon Sep 17 00:00:00 2001
From: Frankreed <baoanhtdn@gmail.com>
Date: Thu, 8 Aug 2024 11:57:39 +0700
Subject: [PATCH 1/2] slightly improved keyboard avoiding for update panel in
 profile

---
 app/content/profile/index.js | 278 ++++++++++++++++++-----------------
 package.json                 |   3 +-
 yarn.lock                    |  12 ++
 3 files changed, 159 insertions(+), 134 deletions(-)

diff --git a/app/content/profile/index.js b/app/content/profile/index.js
index ac86b739..1a2a7d54 100644
--- a/app/content/profile/index.js
+++ b/app/content/profile/index.js
@@ -1,4 +1,5 @@
 import { MaterialIcons } from "@expo/vector-icons";
+import { KeyboardAvoiderScrollView } from "@good-react-native/keyboard-avoider";
 import {
   BottomSheetModalProvider,
   BottomSheetScrollView,
@@ -323,149 +324,160 @@ function Index() {
           }}
         >
           <BottomSheetScrollView
-            contentContainerStyle={styles.modalContent}
             keyboardDismissMode="interactive"
             keyboardShouldPersistTaps="handled"
           >
-            {/* Profile Picture */}
-            <TouchableOpacity
-              onPress={async () => {
-                try {
-                  await handleImageUpload(
-                    setImageUploading,
-                    showSnackBar,
-                    getPfpName(currentTeamId, userId),
-                    userRef,
-                    profilePicSize,
-                    profilePicSize,
-                  );
-                  await invalidateMultipleKeys(queryClient, [["userInfo"]]);
-                } catch (e) {
-                  console.log(e);
-                  showDialog("Error", getErrorString(e));
-                }
-              }}
-            >
-              <View style={styles.profilePictureContainer}>
-                {imageUploading ? (
-                  <ActivityIndicator
-                    animating={imageUploading}
-                    size="large"
-                    color={themeColors.accent}
-                    style={styles.activityIndicator}
-                  />
-                ) : (
-                  <ProfilePicture
-                    userInfo={userData}
-                    style={styles.profilePicture}
-                  />
-                )}
-                <View style={styles.penIconContainer}>
-                  <MaterialIcons name="edit" size={24} color="black" />
-                </View>
-              </View>
-            </TouchableOpacity>
-            {/* Display Name */}
-            <Text
-              style={{
-                fontSize: 20,
-                marginBottom: 10,
-                fontWeight: "bold",
-              }}
-            >
-              {userData.name}
-            </Text>
+            <KeyboardAvoiderScrollView>
+              <View style={styles.modalContent}>
+                {/* Profile Picture */}
+                <TouchableOpacity
+                  onPress={async () => {
+                    try {
+                      await handleImageUpload(
+                        setImageUploading,
+                        showSnackBar,
+                        getPfpName(currentTeamId, userId),
+                        userRef,
+                        profilePicSize,
+                        profilePicSize,
+                      );
+                      await invalidateMultipleKeys(queryClient, [["userInfo"]]);
+                    } catch (e) {
+                      console.log(e);
+                      showDialog("Error", getErrorString(e));
+                    }
+                  }}
+                >
+                  <View style={styles.profilePictureContainer}>
+                    {imageUploading ? (
+                      <ActivityIndicator
+                        animating={imageUploading}
+                        size="large"
+                        color={themeColors.accent}
+                        style={styles.activityIndicator}
+                      />
+                    ) : (
+                      <ProfilePicture
+                        userInfo={userData}
+                        style={styles.profilePicture}
+                      />
+                    )}
+                    <View style={styles.penIconContainer}>
+                      <MaterialIcons name="edit" size={24} color="black" />
+                    </View>
+                  </View>
+                </TouchableOpacity>
+                {/* Display Name */}
+                <Text
+                  style={{
+                    fontSize: 20,
+                    marginBottom: 10,
+                    fontWeight: "bold",
+                  }}
+                >
+                  {userData.name}
+                </Text>
 
-            {/* Display Email */}
-            <View style={styles.emailContainer}>
-              <Text style={styles.emailText}>{email}</Text>
-            </View>
-
-            {/* Name Update input field */}
-            <View style={{ width: "80%", marginBottom: 10 }}>
-              <Text style={styles.changePasswordButton}>Update your name</Text>
-            </View>
-            <BottomSheetTextInput
-              style={styles.input}
-              value={newName}
-              onChangeText={(text) => setNewName(text)}
-              placeholder="Update your name"
-            />
-
-            {/* Change Password Button */}
-            <View
-              style={{
-                marginBottom: 20, // Increase margin bottom for more spacing
-                flexDirection: "row",
-                alignItems: "center",
-                width: "80%",
-                justifyContent: "space-between",
-              }}
-            >
-              <Text style={styles.changePasswordButton}>Change Password</Text>
-              <Switch
-                value={passwordInputVisible}
-                onValueChange={(newValue) => {
-                  resetForm();
-                  setPasswordInputVisible(newValue);
-                }}
-                theme={{
-                  colors: {
-                    primary: themeColors.accent,
-                  },
-                }}
-              />
-            </View>
+                {/* Display Email */}
+                <View style={styles.emailContainer}>
+                  <Text style={styles.emailText}>{email}</Text>
+                </View>
 
-            {/* Password Input Field */}
-            {passwordInputVisible && (
-              <>
-                <BottomSheetTextInput
-                  style={styles.input}
-                  value={currentPassword}
-                  onChangeText={setCurrentPassword}
-                  placeholder="Enter your current password"
-                  secureTextEntry={true}
-                  // to get rid of ios password suggestions
-                  // More info on onChangeText + ios password suggestions bug: https://github.com/facebook/react-native/issues/21261
-                  // Workaround ("oneTimeCode" textContentType): https://stackoverflow.com/a/68658035
-                  textContentType="oneTimeCode"
-                />
-                <BottomSheetTextInput
-                  style={styles.input}
-                  value={newPassword}
-                  onChangeText={setNewPassword}
-                  placeholder="Enter your new password"
-                  secureTextEntry={true}
-                  textContentType="newPassword"
-                />
+                {/* Name Update input field */}
+                <View style={{ width: "80%", marginBottom: 10 }}>
+                  <Text style={styles.changePasswordButton}>
+                    Update your name
+                  </Text>
+                </View>
                 <BottomSheetTextInput
                   style={styles.input}
-                  value={newPasswordCheck}
-                  onChangeText={setNewPasswordCheck}
-                  placeholder="Confirm your new password"
-                  secureTextEntry={true}
-                  textContentType="newPassword"
+                  value={newName}
+                  onChangeText={(text) => setNewName(text)}
+                  placeholder="Update your name"
                 />
-              </>
-            )}
 
-            {/* Save Button */}
-            <TouchableOpacity
-              style={styles.saveChangesButton}
-              onPress={handleUpdate}
-            >
-              {updateLoading ? (
-                <ActivityIndicator animating={true} size={16} color={"#FFF"} />
-              ) : (
-                <Text style={styles.saveChangesButtonText}>Update</Text>
-              )}
-            </TouchableOpacity>
+                {/* Change Password Button */}
+                <View
+                  style={{
+                    marginBottom: 20, // Increase margin bottom for more spacing
+                    flexDirection: "row",
+                    alignItems: "center",
+                    width: "80%",
+                    justifyContent: "space-between",
+                  }}
+                >
+                  <Text style={styles.changePasswordButton}>
+                    Change Password
+                  </Text>
+                  <Switch
+                    value={passwordInputVisible}
+                    onValueChange={(newValue) => {
+                      resetForm();
+                      setPasswordInputVisible(newValue);
+                    }}
+                    theme={{
+                      colors: {
+                        primary: themeColors.accent,
+                      },
+                    }}
+                  />
+                </View>
+
+                {/* Password Input Field */}
+                {passwordInputVisible && (
+                  <>
+                    <BottomSheetTextInput
+                      style={styles.input}
+                      value={currentPassword}
+                      onChangeText={setCurrentPassword}
+                      placeholder="Enter your current password"
+                      secureTextEntry={true}
+                      // to get rid of ios password suggestions
+                      // More info on onChangeText + ios password suggestions bug: https://github.com/facebook/react-native/issues/21261
+                      // Workaround ("oneTimeCode" textContentType): https://stackoverflow.com/a/68658035
+                      textContentType="oneTimeCode"
+                    />
+                    <BottomSheetTextInput
+                      style={styles.input}
+                      value={newPassword}
+                      onChangeText={setNewPassword}
+                      placeholder="Enter your new password"
+                      secureTextEntry={true}
+                      textContentType="newPassword"
+                    />
+                    <BottomSheetTextInput
+                      style={styles.input}
+                      value={newPasswordCheck}
+                      onChangeText={setNewPasswordCheck}
+                      placeholder="Confirm your new password"
+                      secureTextEntry={true}
+                      textContentType="newPassword"
+                    />
+                  </>
+                )}
+
+                {/* Save Button */}
+                <TouchableOpacity
+                  style={styles.saveChangesButton}
+                  onPress={handleUpdate}
+                >
+                  {updateLoading ? (
+                    <ActivityIndicator
+                      animating={true}
+                      size={16}
+                      color={"#FFF"}
+                    />
+                  ) : (
+                    <Text style={styles.saveChangesButtonText}>Update</Text>
+                  )}
+                </TouchableOpacity>
 
-            {/* Sign Out Button */}
-            <Pressable onPress={handleSignOut}>
-              <Text style={styles.signOutButton}>Sign Out</Text>
-            </Pressable>
+                {/* Sign Out Button */}
+                <Pressable onPress={handleSignOut}>
+                  <Text style={styles.signOutButton}>Sign Out</Text>
+                </Pressable>
+              </View>
+            </KeyboardAvoiderScrollView>
           </BottomSheetScrollView>
         </BottomSheetWrapper>
         {uniqueDrills.length > 0 && userData.role === "player" ? (
diff --git a/package.json b/package.json
index a12d3d8f..b328ed6e 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
   "dependencies": {
     "@expo/ngrok": "^4.1.0",
     "@expo/webpack-config": "^19.0.0",
+    "@good-react-native/keyboard-avoider": "^1.1.4",
     "@gorhom/bottom-sheet": "^4",
     "@react-native-async-storage/async-storage": "1.23.1",
     "@tanstack/query-async-storage-persister": "^5.27.5",
@@ -44,8 +45,8 @@
     "expo-status-bar": "~1.12.1",
     "expo-system-ui": "~3.0.4",
     "firebase": "^10.8.0",
-    "react": "18.2.0",
     "moment-timezone": "^0.5.45",
+    "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-native": "0.74.1",
     "react-native-dropdown-picker": "^5.4.6",
diff --git a/yarn.lock b/yarn.lock
index 2df24088..ff3bf680 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1749,6 +1749,13 @@
   resolved "https://registry.yarnpkg.com/@firebase/webchannel-wrapper/-/webchannel-wrapper-1.0.1.tgz#0b62c9f47f557a5b4adc073bb0a47542ce6af4c4"
   integrity sha512-jmEnr/pk0yVkA7mIlHNnxCi+wWzOFUg0WyIotgkKAb2u1J7fAeDBcVNSTjTihbAYNusCLQdW5s9IJ5qwnEufcQ==
 
+"@good-react-native/keyboard-avoider@^1.1.4":
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/@good-react-native/keyboard-avoider/-/keyboard-avoider-1.1.4.tgz#634a18d8634d100b2b4e1f419c4b56dc0ab831ab"
+  integrity sha512-Yfbr3b7pOdjdZW03cyHC5kVzFX7D1kPP2jr8yvT7hzI3zoCPuvwTjxzl80vjs3NWCGt1ZAPAbhEkG4oFzGaCSg==
+  dependencies:
+    react-native-uuid "^2.0.1"
+
 "@gorhom/bottom-sheet@^4":
   version "4.6.3"
   resolved "https://registry.yarnpkg.com/@gorhom/bottom-sheet/-/bottom-sheet-4.6.3.tgz#0e16999de7468efc6b730f680692f6d53f0abd8e"
@@ -9360,6 +9367,11 @@ react-native-svg@15.2.0:
     css-select "^5.1.0"
     css-tree "^1.1.3"
 
+react-native-uuid@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/react-native-uuid/-/react-native-uuid-2.0.2.tgz#3da192e342ef35ee95a7def676ab41c1256dfd66"
+  integrity sha512-5ypj/hV58P+6VREdjkW0EudSibsH3WdqDERoHKnD9syFWjF+NfRWWrJb2sa3LIwI5zpzMvUiabs+DX40WHpEMw==
+
 react-native-web@~0.19.6:
   version "0.19.12"
   resolved "https://registry.yarnpkg.com/react-native-web/-/react-native-web-0.19.12.tgz#30d1fd70bdff7886f43c0c2698629d830fade6bc"

From 9b245877f6d60798073cc6e04c645217330f1e7e Mon Sep 17 00:00:00 2001
From: Frankreed <baoanhtdn@gmail.com>
Date: Thu, 15 Aug 2024 20:16:02 +0700
Subject: [PATCH 2/2] pretty

---
 app/content/profile/index.js | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/app/content/profile/index.js b/app/content/profile/index.js
index 4d0dba78..e69ba85b 100644
--- a/app/content/profile/index.js
+++ b/app/content/profile/index.js
@@ -453,18 +453,18 @@ function Index() {
                   </>
                 )}
 
-            {/* Save Button */}
-            <Button
-              style={styles.saveChangesButton}
-              onPress={handleUpdate}
-              textColor={themeColors.highlight}
-              labelStyle={{
-                fontWeight: "bold",
-              }}
-              loading={updateLoading}
-            >
-              Update
-            </Button>
+                {/* Save Button */}
+                <Button
+                  style={styles.saveChangesButton}
+                  onPress={handleUpdate}
+                  textColor={themeColors.highlight}
+                  labelStyle={{
+                    fontWeight: "bold",
+                  }}
+                  loading={updateLoading}
+                >
+                  Update
+                </Button>
 
                 {/* Sign Out Button */}
                 <Pressable onPress={handleSignOut}>