@dxos/react-ui 0.1.31 → 0.1.32-next.77d513e

package/src/panels/JoinPanel/JoinPanel.tsx

@@ -1,18 +1,17 @@
 //
 // Copyright 2023 DXOS.org
 //
-import React, { useEffect, useReducer, useState } from 'react';
+import React, { useEffect } from 'react';
 
-import { InvitationEncoder } from '@dxos/client';
 import { log } from '@dxos/log';
 import { useClient, useIdentity } from '@dxos/react-client';
-import { DensityProvider, useId } from '@dxos/react-components';
+import { DensityProvider, useId, useThemeContext } from '@dxos/react-components';
 
 import { JoinHeading } from './JoinHeading';
-import { JoinAction, JoinPanelProps, JoinState } from './JoinPanelProps';
+import { JoinPanelProps } from './JoinPanelProps';
+import { useJoinMachine } from './joinMachine';
 import {
   AdditionMethodSelector,
-  IdentitySelector,
   IdentityInput,
   IdentityAdded,
   InvitationAuthenticator,
@@ -22,9 +21,8 @@ import {
 } from './view-states';
 
 export const JoinPanel = ({
-  mode,
+  mode = 'default',
   initialInvitationCode,
-  titleId: propsTitleId,
   exitActionParent,
   onExit,
   doneActionParent,
@@ -32,287 +30,212 @@ export const JoinPanel = ({
   preventExit
 }: JoinPanelProps) => {
   const client = useClient();
-  const internalTitleId = useId('joinPanel__title');
-  const titleId = propsTitleId ?? internalTitleId;
   const identity = useIdentity();
-  const [prevIdentity, setPrevIdentity] = useState(identity);
-  const availableIdentities = identity ? [identity] : [];
+  const titleId = useId('joinPanel__title');
+  const { hasIosKeyboard } = useThemeContext();
 
-  const reducer = (state: JoinState, action: JoinAction) => {
-    const nextState = { ...state };
-    switch (action.type) {
-      case 'added identity':
-        nextState.activeView = 'identity added';
-        nextState.selectedIdentity = action.identity;
-        break;
-      case 'add identity':
-        nextState.activeView = 'addition method selector';
-        break;
-      case 'select addition method':
-        if (action.method === 'accept device invitation') {
-          nextState.activeView = 'halo invitation acceptor';
-          if (state.unredeemedHaloInvitationCode) {
-            nextState.haloInvitation = client.halo.acceptInvitation(
-              InvitationEncoder.decode(state.unredeemedHaloInvitationCode)
-            );
-            nextState.unredeemedHaloInvitationCode = undefined;
-            nextState.haloViewState = 'invitation authenticator';
-          } else {
-            nextState.haloViewState = 'invitation input';
-          }
-        } else {
-          nextState.activeView = 'identity input';
-          nextState.additionMethod = action.method;
-        }
-        break;
-      case 'select identity':
-        nextState.selectedIdentity = action.identity;
-        nextState.activeView = 'space invitation acceptor';
-        if (state.unredeemedSpaceInvitationCode) {
-          nextState.spaceInvitation = client.echo.acceptInvitation(
-            InvitationEncoder.decode(state.unredeemedSpaceInvitationCode)
-          );
-          nextState.unredeemedSpaceInvitationCode = undefined;
-          nextState.spaceViewState = 'invitation authenticator';
-        } else {
-          nextState.spaceViewState = 'invitation input';
-        }
-        break;
-      case 'deselect identity':
-        nextState.selectedIdentity = undefined;
-        nextState.activeView = 'identity selector';
-        break;
-      case 'cancel invitation':
-        if (action.from === 'space' && state.spaceInvitation?.invitation) {
-          void state.spaceInvitation?.cancel();
-        }
-        if (action.from === 'halo' && state.haloInvitation?.invitation) {
-          void state.haloInvitation?.cancel();
-        }
-        break;
-      case 'authenticating invitation':
-        nextState[action.from === 'halo' ? 'haloInvitationAnnotation' : 'spaceInvitationAnnotation'] = 'authenticating';
-        break;
-      case 'connecting invitation':
-        nextState[action.from === 'halo' ? 'haloInvitation' : 'spaceInvitation'] = action.invitation;
-      // eslint-disable-next-line no-fallthrough
-      case 'cancelled invitation':
-      case 'fail invitation':
-      case 'timeout invitation':
-        nextState[action.from === 'halo' ? 'haloViewState' : 'spaceViewState'] = 'invitation rescuer';
-        break;
-      case 'connect invitation':
-      case 'authenticate invitation':
-        if (action.from === 'halo' && state.haloInvitationAnnotation === 'authenticating') {
-          nextState.haloInvitationAnnotation = 'authentication failed';
-        }
-        if (action.from === 'space' && state.spaceInvitationAnnotation === 'authenticating') {
-          nextState.spaceInvitationAnnotation = 'authentication failed';
-        }
-        nextState[action.from === 'halo' ? 'haloViewState' : 'spaceViewState'] = 'invitation authenticator';
-        break;
-      case 'accepted invitation':
-        nextState[action.from === 'halo' ? 'haloViewState' : 'spaceViewState'] = 'invitation accepted';
-        break;
-      case 'reset invitation':
-        nextState[action.from === 'halo' ? 'haloInvitation' : 'spaceInvitation'] = undefined;
-        nextState[action.from === 'halo' ? 'haloInvitationAnnotation' : 'spaceInvitationAnnotation'] = undefined;
-        nextState[action.from === 'halo' ? 'unredeemedHaloInvitationCode' : 'unredeemedSpaceInvitationCode'] =
-          undefined;
-        nextState[action.from === 'halo' ? 'haloViewState' : 'spaceViewState'] = 'invitation input';
-        break;
+  const [joinState, joinSend, joinService] = useJoinMachine(client, {
+    context: {
+      mode,
+      identity,
+      ...(initialInvitationCode && {
+        [mode === 'halo-only' ? 'halo' : 'space']: { unredeemedCode: initialInvitationCode }
+      })
     }
-    log('[join panel reducer]', { action, nextState });
-    return nextState;
-  };
-
-  const unredeemedHaloInvitationCode = mode === 'halo-only' ? initialInvitationCode : undefined;
-  const [joinState, dispatch] = useReducer(reducer, {
-    unredeemedHaloInvitationCode,
-    unredeemedSpaceInvitationCode: mode === 'halo-only' ? undefined : initialInvitationCode,
-    spaceInvitation: undefined,
-    haloInvitation: undefined,
-    activeView: availableIdentities.length > 0 ? 'identity selector' : 'addition method selector',
-    selectedIdentity: undefined,
-    additionMethod: undefined,
-    spaceViewState: 'invitation input',
-    haloViewState: 'invitation input'
   });
 
-  if (identity !== prevIdentity) {
-    setPrevIdentity(identity);
-    identity && !prevIdentity && dispatch({ type: 'added identity', identity });
-  }
-
   useEffect(() => {
-    if (unredeemedHaloInvitationCode) {
-      dispatch({ type: 'select addition method', method: 'accept device invitation' });
-    }
-  }, [unredeemedHaloInvitationCode]);
+    const subscription = joinService.subscribe((state) => {
+      log('[state]', state);
+    });
+
+    return subscription.unsubscribe;
+  }, [joinService]);
 
   useEffect(() => {
     // TODO(thure): Validate if this is sufficiently synchronous for iOS to move focus. It might not be!
-    const attrValue =
-      joinState.activeView === 'identity input'
-        ? `${joinState.activeView}; ${joinState.additionMethod}`
-        : joinState.activeView === 'space invitation acceptor'
-        ? `${joinState.activeView}; ${joinState.spaceViewState}`
-        : joinState.activeView === 'halo invitation acceptor'
-        ? `${joinState.activeView}; ${joinState.haloViewState}`
-        : joinState.activeView;
-    log('[autofocus value]', { attrValue });
-    const $nextAutofocus: HTMLElement | null = document.querySelector(`[data-autofocus="${attrValue}"]`);
-    if ($nextAutofocus) {
+    const stateStack = joinState.configuration[0].id.split('.');
+    const innermostState = stateStack[stateStack.length - 1];
+    const autoFocusValue = innermostState === 'finishingJoining' ? 'successSpaceInvitation' : innermostState;
+    const $nextAutofocus: HTMLElement | null = document.querySelector(`[data-autofocus~="${autoFocusValue}"]`);
+    if ($nextAutofocus && !(hasIosKeyboard && $nextAutofocus.hasAttribute('data-prevent-ios-autofocus'))) {
       $nextAutofocus.focus();
     }
-  }, [joinState.activeView, joinState.spaceViewState, joinState.haloViewState]);
-
-  useEffect(() => {
-    return joinState.spaceInvitation?.subscribe({
-      onAuthenticating: () => dispatch({ type: 'authenticate invitation', from: 'space' }),
-      onCancelled: () => dispatch({ type: 'cancelled invitation', from: 'space' }),
-      onConnected: () => dispatch({ type: 'connect invitation', from: 'space' }),
-      onError: () => dispatch({ type: 'fail invitation', from: 'space' }),
-      onSuccess: () => dispatch({ type: 'accepted invitation', from: 'space' }),
-      onTimeout: () => dispatch({ type: 'timeout invitation', from: 'space' })
-    });
-  }, [joinState.spaceInvitation]);
-
-  useEffect(() => {
-    return joinState.haloInvitation?.subscribe({
-      onAuthenticating: () => dispatch({ type: 'authenticate invitation', from: 'halo' }),
-      onCancelled: () => dispatch({ type: 'cancelled invitation', from: 'halo' }),
-      onConnected: () => dispatch({ type: 'connect invitation', from: 'halo' }),
-      onError: () => dispatch({ type: 'fail invitation', from: 'halo' }),
-      onSuccess: () => dispatch({ type: 'accepted invitation', from: 'halo' }),
-      onTimeout: () => dispatch({ type: 'timeout invitation', from: 'halo' })
-    });
-  }, [joinState.haloInvitation]);
+  }, [joinState.value, hasIosKeyboard]);
 
   return (
     <DensityProvider density='fine'>
-      <JoinHeading
-        {...{ mode, titleId, invitation: joinState.spaceInvitation, onExit, exitActionParent, preventExit }}
-      />
+      <JoinHeading {...{ mode, titleId, joinState, onExit, exitActionParent, preventExit }} />
       <div role='none' className='is-full overflow-hidden'>
-        <div role='none' className='flex is-[1300%]' aria-live='polite'>
-          <IdentitySelector
-            {...{ dispatch, availableIdentities, active: joinState.activeView === 'identity selector' }}
-          />
+        <div role='none' className='flex is-[1200%]' aria-live='polite'>
           <AdditionMethodSelector
             {...{
-              dispatch,
-              availableIdentities,
-              active: joinState.activeView === 'addition method selector'
+              joinState,
+              joinSend,
+              active: joinState.matches({ choosingIdentity: 'choosingAuthMethod' })
             }}
           />
           <IdentityInput
             {...{
-              dispatch,
-              active: joinState.activeView === 'identity input' && joinState.additionMethod === 'create identity',
+              joinState,
+              joinSend,
+              active: joinState.matches({ choosingIdentity: 'creatingIdentity' }),
               method: 'create identity'
             }}
           />
           <IdentityInput
             {...{
-              dispatch,
-              active: joinState.activeView === 'identity input' && joinState.additionMethod === 'recover identity',
+              joinState,
+              joinSend,
+              active: joinState.matches({ choosingIdentity: 'recoveringIdentity' }),
               method: 'recover identity'
             }}
           />
           <InvitationInput
             {...{
-              dispatch,
-              activeInvitation: joinState.haloInvitation || true,
-              active:
-                joinState.activeView === 'halo invitation acceptor' && joinState.haloViewState === 'invitation input',
-              invitationType: 'halo'
+              joinState,
+              joinSend,
+              active: joinState.matches({
+                choosingIdentity: { acceptingHaloInvitation: 'inputtingHaloInvitationCode' }
+              }),
+              Domain: 'Halo'
             }}
           />
           <InvitationRescuer
             {...{
-              dispatch,
-              activeInvitation: joinState.haloInvitation || true,
-              active:
-                joinState.activeView === 'halo invitation acceptor' && joinState.haloViewState === 'invitation rescuer',
-              invitationType: 'halo'
+              joinState,
+              joinSend,
+              active: [
+                {
+                  choosingIdentity: {
+                    acceptingHaloInvitation: { acceptingRedeemedHaloInvitation: 'connectingHaloInvitation' }
+                  }
+                },
+                {
+                  choosingIdentity: {
+                    acceptingHaloInvitation: { acceptingRedeemedHaloInvitation: 'failingHaloInvitation' }
+                  }
+                }
+              ].some(joinState.matches),
+              Domain: 'Halo'
             }}
           />
           <InvitationAuthenticator
             {...{
-              dispatch,
-              activeInvitation: joinState.haloInvitation || true,
-              active:
-                joinState.activeView === 'halo invitation acceptor' &&
-                joinState.haloViewState === 'invitation authenticator',
-              invitationType: 'halo',
-              ...(joinState.spaceInvitationAnnotation === 'authentication failed' && { failed: true })
+              joinState,
+              joinSend,
+              active: [
+                {
+                  choosingIdentity: {
+                    acceptingHaloInvitation: { acceptingRedeemedHaloInvitation: 'inputtingHaloVerificationCode' }
+                  }
+                },
+                {
+                  choosingIdentity: {
+                    acceptingHaloInvitation: { acceptingRedeemedHaloInvitation: 'authenticatingHaloVerificationCode' }
+                  }
+                },
+                {
+                  choosingIdentity: {
+                    acceptingHaloInvitation: {
+                      acceptingRedeemedHaloInvitation: 'authenticationFailingHaloVerificationCode'
+                    }
+                  }
+                }
+              ].some(joinState.matches),
+              Domain: 'Halo',
+              ...(joinState.matches({
+                acceptingHaloInvitation: {
+                  acceptingRedeemedHaloInvitation: 'authenticationFailingHaloVerificationCode'
+                }
+              }) && { failed: true })
             }}
           />
           <InvitationAccepted
             {...{
-              dispatch,
-              activeInvitation: joinState.haloInvitation || true,
-              active:
-                joinState.activeView === 'halo invitation acceptor' &&
-                joinState.haloViewState === 'invitation accepted',
-              invitationType: 'halo',
+              joinState,
+              joinSend,
+              active: [
+                {
+                  choosingIdentity: {
+                    acceptingHaloInvitation: { acceptingRedeemedHaloInvitation: 'successHaloInvitation' }
+                  }
+                },
+                'finishingJoiningHalo'
+              ].some(joinState.matches),
+              Domain: 'Halo',
               doneActionParent,
               onDone
             }}
           />
           <IdentityAdded
             {...{
+              joinState,
+              joinSend,
               mode,
-              dispatch,
-              addedIdentity: joinState.selectedIdentity,
-              active: joinState.activeView === 'identity added',
+              active: joinState.matches({
+                choosingIdentity: 'confirmingAddedIdentity'
+              }),
               doneActionParent,
               onDone
             }}
           />
           <InvitationInput
             {...{
-              dispatch,
-              activeInvitation: joinState.spaceInvitation || true,
-              selectedIdentity: joinState.selectedIdentity,
-              active:
-                joinState.activeView === 'space invitation acceptor' && joinState.spaceViewState === 'invitation input',
-              invitationType: 'space'
+              joinState,
+              joinSend,
+              active: joinState.matches({
+                acceptingSpaceInvitation: 'inputtingSpaceInvitationCode'
+              }),
+              Domain: 'Space'
             }}
           />
           <InvitationRescuer
             {...{
-              dispatch,
-              activeInvitation: joinState.spaceInvitation || true,
-              selectedIdentity: joinState.selectedIdentity,
-              active:
-                joinState.activeView === 'space invitation acceptor' &&
-                joinState.spaceViewState === 'invitation rescuer',
-              invitationType: 'space'
+              joinState,
+              joinSend,
+              active: [
+                {
+                  acceptingSpaceInvitation: { acceptingRedeemedSpaceInvitation: 'connectingSpaceInvitation' }
+                },
+                {
+                  acceptingSpaceInvitation: { acceptingRedeemedSpaceInvitation: 'failingSpaceInvitation' }
+                }
+              ].some(joinState.matches),
+              Domain: 'Space'
             }}
           />
           <InvitationAuthenticator
             {...{
-              dispatch,
-              activeInvitation: joinState.spaceInvitation || true,
-              selectedIdentity: joinState.selectedIdentity,
-              active:
-                joinState.activeView === 'space invitation acceptor' &&
-                joinState.spaceViewState === 'invitation authenticator',
-              invitationType: 'space',
-              ...(joinState.spaceInvitationAnnotation === 'authentication failed' && { failed: true })
+              joinState,
+              joinSend,
+              active: [
+                {
+                  acceptingSpaceInvitation: { acceptingRedeemedSpaceInvitation: 'inputtingSpaceVerificationCode' }
+                },
+                {
+                  acceptingSpaceInvitation: { acceptingRedeemedSpaceInvitation: 'authenticatingSpaceVerificationCode' }
+                },
+                {
+                  acceptingSpaceInvitation: {
+                    acceptingRedeemedSpaceInvitation: 'authenticationFailingSpaceVerificationCode'
+                  }
+                }
+              ].some(joinState.matches),
+              Domain: 'Space',
+              ...(joinState.matches({
+                acceptingSpaceInvitation: {
+                  acceptingRedeemedSpaceInvitation: 'authenticationFailingSpaceVerificationCode'
+                }
+              }) && { failed: true })
             }}
           />
           <InvitationAccepted
             {...{
-              dispatch,
-              activeInvitation: joinState.spaceInvitation || true,
-              selectedIdentity: joinState.selectedIdentity,
-              active:
-                joinState.activeView === 'space invitation acceptor' &&
-                joinState.spaceViewState === 'invitation accepted',
-              invitationType: 'space',
+              joinState,
+              joinSend,
+              active: joinState.matches('finishingJoiningSpace'),
+              Domain: 'Space',
               doneActionParent,
               onDone
             }}

package/src/panels/JoinPanel/JoinPanelProps.ts

@@ -59,7 +59,7 @@ export interface AdditionMethodAction {
 
 export type JoinAction = IdentityAction | EmptyJoinAction | AdditionMethodAction | InvitationAction;
 
-export type JoinDispatch = Dispatch<JoinAction>;
+export type JoinSend = Dispatch<JoinAction>;
 
 export type InvitationView =
   | 'invitation input'