enabledContent.tsx

/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this file,
 * You can obtain one at http://mozilla.org/MPL/2.0/. */

import * as React from 'react'

// Components
import { Button, AlertBox } from 'brave-ui'
import { CloseCircleIcon } from 'brave-ui/components/icons'
import Table, { Cell, Row } from 'brave-ui/components/dataTables/table'
// TODO(petemill): Do not use a component (Toggle) from another app.
// Instead copy it local to this app, or create the component in a central location,
// either in this repo or in brave-ui.
import { Toggle } from '../../../brave_extension/extension/brave_extension/components/toggle'

// Feature-specific components
import {
  Main,
  Title,
  Paragraph,
  SectionBlock,
  SubTitle,
  TableRowDevice,
  TableRowRemove,
  TableRowRemoveButton,
  TableRowToggleButton,
  TableGrid,
  TableButtonGrid,
  EnabledContent,
  SyncCardContent,
  SyncCard
} from 'brave-ui/features/sync'

// Modals
import RemoveDeviceModal from './modals/removeDevice'
import ViewSyncCodeModal from './modals/viewSyncCode'
import ScanCodeModal from './modals/scanCode'
import DeviceTypeModal from './modals/deviceType'
import ResetSyncModal from './modals/resetSync'

// Utils
import { getLocale } from '../../../common/locale'

interface Props {
  syncData: Sync.State
  actions: any
}

interface State {
  removeDevice: boolean
  viewSyncCode: boolean
  scanCode: boolean
  addDevice: boolean
  resetSync: boolean
  deviceToRemoveName: string | undefined
  deviceToRemoveId: string | undefined
}

export default class SyncEnabledContent extends React.PureComponent<Props, State> {
  constructor (props: Props) {
    super(props)
    this.state = {
      removeDevice: false,
      viewSyncCode: false,
      scanCode: false,
      addDevice: false,
      resetSync: false,
      deviceToRemoveName: '',
      deviceToRemoveId: ''
    }
  }

  componentDidMount () {
    this.shouldShowAddDeviceModal()
  }

  componentDidUpdate (prevProps: Props) {
    if (
      prevProps.syncData.devices.length !==
      this.props.syncData.devices.length
    ) {
      // if devices length changed, users either added
      // or removed a device. again, check if they are less than 2
      // so we can remind them again to add a new device
      this.shouldShowAddDeviceModal()
    }
  }

  shouldShowAddDeviceModal = () => {
    const { syncData } = this.props
    const hasLessThanTwoDevices: boolean = syncData.devices.length < 2
    // if only one device is found, remind the user
    // at every page refresh to add a new device
    this.setState({ addDevice: hasLessThanTwoDevices })
  }

  getDevicesRows = (devices?: any): Row[] | undefined => {
    if (!devices) {
      return
    }

    return devices.map((device: any): Row => {
      const cell: Row = {
        content: [
          { content: (
            <TableRowDevice>
              {device.name} {
                  device.id_v2 === this.props.syncData.thisDeviceIdV2 ? getLocale('thisDevice') : null
              }
            </TableRowDevice>
          )},
          { content: device.lastActive },
          {
            content: (
              <TableRowRemoveButton
                data-id={device.id}
                data-idv2={device.id_v2}
                data-name={device.name}
                onClick={this.onClickRemoveDeviceButton}
              >
                <CloseCircleIcon />
              </TableRowRemoveButton>
            )
          }
        ]
      }
      return cell
    })
  }

  get devicesHeader (): Cell[] {
    return [
      { content: <TableRowDevice>{getLocale('deviceName')}</TableRowDevice> },
      { content: getLocale('addedOn') },
      { content: <TableRowRemove>{getLocale('remove')}</TableRowRemove> }
    ]
  }

  get settingsHeader (): Cell[] {
    return [
      { content: <TableRowDevice>{getLocale('settings')}</TableRowDevice> },
      { content: '' }
    ]
  }

  get settingsRows (): Row[] {
    return [
      {
        content: [
          { content: getLocale('bookmarks') },
          { content: (
            <TableRowToggleButton>
            <Toggle
              id='bookmarks'
              size='large'
              checked={this.props.syncData.syncBookmarks}
              onChange={this.onSyncBookmarks}
            />
            </TableRowToggleButton>
          ) }
        ]
      }
    ]
  }

  onClickRemoveDeviceButton = (event: React.MouseEvent<HTMLButtonElement>) => {
    if (!event || !event.currentTarget || !event.currentTarget.dataset) {
      return
    }
    const target = event.currentTarget as HTMLButtonElement
    this.setState({
      deviceToRemoveName: target.dataset.name,
      deviceToRemoveId: target.dataset.idv2,
      removeDevice: true
    })
  }

