Page MenuHomePhabricator
Differential D3145

[lib] Simplify filterChatThreadList
ClosedPublic
Actions

Authored by ashoat on Feb 8 2022, 7:42 PM.
Tags
None
Referenced Files
F5337702: D3145.id.diff
Wed, Apr 9, 12:52 AM
F5337581: D3145.id9431.diff
Wed, Apr 9, 12:49 AM
F5337559: D3145.id9690.diff
Wed, Apr 9, 12:48 AM
F5336774: D3145.id9706.diff
Wed, Apr 9, 12:24 AM
F5336335: D3145.diff
Wed, Apr 9, 12:11 AM
F5317591: D3145.id9690.diff
Tue, Apr 8, 6:55 PM
Unknown Object (File)
Sun, Apr 6, 6:58 AM
Unknown Object (File)
Sat, Apr 5, 9:08 PM
View All Files
Subscribers
• adrian
atul
• benschac
• karol

Details

Reviewers
• jacek
tomek
Commits
rCOMM03db030f6828: [lib] Simplify filterChatThreadList
Summary

It's good this function got factored out, because it turns out the logic can be significantly simplified now.

Depends on D2885

Test Plan

Flow, careful code inspection

Diff Detail

Repository
rCOMM Comm
Branch
arcpatch-D2885
Lint
No Lint Coverage
Unit
No Test Coverage

Revision Contents
Changeset List

PathSize
lib/
shared/
54 lines

Diff 9690

View Options

lib/shared/thread-utils.js

