From ccbbd4d7be5a19d04f54bac1dedb67a7c4cb8ce2 Mon Sep 17 00:00:00 2001 From: Chris Bobbe Date: Mon, 1 Feb 2021 21:03:26 -0500 Subject: [PATCH 1/7] UnreadCards [nfc]: Convert to use Hooks (1/2). --- src/unread/UnreadCards.js | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) diff --git a/src/unread/UnreadCards.js b/src/unread/UnreadCards.js index 033ee91ec54..3cd374a4fad 100644 --- a/src/unread/UnreadCards.js +++ b/src/unread/UnreadCards.js @@ -20,14 +20,6 @@ type Props = $ReadOnly<{| |}>; class UnreadCards extends PureComponent { - handleStreamPress = (stream: string) => { - setTimeout(() => this.props.dispatch(doNarrow(streamNarrow(stream)))); - }; - - handleTopicPress = (stream: string, topic: string) => { - setTimeout(() => this.props.dispatch(doNarrow(topicNarrow(stream, topic)))); - }; - render() { const { conversations, dispatch, unreadStreamsAndTopics } = this.props; type Card = @@ -62,7 +54,9 @@ class UnreadCards extends PureComponent { isPrivate={section.isPrivate} backgroundColor={section.color} unreadCount={section.unread} - onPress={this.handleStreamPress} + onPress={(stream: string) => { + setTimeout(() => this.props.dispatch(doNarrow(streamNarrow(stream)))); + }} /> ) } @@ -76,7 +70,9 @@ class UnreadCards extends PureComponent { isMuted={section.isMuted || item.isMuted} isSelected={false} unreadCount={item.unread} - onPress={this.handleTopicPress} + onPress={(stream: string, topic: string) => { + setTimeout(() => this.props.dispatch(doNarrow(topicNarrow(stream, topic)))); + }} /> ) } From 038506f7a5a53af3e417957ed418c814b38159e3 Mon Sep 17 00:00:00 2001 From: Chris Bobbe Date: Mon, 1 Feb 2021 21:04:34 -0500 Subject: [PATCH 2/7] UnreadCards [nfc]: Convert to use Hooks (2/2). --- src/unread/UnreadCards.js | 114 +++++++++++++++++++------------------- 1 file changed, 56 insertions(+), 58 deletions(-) diff --git a/src/unread/UnreadCards.js b/src/unread/UnreadCards.js index 3cd374a4fad..045d68105b8 100644 --- a/src/unread/UnreadCards.js +++ b/src/unread/UnreadCards.js @@ -1,6 +1,6 @@ /* @flow strict-local */ -import React, { PureComponent } from 'react'; +import React from 'react'; import { SectionList } from 'react-native'; import type { Dispatch, PmConversationData, UnreadStreamItem } from '../types'; @@ -19,66 +19,64 @@ type Props = $ReadOnly<{| unreadStreamsAndTopics: UnreadStreamItem[], |}>; -class UnreadCards extends PureComponent { - render() { - const { conversations, dispatch, unreadStreamsAndTopics } = this.props; - type Card = - | UnreadStreamItem - | { key: 'private', data: Array> }; - const unreadCards: Array = [ - { - key: 'private', - data: [{ conversations, dispatch }], - }, - ...unreadStreamsAndTopics, - ]; +function UnreadCards(props: Props) { + const { conversations, dispatch, unreadStreamsAndTopics } = props; + type Card = + | UnreadStreamItem + | { key: 'private', data: Array> }; + const unreadCards: Array = [ + { + key: 'private', + data: [{ conversations, dispatch }], + }, + ...unreadStreamsAndTopics, + ]; - if (unreadStreamsAndTopics.length === 0 && conversations.length === 0) { - return ; - } + if (unreadStreamsAndTopics.length === 0 && conversations.length === 0) { + return ; + } - return ( - /* $FlowFixMe[prop-missing]: SectionList libdef seems confused; + return ( + /* $FlowFixMe[prop-missing]: SectionList libdef seems confused; should take $ReadOnly objects. */ - item.key} - renderSectionHeader={({ section }) => - section.key === 'private' ? null : ( - { - setTimeout(() => this.props.dispatch(doNarrow(streamNarrow(stream)))); - }} - /> - ) - } - renderItem={({ item, section }) => - section.key === 'private' ? ( - - ) : ( - { - setTimeout(() => this.props.dispatch(doNarrow(topicNarrow(stream, topic)))); - }} - /> - ) - } - /> - ); - } + item.key} + renderSectionHeader={({ section }) => + section.key === 'private' ? null : ( + { + setTimeout(() => props.dispatch(doNarrow(streamNarrow(stream)))); + }} + /> + ) + } + renderItem={({ item, section }) => + section.key === 'private' ? ( + + ) : ( + { + setTimeout(() => props.dispatch(doNarrow(topicNarrow(stream, topic)))); + }} + /> + ) + } + /> + ); } export default connect(state => ({ From 58c2a918022f5698a45e04a8cdac15f7b1957652 Mon Sep 17 00:00:00 2001 From: Chris Bobbe Date: Mon, 1 Feb 2021 21:06:45 -0500 Subject: [PATCH 3/7] UnreadCards: Use `useSelector` hook. --- src/unread/UnreadCards.js | 25 +++++++++---------------- 1 file changed, 9 insertions(+), 16 deletions(-) diff --git a/src/unread/UnreadCards.js b/src/unread/UnreadCards.js index 045d68105b8..6be1fb055b4 100644 --- a/src/unread/UnreadCards.js +++ b/src/unread/UnreadCards.js @@ -3,8 +3,8 @@ import React from 'react'; import { SectionList } from 'react-native'; -import type { Dispatch, PmConversationData, UnreadStreamItem } from '../types'; -import { connect } from '../react-redux'; +import type { UnreadStreamItem } from '../types'; +import { useDispatch, useSelector } from '../react-redux'; import { SearchEmptyState } from '../common'; import PmConversationList from '../pm-conversations/PmConversationList'; import StreamItem from '../streams/StreamItem'; @@ -13,14 +13,12 @@ import { streamNarrow, topicNarrow } from '../utils/narrow'; import { getUnreadConversations, getUnreadStreamsAndTopicsSansMuted } from '../selectors'; import { doNarrow } from '../actions'; -type Props = $ReadOnly<{| - conversations: PmConversationData[], - dispatch: Dispatch, - unreadStreamsAndTopics: UnreadStreamItem[], -|}>; +type Props = $ReadOnly<{||}>; -function UnreadCards(props: Props) { - const { conversations, dispatch, unreadStreamsAndTopics } = props; +export default function UnreadCards(props: Props) { + const dispatch = useDispatch(); + const conversations = useSelector(getUnreadConversations); + const unreadStreamsAndTopics = useSelector(getUnreadStreamsAndTopicsSansMuted); type Card = | UnreadStreamItem | { key: 'private', data: Array> }; @@ -54,7 +52,7 @@ function UnreadCards(props: Props) { backgroundColor={section.color} unreadCount={section.unread} onPress={(stream: string) => { - setTimeout(() => props.dispatch(doNarrow(streamNarrow(stream)))); + setTimeout(() => dispatch(doNarrow(streamNarrow(stream)))); }} /> ) @@ -70,7 +68,7 @@ function UnreadCards(props: Props) { isSelected={false} unreadCount={item.unread} onPress={(stream: string, topic: string) => { - setTimeout(() => props.dispatch(doNarrow(topicNarrow(stream, topic)))); + setTimeout(() => dispatch(doNarrow(topicNarrow(stream, topic)))); }} /> ) @@ -78,8 +76,3 @@ function UnreadCards(props: Props) { /> ); } - -export default connect(state => ({ - conversations: getUnreadConversations(state), - unreadStreamsAndTopics: getUnreadStreamsAndTopicsSansMuted(state), -}))(UnreadCards); From 0e13679912e6c07dc10d807933a1ac9d42f37792 Mon Sep 17 00:00:00 2001 From: Chris Bobbe Date: Mon, 1 Feb 2021 21:11:35 -0500 Subject: [PATCH 4/7] AwayStatusSwitch [nfc]: Convert to use Hooks. --- src/account-info/AwayStatusSwitch.js | 30 ++++++++++++---------------- 1 file changed, 13 insertions(+), 17 deletions(-) diff --git a/src/account-info/AwayStatusSwitch.js b/src/account-info/AwayStatusSwitch.js index 6e4ad8d0f22..51e5cef968f 100644 --- a/src/account-info/AwayStatusSwitch.js +++ b/src/account-info/AwayStatusSwitch.js @@ -1,5 +1,5 @@ /* @flow strict-local */ -import React, { PureComponent } from 'react'; +import React from 'react'; import type { Dispatch } from '../types'; import { connect } from '../react-redux'; @@ -17,23 +17,19 @@ type Props = $ReadOnly<{| * * retrieves the current user's `user status` data and presents it * * allows by switching it to control the `away` status */ -class AwayStatusSwitch extends PureComponent { - handleUpdateAwayStatus = (away: boolean) => { - const { dispatch } = this.props; - dispatch(updateUserAwayStatus(away)); - }; +function AwayStatusSwitch(props: Props) { + const { awayStatus } = props; - render() { - const { awayStatus } = this.props; - - return ( - - ); - } + return ( + { + const { dispatch } = props; + dispatch(updateUserAwayStatus(away)); + }} + /> + ); } export default connect(state => ({ From 18b2c87712f59ae597cfd35678216a77a057897f Mon Sep 17 00:00:00 2001 From: Chris Bobbe Date: Mon, 1 Feb 2021 21:12:38 -0500 Subject: [PATCH 5/7] AwayStatusSwitch: Use `useSelector` hook. --- src/account-info/AwayStatusSwitch.js | 18 +++++------------- 1 file changed, 5 insertions(+), 13 deletions(-) diff --git a/src/account-info/AwayStatusSwitch.js b/src/account-info/AwayStatusSwitch.js index 51e5cef968f..badb8d2d92e 100644 --- a/src/account-info/AwayStatusSwitch.js +++ b/src/account-info/AwayStatusSwitch.js @@ -1,37 +1,29 @@ /* @flow strict-local */ import React from 'react'; -import type { Dispatch } from '../types'; -import { connect } from '../react-redux'; +import { useSelector, useDispatch } from '../react-redux'; import { OptionRow } from '../common'; import { getSelfUserAwayStatus } from '../selectors'; import { updateUserAwayStatus } from '../user-status/userStatusActions'; -type Props = $ReadOnly<{| - awayStatus: boolean, - dispatch: Dispatch, -|}>; +type Props = $ReadOnly<{||}>; /** * This is a stand-alone component that: * * retrieves the current user's `user status` data and presents it * * allows by switching it to control the `away` status */ -function AwayStatusSwitch(props: Props) { - const { awayStatus } = props; +export default function AwayStatusSwitch(props: Props) { + const awayStatus = useSelector(getSelfUserAwayStatus); + const dispatch = useDispatch(); return ( { - const { dispatch } = props; dispatch(updateUserAwayStatus(away)); }} /> ); } - -export default connect(state => ({ - awayStatus: getSelfUserAwayStatus(state), -}))(AwayStatusSwitch); From 9428a9c813261987a99a5ff087673ef31aea2b4d Mon Sep 17 00:00:00 2001 From: Chris Bobbe Date: Mon, 1 Feb 2021 21:14:35 -0500 Subject: [PATCH 6/7] OwnAvatar [nfc]: Convert to use Hooks. --- src/common/OwnAvatar.js | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/common/OwnAvatar.js b/src/common/OwnAvatar.js index ec52140f6a3..d7079598eb7 100644 --- a/src/common/OwnAvatar.js +++ b/src/common/OwnAvatar.js @@ -1,5 +1,5 @@ /* @flow strict-local */ -import React, { PureComponent } from 'react'; +import React from 'react'; import type { User, Dispatch } from '../types'; import { connect } from '../react-redux'; @@ -17,11 +17,9 @@ type Props = $ReadOnly<{| * * @prop size - Sets width and height in logical pixels. */ -class OwnAvatar extends PureComponent { - render() { - const { user, size } = this.props; - return ; - } +function OwnAvatar(props: Props) { + const { user, size } = props; + return ; } export default connect(state => ({ From 641cb161b85ed09653abe34347a7462f3f8f3893 Mon Sep 17 00:00:00 2001 From: Chris Bobbe Date: Mon, 1 Feb 2021 21:15:38 -0500 Subject: [PATCH 7/7] OwnAvatar: Use `useSelector` hook. --- src/common/OwnAvatar.js | 14 ++++---------- 1 file changed, 4 insertions(+), 10 deletions(-) diff --git a/src/common/OwnAvatar.js b/src/common/OwnAvatar.js index d7079598eb7..eb6ea8043f2 100644 --- a/src/common/OwnAvatar.js +++ b/src/common/OwnAvatar.js @@ -1,14 +1,11 @@ /* @flow strict-local */ import React from 'react'; -import type { User, Dispatch } from '../types'; -import { connect } from '../react-redux'; +import { useSelector } from '../react-redux'; import UserAvatar from './UserAvatar'; import { getOwnUser } from '../users/userSelectors'; type Props = $ReadOnly<{| - dispatch: Dispatch, - user: User, size: number, |}>; @@ -17,11 +14,8 @@ type Props = $ReadOnly<{| * * @prop size - Sets width and height in logical pixels. */ -function OwnAvatar(props: Props) { - const { user, size } = props; +export default function OwnAvatar(props: Props) { + const { size } = props; + const user = useSelector(getOwnUser); return ; } - -export default connect(state => ({ - user: getOwnUser(state), -}))(OwnAvatar);