<commit_before>/*
 *
 * UserSettings
 *
 */

import React from 'react'
import { inject, observer } from 'mobx-react'
import { Button, Radio } from 'antd'

import ThemeSelector from 'components/ThemeSelector'
import Popover from 'components/Popover'

import SectionLabel from 'components/SectionLabel'
import DiscussLinker from 'components/DiscussLinker'
import { ICON_CMD, ISSUE_ADDR } from 'config'

import { makeDebugger, storePlug, C11N } from 'utils'
import { Wrapper, RadiosWrapper, OptionsWrapper, ErrText } from './styles'

import * as logic from './logic'

/* eslint-disable-next-line */
const debug = makeDebugger('C:UserSettings')

const RadioGroup = Radio.Group

class UserSettingsContainer extends React.Component {
  componentDidMount() {
    const { userSettings } = this.props
    logic.init(userSettings)
  }

  render() {
    const { userSettings } = this.props
    const { curTheme, accountInfo, isSelfViewing } = userSettings
    const { customization } = accountInfo

    return (
      <React.Fragment>
        {isSelfViewing ? (
          <Wrapper>
            <SectionLabel
              title="主题设置"
              iconSrc={`${ICON_CMD}/setting_theme.svg`}
              desc="如果你有更好的配色灵感，欢迎反馈给社区。"
            />
            <ThemeSelector
              curTheme={curTheme}
              changeTheme={logic.changeTheme}
              displayStyle="card"
            />
            <SectionLabel
              title="顶部视图"
              iconSrc={`${ICON_CMD}/setting_banner.svg`}
              desc="浏览社区内容时，顶部社区信息摘要的显示方式。"
            />
            <RadiosWrapper>
              <RadioGroup
                onChange={logic.c11nOnChange.bind(this, 'bannerLayout')}
                value={customization.bannerLayout}
              >
                <Radio value={C11N.DIGEST}>详细视图</Radio>
                <Radio value={C11N.BRIEF}>简洁视图</Radio>
              </RadioGroup>
            </RadiosWrapper>
            <SectionLabel
              title="内容视图"
              iconSrc={`${ICON_CMD}/setting_list.svg`}
              desc="浏览内容时列表的显示方式, 部分板块(如视频，开源项目等)不支持列表视图"
            />
            <RadiosWrapper>
              <RadioGroup
                onChange={logic.c11nOnChange.bind(this, 'contentsLayout')}
                value={customization.contentsLayout}
              >
                <Radio value={C11N.LIST}>列表视图</Radio>
                <Radio value={C11N.DIGEST}>摘要视图</Radio>
              </RadioGroup>
            </RadiosWrapper>
            <SectionLabel
              title="阅读提示"
              iconSrc={`${ICON_CMD}/setting_read.svg`}
              desc="是否在阅读列表左侧显示已读标签, 以便突出未读内容？"
            />
            <RadiosWrapper>
              <RadioGroup
                onChange={logic.c11nOnChange.bind(this, 'markViewed')}
                value={customization.markViewed}
              >
                {/* eslint-disable react/jsx-boolean-value */}
                <Radio value={true}>显示</Radio>
                {/* eslint-enable react/jsx-boolean-value */}
                <Radio value={false}>不显示</Radio>
              </RadioGroup>
            </RadiosWrapper>
            <SectionLabel
              title="显示密度"
              iconSrc={`${ICON_CMD}/setting_number.svg`}
              desc="浏览帖子/招聘/视频/开源项目等内容时， 每页显示的条数。"
            />
            <RadiosWrapper>
              <RadioGroup
                onChange={logic.c11nOnChange.bind(this, 'displayDensity')}
                value={customization.displayDensity}
              >
                <Radio value="20">20条 / 每页</Radio>
                <Radio value="25">25条 / 每页</Radio>
                <Radio value="30">30条 / 每页</Radio>
              </RadioGroup>
            </RadiosWrapper>
            <SectionLabel
              title="打赏设置(wip)"
              iconSrc={`${ICON_CMD}/dashang.svg`}
              desc="开启后赞赏按钮将出现在你的文章底部, 注意仅支持原创内容， 链接分享、转载等不显示打赏按钮。提现需提交申请，将在 3-5 个工作日内到达你的账户，不收取任何手续费用。"
            />
            <Popover
              placement="bottom"
              trigger="hover"
              content={
                <DiscussLinker title="打赏设置" addr={`${ISSUE_ADDR}/268`} />
              }
            >
              <OptionsWrapper>
                <RadiosWrapper>
                  <RadioGroup onChange={debug} value={2}>
                    <Radio value={1}>开启</Radio>
                    <Radio value={2}>关闭</Radio>
                  </RadioGroup>
                </RadiosWrapper>
              </OptionsWrapper>
            </Popover>
            <SectionLabel
              title="邮件订阅(wip)"
              iconSrc={`${ICON_CMD}/mail.svg`}
              desc="接收邮件提醒，订阅, 账单, 每周精选等等, 我们不会滥用你的信任，建议开启。"
            />
            <Popover
              placement="bottom"
              trigger="hover"
              content={
                <DiscussLinker title="邮件订阅" addr={`${ISSUE_ADDR}/267`} />
              }
            >
              <OptionsWrapper>
                <RadiosWrapper>
                  <RadioGroup onChange={debug} value={2}>
                    <Radio value={1}>开启</Radio>
                    <Radio value={2}>关闭</Radio>
                  </RadioGroup>
                </RadiosWrapper>
              </OptionsWrapper>
            </Popover>

            <SectionLabel
              title="Github 同步"
              iconSrc={`${ICON_CMD}/github.svg`}
              desc="将绑定的 Github 账户信息同步到最新状态, 上次同步时间: 3天前。"
            />
            <Button size="small" type="primary" ghost>
              同步 Github
            </Button>
          </Wrapper>
        ) : (
          <ErrText>请登录后查看本人的设置信息</ErrText>
        )}
      </React.Fragment>
    )
  }
}

