Page MenuHomePhabricator
Differential D13194

[native] Simplify nux tips props design
ClosedPublic
Actions

Authored by inka on Aug 28 2024, 7:04 AM.
Tags
None
Referenced Files
Unknown Object (File)
Mar 2 2025, 9:46 AM
Unknown Object (File)
Feb 24 2025, 8:29 PM
Unknown Object (File)
Feb 17 2025, 11:30 PM
Unknown Object (File)
Feb 17 2025, 11:30 PM
Unknown Object (File)
Feb 17 2025, 11:30 PM
Unknown Object (File)
Feb 17 2025, 11:30 PM
Unknown Object (File)
Feb 17 2025, 11:30 PM
Unknown Object (File)
Feb 17 2025, 2:10 PM
View All 68 Files
Subscribers
ashoat

Details

Reviewers
tomek
will
Commits
rCOMM480cb0e9128c: [native] Simplify nux tips props design
Summary

This improves code readability

Test Plan

tested that the tips show up correctly on first app launch

Diff Detail

Repository
rCOMM Comm
Branch
inka/nux
Lint
No Lint Coverage
Unit
No Test Coverage

Event Timeline

inka created this revision.Aug 28 2024, 7:04 AM
Herald added a subscriber: ashoat. · View Herald TranscriptAug 28 2024, 7:04 AM
inka added a parent revision: D13180: [native] Create intro tip.Aug 28 2024, 7:05 AM
inka mentioned this in D13180: [native] Create intro tip.Aug 28 2024, 7:07 AM
Harbormaster completed remote builds in B31338: Diff 43748.Aug 28 2024, 7:21 AM
inka requested review of this revision.Aug 28 2024, 7:21 AM
tomek accepted this revision.Aug 28 2024, 8:26 AM
tomek added inline comments.
native/components/nux-tips-context.react.js
35–37

We can simplify it now

This revision is now accepted and ready to land.Aug 28 2024, 8:26 AM
inka updated this revision to Diff 43791.Aug 29 2024, 3:15 AM

Address review

inka added a child revision: D13206: [native] Hide nux behind a flag.Aug 29 2024, 3:26 AM
Harbormaster completed remote builds in B31363: Diff 43791.Aug 29 2024, 3:32 AM
Closed by commit rCOMM480cb0e9128c: [native] Simplify nux tips props design (authored by inka). · Explain WhyAug 29 2024, 6:44 AM
This revision was automatically updated to reflect the committed changes.
inka added a commit: rCOMM480cb0e9128c: [native] Simplify nux tips props design.

Revision Contents
Changeset List

PathSize
native/
components/
23 lines
navigation/
9 lines
tooltip/
22 lines

Diff 43748

View Options

native/components/nux-tips-context.react.js

