Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
// @flow
import React, { useState } from 'react';
import { KeyboardAvoidingView, ScrollView, Text, View } from 'react-native';
import { Header } from '../../components/Header';
import { Button } from '../../components/Button';
import { ProfileImage } from '../../components/ProfileImage';
import PostInput from '../../components/PostInput';
import PostBody from '../../components/PostBody';
import useMe from '../../hooks/useMe';
import useUser from '../../hooks/useUser';
import { style } from './style';
import type { NavigationScreenProps } from '../../types';
import { whiteLabelConfig, isAndroid } from '../../config';
import InputCalendar from '../../components/InputCalendar';
import unixDateToString from '../../utils/unixDateToString';
type EditUserProfileScreenProps = NavigationScreenProps & {};
const EditUserProfile = (props: EditUserProfileScreenProps) => {
const { navigation } = props;
const { goBack } = navigation;
const { updateUser } = useUser();
const {
id,
image,
name,
phone,
bio,
birthday,
start_date,
position,
} = useMe();
const formatTime = 'DD MMMM YYYY';
const [positionUser, setPositionUser] = useState(position);
const [startDateUser, setStartDateUser] = useState(
start_date && unixDateToString(start_date, formatTime),
);
const [birthdayDate, setBirthdayDate] = useState(
birthday && unixDateToString(birthday / 1000, formatTime),
);
const [phoneNumber, setPhoneNumber] = useState(phone);
const [biographyUser, setBiographyUser] = useState(bio);
const handleSave = () => {
updateUser({
id,
position: positionUser,
birthday: birthdayDate,
phone: phoneNumber,
bio: biographyUser,
start_date: startDateUser,
}).then(goBack);
};
// Lets create a function that handles the `setPhoneNumber` state
// So we can do additional Checks...
const handleSetPhoneNumber = (value: string) => { // this will give us the number.
// Inside here,
// We need to do the,
// What you should do is match the value against a regex and if it is true/false...
// IF there's no error message (otherwise we will always set a new message for no reason).
const isError = value.match(/my-regex/)
if (!errorMessage && isError) {
setErrorMessage("Can't contain letters/text")
}
handleSetPhoneNumber(value)
}
return (
<KeyboardAvoidingView
style={style.full}
behavior={isAndroid ? null : 'padding'}>
<Header
title="View post"
backAction={() => goBack()}
dark={whiteLabelConfig.userSingleDarkHeaderMode}
/>
<ScrollView
keyboardShouldPersistTaps="handled"
contentContainerStyle={style.container}>
<View style={style.center}>
<View>
<ProfileImage
image={image}
imageUpload
imageUploadIcon
onUpload={file => updateUser({ id, image: file })}
size={130}
username={name}
/>
</View>
<Text style={style.name}>{name}</Text>
</View>
<View style={style.inputWrap}>
<PostInput
autoCorrect
value={positionUser}
label="Job title"
onChange={value => setPositionUser(value)}
/>
<View style={style.positionWrap} />
<InputCalendar
value={startDateUser}
label="Employment start date"
onChange={value => setStartDateUser(value)}
withCard
/>
<InputCalendar
value={birthdayDate}
label="Birthday"
onChange={value => setBirthdayDate(value)}
withCard
/>
<PostInput
label="Phone number"
autoCorrect
value={phoneNumber}
onChange={handleSetPhoneNumber} // here we change the function to handleSetPhoneNumber
/>
<PostBody
label="Bio"
onChange={value => setBiographyUser(value)}
value={biographyUser}
iconImageVisible={false}
autoCorrect
/>
</View>
<View style={{ width: '100%' }}>
<Button text="Save" onPress={() => handleSave()} />
</View>
</ScrollView>
</KeyboardAvoidingView>
);
};
export default EditUserProfile;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment