feat: Add Invite Loading State

lifeomic · Feb 14, 2024 · ac3eb38 · ac3eb38
1 parent c9ec0de
commit ac3eb38
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 7 deletions.
diff --git a/src/components/Invitations/InviteNotifier.ts b/src/components/Invitations/InviteNotifier.ts
@@ -5,6 +5,11 @@ export type InviteParams = PendingInvite;
 
 export type EventTypeHandlers = {
   inviteDetected: (inviteParams: InviteParams) => void;
+  inviteLoadingStateChanged: (state: {
+    loading?: boolean;
+    failedToDecode?: boolean;
+    failureMessage?: string;
+  }) => void;
 };
 
 export type EventTypes = keyof EventTypeHandlers;

diff --git a/src/components/Invitations/InviteProvider.tsx b/src/components/Invitations/InviteProvider.tsx
@@ -18,15 +18,32 @@ export type PendingInvite = {
 const usePendingInviteStore = create<PendingInvite | undefined>(
   () => undefined,
 );
-
-inviteNotifier.addListener('inviteDetected', (invite) =>
-  usePendingInviteStore.setState(invite),
+const usePendingInviteStateStore = create<{
+  loading?: boolean;
+  failedToDecode?: boolean;
+  failureMessage?: string;
+}>(() => ({}));
+
+inviteNotifier.addListener('inviteDetected', (invite) => {
+  usePendingInviteStore.setState(invite);
+  usePendingInviteStateStore.setState({
+    loading: false,
+    failedToDecode: false,
+    failureMessage: undefined,
+  });
+});
+inviteNotifier.addListener('inviteLoadingStateChanged', (state) =>
+  usePendingInviteStateStore.setState(state, true),
 );
 
 export const usePendingInvite = () => {
   return usePendingInviteStore();
 };
 
+export const usePendingInviteState = () => {
+  return usePendingInviteStateStore();
+};
+
 export const clearPendingInvite = () => {
   usePendingInviteStore.setState(undefined);
 };

diff --git a/src/screens/LoginScreen.test.tsx b/src/screens/LoginScreen.test.tsx
@@ -55,6 +55,20 @@ describe('LoginScreen', () => {
     expect(getByText('Login')).toBeDefined();
   });
 
+  it('renders invite loading', () => {
+    inviteNotifier.emit('inviteLoadingStateChanged', { loading: true });
+
+    const { getByText } = render(loginScreenInContext);
+    expect(getByText('Loading')).toBeDefined();
+  });
+
+  it('renders invite error invite failed to decode', () => {
+    inviteNotifier.emit('inviteLoadingStateChanged', { failedToDecode: true });
+
+    const { getByText } = render(loginScreenInContext);
+    expect(getByText('Invite Error Occurred')).toBeDefined();
+  });
+
   it('renders accept invite if inviteID present', () => {
     inviteNotifier.emit('inviteDetected', { inviteId: 'someInviteId' });
 

diff --git a/src/screens/LoginScreen.tsx b/src/screens/LoginScreen.tsx
@@ -3,10 +3,14 @@ import { View, StyleSheet } from 'react-native';
 import { t } from 'i18next';
 import { OAuthLoginButton } from '../components/OAuthLoginButton';
 import { useStyles, useDeveloperConfig } from '../hooks/';
-import { usePendingInvite } from '../components/Invitations/InviteProvider';
+import {
+  usePendingInvite,
+  usePendingInviteState,
+} from '../components/Invitations/InviteProvider';
 import { createStyles, useIcons } from '../components/BrandConfigProvider';
 import LaunchScreen from '../components/LaunchScreen';
 import { Dialog, Portal, Text } from 'react-native-paper';
+import compact from 'lodash/compact';
 
 export const LoginScreen: FC = () => {
   const { renderCustomLoginScreen, componentProps = {} } = useDeveloperConfig();
@@ -15,6 +19,7 @@ export const LoginScreen: FC = () => {
   const [errorText, setErrorText] = useState('');
   const { AlertTriangle } = useIcons();
   const pendingInvite = usePendingInvite();
+  const { loading, failedToDecode, failureMessage } = usePendingInviteState();
   const { LoginScreen: loginScreenProps = {} } = componentProps;
 
   const hideDialog = () => {
@@ -23,6 +28,9 @@ export const LoginScreen: FC = () => {
   };
 
   const getLoginButtonText = () => {
+    if (loading) {
+      return t('login-button-loading-invite', 'Loading');
+    }
     if (pendingInvite) {
       return (
         loginScreenProps.acceptInviteText ??
@@ -61,7 +69,23 @@ export const LoginScreen: FC = () => {
       <View style={styles.containerView}>
         <LaunchScreen key="launch-screen" style={StyleSheet.absoluteFill} />
         <View style={styles.buttonContainer}>
-          <OAuthLoginButton label={getLoginButtonText()} onFail={onFail} />
+          <OAuthLoginButton
+            label={getLoginButtonText()}
+            onFail={onFail}
+            loading={loading}
+            disabled={loading || failedToDecode}
+          />
+          {failedToDecode && (
+            <Text
+              style={styles.inviteErrorText}
+              suppressHighlighting
+              onLongPress={() => {
+                setVisible(true);
+              }}
+            >
+              {t('login-invite-error', 'Invite Error Occurred')}
+            </Text>
+          )}
         </View>
       </View>
       <Portal>
@@ -71,15 +95,17 @@ export const LoginScreen: FC = () => {
             {t('login-error-title', 'Authentication Error')}
           </Dialog.Title>
           <Dialog.Content>
-            <Text variant="bodyMedium">{errorText}</Text>
+            <Text variant="bodyMedium">
+              {compact([errorText, failureMessage]).join('\n')}
+            </Text>
           </Dialog.Content>
         </Dialog>
       </Portal>
     </>
   );
 };
 
-const defaultStyles = createStyles('LoginScreen', () => ({
+const defaultStyles = createStyles('LoginScreen', (theme) => ({
   containerView: {
     flex: 1,
     justifyContent: 'flex-end',
@@ -90,6 +116,11 @@ const defaultStyles = createStyles('LoginScreen', () => ({
     width: '100%',
     paddingHorizontal: 30,
   },
+  inviteErrorText: {
+    color: theme.colors.error,
+    textAlign: 'center',
+    paddingVertical: theme.spacing.small,
+  },
 }));
 
 declare module '@styles' {