Skip to content

Commit

Permalink
refactor(TripSeriesModal): simplify state definition
Browse files Browse the repository at this point in the history
  • Loading branch information
@AdrianaCeric
AdrianaCeric committed Nov 22, 2023
1 parent 6f2de56 commit 6a8a993
Showing 1 changed file with 93 additions and 49 deletions.
142 changes: 93 additions & 49 deletions lib/editor/components/timetable/TripSeriesModal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,34 @@ import {getComponentMessages} from '../../../common/util/config'
import HourMinuteInput from '../HourMinuteInput'
import type {Trip} from '../../../types'

type State = {
autoBlockIdIncrement: number,
autoBlockIdPrefix: string,
autoBlockIdStart: number,
autoTripIdIncrement: number,
autoTripIdPrefix: string,
autoTripIdStart: number,
endTime: ?number,
headway: ?number,
startTime: ?number,
useAutoBlockIds: boolean,
useAutoTripIds: boolean,
}

const initialState: State = {
startTime: null,
headway: null,
endTime: null,
useAutoTripIds: false,
useAutoBlockIds: false,
autoTripIdStart: 0,
autoBlockIdStart: 1,
autoTripIdIncrement: 1,
autoBlockIdIncrement: 1,
autoTripIdPrefix: '',
autoBlockIdPrefix: ''
}

