EditUserProfile.js

// @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;