Stormotion Login

import auth from '@react-native-firebase/auth';
import {Linking, TouchableWithoutFeedback, View} from 'react-native';
import {SkippedContext} from '../../App';
import HNButton from '../components/HNButton';
import HNTextField from '../components/HNTextField';
import UserWithTabletIcon from '../components/icons/UserWithTabletIcon';
import HeaderText from '../components/texts/HeaderText';
import Roboto from '../components/texts/Roboto';
import SubheaderText from '../components/texts/SubheaderText';
import TwoPartsScreen from '../components/TwoPartsScreen';
import config from '../config';
import {useSetEmailDataMutation} from '../generated/graphql';
import useField from '../hooks/useField';
import colors from '../theme/colors';
import strings from '../theme/strings';
import getSubmitDisabled from '../utils/getSubmitDisabled';
import React, {
  Fragment,
  useCallback,
  useContext,
  useState,
  useMemo,
} from 'react';

interface Props {}

const Login: React.FunctionComponent<Props> = () => {
  const [email, onChangeText, error] = useField('', 'email');
  const [loginPressed, setLoginPressed] = useState(false);
  const [setEmail] = useSetEmailDataMutation();

  const onPressLogin = useCallback(() => {
    setLoginPressed(true);
    setEmail({variables: {emailData: email}});
    auth().sendSignInLinkToEmail(email, {
      handleCodeInApp: true,
      iOS: {bundleId: config.ios.bundleId},
      android: {packageName: config.android.packageName},
      url: config.auth.deepLinkUrl,
    });
  }, [auth, email, setEmail]);

  const loginDisabled = useMemo(
    () => getSubmitDisabled(error) || loginPressed,
    [error, loginPressed],
  );

  const {setSkippedAuth} = useContext(SkippedContext);
  const onPressLater = useCallback(() => {
    setSkippedAuth(true);
  }, [setSkippedAuth]);

  return (
    <View style={{flex: 1}}>
      <TwoPartsScreen
        topComponent={
          <View
            style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
            <UserWithTabletIcon />
          </View>
        }
        centerComponent={
          <Fragment>
            {!loginPressed && (
              <HNButton
                useShadow
                font="bold"
                title={strings.auth.signUpLater}
                onPress={onPressLater}
                disabledStyle={{backgroundColor: `${colors.primary}50`}}
                disabledTitleStyle={{color: 'white'}}
              />
            )}
          </Fragment>
        }>
        <View
          style={{
            flex: 1,
            justifyContent: 'space-between',
            paddingVertical: 20,
            paddingHorizontal: 40,
          }}>
          <FieldWithDescription
            loginPressed={loginPressed}
            value={email}
            onChangeText={onChangeText}
            error={error}
          />
          <Buttons onPressLogin={onPressLogin} loginDisabled={loginDisabled} />
        </View>
      </TwoPartsScreen>
    </View>
  );
};

interface FieldWithDescriptionProps {
  loginPressed: boolean;
  value: string;
  onChangeText: (text: string) => void;
  error?: boolean;
}
const FieldWithDescription: React.FunctionComponent<FieldWithDescriptionProps> = React.memo(
  ({loginPressed, value, onChangeText, error}) => {
    const onPressLink = useCallback(() => {
      Linking.openURL(strings.auth.privacyLink);
    }, []);

    return (
      <View style={{flex: 1, justifyContent: 'center'}}>
        {loginPressed ? (
          <HeaderText>{strings.auth.weSentEmail}</HeaderText>
        ) : (
          <Fragment>
            <HeaderText style={{marginBottom: 24}}>
              {strings.auth.enterEmail}
            </HeaderText>
            <HNTextField
              value={value}
              keyboardType="email-address"
              onChangeText={onChangeText}
              placeholder={strings.auth.email}
              errorText={strings.auth.emailError}
              error={error}
            />
            <SubheaderText color={colors.primaryLight}>
              {strings.auth.passwordWilCome}
            </SubheaderText>
            <SubheaderText style={{marginTop: 8}} color={colors.primaryLight}>
              {strings.auth.privacyInfo}
            </SubheaderText>
            <TouchableWithoutFeedback onPress={onPressLink}>
              <Roboto textAlign="center" fontSize={14} color={colors.primary}>
                {strings.auth.privacy}
              </Roboto>
            </TouchableWithoutFeedback>
          </Fragment>
        )}
      </View>
    );
  },
);

interface ButtonsProps {
  onPressLogin: () => void;
  loginDisabled: boolean;
}
const Buttons: React.FunctionComponent<ButtonsProps> = React.memo(
  ({onPressLogin, loginDisabled}) => {
    return (
      <HNButton
        useShadow
        font="bold"
        onPress={onPressLogin}
        title={strings.auth.login}
        disabled={loginDisabled}
        disabledStyle={{backgroundColor: `${colors.primary}50`}}
        disabledTitleStyle={{color: 'white'}}
      />
    );
  },
);

export default React.memo(Login);