// @flow // @flow
import type { PossiblyStaleNavigationState } from '@react-navigation/native'; import type { PossiblyStaleNavigationState } from '@react-navigation/native';
import { useRoute } from '@react-navigation/native';
import _memoize from 'lodash/memoize.js'; import _memoize from 'lodash/memoize.js';
import * as React from 'react'; import * as React from 'react';
import { createSelector } from 'reselect'; import { createSelector } from 'reselect';
import { nonThreadCalendarFiltersSelector } from 'lib/selectors/calendar-filter-selectors.js'; import { nonThreadCalendarFiltersSelector } from 'lib/selectors/calendar-filter-selectors.js';
import { currentCalendarQuery } from 'lib/selectors/nav-selectors.js'; import { currentCalendarQuery } from 'lib/selectors/nav-selectors.js';
import { useCanEditMessage } from 'lib/shared/edit-messages-utils.js';
import type { CalendarQuery } from 'lib/types/entry-types.js'; import type { CalendarQuery } from 'lib/types/entry-types.js';
import type { CalendarFilter } from 'lib/types/filter-types.js'; import type { CalendarFilter } from 'lib/types/filter-types.js';
import type {
ComposableMessageInfo,
RobotextMessageInfo,
MessageInfo,
} from 'lib/types/message-types.js';
import type { ThreadInfo } from 'lib/types/thread-types.js';
import type { NavContextType } from './navigation-context.js'; import type { NavContextType } from './navigation-context.js';
import { NavContext } from './navigation-context.js'; import { NavContext } from './navigation-context.js';
import { import {
getStateFromNavigatorRoute, getStateFromNavigatorRoute,
getThreadIDFromRoute, getThreadIDFromRoute,
currentLeafRoute, currentLeafRoute,
} from './navigation-utils.js'; } from './navigation-utils.js';
import { import {
AppRouteName, AppRouteName,
TabNavigatorRouteName, TabNavigatorRouteName,
MessageListRouteName, MessageListRouteName,
ChatRouteName, ChatRouteName,
CalendarRouteName, CalendarRouteName,
ThreadPickerModalRouteName, ThreadPickerModalRouteName,
ActionResultModalRouteName, ActionResultModalRouteName,
accountModals, accountModals,
scrollBlockingModals, scrollBlockingModals,
chatRootModals, chatRootModals,
threadRoutes, threadRoutes,
CommunityDrawerNavigatorRouteName, CommunityDrawerNavigatorRouteName,
MessageResultsScreenRouteName,
MessageSearchRouteName,
} from './route-names.js'; } from './route-names.js';
import type { RemoveEditMode } from '../chat/message-list-types'; import type { RemoveEditMode } from '../chat/message-list-types';
import { useSelector } from '../redux/redux-utils.js'; import { useSelector } from '../redux/redux-utils.js';
import type { NavPlusRedux } from '../types/selector-types.js'; import type { NavPlusRedux } from '../types/selector-types.js';
import type { GlobalTheme } from '../types/themes.js'; import type { GlobalTheme } from '../types/themes.js';
const baseCreateIsForegroundSelector = (routeName: string) => const baseCreateIsForegroundSelector = (routeName: string) =>
createSelector( createSelector(
▲ Show 20 Lines • Show All 343 Lines • ▼ Show 20 Linesfunction useCurrentLeafRouteName(): ?string {
return React.useMemo(() => { return React.useMemo(() => {
if (!navContext) { if (!navContext) {
return undefined; return undefined;
} }
return currentLeafRoute(navContext.state).name; return currentLeafRoute(navContext.state).name;
}, [navContext]); }, [navContext]);
} }
function useCanEditMessageNative(
threadInfo: ThreadInfo,
messageInfo: MessageInfo,
targetMessageInfo: ComposableMessageInfo | RobotextMessageInfo,
): boolean {
const route = useRoute();
const screenKey = route.key;
const threadCreationTime = threadInfo.creationTime;
const messageCreationTime = messageInfo.time;
const canEditInThisScreen =
!screenKey.startsWith(MessageSearchRouteName) &&
!screenKey.startsWith(MessageResultsScreenRouteName) &&
messageCreationTime > threadCreationTime;
tomekUnsubmitted
Not Done
Inline Actions

Should we use >=?

tomek: Should we use `>=`?
return (
useCanEditMessage(threadInfo, targetMessageInfo) && canEditInThisScreen
);
}
export { export {
createIsForegroundSelector, createIsForegroundSelector,
useIsAppLoggedIn, useIsAppLoggedIn,
createActiveTabSelector, createActiveTabSelector,
scrollBlockingModalsClosedSelector, scrollBlockingModalsClosedSelector,
selectBackgroundIsDark, selectBackgroundIsDark,
activeThreadSelector, activeThreadSelector,
activeMessageListSelector, activeMessageListSelector,
useActiveThread, useActiveThread,
useActiveMessageList, useActiveMessageList,
calendarActiveSelector, calendarActiveSelector,
nativeCalendarQuery, nativeCalendarQuery,
nonThreadCalendarQuery, nonThreadCalendarQuery,
useCalendarQuery, useCalendarQuery,
drawerSwipeEnabledSelector, drawerSwipeEnabledSelector,
useCurrentLeafRouteName, useCurrentLeafRouteName,
getRemoveEditMode, getRemoveEditMode,
getTabNavState, getTabNavState,
getChatNavStateFromTabNavState, getChatNavStateFromTabNavState,
useCanEditMessageNative,
}; };
View Options

native/navigation/nux-tip-overlay-backdrop.react.js

// @flow // @flow
import type { PossiblyStaleNavigationState } from '@react-navigation/native'; import type { PossiblyStaleNavigationState } from '@react-navigation/native';
import { useRoute } from '@react-navigation/native';
import _memoize from 'lodash/memoize.js'; import _memoize from 'lodash/memoize.js';
import * as React from 'react'; import * as React from 'react';
import { createSelector } from 'reselect'; import { createSelector } from 'reselect';
import { nonThreadCalendarFiltersSelector } from 'lib/selectors/calendar-filter-selectors.js'; import { nonThreadCalendarFiltersSelector } from 'lib/selectors/calendar-filter-selectors.js';
import { currentCalendarQuery } from 'lib/selectors/nav-selectors.js'; import { currentCalendarQuery } from 'lib/selectors/nav-selectors.js';
import { useCanEditMessage } from 'lib/shared/edit-messages-utils.js';
import type { CalendarQuery } from 'lib/types/entry-types.js'; import type { CalendarQuery } from 'lib/types/entry-types.js';
import type { CalendarFilter } from 'lib/types/filter-types.js'; import type { CalendarFilter } from 'lib/types/filter-types.js';
import type {
ComposableMessageInfo,
RobotextMessageInfo,
MessageInfo,
} from 'lib/types/message-types.js';
import type { ThreadInfo } from 'lib/types/thread-types.js';
import type { NavContextType } from './navigation-context.js'; import type { NavContextType } from './navigation-context.js';
import { NavContext } from './navigation-context.js'; import { NavContext } from './navigation-context.js';
import { import {
getStateFromNavigatorRoute, getStateFromNavigatorRoute,
getThreadIDFromRoute, getThreadIDFromRoute,
currentLeafRoute, currentLeafRoute,
} from './navigation-utils.js'; } from './navigation-utils.js';
import { import {
AppRouteName, AppRouteName,
TabNavigatorRouteName, TabNavigatorRouteName,
MessageListRouteName, MessageListRouteName,
ChatRouteName, ChatRouteName,
CalendarRouteName, CalendarRouteName,
ThreadPickerModalRouteName, ThreadPickerModalRouteName,
ActionResultModalRouteName, ActionResultModalRouteName,
accountModals, accountModals,
scrollBlockingModals, scrollBlockingModals,
chatRootModals, chatRootModals,
threadRoutes, threadRoutes,
CommunityDrawerNavigatorRouteName, CommunityDrawerNavigatorRouteName,
MessageResultsScreenRouteName,
MessageSearchRouteName,
} from './route-names.js'; } from './route-names.js';
import type { RemoveEditMode } from '../chat/message-list-types'; import type { RemoveEditMode } from '../chat/message-list-types';
import { useSelector } from '../redux/redux-utils.js'; import { useSelector } from '../redux/redux-utils.js';
import type { NavPlusRedux } from '../types/selector-types.js'; import type { NavPlusRedux } from '../types/selector-types.js';
import type { GlobalTheme } from '../types/themes.js'; import type { GlobalTheme } from '../types/themes.js';
const baseCreateIsForegroundSelector = (routeName: string) => const baseCreateIsForegroundSelector = (routeName: string) =>
createSelector( createSelector(
▲ Show 20 Lines • Show All 343 Lines • ▼ Show 20 Linesfunction useCurrentLeafRouteName(): ?string {
return React.useMemo(() => { return React.useMemo(() => {
if (!navContext) { if (!navContext) {
return undefined; return undefined;
} }
return currentLeafRoute(navContext.state).name; return currentLeafRoute(navContext.state).name;
}, [navContext]); }, [navContext]);
} }
function useCanEditMessageNative(
threadInfo: ThreadInfo,
messageInfo: MessageInfo,
targetMessageInfo: ComposableMessageInfo | RobotextMessageInfo,
): boolean {
const route = useRoute();
const screenKey = route.key;
const threadCreationTime = threadInfo.creationTime;
const messageCreationTime = messageInfo.time;
const canEditInThisScreen =
!screenKey.startsWith(MessageSearchRouteName) &&
!screenKey.startsWith(MessageResultsScreenRouteName) &&
messageCreationTime > threadCreationTime;
tomekUnsubmitted
Not Done
Inline Actions

Should we use >=?

tomek: Should we use `>=`?
return (
useCanEditMessage(threadInfo, targetMessageInfo) && canEditInThisScreen
);
}
export { export {
createIsForegroundSelector, createIsForegroundSelector,
useIsAppLoggedIn, useIsAppLoggedIn,
createActiveTabSelector, createActiveTabSelector,
scrollBlockingModalsClosedSelector, scrollBlockingModalsClosedSelector,
selectBackgroundIsDark, selectBackgroundIsDark,
activeThreadSelector, activeThreadSelector,
activeMessageListSelector, activeMessageListSelector,
useActiveThread, useActiveThread,
useActiveMessageList, useActiveMessageList,
calendarActiveSelector, calendarActiveSelector,
nativeCalendarQuery, nativeCalendarQuery,
nonThreadCalendarQuery, nonThreadCalendarQuery,
useCalendarQuery, useCalendarQuery,
drawerSwipeEnabledSelector, drawerSwipeEnabledSelector,
useCurrentLeafRouteName, useCurrentLeafRouteName,
getRemoveEditMode, getRemoveEditMode,
getTabNavState, getTabNavState,
getChatNavStateFromTabNavState, getChatNavStateFromTabNavState,
useCanEditMessageNative,
}; };
View Options

native/tooltip/nux-tips-overlay.react.js

// @flow // @flow
import type { PossiblyStaleNavigationState } from '@react-navigation/native'; import type { PossiblyStaleNavigationState } from '@react-navigation/native';
import { useRoute } from '@react-navigation/native';
import _memoize from 'lodash/memoize.js'; import _memoize from 'lodash/memoize.js';
import * as React from 'react'; import * as React from 'react';
import { createSelector } from 'reselect'; import { createSelector } from 'reselect';
import { nonThreadCalendarFiltersSelector } from 'lib/selectors/calendar-filter-selectors.js'; import { nonThreadCalendarFiltersSelector } from 'lib/selectors/calendar-filter-selectors.js';
import { currentCalendarQuery } from 'lib/selectors/nav-selectors.js'; import { currentCalendarQuery } from 'lib/selectors/nav-selectors.js';
import { useCanEditMessage } from 'lib/shared/edit-messages-utils.js';
import type { CalendarQuery } from 'lib/types/entry-types.js'; import type { CalendarQuery } from 'lib/types/entry-types.js';
import type { CalendarFilter } from 'lib/types/filter-types.js'; import type { CalendarFilter } from 'lib/types/filter-types.js';
import type {
ComposableMessageInfo,
RobotextMessageInfo,
MessageInfo,
} from 'lib/types/message-types.js';
import type { ThreadInfo } from 'lib/types/thread-types.js';
import type { NavContextType } from './navigation-context.js'; import type { NavContextType } from './navigation-context.js';
import { NavContext } from './navigation-context.js'; import { NavContext } from './navigation-context.js';
import { import {
getStateFromNavigatorRoute, getStateFromNavigatorRoute,
getThreadIDFromRoute, getThreadIDFromRoute,
currentLeafRoute, currentLeafRoute,
} from './navigation-utils.js'; } from './navigation-utils.js';
import { import {
AppRouteName, AppRouteName,
TabNavigatorRouteName, TabNavigatorRouteName,
MessageListRouteName, MessageListRouteName,
ChatRouteName, ChatRouteName,
CalendarRouteName, CalendarRouteName,
ThreadPickerModalRouteName, ThreadPickerModalRouteName,
ActionResultModalRouteName, ActionResultModalRouteName,
accountModals, accountModals,
scrollBlockingModals, scrollBlockingModals,
chatRootModals, chatRootModals,
threadRoutes, threadRoutes,
CommunityDrawerNavigatorRouteName, CommunityDrawerNavigatorRouteName,
MessageResultsScreenRouteName,
MessageSearchRouteName,
} from './route-names.js'; } from './route-names.js';
import type { RemoveEditMode } from '../chat/message-list-types'; import type { RemoveEditMode } from '../chat/message-list-types';
import { useSelector } from '../redux/redux-utils.js'; import { useSelector } from '../redux/redux-utils.js';
import type { NavPlusRedux } from '../types/selector-types.js'; import type { NavPlusRedux } from '../types/selector-types.js';
import type { GlobalTheme } from '../types/themes.js'; import type { GlobalTheme } from '../types/themes.js';
const baseCreateIsForegroundSelector = (routeName: string) => const baseCreateIsForegroundSelector = (routeName: string) =>
createSelector( createSelector(
▲ Show 20 Lines • Show All 343 Lines • ▼ Show 20 Linesfunction useCurrentLeafRouteName(): ?string {
return React.useMemo(() => { return React.useMemo(() => {
if (!navContext) { if (!navContext) {
return undefined; return undefined;
} }
return currentLeafRoute(navContext.state).name; return currentLeafRoute(navContext.state).name;
}, [navContext]); }, [navContext]);
} }
function useCanEditMessageNative(
threadInfo: ThreadInfo,
messageInfo: MessageInfo,
targetMessageInfo: ComposableMessageInfo | RobotextMessageInfo,
): boolean {
const route = useRoute();
const screenKey = route.key;
const threadCreationTime = threadInfo.creationTime;
const messageCreationTime = messageInfo.time;
const canEditInThisScreen =
!screenKey.startsWith(MessageSearchRouteName) &&
!screenKey.startsWith(MessageResultsScreenRouteName) &&
messageCreationTime > threadCreationTime;
tomekUnsubmitted
Not Done
Inline Actions

Should we use >=?

tomek: Should we use `>=`?
return (
useCanEditMessage(threadInfo, targetMessageInfo) && canEditInThisScreen
);
}
export { export {
createIsForegroundSelector, createIsForegroundSelector,
useIsAppLoggedIn, useIsAppLoggedIn,
createActiveTabSelector, createActiveTabSelector,
scrollBlockingModalsClosedSelector, scrollBlockingModalsClosedSelector,
selectBackgroundIsDark, selectBackgroundIsDark,
activeThreadSelector, activeThreadSelector,
activeMessageListSelector, activeMessageListSelector,
useActiveThread, useActiveThread,
useActiveMessageList, useActiveMessageList,
calendarActiveSelector, calendarActiveSelector,
nativeCalendarQuery, nativeCalendarQuery,
nonThreadCalendarQuery, nonThreadCalendarQuery,
useCalendarQuery, useCalendarQuery,
drawerSwipeEnabledSelector, drawerSwipeEnabledSelector,
useCurrentLeafRouteName, useCurrentLeafRouteName,
getRemoveEditMode, getRemoveEditMode,
getTabNavState, getTabNavState,
getChatNavStateFromTabNavState, getChatNavStateFromTabNavState,
useCanEditMessageNative,
}; };