From ae396544a713dd27d684c3dd8eb93e1d91ef2057 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= Date: Mon, 11 Apr 2022 23:02:37 +0200 Subject: [PATCH] Typescript, FC MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: marcin mikołajczak --- .../components/account_authorize.js | 50 ------------- .../components/account_authorize.tsx | 61 +++++++++++++++ .../containers/account_authorize_container.js | 27 ------- app/soapbox/features/follow_requests/index.js | 75 ------------------- .../features/follow_requests/index.tsx | 60 +++++++++++++++ app/soapbox/features/mutes/index.tsx | 2 +- app/soapbox/utils/timelines.ts | 6 +- 7 files changed, 125 insertions(+), 156 deletions(-) delete mode 100644 app/soapbox/features/follow_requests/components/account_authorize.js create mode 100644 app/soapbox/features/follow_requests/components/account_authorize.tsx delete mode 100644 app/soapbox/features/follow_requests/containers/account_authorize_container.js delete mode 100644 app/soapbox/features/follow_requests/index.js create mode 100644 app/soapbox/features/follow_requests/index.tsx diff --git a/app/soapbox/features/follow_requests/components/account_authorize.js b/app/soapbox/features/follow_requests/components/account_authorize.js deleted file mode 100644 index 56aac382a..000000000 --- a/app/soapbox/features/follow_requests/components/account_authorize.js +++ /dev/null @@ -1,50 +0,0 @@ -import PropTypes from 'prop-types'; -import React from 'react'; -import ImmutablePropTypes from 'react-immutable-proptypes'; -import ImmutablePureComponent from 'react-immutable-pure-component'; -import { defineMessages, injectIntl } from 'react-intl'; - -import Avatar from '../../../components/avatar'; -import DisplayName from '../../../components/display_name'; -import IconButton from '../../../components/icon_button'; -import Permalink from '../../../components/permalink'; - -const messages = defineMessages({ - authorize: { id: 'follow_request.authorize', defaultMessage: 'Authorize' }, - reject: { id: 'follow_request.reject', defaultMessage: 'Reject' }, -}); - -export default @injectIntl -class AccountAuthorize extends ImmutablePureComponent { - - static propTypes = { - account: ImmutablePropTypes.record.isRequired, - onAuthorize: PropTypes.func.isRequired, - onReject: PropTypes.func.isRequired, - intl: PropTypes.object.isRequired, - }; - - render() { - const { intl, account, onAuthorize, onReject } = this.props; - const content = { __html: account.get('note_emojified') }; - - return ( -
-
- -
- - - -
-
- -
-
-
-
-
- ); - } - -} diff --git a/app/soapbox/features/follow_requests/components/account_authorize.tsx b/app/soapbox/features/follow_requests/components/account_authorize.tsx new file mode 100644 index 000000000..cd46f7817 --- /dev/null +++ b/app/soapbox/features/follow_requests/components/account_authorize.tsx @@ -0,0 +1,61 @@ +import React from 'react'; +import { defineMessages, useIntl } from 'react-intl'; +import { useDispatch } from 'react-redux'; + +import { authorizeFollowRequest, rejectFollowRequest } from 'soapbox/actions/accounts'; +import Avatar from 'soapbox/components/avatar'; +import DisplayName from 'soapbox/components/display_name'; +import IconButton from 'soapbox/components/icon_button'; +import Permalink from 'soapbox/components/permalink'; +import { useAppSelector } from 'soapbox/hooks'; +import { makeGetAccount } from 'soapbox/selectors'; + +const messages = defineMessages({ + authorize: { id: 'follow_request.authorize', defaultMessage: 'Authorize' }, + reject: { id: 'follow_request.reject', defaultMessage: 'Reject' }, +}); + +const getAccount = makeGetAccount(); + +interface IAccountAuthorize { + id: string, +} + +const AccountAuthorize: React.FC = ({ id }) => { + const intl = useIntl(); + const dispatch = useDispatch(); + + const account = useAppSelector((state) => getAccount(state, id)); + + const onAuthorize = () => { + dispatch(authorizeFollowRequest(id)); + }; + + const onReject = () => { + dispatch(rejectFollowRequest(id)); + }; + + if (!account) return null; + + const content = { __html: account.note_emojified }; + + return ( +
+
+ +
+ + + +
+
+ +
+
+
+
+
+ ); +}; + +export default AccountAuthorize; diff --git a/app/soapbox/features/follow_requests/containers/account_authorize_container.js b/app/soapbox/features/follow_requests/containers/account_authorize_container.js deleted file mode 100644 index cf38b3c69..000000000 --- a/app/soapbox/features/follow_requests/containers/account_authorize_container.js +++ /dev/null @@ -1,27 +0,0 @@ -import { connect } from 'react-redux'; - -import { authorizeFollowRequest, rejectFollowRequest } from '../../../actions/accounts'; -import { makeGetAccount } from '../../../selectors'; -import AccountAuthorize from '../components/account_authorize'; - -const makeMapStateToProps = () => { - const getAccount = makeGetAccount(); - - const mapStateToProps = (state, props) => ({ - account: getAccount(state, props.id), - }); - - return mapStateToProps; -}; - -const mapDispatchToProps = (dispatch, { id }) => ({ - onAuthorize() { - dispatch(authorizeFollowRequest(id)); - }, - - onReject() { - dispatch(rejectFollowRequest(id)); - }, -}); - -export default connect(makeMapStateToProps, mapDispatchToProps)(AccountAuthorize); diff --git a/app/soapbox/features/follow_requests/index.js b/app/soapbox/features/follow_requests/index.js deleted file mode 100644 index 3c3f8f75e..000000000 --- a/app/soapbox/features/follow_requests/index.js +++ /dev/null @@ -1,75 +0,0 @@ -import { debounce } from 'lodash'; -import PropTypes from 'prop-types'; -import React from 'react'; -import ImmutablePropTypes from 'react-immutable-proptypes'; -import ImmutablePureComponent from 'react-immutable-pure-component'; -import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; -import { connect } from 'react-redux'; - -import { Spinner } from 'soapbox/components/ui'; - -import { fetchFollowRequests, expandFollowRequests } from '../../actions/accounts'; -import ScrollableList from '../../components/scrollable_list'; -import Column from '../ui/components/column'; - -import AccountAuthorizeContainer from './containers/account_authorize_container'; - -const messages = defineMessages({ - heading: { id: 'column.follow_requests', defaultMessage: 'Follow requests' }, -}); - -const mapStateToProps = state => ({ - accountIds: state.getIn(['user_lists', 'follow_requests', 'items']), - hasMore: !!state.getIn(['user_lists', 'follow_requests', 'next']), -}); - -export default @connect(mapStateToProps) -@injectIntl -class FollowRequests extends ImmutablePureComponent { - - static propTypes = { - params: PropTypes.object.isRequired, - dispatch: PropTypes.func.isRequired, - hasMore: PropTypes.bool, - accountIds: ImmutablePropTypes.orderedSet, - intl: PropTypes.object.isRequired, - }; - - componentDidMount() { - this.props.dispatch(fetchFollowRequests()); - } - - handleLoadMore = debounce(() => { - this.props.dispatch(expandFollowRequests()); - }, 300, { leading: true }); - - render() { - const { intl, accountIds, hasMore } = this.props; - - if (!accountIds) { - return ( - - - - ); - } - - const emptyMessage = ; - - return ( - - - {accountIds.map(id => - , - )} - - - ); - } - -} diff --git a/app/soapbox/features/follow_requests/index.tsx b/app/soapbox/features/follow_requests/index.tsx new file mode 100644 index 000000000..ef82d1aef --- /dev/null +++ b/app/soapbox/features/follow_requests/index.tsx @@ -0,0 +1,60 @@ +import { debounce } from 'lodash'; +import React from 'react'; +import { defineMessages, useIntl, FormattedMessage } from 'react-intl'; +import { useDispatch } from 'react-redux'; + +import { fetchFollowRequests, expandFollowRequests } from 'soapbox/actions/accounts'; +import ScrollableList from 'soapbox/components/scrollable_list'; +import { Spinner } from 'soapbox/components/ui'; +import { useAppSelector } from 'soapbox/hooks'; + +import Column from '../ui/components/column'; + +import AccountAuthorize from './components/account_authorize'; + +const messages = defineMessages({ + heading: { id: 'column.follow_requests', defaultMessage: 'Follow requests' }, +}); + +const handleLoadMore = debounce((dispatch) => { + dispatch(expandFollowRequests()); +}, 300, { leading: true }); + +const FollowRequests: React.FC = () => { + const dispatch = useDispatch(); + const intl = useIntl(); + + const accountIds = useAppSelector((state) => state.user_lists.getIn(['follow_requests', 'items'])); + const hasMore = useAppSelector((state) => !!state.user_lists.getIn(['follow_requests', 'next'])); + + React.useEffect(() => { + dispatch(fetchFollowRequests()); + }, []); + + if (!accountIds) { + return ( + + + + ); + } + + const emptyMessage = ; + + return ( + + handleLoadMore(dispatch)} + hasMore={hasMore} + emptyMessage={emptyMessage} + > + {accountIds.map(id => + , + )} + + + ); +}; + +export default FollowRequests; diff --git a/app/soapbox/features/mutes/index.tsx b/app/soapbox/features/mutes/index.tsx index 8e27c06d2..c1f306c24 100644 --- a/app/soapbox/features/mutes/index.tsx +++ b/app/soapbox/features/mutes/index.tsx @@ -47,7 +47,7 @@ const Mutes: React.FC = () => { emptyMessage={emptyMessage} className='space-y-4' > - {accountIds.map(id => + {accountIds.map((id: string) => , )} diff --git a/app/soapbox/utils/timelines.ts b/app/soapbox/utils/timelines.ts index 03ba96044..9f901b125 100644 --- a/app/soapbox/utils/timelines.ts +++ b/app/soapbox/utils/timelines.ts @@ -4,9 +4,9 @@ import type { Status as StatusEntity } from 'soapbox/types/entities'; export const shouldFilter = (status: StatusEntity, columnSettings: any) => { const shows = ImmutableMap({ - reblog: status.reblog !== null, - reply: status.in_reply_to_id !== null, - direct: status.visibility === 'direct', + reblog: status.get('reblog') !== null, + reply: status.get('in_reply_to_id') !== null, + direct: status.get('visibility') === 'direct', }); return shows.some((value, key) => {