session-desktop/ts/components/dialog/user-settings/pages/ConversationSettingsPage.tsx

import useUpdate from 'react-use/lib/useUpdate';
import { useSelector } from 'react-redux';
import { getAppDispatch } from '../../../../state/dispatch';

import {
  userSettingsModal,
  type UserSettingsModalState,
} from '../../../../state/ducks/modalDialog';
import { PanelButtonGroup, PanelLabelWithDescription } from '../../../buttons/panel/PanelButton';
import { ModalBasicHeader } from '../../../SessionWrapperModal';
import { ModalBackButton } from '../../shared/ModalBackButton';
import {
  useUserSettingsBackAction,
  useUserSettingsCloseAction,
  useUserSettingsTitle,
} from './userSettingsHooks';
import { SettingsKey } from '../../../../data/settings-key';
import { SettingsToggleBasic } from '../components/SettingsToggleBasic';
import { ToastUtils } from '../../../../session/utils';

import { SettingsChevronBasic } from '../components/SettingsChevronBasic';
import { UserSettingsModalContainer } from '../components/UserSettingsModalContainer';
import { getAudioAutoplay } from '../../../../state/selectors/settings';

async function toggleCommunitiesPruning() {
  try {
    const newValue = !(await window.getOpengroupPruning());

    // make sure to write it here too, as this is the value used on the UI to mark the toggle as true/false
    await window.setSettingValue(SettingsKey.settingsOpengroupPruning, newValue);
    await window.setOpengroupPruning(newValue);
    ToastUtils.pushRestartNeeded();
  } catch (e) {
    window.log.warn('toggleCommunitiesPruning change error:', e);
  }
}

export function ConversationSettingsPage(modalState: UserSettingsModalState) {
  const forceUpdate = useUpdate();
  const backAction = useUserSettingsBackAction(modalState);
  const closeAction = useUserSettingsCloseAction(modalState);
  const title = useUserSettingsTitle(modalState);
  const dispatch = getAppDispatch();

  const isOpengroupPruningEnabled = Boolean(
    window.getSettingValue(SettingsKey.settingsOpengroupPruning)
  );
  const isSpellCheckActive =
    window.getSettingValue(SettingsKey.settingsSpellCheck) === undefined
      ? true
      : window.getSettingValue(SettingsKey.settingsSpellCheck);
  const audioAutoPlay = useSelector(getAudioAutoplay);

  return (
    <UserSettingsModalContainer
      headerChildren={
        <ModalBasicHeader
          title={title}
          bigHeader={true}
          showExitIcon={true}
          extraLeftButton={backAction ? <ModalBackButton onClick={backAction} /> : undefined}
        />
      }
      onClose={closeAction || undefined}
    >
      <PanelLabelWithDescription title={{ token: 'conversationsMessageTrimming' }} />
      <PanelButtonGroup>
        <SettingsToggleBasic
          baseDataTestId="conversation-trimming"
          active={isOpengroupPruningEnabled}
          onClick={async () => {
            await toggleCommunitiesPruning();
            forceUpdate();
          }}
          text={{ token: 'conversationsMessageTrimmingTrimCommunities' }}
          subText={{ token: 'conversationsMessageTrimmingTrimCommunitiesDescription' }}
        />
      </PanelButtonGroup>
      <PanelLabelWithDescription title={{ token: 'spellChecker' }} />
      <PanelButtonGroup>
        <SettingsToggleBasic
          baseDataTestId="spell-check"
          active={isSpellCheckActive}
          onClick={async () => {
            window.toggleSpellCheck();
            forceUpdate();
          }}
          text={{ token: 'conversationsSpellCheck' }}
          subText={{ token: 'conversationsSpellCheckDescription' }}
        />
      </PanelButtonGroup>
      <PanelLabelWithDescription title={{ token: 'conversationsAudioMessages' }} />
      <PanelButtonGroup>
        <SettingsToggleBasic
          baseDataTestId="audio-message-autoplay"
          active={audioAutoPlay}
          onClick={async () => {
            await window.setSettingValue(SettingsKey.audioAutoplay, !audioAutoPlay);
            forceUpdate();
          }}
          text={{ token: 'conversationsAutoplayAudioMessage' }}
          subText={{ token: 'conversationsAutoplayAudioMessageDescription' }}
        />
      </PanelButtonGroup>

      <PanelLabelWithDescription title={{ token: 'conversationsBlockedContacts' }} />
      <PanelButtonGroup>
        <SettingsChevronBasic
          baseDataTestId="blocked-contacts"
          onClick={() => {
            dispatch(userSettingsModal({ userSettingsPage: 'blocked-contacts' }));
          }}
          text={{ token: 'conversationsBlockedContacts' }}
          subText={{ token: 'blockedContactsManageDescription' }}
        />
      </PanelButtonGroup>
    </UserSettingsModalContainer>
  );
}