shared/settings/notifications/render.tsx - master - githubmirror/client

shared/settings/notifications/render.tsx
108 строк3 KB
chrisnojima
refactor(styles): theme via hooks, no android remount (#29515)
08 авг 2026, 02:24
08 авг 2026, 02:24a41d38e
import * as Kb from '@/common-adapters'
import * as TestIDs from '@/tests/e2e/shared/test-ids'
import Group from '../group'
import {usePushState} from '@/stores/push'

type Props = {
  allowEdit: boolean
  groups: ReadonlyMap<
    string,
    {
      settings: ReadonlyArray<{
        description: string
        name: string
        subscribed: boolean
      }>
      unsub: boolean
    }
  >
  onClickYourAccount: () => void
  onToggle: (groupName: string, name: string) => void
  onToggleUnsubscribeAll: (groupName: string) => void
  showEmailSection: boolean
}

const PhoneSection = (props: Props) => {
  const {onToggleUnsubscribeAll} = props
  return (
    <Group
      allowEdit={props.allowEdit}
      label="Notifications sent directly to your phone."
      groupName="app_push"
      onToggle={props.onToggle}
      onToggleUnsubscribeAll={() => onToggleUnsubscribeAll('app_push')}
      title="Phone notifications"
      unsub="phone"
      settings={props.groups.get('app_push')!.settings}
      unsubscribedFromAll={props.groups.get('app_push')!.unsub}
    />
  )
}
const Notifications = (props: Props) => {
  const styles = useStyles()
  const {onToggleUnsubscribeAll} = props
  const mobileHasPermissions = usePushState(s => s.hasPermissions)
  const hasLoadedGroups = props.groups.size > 0
  const emailGroup = props.groups.get('email')
  return !hasLoadedGroups ? (
    <Kb.Box2 direction="vertical" centerChildren={true} flex={1}>
      <Kb.ProgressIndicator type="Small" style={{width: Kb.Styles.globalMargins.medium}} />
    </Kb.Box2>
  ) : (
    <Kb.Box2
      direction="vertical"
      fullWidth={true}
      flex={1}
      style={styles.main}
      testID={TestIDs.SETTINGS_NOTIFICATIONS}
    >
      {emailGroup ? (
        <Group
          allowEdit={props.allowEdit}
          groupName="email"
          label="All email notifications will be sent to your primary email address."
          onToggle={props.onToggle}
          onToggleUnsubscribeAll={() => onToggleUnsubscribeAll('email')}
          title="Email notifications"
          unsub="email"
          settings={emailGroup.settings}
          unsubscribedFromAll={emailGroup.unsub}
        />
      ) : !props.showEmailSection ? (
        <Kb.Box2 direction="vertical" fullWidth={true}>
          <Kb.Text type="Header">Email notifications</Kb.Text>
          <Kb.Text type="BodySmall">
            Go to{' '}
            <Kb.Text type="BodySmallSemiboldSecondaryLink" onClick={props.onClickYourAccount}>
              Your account
            </Kb.Text>{' '}
            and add an email address.
          </Kb.Text>
        </Kb.Box2>
      ) : null}
      {(!isMobile || mobileHasPermissions) && !!props.groups.get('app_push')?.settings ? (
        <>
          <Kb.Divider style={styles.divider} />
          <PhoneSection {...props} />
        </>
      ) : null}
    </Kb.Box2>
  )
}

const useStyles = Kb.Styles.createStyleHook(
  () =>
    ({
      divider: {
        marginBottom: Kb.Styles.globalMargins.small,
        marginLeft: -Kb.Styles.globalMargins.small,
        marginTop: Kb.Styles.globalMargins.small,
      },
      main: Kb.Styles.platformStyles({
        common: {padding: Kb.Styles.globalMargins.small, paddingRight: 0},
        isElectron: Kb.Styles.desktopStyles.scrollable,
      }),
    }) as const
)

export default Notifications