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

Fix blank space is shown on iOS safari when magic code screen show #52444

Merged
merged 2 commits into from
Nov 14, 2024
Merged

Fix blank space is shown on iOS safari when magic code screen show #52444

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1b61a28
fix blank space is shown on iOS safari when magic code screen show
bernhardoj Nov 13, 2024
2ad1111
migrate to useOnyx
bernhardoj Nov 13, 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
54 changes: 17 additions & 37 deletions src/pages/signin/SignInPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import {Str} from 'expensify-common';
import React, {forwardRef, useEffect, useImperativeHandle, useRef, useState} from 'react';
import type {ForwardedRef, RefAttributes} from 'react';
import {withOnyx} from 'react-native-onyx';
import type {ForwardedRef} from 'react';
import {useOnyx} from 'react-native-onyx';
import type {OnyxEntry} from 'react-native-onyx';
import ColorSchemeWrapper from '@components/ColorSchemeWrapper';
import CustomStatusBarAndBackground from '@components/CustomStatusBarAndBackground';
Expand All @@ -24,7 +24,7 @@ import * as Session from '@userActions/Session';
import CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';
import ROUTES from '@src/ROUTES';
import type {Account, Credentials, Locale} from '@src/types/onyx';
import type {Account, Credentials} from '@src/types/onyx';
import {isEmptyObject} from '@src/types/utils/EmptyObject';
import ChooseSSOOrMagicCode from './ChooseSSOOrMagicCode';
import EmailDeliveryFailurePage from './EmailDeliveryFailurePage';
Expand All @@ -37,21 +37,7 @@ import UnlinkLoginForm from './UnlinkLoginForm';
import ValidateCodeForm from './ValidateCodeForm';
import type {BaseValidateCodeFormRef} from './ValidateCodeForm/BaseValidateCodeForm';

type SignInPageInnerOnyxProps = {
/** The details about the account that the user is signing in with */
account: OnyxEntry<Account>;

/** The credentials of the person signing in */
credentials: OnyxEntry<Credentials>;

/** Active Clients connected to ONYX Database */
activeClients: OnyxEntry<string[]>;

/** The user's preferred locale */
preferredLocale: OnyxEntry<Locale>;
};

type SignInPageInnerProps = SignInPageInnerOnyxProps & {
type SignInPageInnerProps = {
shouldEnableMaxHeight?: boolean;
};

Expand Down Expand Up @@ -146,8 +132,18 @@ function getRenderOptions({
shouldShouldSignUpWelcomeForm,
};
}

function SignInPage({credentials, account, activeClients = [], preferredLocale, shouldEnableMaxHeight = true}: SignInPageInnerProps, ref: ForwardedRef<SignInPageRef>) {
function SignInPage({shouldEnableMaxHeight = true}: SignInPageInnerProps, ref: ForwardedRef<SignInPageRef>) {
const [credentials] = useOnyx(ONYXKEYS.CREDENTIALS);
const [account] = useOnyx(ONYXKEYS.ACCOUNT);
/**
This variable is only added to make sure the component is re-rendered
whenever the activeClients change, so that we call the
ActiveClientManager.isClientTheLeader function
everytime the leader client changes.
We use that function to prevent repeating code that checks which client is the leader.
*/
const [activeClients] = useOnyx(ONYXKEYS.ACTIVE_CLIENTS);
const [preferredLocale] = useOnyx(ONYXKEYS.NVP_PREFERRED_LOCALE);
const styles = useThemeStyles();
const StyleUtils = useStyleUtils();
const {translate, formatPhoneNumber} = useLocalize();
Expand Down Expand Up @@ -295,7 +291,6 @@ function SignInPage({credentials, account, activeClients = [], preferredLocale,
<ScreenWrapper
shouldShowOfflineIndicator={false}
shouldEnableMaxHeight={shouldEnableMaxHeight}
shouldUseCachedViewportHeight
style={[styles.signInPage, StyleUtils.getSafeAreaPadding({...safeAreaInsets, bottom: 0, top: isInNarrowPaneModal ? 0 : safeAreaInsets.top}, 1)]}
testID={SignInPageThemeWrapper.displayName}
>
Expand Down Expand Up @@ -340,7 +335,6 @@ function SignInPage({credentials, account, activeClients = [], preferredLocale,
}

type SignInPageProps = SignInPageInnerProps;
type SignInPageOnyxProps = SignInPageInnerOnyxProps;
const SignInPageWithRef = forwardRef(SignInPage);

function SignInPageThemeWrapper(props: SignInPageProps, ref: ForwardedRef<SignInPageRef>) {
Expand All @@ -362,20 +356,6 @@ function SignInPageThemeWrapper(props: SignInPageProps, ref: ForwardedRef<SignIn

SignInPageThemeWrapper.displayName = 'SignInPage';

export default withOnyx<SignInPageProps & RefAttributes<SignInPageRef>, SignInPageOnyxProps>({
account: {key: ONYXKEYS.ACCOUNT},
credentials: {key: ONYXKEYS.CREDENTIALS},
/**
This variable is only added to make sure the component is re-rendered
whenever the activeClients change, so that we call the
ActiveClientManager.isClientTheLeader function
everytime the leader client changes.
We use that function to prevent repeating code that checks which client is the leader.
*/
activeClients: {key: ONYXKEYS.ACTIVE_CLIENTS},
preferredLocale: {
key: ONYXKEYS.NVP_PREFERRED_LOCALE,
},
})(forwardRef(SignInPageThemeWrapper));
export default forwardRef(SignInPageThemeWrapper);

export type {SignInPageRef};
Loading