Page MenuHomePhabricator
Differential D12257

[native] Animate CalendarInputBar using Reanimated layout animation
ClosedPublic
Actions

Authored by ashoat on May 31 2024, 8:08 AM.
Tags
None
Referenced Files
Unknown Object (File)
Sun, Mar 30, 11:42 PM
Unknown Object (File)
Jan 13 2025, 8:12 AM
Unknown Object (File)
Jan 4 2025, 5:00 PM
Unknown Object (File)
Jan 4 2025, 5:00 PM
Unknown Object (File)
Jan 4 2025, 5:00 PM
Unknown Object (File)
Jan 4 2025, 5:00 PM
Unknown Object (File)
Jan 4 2025, 5:00 PM
Unknown Object (File)
Dec 25 2024, 1:01 AM
View All 79 Files
Subscribers
tomek

Details

Reviewers
inka
Commits
rCOMM84b0a9a27658: [native] Animate CalendarInputBar using Reanimated layout animation
Summary

Nice and clean! Most of changes here are to update types.

Depends on D12256

Test Plan

Played around on my local simulator and confirmed that the animation works

Diff Detail

Repository
rCOMM Comm
Branch
ashoat/calendar
Lint
No Lint Coverage
Unit
No Test Coverage

Event Timeline

ashoat created this revision.May 31 2024, 8:08 AM
Herald added a subscriber: tomek. · View Herald TranscriptMay 31 2024, 8:08 AM
ashoat added inline comments.May 31 2024, 8:15 AM
native/calendar/calendar-input-bar.react.js
18–21 ↗(On Diff #40807)

Noticed this wasn't memoized for some reason

native/flow-typed/npm/react-native-reanimated_v2.x.x.js
49–51 ↗(On Diff #40807)

I matched these to what we have in native/types/styles.js

370 ↗(On Diff #40807)

Noticed this wasn't read-only for some reason

Harbormaster completed remote builds in B29329: Diff 40807.May 31 2024, 8:28 AM
ashoat requested review of this revision.May 31 2024, 8:28 AM
inka accepted this revision.Jun 3 2024, 1:37 AM
This revision is now accepted and ready to land.Jun 3 2024, 1:37 AM
ashoat updated this revision to Diff 40892.Jun 3 2024, 12:21 PM

Noticed that we weren't wrapping BaseBuilderAnimationConfig with $ReadOnly, despite it including a spread of BaseLayoutAnimationConfig

Updated all types in the react-native-reanimated libdef that have spreads of other types to be wrapped with $ReadOnly

Harbormaster completed remote builds in B29392: Diff 40892.Jun 3 2024, 12:37 PM
Closed by commit rCOMM84b0a9a27658: [native] Animate CalendarInputBar using Reanimated layout animation (authored by ashoat). · Explain WhyJun 4 2024, 3:45 AM
This revision was automatically updated to reflect the committed changes.
ashoat added a commit: rCOMM84b0a9a27658: [native] Animate CalendarInputBar using Reanimated layout animation.

Revision Contents
Changeset List

PathSize
native/
calendar/
16 lines
flow-typed/
npm/
63 lines

Diff 40892

View Options

native/calendar/calendar-input-bar.react.js

// @flow // @flow
import invariant from 'invariant'; import invariant from 'invariant';
import * as React from 'react'; import * as React from 'react';
import { logOutActionTypes, useLogOut } from '../actions/user-actions.js'; import { logOutActionTypes, useLogOut } from '../actions/user-actions.js';
import { connectionSelector } from '../selectors/keyserver-selectors.js'; import {
connectionSelector,
cookieSelector,
} from '../selectors/keyserver-selectors.js';
import { IdentityClientContext } from '../shared/identity-client-context.js'; import { IdentityClientContext } from '../shared/identity-client-context.js';
import { OlmSessionCreatorContext } from '../shared/olm-session-creator-context.js';
import type { BaseSocketProps } from '../socket/socket.react.js'; import type { BaseSocketProps } from '../socket/socket.react.js';
import { useDispatchActionPromise } from '../utils/redux-promise-utils.js'; import { useDispatchActionPromise } from '../utils/redux-promise-utils.js';
import { useSelector } from '../utils/redux-utils.js'; import { useSelector } from '../utils/redux-utils.js';
import { usingCommServicesAccessToken } from '../utils/services-utils.js'; import { usingCommServicesAccessToken } from '../utils/services-utils.js';
import { ashoatKeyserverID } from '../utils/validation-utils.js'; import { ashoatKeyserverID } from '../utils/validation-utils.js';
type Props = { type Props = {
...BaseSocketProps, ...BaseSocketProps,
+keyserverID: string, +keyserverID: string,
+socketComponent: React.ComponentType<BaseSocketProps>, +socketComponent: React.ComponentType<BaseSocketProps>,
}; };
function KeyserverConnectionHandler(props: Props) { function KeyserverConnectionHandler(props: Props) {
const { socketComponent: Socket, keyserverID, ...rest } = props; const { socketComponent: Socket, keyserverID, ...rest } = props;
const dispatchActionPromise = useDispatchActionPromise(); const dispatchActionPromise = useDispatchActionPromise();
const callLogOut = useLogOut(); const callLogOut = useLogOut();
const hasConnectionIssue = useSelector( const hasConnectionIssue = useSelector(
state => !!connectionSelector(keyserverID)(state)?.connectionIssue, state => !!connectionSelector(keyserverID)(state)?.connectionIssue,
); );
const cookie = useSelector(cookieSelector(keyserverID));
React.useEffect(() => { React.useEffect(() => {
if (hasConnectionIssue) { if (hasConnectionIssue) {
void dispatchActionPromise(logOutActionTypes, callLogOut()); void dispatchActionPromise(logOutActionTypes, callLogOut());
} }
}, [callLogOut, hasConnectionIssue, dispatchActionPromise]); }, [callLogOut, hasConnectionIssue, dispatchActionPromise]);
const identityClient = React.useContext( const identityClient = React.useContext(
IdentityClientContext, IdentityClientContext,
)?.identityClient; )?.identityClient;
invariant(identityClient, 'Identity client should be set'); invariant(identityClient, 'Identity client should be set');
const olmSessionCreator = React.useContext(OlmSessionCreatorContext);
invariant(olmSessionCreator, 'Olm session creator should be set');
React.useEffect(() => { React.useEffect(() => {
if (!usingCommServicesAccessToken) { if (!usingCommServicesAccessToken) {
return; return;
} }
void (async () => { void (async () => {
try { try {
const keyserverKeys =
await identityClient.getKeyserverKeys(keyserverID); await identityClient.getKeyserverKeys(keyserverID);
await olmSessionCreator.notificationsSessionCreator(
cookie,
keyserverKeys.identityKeysBlob.notificationIdentityPublicKeys,
keyserverKeys.notifInitializationInfo,
keyserverID,
);
} catch (e) { } catch (e) {
console.log( console.log(
`Error getting keys for keyserver with id ${keyserverID}`, `Error getting keys for keyserver with id ${keyserverID}`,
e, e,
); );
} }
})(); })();
}, [keyserverID, identityClient]); }, [keyserverID, identityClient, olmSessionCreator, cookie]);
if (keyserverID !== ashoatKeyserverID) { if (keyserverID !== ashoatKeyserverID) {
return null; return null;
} }
return <Socket {...rest} />; return <Socket {...rest} />;
} }
const Handler: React.ComponentType<Props> = React.memo<Props>( const Handler: React.ComponentType<Props> = React.memo<Props>(
KeyserverConnectionHandler, KeyserverConnectionHandler,
); );
export default Handler; export default Handler;
View Options

native/flow-typed/npm/react-native-reanimated_v2.x.x.js

// @flow // @flow
import invariant from 'invariant'; import invariant from 'invariant';
import * as React from 'react'; import * as React from 'react';
import { logOutActionTypes, useLogOut } from '../actions/user-actions.js'; import { logOutActionTypes, useLogOut } from '../actions/user-actions.js';
import { connectionSelector } from '../selectors/keyserver-selectors.js'; import {
connectionSelector,
cookieSelector,
} from '../selectors/keyserver-selectors.js';
import { IdentityClientContext } from '../shared/identity-client-context.js'; import { IdentityClientContext } from '../shared/identity-client-context.js';
import { OlmSessionCreatorContext } from '../shared/olm-session-creator-context.js';
import type { BaseSocketProps } from '../socket/socket.react.js'; import type { BaseSocketProps } from '../socket/socket.react.js';
import { useDispatchActionPromise } from '../utils/redux-promise-utils.js'; import { useDispatchActionPromise } from '../utils/redux-promise-utils.js';
import { useSelector } from '../utils/redux-utils.js'; import { useSelector } from '../utils/redux-utils.js';
import { usingCommServicesAccessToken } from '../utils/services-utils.js'; import { usingCommServicesAccessToken } from '../utils/services-utils.js';
import { ashoatKeyserverID } from '../utils/validation-utils.js'; import { ashoatKeyserverID } from '../utils/validation-utils.js';
type Props = { type Props = {
...BaseSocketProps, ...BaseSocketProps,
+keyserverID: string, +keyserverID: string,
+socketComponent: React.ComponentType<BaseSocketProps>, +socketComponent: React.ComponentType<BaseSocketProps>,
}; };
function KeyserverConnectionHandler(props: Props) { function KeyserverConnectionHandler(props: Props) {
const { socketComponent: Socket, keyserverID, ...rest } = props; const { socketComponent: Socket, keyserverID, ...rest } = props;
const dispatchActionPromise = useDispatchActionPromise(); const dispatchActionPromise = useDispatchActionPromise();
const callLogOut = useLogOut(); const callLogOut = useLogOut();
const hasConnectionIssue = useSelector( const hasConnectionIssue = useSelector(
state => !!connectionSelector(keyserverID)(state)?.connectionIssue, state => !!connectionSelector(keyserverID)(state)?.connectionIssue,
); );
const cookie = useSelector(cookieSelector(keyserverID));
React.useEffect(() => { React.useEffect(() => {
if (hasConnectionIssue) { if (hasConnectionIssue) {
void dispatchActionPromise(logOutActionTypes, callLogOut()); void dispatchActionPromise(logOutActionTypes, callLogOut());
} }
}, [callLogOut, hasConnectionIssue, dispatchActionPromise]); }, [callLogOut, hasConnectionIssue, dispatchActionPromise]);
const identityClient = React.useContext( const identityClient = React.useContext(
IdentityClientContext, IdentityClientContext,
)?.identityClient; )?.identityClient;
invariant(identityClient, 'Identity client should be set'); invariant(identityClient, 'Identity client should be set');
const olmSessionCreator = React.useContext(OlmSessionCreatorContext);
invariant(olmSessionCreator, 'Olm session creator should be set');
React.useEffect(() => { React.useEffect(() => {
if (!usingCommServicesAccessToken) { if (!usingCommServicesAccessToken) {
return; return;
} }
void (async () => { void (async () => {
try { try {
const keyserverKeys =
await identityClient.getKeyserverKeys(keyserverID); await identityClient.getKeyserverKeys(keyserverID);
await olmSessionCreator.notificationsSessionCreator(
cookie,
keyserverKeys.identityKeysBlob.notificationIdentityPublicKeys,
keyserverKeys.notifInitializationInfo,
keyserverID,
);
} catch (e) { } catch (e) {
console.log( console.log(
`Error getting keys for keyserver with id ${keyserverID}`, `Error getting keys for keyserver with id ${keyserverID}`,
e, e,
); );
} }
})(); })();
}, [keyserverID, identityClient]); }, [keyserverID, identityClient, olmSessionCreator, cookie]);
if (keyserverID !== ashoatKeyserverID) { if (keyserverID !== ashoatKeyserverID) {
return null; return null;
} }
return <Socket {...rest} />; return <Socket {...rest} />;
} }
const Handler: React.ComponentType<Props> = React.memo<Props>( const Handler: React.ComponentType<Props> = React.memo<Props>(
KeyserverConnectionHandler, KeyserverConnectionHandler,
); );
export default Handler; export default Handler;