// @flow // @flow
import { config as faConfig } from '@fortawesome/fontawesome-svg-core';
import '@fontsource/inter'; import '@fontsource/inter';
import '@fontsource/inter/500.css'; import '@fontsource/inter/500.css';
import '@fontsource/inter/600.css'; import '@fontsource/inter/600.css';
import '@fontsource/ibm-plex-sans'; import '@fontsource/ibm-plex-sans';
import '@fontsource/ibm-plex-sans/500.css'; import '@fontsource/ibm-plex-sans/500.css';
import '@fontsource/ibm-plex-sans/600.css'; import '@fontsource/ibm-plex-sans/600.css';
import 'basscss/css/basscss.min.css'; import 'basscss/css/basscss.min.css';
import './theme.css'; import './theme.css';
import { config as faConfig } from '@fortawesome/fontawesome-svg-core';
import _isEqual from 'lodash/fp/isEqual'; import _isEqual from 'lodash/fp/isEqual';
import * as React from 'react'; import * as React from 'react';
import { DndProvider } from 'react-dnd'; import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend'; import { HTML5Backend } from 'react-dnd-html5-backend';
import { useDispatch } from 'react-redux'; import { useDispatch } from 'react-redux';
import { import {
fetchEntriesActionTypes, fetchEntriesActionTypes,
updateCalendarQueryActionTypes, updateCalendarQueryActionTypes,
} from 'lib/actions/entry-actions'; } from 'lib/actions/entry-actions';
import { import {
createLoadingStatusSelector, createLoadingStatusSelector,
combineLoadingStatuses, combineLoadingStatuses,
} from 'lib/selectors/loading-selectors'; } from 'lib/selectors/loading-selectors';
import { mostRecentReadThreadSelector } from 'lib/selectors/thread-selectors'; import { mostRecentReadThreadSelector } from 'lib/selectors/thread-selectors';
import { isLoggedIn } from 'lib/selectors/user-selectors'; import { isLoggedIn } from 'lib/selectors/user-selectors';
import type { LoadingStatus } from 'lib/types/loading-types'; import type { LoadingStatus } from 'lib/types/loading-types';
import type { Dispatch } from 'lib/types/redux-types'; import type { Dispatch } from 'lib/types/redux-types';
import { registerConfig } from 'lib/utils/config'; import { registerConfig } from 'lib/utils/config';
import Calendar from './calendar/calendar.react'; import Calendar from './calendar/calendar.react';
import Chat from './chat/chat.react'; import Chat from './chat/chat.react';
import InputStateContainer from './input/input-state-container.react'; import InputStateContainer from './input/input-state-container.react';
import LoadingIndicator from './loading-indicator.react'; import LoadingIndicator from './loading-indicator.react';
import { ModalProvider, useModalContext } from './modals/modal-provider.react';
import DisconnectedBar from './redux/disconnected-bar'; import DisconnectedBar from './redux/disconnected-bar';
import DisconnectedBarVisibilityHandler from './redux/disconnected-bar-visibility-handler'; import DisconnectedBarVisibilityHandler from './redux/disconnected-bar-visibility-handler';
import FocusHandler from './redux/focus-handler.react'; import FocusHandler from './redux/focus-handler.react';
import { useSelector } from './redux/redux-utils'; import { useSelector } from './redux/redux-utils';
import VisibilityHandler from './redux/visibility-handler.react'; import VisibilityHandler from './redux/visibility-handler.react';
import history from './router-history'; import history from './router-history';
import LeftLayoutAside from './sidebar/left-layout-aside.react'; import LeftLayoutAside from './sidebar/left-layout-aside.react';
import Splash from './splash/splash.react'; import Splash from './splash/splash.react';
Show All 32 Linestype Props = {
// Redux state // Redux state
+navInfo: NavInfo, +navInfo: NavInfo,
+entriesLoadingStatus: LoadingStatus, +entriesLoadingStatus: LoadingStatus,
+loggedIn: boolean, +loggedIn: boolean,
+mostRecentReadThread: ?string, +mostRecentReadThread: ?string,
+activeThreadCurrentlyUnread: boolean, +activeThreadCurrentlyUnread: boolean,
// Redux dispatch functions // Redux dispatch functions
+dispatch: Dispatch, +dispatch: Dispatch,
+setModal: (?React.Node) => void,
}; };
type State = { type State = {
+modal: ?React.Node, +modal: ?React.Node,
}; };
class App extends React.PureComponent<Props, State> { class App extends React.PureComponent<Props, State> {
state: State = { state: State = {
modal: null, modal: null,
}; };
▲ Show 20 Lines • Show All 83 Lines • ▼ Show 20 Lines return (
</div> </div>
</div> </div>
</header> </header>
<InputStateContainer setModal={this.setModal}> <InputStateContainer setModal={this.setModal}>
<div className={css['main-content-container']}> <div className={css['main-content-container']}>
<div className={css['main-content']}>{mainContent}</div> <div className={css['main-content']}>{mainContent}</div>
</div> </div>
</InputStateContainer> </InputStateContainer>
<LeftLayoutAside setModal={this.setModal} /> <LeftLayoutAside setModal={this.props.setModal} />
</div> </div>
); );
} }
setModal = (modal: ?React.Node) => { setModal = (modal: ?React.Node) => {
this.setState({ modal }); this.setState({ modal });
}; };
} }
const fetchEntriesLoadingStatusSelector = createLoadingStatusSelector( const fetchEntriesLoadingStatusSelector = createLoadingStatusSelector(
fetchEntriesActionTypes, fetchEntriesActionTypes,
); );
const updateCalendarQueryLoadingStatusSelector = createLoadingStatusSelector( const updateCalendarQueryLoadingStatusSelector = createLoadingStatusSelector(
updateCalendarQueryActionTypes, updateCalendarQueryActionTypes,
); );
const ConnectedApp: React.ComponentType<BaseProps> = React.memo<BaseProps>(
function ConnectedApp(props) { function ConnectedApp(props) {
const activeChatThreadID = useSelector( const activeChatThreadID = useSelector(
state => state.navInfo.activeChatThreadID, state => state.navInfo.activeChatThreadID,
); );
const navInfo = useSelector(state => state.navInfo); const navInfo = useSelector(state => state.navInfo);
const fetchEntriesLoadingStatus = useSelector( const fetchEntriesLoadingStatus = useSelector(
fetchEntriesLoadingStatusSelector, fetchEntriesLoadingStatusSelector,
); );
const updateCalendarQueryLoadingStatus = useSelector( const updateCalendarQueryLoadingStatus = useSelector(
updateCalendarQueryLoadingStatusSelector, updateCalendarQueryLoadingStatusSelector,
); );
const entriesLoadingStatus = combineLoadingStatuses( const entriesLoadingStatus = combineLoadingStatuses(
fetchEntriesLoadingStatus, fetchEntriesLoadingStatus,
updateCalendarQueryLoadingStatus, updateCalendarQueryLoadingStatus,
); );
const loggedIn = useSelector(isLoggedIn); const loggedIn = useSelector(isLoggedIn);
const mostRecentReadThread = useSelector(mostRecentReadThreadSelector); const mostRecentReadThread = useSelector(mostRecentReadThreadSelector);
const activeThreadCurrentlyUnread = useSelector( const activeThreadCurrentlyUnread = useSelector(
state => state =>
!activeChatThreadID || !activeChatThreadID ||
!!state.threadStore.threadInfos[activeChatThreadID]?.currentUser.unread, !!state.threadStore.threadInfos[activeChatThreadID]?.currentUser.unread,
); );
const dispatch = useDispatch(); const dispatch = useDispatch();
const modalContext = useModalContext();
return ( return (
<App <App
{...props} {...props}
navInfo={navInfo} navInfo={navInfo}
entriesLoadingStatus={entriesLoadingStatus} entriesLoadingStatus={entriesLoadingStatus}
loggedIn={loggedIn} loggedIn={loggedIn}
mostRecentReadThread={mostRecentReadThread} mostRecentReadThread={mostRecentReadThread}
activeThreadCurrentlyUnread={activeThreadCurrentlyUnread} activeThreadCurrentlyUnread={activeThreadCurrentlyUnread}
dispatch={dispatch} dispatch={dispatch}
setModal={modalContext.setModal}
/> />
); );
}
const AppWithProvider: React.ComponentType<BaseProps> = React.memo<BaseProps>(
function AppWithProvider(props) {
return (
<ModalProvider>
<ConnectedApp {...props} />
</ModalProvider>
);
}, },
); );
export default ConnectedApp; export default AppWithProvider;