Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Frankreed/slightly improved keyboard avoiding #318

Merged
merged 7 commits into from
Aug 16, 2024
Merged

Frankreed/slightly improved keyboard avoiding #318

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
8656ffe
slightly improved keyboard avoiding for update panel in profile
FrankreedX Aug 8, 2024
07de94e
Merge branch 'main' into frankreed/slightly_improved_keyboard_avoiding
FrankreedX Aug 13, 2024
ce8ac60
Merge branch 'main' into frankreed/slightly_improved_keyboard_avoiding
FrankreedX Aug 15, 2024
7343f80
Merge branch 'main' into frankreed/slightly_improved_keyboard_avoiding
FrankreedX Aug 15, 2024
0a3f266
Merge branch 'main' into frankreed/slightly_improved_keyboard_avoiding
FrankreedX Aug 15, 2024
2309e57
Merge branch 'main' into frankreed/slightly_improved_keyboard_avoiding
FrankreedX Aug 15, 2024
9b24587
pretty
FrankreedX Aug 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
276 changes: 142 additions & 134 deletions app/content/profile/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { MaterialIcons } from "@expo/vector-icons";
import { KeyboardAvoiderScrollView } from "@good-react-native/keyboard-avoider";
import {
BottomSheetModalProvider,
BottomSheetScrollView,
Expand Down Expand Up @@ -96,7 +97,7 @@
setEmail(userEmail);
}, [userData, userEmail]);

const handleUpdate = useCallback(

Check warning on line 100 in app/content/profile/index.js

View workflow job for this annotation

GitHub Actions / prettier-check 

React Hook useCallback received a function whose dependencies are unknown. Pass an inline function instead
debounce(
async () => {
setUpdateLoading(true);
Expand Down Expand Up @@ -320,150 +321,157 @@
}}
>
<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 */}
<Button
style={styles.saveChangesButton}
onPress={handleUpdate}
textColor={themeColors.highlight}
labelStyle={{
fontWeight: "bold",
}}
loading={updateLoading}
>
Update
</Button>
{/* 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 */}
<Button
style={styles.saveChangesButton}
onPress={handleUpdate}
textColor={themeColors.highlight}
labelStyle={{
fontWeight: "bold",
}}
loading={updateLoading}
>
Update
</Button>

{/* 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" ? (
Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
12 changes: 12 additions & 0 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down
Loading