removeddit/src/pages/thread/SortBy.js

import React, { useState } from 'react'
import {connect, sort, filter, maxCommentsLimit} from '../../state'

const sortBy = props => {
  const [reloadVisible, setReloadVisible] = useState(false)
  const isFirefox = typeof InstallTrigger !== 'undefined'
  let usedMouse;

  return (
  <div id='comment-sort'>
  <label htmlFor='commentSort'>sorted by:</label>
    <span className='space' />
    <select id='commentSort' defaultValue={props.global.state.commentSort}
      onMouseDown={() => usedMouse = true}
      onKeyDown=  {() => usedMouse = false}
      onChange=   {e  => {props.global.setCommentSort(e.target.value); if (usedMouse) e.target.blur()}}>
      <option value={sort.top}>top</option>
      <option value={sort.bottom}>bottom</option>
      <option value={sort.new}>new</option>
      <option value={sort.old}>old</option>
    </select>
    <span className='space' />
  <label htmlFor='commentFilter'>show:</label>
    <span className='space' />
    <select id='commentFilter' defaultValue={props.global.state.commentFilter}
      onMouseDown={() => usedMouse = true}
      onKeyDown=  {() => usedMouse = false}
      onChange=   {e  => {props.global.setCommentFilter(e.target.value); if (usedMouse) e.target.blur()}}>
      <option value={filter.all}>All comments</option>
      <option value={filter.removedDeleted}>Removed and deleted</option>
      <option value={filter.removed}>Removed</option>
      <option value={filter.deleted}>Deleted</option>
    </select>
    <span className='space' />
  <label htmlFor='maxComments'>max. to download:</label>
    <span className='space' />
    <input id='maxComments' onChange={e => {
      setReloadVisible(parseInt(e.target.value) > props.global.state.maxComments && props.global.state.maxComments < maxCommentsLimit)
    }} onBlur={e => {
      e.target.value = props.global.saveMaxComments(e.target.value)
    }} {
      ...(isFirefox ? {onClick: e => {
        e.target.focus()
      }} : {})
    } defaultValue={props.global.state.maxComments} type='number' maxLength='5' required min='100' max={maxCommentsLimit} step='100' />
  {reloadVisible && <>
    <span className='space' />
    <input onClick={() => {props.global.loadMaxComments(); setReloadVisible(false)}} type='button' value='Reload' />
  </>}
  </div>
  )
}

export default connect(sortBy)