Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor TripSeriesModal States #1002

Merged
merged 6 commits into from
Dec 8, 2023
Merged

Refactor TripSeriesModal States #1002

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
6a8a993
refactor(TripSeriesModal): simplify state definition
AdrianaCeric Nov 22, 2023
512d242
refactor(TripSeriesModal): remove clearState method
AdrianaCeric Nov 22, 2023
79dbcf2
refactor(TripSeriesModal): Inline methods
AdrianaCeric Nov 24, 2023
19dc66e
Revert "refactor(TripSeriesModal): Inline methods"
AdrianaCeric Dec 7, 2023
3eda422
fix: make state explicit so callback doesn't call all the time
AdrianaCeric Dec 7, 2023
22b2123
combine methods
AdrianaCeric Dec 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
158 changes: 92 additions & 66 deletions lib/editor/components/timetable/TripSeriesModal.js
View file
Open in desktop
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,78 +45,48 @@ 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 handleTripIncrementUpdate = (evt: SyntheticInputEvent<HTMLInputElement>) => setAutoTripIdIncrement(+evt.target.value)
const handleBlockIncrementUpdate = (evt: SyntheticInputEvent<HTMLInputElement>) => setAutoBlockIdIncrement(+evt.target.value)

const handleAutoTripIDCheckBox = () => setUseAutoTripIds(!useAutoTripIds)
const handleAutoBlockIDCheckBox = () => setUseAutoBlockIds(!useAutoBlockIds)

const clearState = () => {
setStartTime(null)
setEndTime(null)
setHeadway(null)
setAutoTripIdPrefix('')
setAutoTripIdStart(0)
setAutoTripIdIncrement(1)
setAutoBlockIdStart(1)
setAutoBlockIdIncrement(1)
setAutoBlockIdPrefix('')
setUseAutoBlockIds(false)
setUseAutoTripIds(false)
}
const handleTripPrefixUpdate = (evt: SyntheticInputEvent<HTMLInputElement>) => setState((prevState) => ({ ...prevState, autoTripIdPrefix: evt.target.value }))
AdrianaCeric marked this conversation as resolved.
Show resolved Hide resolved
const handleBlockPrefixUpdate = (evt: SyntheticInputEvent<HTMLInputElement>) => setState((prevState) => ({ ...prevState, autoBlockIdPrefix: 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 = () => setState((prevState) => ({ ...prevState, useAutoTripIds: !prevState.useAutoTripIds }))
const handleAutoBlockIDCheckBox = () => setState((prevState) => ({ ...prevState, useAutoBlockIds: !prevState.useAutoBlockIds }))

const _onClose = () => {
const { onClose } = props
clearState()
setState(initialState)
onClose()
}

const onClickGenerate = useCallback(() => {
const {addNewTrip, constructNewRow, onClose} = props
const {addNewTrip, constructNewRow} = props
// Check state variables to make flow happy
if (startTime === null || endTime === null || headway === null) return
const adjustedEndTime = startTime < endTime ? endTime : endTime + 24 * 60 * 60

let tripId = autoTripIdStart
let currentBlockIdSuffix = autoBlockIdStart
for (let time = startTime; time <= adjustedEndTime; time += headway) {
const autoTripId = useAutoTripIds ? `${autoTripIdPrefix}-${tripId}` : null
const autoBlockId = useAutoBlockIds ? `${autoBlockIdPrefix}-${currentBlockIdSuffix}` : null
if (state.startTime === null || state.endTime === null || state.headway === null) return
const adjustedEndTime = state.startTime < state.endTime ? state.endTime : state.endTime + 24 * 60 * 60

let tripId = state.autoTripIdStart
let currentBlockIdSuffix = state.autoBlockIdStart
for (let time = state.startTime; time <= adjustedEndTime; time += state.headway) {
const autoTripId = state.useAutoTripIds ? `${state.autoTripIdPrefix}-${tripId}` : null
const autoBlockId = state.useAutoBlockIds ? `${state.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 @@ -97,12 +95,23 @@ const TripSeriesModal = (props: Props) => {
if (currentBlockIdSuffix > autoBlockIdIncrement) currentBlockIdSuffix = currentBlockIdSuffix % autoBlockIdIncrement
}
}
clearState()
onClose()
}, [endTime, startTime, headway, autoTripIdStart, autoTripIdIncrement, autoTripIdPrefix, autoBlockIdPrefix, autoBlockIdIncrement, autoBlockIdStart])
_onClose()
}, [state.startTime, state.endTime, state.headway, state.autoTripIdStart, state.autoTripIdIncrement, state.autoTripIdPrefix, state.autoBlockIdPrefix, state.autoBlockIdIncrement, state.autoBlockIdStart, state.useAutoTripIds, state.useAutoBlockIds])

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 +123,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 +166,7 @@ const TripSeriesModal = (props: Props) => {
type='text'
value={autoTripIdPrefix}
/>
-
-
<FormControl
onChange={handleIncrementStartUpdate}
placeholder={messages('incrementStartPlaceholder')}
Expand All @@ -159,11 +185,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 +219,7 @@ const TripSeriesModal = (props: Props) => {
</div>
<span style={{fontSize: 'smaller'}}>{messages('formatExplanation')}</span>
</>
}
)}
</div>

</Body>
Expand Down
Loading