type Props = {
addNewTrip: typeof tripActions.addNewTrip,
constructNewRow: (trip: ?Trip, tripSeriesStartTime: ?number, autoTripId: ?string, autoBlockId: ?string) => ?Trip,
Expand All @@ -17,57 +45,31 @@ type Props = {
}

const TripSeriesModal = (props: Props) => {
// Trip series timing state variables
const [startTime, setStartTime] = useState(null)
const [headway, setHeadway] = useState(null)
const [endTime, setEndTime] = useState(null)

// Automatic block and trip ID state variables
const [useAutoTripIds, setUseAutoTripIds] = useState(false)
const [useAutoBlockIds, setUseAutoBlockIds] = useState(false)

const [autoTripIdStart, setAutoTripIdStart] = useState(0)
const [autoBlockIdStart, setAutoBlockIdStart] = useState(1)

const [autoTripIdIncrement, setAutoTripIdIncrement] = useState(1)
const [autoBlockIdIncrement, setAutoBlockIdIncrement] = useState(1)

const [autoTripIdPrefix, setAutoTripIdPrefix] = useState('')
const [autoBlockIdPrefix, setAutoBlockIdPrefix] = useState('')
const [state, setState] = useState<State>(initialState)

const messages = getComponentMessages('TripSeriesModal')

const handleIncrementStartUpdate = (evt: SyntheticInputEvent<HTMLInputElement>) => setAutoTripIdStart(+evt.target.value)
const handleIncrementStartUpdate = (evt: SyntheticInputEvent<HTMLInputElement>) => setState((prevState) => ({ ...prevState, autoTripIdStart: +evt.target.value }))
const handleBlockIdStartUpdate = (evt: SyntheticInputEvent<HTMLInputElement>) => {
// Check the input to make sure it's within the valid range.
let input = +evt.target.value
if (isNaN(input)) return null
if (input > autoBlockIdIncrement) input = autoBlockIdIncrement
else if (input < 1) input = 1
setAutoBlockIdStart(input)
setState((prevState) => ({ ...prevState, autoBlockIdStart: input }))
}

const handleTripPrefixUpdate = (evt: SyntheticInputEvent<HTMLInputElement>) => setAutoTripIdPrefix(evt.target.value)
const handleBlockPrefixUpdate = (evt: SyntheticInputEvent<HTMLInputElement>) => setAutoBlockIdPrefix(evt.target.value)
const handleTripPrefixUpdate = (evt: SyntheticInputEvent<HTMLInputElement>) => setState((prevState) => ({ ...prevState, autoTripIdPrefix: evt.target.value }))
const handleBlockPrefixUpdate = (evt: SyntheticInputEvent<HTMLInputElement>) => setState((prevState) => ({ ...prevState, autoBlockIdPrefix: evt.target.value }))

const handleTripIncrementUpdate = (evt: SyntheticInputEvent<HTMLInputElement>) => setAutoTripIdIncrement(+evt.target.value)
const handleBlockIncrementUpdate = (evt: SyntheticInputEvent<HTMLInputElement>) => setAutoBlockIdIncrement(+evt.target.value)
const handleTripIncrementUpdate = (evt: SyntheticInputEvent<HTMLInputElement>) => setState((prevState) => ({ ...prevState, autoTripIdIncrement: +evt.target.value }))
const handleBlockIncrementUpdate = (evt: SyntheticInputEvent<HTMLInputElement>) => setState((prevState) => ({ ...prevState, autoBlockIdIncrement: +evt.target.value }))

const handleAutoTripIDCheckBox = () => setUseAutoTripIds(!useAutoTripIds)
const handleAutoBlockIDCheckBox = () => setUseAutoBlockIds(!useAutoBlockIds)
const handleAutoTripIDCheckBox = () => setState((prevState) => ({ ...prevState, useAutoTripIds: !prevState.useAutoTripIds }))
const handleAutoBlockIDCheckBox = () => setState((prevState) => ({ ...prevState, useAutoBlockIds: !prevState.useAutoBlockIds }))

const clearState = () => {
setStartTime(null)
setEndTime(null)
setHeadway(null)
setAutoTripIdPrefix('')
setAutoTripIdStart(0)
setAutoTripIdIncrement(1)
setAutoBlockIdStart(1)
setAutoBlockIdIncrement(1)
setAutoBlockIdPrefix('')
setUseAutoBlockIds(false)
setUseAutoTripIds(false)
setState(initialState)
}

const _onClose = () => {
Expand All @@ -78,6 +80,19 @@ const TripSeriesModal = (props: Props) => {

const onClickGenerate = useCallback(() => {
const {addNewTrip, constructNewRow, onClose} = props
const {
startTime,
endTime,
headway,
autoTripIdStart,
autoTripIdIncrement,
autoTripIdPrefix,
autoBlockIdPrefix,
autoBlockIdIncrement,
autoBlockIdStart,
useAutoTripIds,
useAutoBlockIds
} = state
// Check state variables to make flow happy
if (startTime === null || endTime === null || headway === null) return
const adjustedEndTime = startTime < endTime ? endTime : endTime + 24 * 60 * 60
Expand All @@ -88,7 +103,7 @@ const TripSeriesModal = (props: Props) => {
const autoTripId = useAutoTripIds ? `${autoTripIdPrefix}-${tripId}` : null
const autoBlockId = useAutoBlockIds ? `${autoBlockIdPrefix}-${currentBlockIdSuffix}` : null
addNewTrip(constructNewRow(null, time, autoTripId, autoBlockId))
// If we're upating the trip IDs automatically, increment the trip ID:
// If we're updating the trip IDs automatically, increment the trip ID:
if (useAutoTripIds) tripId += autoTripIdIncrement
// If we're updating the Block IDs automatically, alternate according to input number
if (useAutoBlockIds) {
Expand All @@ -99,10 +114,22 @@ const TripSeriesModal = (props: Props) => {
}
clearState()
onClose()
}, [endTime, startTime, headway, autoTripIdStart, autoTripIdIncrement, autoTripIdPrefix, autoBlockIdPrefix, autoBlockIdIncrement, autoBlockIdStart])
}, [state])

const {Body, Footer, Header, Title} = Modal
const {onClose, show, useSecondsInOffset} = props
const {
startTime,
endTime,
headway,
useAutoTripIds,
autoTripIdPrefix,
autoTripIdIncrement,
useAutoBlockIds,
autoBlockIdPrefix,
autoBlockIdIncrement,
autoBlockIdStart
} = state
const generateTripsDisabled = startTime === null || endTime === null || !headway
return (
<Modal show={show} onHide={onClose}>
Expand All @@ -114,22 +141,39 @@ const TripSeriesModal = (props: Props) => {
flexDirection: 'row'
}}>
<div>
{messages('startTime')
}<HourMinuteInput onChange={setStartTime} seconds={startTime} showSeconds={useSecondsInOffset} standaloneInput />
{messages('startTime')}
<HourMinuteInput
onChange={(value) => setState((prevState) => ({ ...prevState, startTime: value }))}
seconds={startTime}
showSeconds={useSecondsInOffset}
standaloneInput
/>
</div>
<div style={{marginLeft: '20px'}}>
{messages('headway')}
<HourMinuteInput onChange={setHeadway} seconds={headway} showSeconds={useSecondsInOffset} standaloneInput />
<HourMinuteInput
onChange={(value) => setState((prevState) => ({ ...prevState, headway: value }))}
seconds={headway}
showSeconds={useSecondsInOffset}
standaloneInput
/>
</div>
<div style={{margin: '0px 0px 0px 20px'}}>
{messages('endTime')}
<HourMinuteInput onChange={setEndTime} seconds={endTime} showSeconds={useSecondsInOffset} standaloneInput />
<HourMinuteInput
onChange={(value) => setState((prevState) => ({ ...prevState, endTime: value }))}
seconds={endTime}
showSeconds={useSecondsInOffset}
standaloneInput
/>
</div>
</div>
<hr />
<div>
<Checkbox checked={useAutoTripIds} onChange={handleAutoTripIDCheckBox}>{messages('automaticallyUpdateTripIds')}</Checkbox>
{useAutoTripIds &&
<Checkbox checked={useAutoTripIds} onChange={handleAutoTripIDCheckBox}>
{messages('automaticallyUpdateTripIds')}
</Checkbox>
{useAutoTripIds && (
<>
<div style={{alignItems: 'center', display: 'flex'}}>
<>
Expand All @@ -140,7 +184,7 @@ const TripSeriesModal = (props: Props) => {
type='text'
value={autoTripIdPrefix}
/>
-
-
<FormControl
onChange={handleIncrementStartUpdate}
placeholder={messages('incrementStartPlaceholder')}
Expand All @@ -159,11 +203,11 @@ const TripSeriesModal = (props: Props) => {
</div>
<hr />
</>
}
)}
</div>
<div>
<Checkbox checked={useAutoBlockIds} onChange={handleAutoBlockIDCheckBox}>{messages('automaticallyUpdateBlockIds')} </Checkbox>
{useAutoBlockIds &&
<Checkbox checked={useAutoBlockIds} onChange={handleAutoBlockIDCheckBox}>{messages('automaticallyUpdateBlockIds')}</Checkbox>
{useAutoBlockIds && (
<>
<div style={{alignItems: 'center', display: 'flex'}}>
<FormControl
Expand Down Expand Up @@ -193,7 +237,7 @@ const TripSeriesModal = (props: Props) => {
</div>
<span style={{fontSize: 'smaller'}}>{messages('formatExplanation')}</span>
</>
}
)}
</div>

</Body>
Expand Down

0 comments on commit 6a8a993

Please sign in to comment.