export default inject(storePlug('userSettings'))(
  observer(UserSettingsContainer)
)<commit_msg>refactor(user-settings): rm unnessary github sync btn, closes #359<commit_after>/*
 *
 * UserSettings
 *
 */

import React from 'react'
import { inject, observer } from 'mobx-react'
import { Radio } from 'antd'

import ThemeSelector from 'components/ThemeSelector'
import Popover from 'components/Popover'

import SectionLabel from 'components/SectionLabel'
import DiscussLinker from 'components/DiscussLinker'
import { ICON_CMD, ISSUE_ADDR } from 'config'

import { makeDebugger, storePlug, C11N } from 'utils'
import { Wrapper, RadiosWrapper, OptionsWrapper, ErrText } from './styles'

import * as logic from './logic'

/* eslint-disable-next-line */
const debug = makeDebugger('C:UserSettings')

const RadioGroup = Radio.Group

class UserSettingsContainer extends React.Component {
  componentDidMount() {
    const { userSettings } = this.props
    logic.init(userSettings)
  }

  render() {
    const { userSettings } = this.props
    const { curTheme, accountInfo, isSelfViewing } = userSettings
    const { customization } = accountInfo

    return (
      <React.Fragment>
        {isSelfViewing ? (
          <Wrapper>
            <SectionLabel
              title="主题设置"
              iconSrc={`${ICON_CMD}/setting_theme.svg`}
              desc="如果你有更好的配色灵感，欢迎反馈给社区。"
            />
            <ThemeSelector
              curTheme={curTheme}
              changeTheme={logic.changeTheme}
              displayStyle="card"
            />
            <SectionLabel
              title="顶部视图"
              iconSrc={`${ICON_CMD}/setting_banner.svg`}
              desc="浏览社区内容时，顶部社区信息摘要的显示方式。"
            />
            <RadiosWrapper>
              <RadioGroup
                onChange={logic.c11nOnChange.bind(this, 'bannerLayout')}
                value={customization.bannerLayout}
              >
                <Radio value={C11N.DIGEST}>详细视图</Radio>
                <Radio value={C11N.BRIEF}>简洁视图</Radio>
              </RadioGroup>
            </RadiosWrapper>
            <SectionLabel
              title="内容视图"
              iconSrc={`${ICON_CMD}/setting_list.svg`}
              desc="浏览内容时列表的显示方式, 部分板块(如视频，开源项目等)不支持列表视图"
            />
            <RadiosWrapper>
              <RadioGroup
                onChange={logic.c11nOnChange.bind(this, 'contentsLayout')}
                value={customization.contentsLayout}
              >
                <Radio value={C11N.LIST}>列表视图</Radio>
                <Radio value={C11N.DIGEST}>摘要视图</Radio>
              </RadioGroup>
            </RadiosWrapper>
            <SectionLabel
              title="阅读提示"
              iconSrc={`${ICON_CMD}/setting_read.svg`}
              desc="是否在阅读列表左侧显示已读标签, 以便突出未读内容？"
            />
            <RadiosWrapper>
              <RadioGroup
                onChange={logic.c11nOnChange.bind(this, 'markViewed')}
                value={customization.markViewed}
              >
                {/* eslint-disable react/jsx-boolean-value */}
                <Radio value={true}>显示</Radio>
                {/* eslint-enable react/jsx-boolean-value */}
                <Radio value={false}>不显示</Radio>
              </RadioGroup>
            </RadiosWrapper>
            <SectionLabel
              title="显示密度"
              iconSrc={`${ICON_CMD}/setting_number.svg`}
              desc="浏览帖子/招聘/视频/开源项目等内容时， 每页显示的条数。"
            />
            <RadiosWrapper>
              <RadioGroup
                onChange={logic.c11nOnChange.bind(this, 'displayDensity')}
                value={customization.displayDensity}
              >
                <Radio value="20">20条 / 每页</Radio>
                <Radio value="25">25条 / 每页</Radio>
                <Radio value="30">30条 / 每页</Radio>
              </RadioGroup>
            </RadiosWrapper>
            <SectionLabel
              title="打赏设置(wip)"
              iconSrc={`${ICON_CMD}/dashang.svg`}
              desc="开启后赞赏按钮将出现在你的文章底部, 注意仅支持原创内容， 链接分享、转载等不显示打赏按钮。提现需提交申请，将在 3-5 个工作日内到达你的账户，不收取任何手续费用。"
            />
            <Popover
              placement="bottom"
              trigger="hover"
              content={
                <DiscussLinker title="打赏设置" addr={`${ISSUE_ADDR}/268`} />
              }
            >
              <OptionsWrapper>
                <RadiosWrapper>
                  <RadioGroup onChange={debug} value={2}>
                    <Radio value={1}>开启</Radio>
                    <Radio value={2}>关闭</Radio>
                  </RadioGroup>
                </RadiosWrapper>
              </OptionsWrapper>
            </Popover>
            <SectionLabel
              title="邮件订阅(wip)"
              iconSrc={`${ICON_CMD}/mail.svg`}
              desc="接收邮件提醒，订阅, 账单, 每周精选等等, 我们不会滥用你的信任，建议开启。"
            />
            <Popover
              placement="bottom"
              trigger="hover"
              content={
                <DiscussLinker title="邮件订阅" addr={`${ISSUE_ADDR}/267`} />
              }
            >
              <OptionsWrapper>
                <RadiosWrapper>
                  <RadioGroup onChange={debug} value={2}>
                    <Radio value={1}>开启</Radio>
                    <Radio value={2}>关闭</Radio>
                  </RadioGroup>
                </RadiosWrapper>
              </OptionsWrapper>
            </Popover>
          </Wrapper>
        ) : (
          <ErrText>请登录后查看本人的设置信息</ErrText>
        )}
      </React.Fragment>
    )
  }
}

export default inject(storePlug('userSettings'))(
  observer(UserSettingsContainer)
)
{'fraction_non_alphanumeric': 0.11938428494719885, 'fraction_numerical': 0.008233398961875783, 'mean_word_length': 1.5560384263494969, 'pattern_counts': {'":': 0, '<': 154, '<?xml version=': 0, '>': 154, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5427502', 'n_tokens_mistral': 3618, 'n_tokens_neox': 3719, 'n_words': 480}