  onClickCancelRemoveDeviceButton = () => {
    this.setState({ removeDevice: !this.state.removeDevice })
  }

  onUserNoticedError = () => {
    this.props.actions.clearSyncSetupError()
  }

  onClickCancelChildModals = () => {
    this.setState({ scanCode: false, viewSyncCode: false })
  }

  onClickViewSyncCodeButton = () => {
    this.setState({ scanCode: false, viewSyncCode: true })
  }

  onClickScanCodeButton = () => {
    this.setState({ scanCode: true, viewSyncCode: false })
  }

  onClickAddDeviceButton = () => {
    this.setState({ addDevice: !this.state.addDevice })
  }

  onClickResetSyncButton = () => {
    this.setState({ resetSync: !this.state.resetSync })
  }

  onSyncBookmarks = (event: React.ChangeEvent<HTMLInputElement>) => {
    this.props.actions.onSyncBookmarks(event.target.checked)
  }

  render () {
    const { actions, syncData } = this.props
    const {
      removeDevice,
      viewSyncCode,
      scanCode,
      addDevice,
      resetSync,
      deviceToRemoveName,
      deviceToRemoveId
    } = this.state

    if (!syncData) {
      return null
    }

    return (
      <EnabledContent>
        <Main>
          {
            syncData.error === 'ERR_SYNC_INIT_FAILED'
            ? <AlertBox okString={getLocale('ok')} onClickOk={this.onUserNoticedError}>
                <Title>{getLocale('errorSyncInitFailedTitle')}</Title>
                <SubTitle>{getLocale('errorSyncInitFailedDescription')}</SubTitle>
              </AlertBox>
            : null
          }
          {
            syncData.error === 'ERR_SYNC_REQUIRES_CORRECT_TIME'
            ? <AlertBox okString={getLocale('ok')} onClickOk={this.onUserNoticedError}>
                <Title>{getLocale('errorSyncRequiresCorrectTimeTitle')}</Title>
                <SubTitle>{getLocale('errorSyncRequiresCorrectTimeDescription')}</SubTitle>
              </AlertBox>
            : null
          }
          {
            removeDevice
              ? (
                <RemoveDeviceModal
                  syncData={syncData}
                  deviceName={deviceToRemoveName}
                  deviceIdV2={deviceToRemoveId}
                  actions={actions}
                  onClose={this.onClickCancelRemoveDeviceButton}
                />
              )
              : null
          }
          {
            viewSyncCode
              ? (
                <ViewSyncCodeModal
                  onClickScanCodeInstead={this.onClickScanCodeButton}
                  syncData={syncData}
                  actions={actions}
                  onClose={this.onClickCancelChildModals}
                />
              ) : null
          }
          {
            scanCode
              ? (
                <ScanCodeModal
                  onClickViewSyncCodeInstead={this.onClickViewSyncCodeButton}
                  syncData={syncData}
                  actions={actions}
                  onClose={this.onClickCancelChildModals}
                />
              ) : null
          }
          {
            addDevice
              ? <DeviceTypeModal syncData={syncData} actions={actions} onClose={this.onClickAddDeviceButton} />
              : null
          }
          {
            resetSync
              ? <ResetSyncModal syncData={syncData} actions={actions} onClose={this.onClickResetSyncButton} />
              : null
          }
          <SyncCard>
            <SyncCardContent>
              <Title level={2}>{getLocale('braveSync')}</Title>
              <Paragraph>{getLocale('syncChainDevices')}</Paragraph>
              <SectionBlock>
                <TableGrid isDeviceTable={true}>
                  <Table header={this.devicesHeader} rows={this.getDevicesRows(syncData.devices)}>
                    Device list is empty
                  </Table>
                  <TableButtonGrid>
                    <br />
                    <Button
                      level='secondary'
                      type='accent'
                      size='medium'
                      text={getLocale('viewSyncCode')}
                      onClick={this.onClickViewSyncCodeButton}
                    />
                    <Button
                      level='primary'
                      type='accent'
                      size='medium'
                      text={getLocale('addDevice')}
                      onClick={this.onClickAddDeviceButton}
                    />
                  </TableButtonGrid>
                </TableGrid>
              </SectionBlock>
              <Title level={2}>{getLocale('settingsTitle')}</Title>
              <Paragraph>{getLocale('settingsDescription')}</Paragraph>
              <SectionBlock>
                <Table header={this.settingsHeader} rows={this.settingsRows} />
              </SectionBlock>
              <SectionBlock>
                <Button
                  level='primary'
                  type='accent'
                  size='medium'
                  text={getLocale('leaveSyncChain')}
                  onClick={this.onClickResetSyncButton}
                />
              </SectionBlock>
            </SyncCardContent>
          </SyncCard>
        </Main>
      </EnabledContent>
    )
  }
}