127 lines
4.5 KiB
JavaScript
127 lines
4.5 KiB
JavaScript
// @flow
|
|
import * as ICONS from 'constants/icons';
|
|
import React from 'react';
|
|
import classnames from 'classnames';
|
|
import ClaimList from 'component/claimList';
|
|
import Page from 'component/page';
|
|
import Spinner from 'component/spinner';
|
|
import Button from 'component/button';
|
|
import usePrevious from 'effects/use-previous';
|
|
import usePersistedState from 'effects/use-persisted-state';
|
|
import ChannelBlockButton from 'component/channelBlockButton';
|
|
import ChannelMuteButton from 'component/channelMuteButton';
|
|
|
|
type Props = {
|
|
mutedUris: ?Array<string>,
|
|
blockedUris: ?Array<string>,
|
|
fetchingModerationBlockList: boolean,
|
|
};
|
|
|
|
const VIEW_BLOCKED = 'blocked';
|
|
const VIEW_MUTED = 'muted';
|
|
|
|
function ListBlocked(props: Props) {
|
|
const { mutedUris, blockedUris, fetchingModerationBlockList } = props;
|
|
|
|
const [viewMode, setViewMode] = usePersistedState('blocked-muted:display', VIEW_BLOCKED);
|
|
const [loading, setLoading] = React.useState(!blockedUris || !blockedUris.length);
|
|
|
|
// Keep a local list to allow for undoing actions in this component
|
|
const [localBlockedList, setLocalBlockedList] = React.useState(undefined);
|
|
const [localMutedList, setLocalMutedList] = React.useState(undefined);
|
|
|
|
const previousFetchingModBlockList = usePrevious(fetchingModerationBlockList);
|
|
const hasLocalMuteList = localMutedList && localMutedList.length > 0;
|
|
const hasLocalBlockList = localBlockedList && localBlockedList.length > 0;
|
|
const stringifiedMutedChannels = JSON.stringify(mutedUris);
|
|
const justMuted = localMutedList && mutedUris && localMutedList.length < mutedUris.length;
|
|
const justBlocked = localBlockedList && blockedUris && localBlockedList.length < blockedUris.length;
|
|
const stringifiedBlockedChannels = JSON.stringify(blockedUris);
|
|
|
|
React.useEffect(() => {
|
|
if (previousFetchingModBlockList && !fetchingModerationBlockList) {
|
|
setLoading(false);
|
|
}
|
|
}, [setLoading, previousFetchingModBlockList, fetchingModerationBlockList]);
|
|
|
|
React.useEffect(() => {
|
|
const jsonMutedChannels = stringifiedMutedChannels && JSON.parse(stringifiedMutedChannels);
|
|
if (!hasLocalMuteList && jsonMutedChannels && jsonMutedChannels.length > 0) {
|
|
setLocalMutedList(jsonMutedChannels);
|
|
}
|
|
}, [stringifiedMutedChannels, hasLocalMuteList]);
|
|
|
|
React.useEffect(() => {
|
|
const jsonBlockedChannels = stringifiedBlockedChannels && JSON.parse(stringifiedBlockedChannels);
|
|
if (!hasLocalBlockList && jsonBlockedChannels && jsonBlockedChannels.length > 0) {
|
|
setLocalBlockedList(jsonBlockedChannels);
|
|
}
|
|
}, [stringifiedBlockedChannels, hasLocalBlockList]);
|
|
|
|
React.useEffect(() => {
|
|
if (justMuted && stringifiedMutedChannels) {
|
|
setLocalMutedList(JSON.parse(stringifiedMutedChannels));
|
|
}
|
|
}, [stringifiedMutedChannels, justMuted, setLocalMutedList]);
|
|
|
|
React.useEffect(() => {
|
|
if (justBlocked && stringifiedBlockedChannels) {
|
|
setLocalBlockedList(JSON.parse(stringifiedBlockedChannels));
|
|
}
|
|
}, [stringifiedBlockedChannels, justBlocked, setLocalBlockedList]);
|
|
|
|
return (
|
|
<Page>
|
|
{loading && (
|
|
<div className="main--empty">
|
|
<Spinner />
|
|
</div>
|
|
)}
|
|
|
|
{!loading && (
|
|
<>
|
|
<div className="section__header--actions">
|
|
<div className="section__actions--inline">
|
|
<Button
|
|
icon={ICONS.BLOCK}
|
|
button="alt"
|
|
label={__('Blocked')}
|
|
className={classnames(`button-toggle`, {
|
|
'button-toggle--active': viewMode === VIEW_BLOCKED,
|
|
})}
|
|
onClick={() => setViewMode(VIEW_BLOCKED)}
|
|
/>
|
|
<Button
|
|
icon={ICONS.MUTE}
|
|
button="alt"
|
|
label={__('Muted')}
|
|
className={classnames(`button-toggle`, {
|
|
'button-toggle--active': viewMode === VIEW_MUTED,
|
|
})}
|
|
onClick={() => setViewMode(VIEW_MUTED)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
{
|
|
<ClaimList
|
|
uris={viewMode === VIEW_MUTED ? localMutedList : localBlockedList}
|
|
showUnresolvedClaims
|
|
showHiddenByUser
|
|
hideMenu
|
|
renderActions={(claim) => {
|
|
return (
|
|
<div className="section__actions">
|
|
<ChannelBlockButton uri={claim.permanent_url} />
|
|
<ChannelMuteButton uri={claim.permanent_url} />
|
|
</div>
|
|
);
|
|
}}
|
|
/>
|
|
}
|
|
</>
|
|
)}
|
|
</Page>
|
|
);
|
|
}
|
|
|
|
export default ListBlocked;
|