@ -3,12 +3,13 @@ import React, { useEffect, useState } from 'react';
import { FormattedMessage , defineMessages , useIntl } from 'react-intl' ;
import { fetchFavourites , fetchReactions } from 'soapbox/actions/interactions' ;
import FilterBar from 'soapbox/components/filter_bar' ;
import ScrollableList from 'soapbox/components/scrollable_list' ;
import { Modal, Spinner } from 'soapbox/components/ui' ;
import { Emoji, Modal, Spinner , Tabs } from 'soapbox/components/ui' ;
import AccountContainer from 'soapbox/containers/account_container' ;
import { useAppDispatch , useAppSelector } from 'soapbox/hooks' ;
import type { Item } from 'soapbox/components/ui/tabs/tabs' ;
const messages = defineMessages ( {
close : { id : 'lightbox.close' , defaultMessage : 'Close' } ,
all : { id : 'reactions.all' , defaultMessage : 'All' } ,
@ -24,14 +25,14 @@ const ReactionsModal: React.FC<IReactionsModal> = ({ onClose, statusId, reaction
const dispatch = useAppDispatch ( ) ;
const intl = useIntl ( ) ;
const [ reaction , setReaction ] = useState ( initialReaction ) ;
const reactions = useAppSelector < Array < {
const reactions = useAppSelector < ImmutableList < {
accounts : Array < string > ,
count : number ,
name : string ,
} >> ( ( state ) = > {
const favourites = state . user_lists . getIn ( [ 'favourited_by' , statusId ] ) ;
const reactions = state . user_lists . getIn ( [ 'reactions' , statusId ] ) ;
return favourites && reactions && ImmutableList ( favourites ? [ { accounts : favourites , count : favourites.size , name : '👍' } ] : [ ] ) . concat ( reactions || [ ] ) ;
return favourites && reactions && ImmutableList ( favourites . size ? [ { accounts : favourites , count : favourites.size , name : '👍' } ] : [ ] ) . concat ( reactions || [ ] ) ;
} ) ;
const fetchData = ( ) = > {
@ -44,7 +45,7 @@ const ReactionsModal: React.FC<IReactionsModal> = ({ onClose, statusId, reaction
} ;
const renderFilterBar = ( ) = > {
const items = [
const items : Array < Item > = [
{
text : intl.formatMessage ( messages . all ) ,
action : ( ) = > setReaction ( '' ) ,
@ -54,13 +55,16 @@ const ReactionsModal: React.FC<IReactionsModal> = ({ onClose, statusId, reaction
reactions . forEach ( reaction = > items . push (
{
text : ` ${ reaction . name } ${ reaction . count } ` ,
text : < div className = 'flex items-center gap-1' >
< Emoji className = 'w-4 h-4' emoji = { reaction . name } / >
{ reaction . count }
< / div > ,
action : ( ) = > setReaction ( reaction . name ) ,
name : reaction.name ,
} ,
) ) ;
return < FilterBar className = 'reaction__filter-bar' items = { items } active = { reaction || 'all' } / > ;
return < Tabs items = { items } active Item = { reaction || 'all' } / > ;
} ;
useEffect ( ( ) = > {
@ -69,7 +73,7 @@ const ReactionsModal: React.FC<IReactionsModal> = ({ onClose, statusId, reaction
const accounts = reactions && ( reaction
? reactions . find ( ( { name } ) = > name === reaction ) ? . accounts . map ( account = > ( { id : account , reaction : reaction } ) )
: reactions . map ( ( { accounts , name } ) = > accounts . map ( account = > ( { id : account , reaction : name } ) ) ) . flat ( ) ) ;
: reactions . map ( ( { accounts , name } ) = > accounts . map ( account = > ( { id : account , reaction : name } ) ) ) . flat ten ( ) ) as Array < { id : string , reaction : string } > ;
let body ;
@ -79,14 +83,15 @@ const ReactionsModal: React.FC<IReactionsModal> = ({ onClose, statusId, reaction
const emptyMessage = < FormattedMessage id = 'status.reactions.empty' defaultMessage = 'No one has reacted to this post yet. When someone does, they will show up here.' / > ;
body = ( < >
{ reactions . length > 0 && renderFilterBar ( ) }
{ reactions . size > 0 && renderFilterBar ( ) }
< ScrollableList
scrollKey = 'reactions'
emptyMessage = { emptyMessage }
className = 'mt-4'
itemClassName = 'pb-3'
>
{ accounts . map ( ( account ) = >
< AccountContainer key = { ` ${ account . id } - ${ account . reaction } ` } id = { account . id } / * reaction = { account . reaction } * / / > ,
< AccountContainer key = { ` ${ account . id } - ${ account . reaction } ` } id = { account . id } emoji = { account . reaction } / > ,
) }
< / ScrollableList >
< / > ) ;