Skip to content

Commit 54b42bf

Browse files
olafcholafch
committed
ProfileEditImage almost done
1 parent e59f148 commit 54b42bf

6 files changed

Lines changed: 109 additions & 14 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -121,6 +121,7 @@
121121
"expo-device": "~5.9.4",
122122
"expo-font": "~11.10.3",
123123
"expo-haptics": "~12.8.1",
124+
"expo-image-picker": "~14.7.1",
124125
"expo-linear-gradient": "~12.7.2",
125126
"expo-linking": "~6.2.2",
126127
"expo-local-authentication": "~13.8.0",

‎src/components/screens/profile/ProfileControlledInput.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { ControlledField } from '@baca/components'
22
import { isWeb } from '@baca/constants'
3-
import { Text, Box } from '@baca/design-system'
3+
import { Box } from '@baca/design-system'
44
import { useWeb } from '@baca/hooks'
55
import { ProfileControlledInputProps } from '@baca/types/ProfileInputProps'
66

@@ -23,7 +23,9 @@ export const ProfileControlledInput = ({
2323
mb={isWeb ? 10 : 0}
2424
maxW={800}
2525
>
26-
<Text.SmBold flex={1}>{label}</Text.SmBold>
26+
{/* <Text.SmBold flex={1} color="text.primary">
27+
{label}
28+
</Text.SmBold> */}
2729
<Box flex={isWeb ? 2 : 0}>
2830
<ControlledField.Input
2931
control={control}

‎src/components/screens/profile/ProfileEditImage.tsx‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import { Box, Text, Button, Row } from '@baca/design-system'
2+
import * as ImagePicker from 'expo-image-picker'
3+
import { t } from 'i18next'
4+
import React from 'react'
5+
import { View, Image, StyleSheet } from 'react-native'
6+
7+
export const ProfileEditImage: React.FC = () => {
8+
const [image, setImage] = React.useState<string | null>(null)
9+
10+
const pickImage = async () => {
11+
const result = await ImagePicker.launchImageLibraryAsync({
12+
mediaTypes: ImagePicker.MediaTypeOptions.Images,
13+
allowsEditing: true,
14+
aspect: [4, 3],
15+
quality: 1,
16+
})
17+
18+
if (!result.canceled && result.assets && result.assets.length > 0) {
19+
setImage(result.assets[0].uri)
20+
}
21+
}
22+
23+
return (
24+
<Box borderColor="border.secondary" borderTopWidth={1} py={6} /* mb={isWeb ? 10 : 4} */>
25+
<Box style={styles.marginBottom}>
26+
<Text.SmBold color="text.primary">{t('profile_screen.your_photo')}</Text.SmBold>
27+
<Text.SmRegular color="text.secondary">
28+
{t('profile_screen.your_photo_description')}
29+
</Text.SmRegular>
30+
</Box>
31+
<Box style={styles.imageContainer}>
32+
{image ? (
33+
<Image source={{ uri: image }} style={styles.image} />
34+
) : (
35+
<View style={styles.placeholder}>
36+
<Text style={styles.placeholderText}>No Image</Text>
37+
</View>
38+
)}
39+
</Box>
40+
<Row maxW={800} justifyContent="flex-end">
41+
<Button onPress={pickImage}>{t('common.upload')}</Button>
42+
</Row>
43+
</Box>
44+
)
45+
}
46+
47+
const styles = StyleSheet.create({
48+
image: {
49+
height: '100%',
50+
width: '100%',
51+
},
52+
imageContainer: {
53+
alignSelf: 'center',
54+
borderRadius: 50,
55+
height: 100,
56+
marginBottom: 10,
57+
overflow: 'hidden',
58+
width: 100,
59+
},
60+
marginBottom: {
61+
marginBottom: 10,
62+
},
63+
placeholder: {
64+
alignItems: 'center',
65+
height: '100%',
66+
justifyContent: 'center',
67+
width: '100%',
68+
// backgroundColor: '#e0e0e0',
69+
},
70+
placeholderText: {
71+
// color: '#888',
72+
},
73+
})

‎src/i18n/translations/en.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@
2828
"remove": "Remove",
2929
"save": "Save",
3030
"change": "Change",
31+
"upload": "Upload",
3132
"search": "Search",
3233
"try_again_later": "Please try again later",
3334
"try_again": "Try again"
@@ -239,7 +240,9 @@
239240
"update_your_details": "Update your personal details here.",
240241
"remove_account": "Remove account",
241242
"are_you_sure": "Are you sure?",
242-
"remove_account_desc": "This action cannot be undone.\n\nYou will lose access to your account. If you have an active subscription you will lose access to it.\n\nPlease make sure you are certain about this action."
243+
"remove_account_desc": "This action cannot be undone.\n\nYou will lose access to your account. If you have an active subscription you will lose access to it.\n\nPlease make sure you are certain about this action.",
244+
"your_photo": "Your photo",
245+
"your_photo_description": "This will be displayed on your profile."
243246
},
244247
"sign_in_screen": {
245248
"do_not_have_an_account": "Don't have an account?",

‎src/screens/ProfileScreen.tsx‎

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import { ProfileDeleteAccountButton } from '@baca/components/screens/profile/ProfileDeleteAccountButton'
22
import { ProfileDetailsForm } from '@baca/components/screens/profile/ProfileDetailsForm'
3+
import { ProfileEditImage } from '@baca/components/screens/profile/ProfileEditImage'
34
import { ProfileHeader } from '@baca/components/screens/profile/ProfileHeader'
45
import { ProfilePasswordForm } from '@baca/components/screens/profile/ProfilePasswordForm'
5-
import { Box, Spacer } from '@baca/design-system'
6+
import { Box, ScrollView, Spacer } from '@baca/design-system'
67
import { useTranslation, useScreenOptions } from '@baca/hooks'
78

89
export const ProfileScreen = () => {
@@ -13,15 +14,18 @@ export const ProfileScreen = () => {
1314
})
1415

1516
return (
16-
<Box p={4}>
17-
<ProfileHeader />
18-
<Spacer y={4} />
19-
<ProfileDetailsForm />
20-
<Spacer y={4} />
21-
<ProfilePasswordForm />
22-
<Spacer y={4} />
23-
<ProfileDeleteAccountButton />
24-
</Box>
17+
<ScrollView>
18+
<Box p={4}>
19+
<ProfileHeader />
20+
<Spacer y={4} />
21+
<ProfileEditImage />
22+
<Spacer y={4} />
23+
<ProfileDetailsForm />
24+
<Spacer y={4} />
25+
<ProfilePasswordForm />
26+
<Spacer y={4} />
27+
<ProfileDeleteAccountButton />
28+
</Box>
29+
</ScrollView>
2530
)
2631
}
27-
//first commit on this branch

‎yarn.lock‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6858,6 +6858,18 @@ expo-haptics@~12.8.1:
68586858
resolved "https://registry.yarnpkg.com/expo-haptics/-/expo-haptics-12.8.1.tgz#42b996763be33d661bd33bbc3b3958c3f2734b9d"
68596859
integrity sha512-ntLsHkfle8K8w9MW8pZEw92ZN3sguaGUSSIxv30fPKNeQFu7Cq/h47Qv3tONv2MO3wU48N9FbKnant6XlfptpA==
68606860

6861+
expo-image-loader@~4.6.0:
6862+
version "4.6.0"
6863+
resolved "https://registry.yarnpkg.com/expo-image-loader/-/expo-image-loader-4.6.0.tgz#ca7d4fdf53125bff2091d3a2c34a3155f10df147"
6864+
integrity sha512-RHQTDak7/KyhWUxikn2yNzXL7i2cs16cMp6gEAgkHOjVhoCJQoOJ0Ljrt4cKQ3IowxgCuOrAgSUzGkqs7omj8Q==
6865+
6866+
expo-image-picker@~14.7.1:
6867+
version "14.7.1"
6868+
resolved "https://registry.yarnpkg.com/expo-image-picker/-/expo-image-picker-14.7.1.tgz#c51faff3a3fbffc6ae93d7155370beb1a2d2baea"
6869+
integrity sha512-ILQVOJgI3aEzrDmCFGDPtpAepYkn8mot8G7vfQ51BfFdQbzL6N3Wm1fS/ofdWlAZJl/qT2DwaIh5xYmf3SyGZA==
6870+
dependencies:
6871+
expo-image-loader "~4.6.0"
6872+
68616873
expo-json-utils@~0.12.0:
68626874
version "0.12.3"
68636875
resolved "https://registry.yarnpkg.com/expo-json-utils/-/expo-json-utils-0.12.3.tgz#cabb704a344d6d75f225cf4032c64479e442a2a9"

0 commit comments

Comments
 (0)