diff --git a/src/pages/thread/SortBy.js b/src/pages/thread/SortBy.js index dc2632c..f8d47a8 100644 --- a/src/pages/thread/SortBy.js +++ b/src/pages/thread/SortBy.js @@ -1,8 +1,9 @@ import React, { useState } from 'react' -import {connect, sort, filter, saveMaxComments, minCommentsLimit, maxCommentsLimit} from '../../state' +import {connect, sort, filter, getMaxComments, saveMaxComments, minCommentsLimit, maxCommentsLimit} from '../../state' const sortBy = props => { const [maxCommentsField, setMaxCommentsField] = useState(props.global.state.maxComments) + const initSavedMaxComments = getMaxComments() const isFirefox = typeof InstallTrigger !== 'undefined' let usedMouse; @@ -43,7 +44,7 @@ const sortBy = props => { onBlur= {e => e.target.value = saveMaxComments(e.target.value)} { ...(isFirefox ? { onClick: e => e.target.focus() } : {}) } - defaultValue={props.global.state.maxComments} type='number' maxLength='5' required + defaultValue={initSavedMaxComments} type='number' maxLength='5' required min={minCommentsLimit} max={maxCommentsLimit} step={minCommentsLimit} /> { maxCommentsField > props.global.state.maxComments && props.global.state.maxComments < maxCommentsLimit && !props.reloadingComments && diff --git a/src/pages/thread/index.js b/src/pages/thread/index.js index 3149a0b..13997cf 100644 --- a/src/pages/thread/index.js +++ b/src/pages/thread/index.js @@ -9,7 +9,7 @@ import { getComments as getPushshiftComments } from '../../api/pushshift' import { isDeleted, isRemoved } from '../../utils' -import { connect } from '../../state' +import { connect, constrainMaxComments } from '../../state' import Post from '../common/Post' import CommentSection from './CommentSection' import SortBy from './SortBy' @@ -29,7 +29,12 @@ class Thread extends React.Component { componentDidMount () { const { subreddit, threadID } = this.props.match.params - this.curMaxComments = this.props.global.state.maxComments + let maxCommentsQuery = parseInt((new URLSearchParams(this.props.location.search)).get('max_comments')) + if (maxCommentsQuery > this.props.global.state.maxComments) + // Directly mutating the state is not recommended, but it's only done once and is probably OK here + this.props.global.state.maxComments = this.curMaxComments = constrainMaxComments(maxCommentsQuery) + else + this.curMaxComments = this.props.global.state.maxComments this.props.global.setLoading('Loading post...') // Get post from reddit diff --git a/src/state.js b/src/state.js index 5b532a0..afa4e5e 100644 --- a/src/state.js +++ b/src/state.js @@ -23,11 +23,17 @@ export const maxCommentsDefault = 800 export const minCommentsLimit = chunkSize export const maxCommentsLimit = 20000 -// Contrains, saves, and returns it, but does not change the state (does not load more comments) -export const saveMaxComments = maxComments => { +// Constrains input to between minCommentsLimit and maxCommentsLimit +export const constrainMaxComments = maxComments => { maxComments = Math.min(Math.round(maxComments), maxCommentsLimit) if (!(maxComments >= minCommentsLimit)) // also true when maxComments isn't a number maxComments = minCommentsLimit + return maxComments +} + +// Contrains, saves, and returns it, but does not change the state (does not load more comments) +export const saveMaxComments = maxComments => { + maxComments = constrainMaxComments(maxComments) put(maxCommentsKey, maxComments) return maxComments }