lbry-desktop/ui/page/listBlocked/view.jsx

// @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>
          <div className="help--notice">
            {viewMode === VIEW_MUTED
              ? __(
                  'Muted channels will be invisible to you in the app. They will not know they are muted and can still interact with you and your content.'
                )
              : __(
                  "Blocked channels will be invisible to you in the app. They will not be able to comment on your content, or reply to you comments left on other channels' content."
                )}
          </div>
          <ClaimList
            uris={viewMode === VIEW_MUTED ? localMutedList : localBlockedList}
            showUnresolvedClaims
            showHiddenByUser
            hideMenu
            renderActions={(claim) => {
              return (
                <div className="section__actions">
                  {viewMode === VIEW_MUTED ? (
                    <>
                      <ChannelMuteButton uri={claim.permanent_url} />
                      <ChannelBlockButton uri={claim.permanent_url} />
                    </>
                  ) : (
                    <>
                      <ChannelBlockButton uri={claim.permanent_url} />
                      <ChannelMuteButton uri={claim.permanent_url} />
                    </>
                  )}
                </div>
              );
            }}
          />
        </>
      )}
    </Page>
  );
}

export default ListBlocked;