granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Subscribe to router and reset state on change

Browse source
This commit is contained in:
Justin Edmund 2023-01-28 23:12:06 -08:00
parent 7d4fc7b6ac
commit 4e6fb19fb0
1 changed files with 210 additions and 180 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

390
components/PartyDetails/index.tsx
View file

@ -1,7 +1,7 @@
import React, { useEffect, useState, ChangeEvent, KeyboardEvent } from 'react' import React, { useEffect, useState, ChangeEvent, KeyboardEvent } from 'react'
import Link from 'next/link' import Link from 'next/link'
import { useRouter } from 'next/router' import { useRouter } from 'next/router'
import { useSnapshot } from 'valtio' import { subscribe, useSnapshot } from 'valtio'
import { useTranslation } from 'next-i18next' import { useTranslation } from 'next-i18next'
import clonedeep from 'lodash.clonedeep' import clonedeep from 'lodash.clonedeep'
@ -25,7 +25,7 @@ import Token from '~components/Token'
import api from '~utils/api' import api from '~utils/api'
import { accountState } from '~utils/accountState' import { accountState } from '~utils/accountState'
import { appState } from '~utils/appState' import { appState, initialAppState } from '~utils/appState'
import { formatTimeAgo } from '~utils/timeAgo' import { formatTimeAgo } from '~utils/timeAgo'
import { youtube } from '~utils/youtube' import { youtube } from '~utils/youtube'
@ -124,6 +124,26 @@ const PartyDetails = (props: Props) => {
} }
}, [props.party]) }, [props.party])
// Subscribe to router changes and reset state
// if the new route is a new team
useEffect(() => {
router.events.on('routeChangeStart', (url, { shallow }) => {
if (url === '/new' || url === '/') {
const party = initialAppState.party
setName(party.name ? party.name : '')
setAutoGuard(party.autoGuard)
setFullAuto(party.fullAuto)
setChargeAttack(party.chargeAttack)
setClearTime(party.clearTime)
setRemixes(party.remixes)
setTurnCount(party.turnCount)
setButtonCount(party.buttonCount)
setChainCount(party.chainCount)
}
})
}, [])
useEffect(() => { useEffect(() => {
// Extract the video IDs from the description // Extract the video IDs from the description
if (appState.party.description) { if (appState.party.description) {
@ -475,161 +495,163 @@ const PartyDetails = (props: Props) => {
} }
} }
const editable = ( const editable = () => {
<section className={editableClasses}> return (
<CharLimitedFieldset <section className={editableClasses}>
fieldName="name" <CharLimitedFieldset
placeholder="Name your team" fieldName="name"
value={props.party?.name} placeholder="Name your team"
limit={50} value={props.party?.name}
onChange={handleInputChange} limit={50}
error={errors.name} onChange={handleInputChange}
ref={nameInput} error={errors.name}
/> ref={nameInput}
<RaidDropdown />
showAllRaidsOption={false} <RaidDropdown
currentRaid={props.party?.raid ? props.party?.raid.slug : undefined} showAllRaidsOption={false}
onChange={receiveRaid} currentRaid={props.party?.raid ? props.party?.raid.slug : undefined}
/> onChange={receiveRaid}
<ul className="SwitchToggleGroup DetailToggleGroup"> />
<li className="Ougi ToggleSection"> <ul className="SwitchToggleGroup DetailToggleGroup">
<label htmlFor="ougi"> <li className="Ougi ToggleSection">
<span>{t('party.details.labels.charge_attack')}</span> <label htmlFor="ougi">
<div> <span>{t('party.details.labels.charge_attack')}</span>
<Switch <div>
name="charge_attack" <Switch
onCheckedChange={handleChargeAttackChanged} name="charge_attack"
value={switchValue(chargeAttack)} onCheckedChange={handleChargeAttackChanged}
checked={chargeAttack} value={switchValue(chargeAttack)}
/> checked={chargeAttack}
</div> />
</label> </div>
</li> </label>
<li className="FullAuto ToggleSection"> </li>
<label htmlFor="full_auto"> <li className="FullAuto ToggleSection">
<span>{t('party.details.labels.full_auto')}</span> <label htmlFor="full_auto">
<div> <span>{t('party.details.labels.full_auto')}</span>
<Switch <div>
onCheckedChange={handleFullAutoChanged} <Switch
name="full_auto" onCheckedChange={handleFullAutoChanged}
value={switchValue(fullAuto)} name="full_auto"
checked={fullAuto} value={switchValue(fullAuto)}
/> checked={fullAuto}
</div> />
</label> </div>
</li> </label>
<li className="AutoGuard ToggleSection"> </li>
<label htmlFor="auto_guard"> <li className="AutoGuard ToggleSection">
<span>{t('party.details.labels.auto_guard')}</span> <label htmlFor="auto_guard">
<div> <span>{t('party.details.labels.auto_guard')}</span>
<Switch <div>
onCheckedChange={handleAutoGuardChanged} <Switch
name="auto_guard" onCheckedChange={handleAutoGuardChanged}
value={switchValue(autoGuard)} name="auto_guard"
disabled={!fullAuto} value={switchValue(autoGuard)}
checked={autoGuard} disabled={!fullAuto}
/> checked={autoGuard}
</div> />
</label> </div>
</li> </label>
</ul> </li>
<ul className="InputToggleGroup DetailToggleGroup"> </ul>
<li className="InputSection"> <ul className="InputToggleGroup DetailToggleGroup">
<label htmlFor="auto_guard"> <li className="InputSection">
<span>{t('party.details.labels.button_chain')}</span> <label htmlFor="auto_guard">
<div className="Input Bound"> <span>{t('party.details.labels.button_chain')}</span>
<div className="Input Bound">
<Input
name="buttons"
type="number"
placeholder="0"
value={`${buttonCount}`}
min="0"
max="99"
onChange={handleButtonCountInput}
onKeyDown={handleInputKeyDown}
/>
<span>b</span>
<Input
name="chains"
type="number"
placeholder="0"
min="0"
max="99"
value={`${chainCount}`}
onChange={handleChainCountInput}
onKeyDown={handleInputKeyDown}
/>
<span>c</span>
</div>
</label>
</li>
<li className="InputSection">
<label htmlFor="auto_guard">
<span>{t('party.details.labels.turn_count')}</span>
<Input <Input
name="buttons" name="turn_count"
className="AlignRight Bound"
type="number" type="number"
step="1"
min="1"
max="999"
placeholder="0" placeholder="0"
value={`${buttonCount}`} value={`${turnCount}`}
min="0" onChange={handleTurnCountInput}
max="99"
onChange={handleButtonCountInput}
onKeyDown={handleInputKeyDown} onKeyDown={handleInputKeyDown}
/> />
<span>b</span> </label>
<Input </li>
name="chains" <li className="InputSection">
type="number" <label htmlFor="auto_guard">
placeholder="0" <span>{t('party.details.labels.clear_time')}</span>
min="0" <div>
max="99" <DurationInput
value={`${chainCount}`} name="clear_time"
onChange={handleChainCountInput} className="Bound"
onKeyDown={handleInputKeyDown} placeholder="00:00"
/> value={clearTime}
<span>c</span> onValueChange={(value: number) => handleClearTimeInput(value)}
</div> />
</label> </div>
</li> </label>
<li className="InputSection"> </li>
<label htmlFor="auto_guard"> </ul>
<span>{t('party.details.labels.turn_count')}</span> <TextFieldset
<Input fieldName="name"
name="turn_count" placeholder={
className="AlignRight Bound" 'Write your notes here\n\n\nWatch out for the 50% trigger!\nMake sure to click Fediel’s 3 first\nGood luck with RNG!'
type="number" }
step="1" value={props.party?.description}
min="1" onChange={handleTextAreaChange}
max="999" error={errors.description}
placeholder="0" ref={descriptionInput}
value={`${turnCount}`} />
onChange={handleTurnCountInput}
onKeyDown={handleInputKeyDown}
/>
</label>
</li>
<li className="InputSection">
<label htmlFor="auto_guard">
<span>{t('party.details.labels.clear_time')}</span>
<div>
<DurationInput
name="clear_time"
className="Bound"
placeholder="00:00"
value={clearTime}
onValueChange={(value: number) => handleClearTimeInput(value)}
/>
</div>
</label>
</li>
</ul>
<TextFieldset
fieldName="name"
placeholder={
'Write your notes here\n\n\nWatch out for the 50% trigger!\nMake sure to click Fediel’s 3 first\nGood luck with RNG!'
}
value={props.party?.description}
onChange={handleTextAreaChange}
error={errors.description}
ref={descriptionInput}
/>
<div className="bottom"> <div className="bottom">
<div className="left"> <div className="left">
{router.pathname !== '/new' ? ( {router.pathname !== '/new' ? (
<Button
leftAccessoryIcon={<CrossIcon />}
className="Blended medium destructive"
onClick={handleClick}
text={t('buttons.delete')}
/>
) : (
''
)}
</div>
<div className="right">
<Button text={t('buttons.cancel')} onClick={toggleDetails} />
<Button <Button
leftAccessoryIcon={<CrossIcon />} leftAccessoryIcon={<CheckIcon className="Check" />}
className="Blended medium destructive" text={t('buttons.save_info')}
onClick={handleClick} onClick={updateDetails}
text={t('buttons.delete')}
/> />
) : ( </div>
''
)}
</div> </div>
<div className="right"> </section>
<Button text={t('buttons.cancel')} onClick={toggleDetails} /> )
<Button }
leftAccessoryIcon={<CheckIcon className="Check" />}
text={t('buttons.save_info')}
onClick={updateDetails}
/>
</div>
</div>
</section>
)
const clearTimeString = () => { const clearTimeString = () => {
const minutes = Math.floor(clearTime / 60) const minutes = Math.floor(clearTime / 60)
@ -664,38 +686,46 @@ const PartyDetails = (props: Props) => {
} }
} }
const readOnly = ( const readOnly = () => {
<section className={readOnlyClasses}> return (
<section className="Details"> <section className={readOnlyClasses}>
<Token className={classNames({ ChargeAttack: true, On: chargeAttack })}> <section className="Details">
{`${t('party.details.labels.charge_attack')} ${ <Token
chargeAttack ? 'On' : 'Off' className={classNames({ ChargeAttack: true, On: chargeAttack })}
}`} >
</Token> {`${t('party.details.labels.charge_attack')} ${
chargeAttack ? 'On' : 'Off'
<Token className={classNames({ FullAuto: true, On: fullAuto })}> }`}
{`${t('party.details.labels.full_auto')} ${fullAuto ? 'On' : 'Off'}`}
</Token>
<Token className={classNames({ AutoGuard: true, On: autoGuard })}>
{`${t('party.details.labels.auto_guard')} ${fullAuto ? 'On' : 'Off'}`}
</Token>
{turnCount ? (
<Token>
{t('party.details.turns.with_count', {
count: turnCount,
})}
</Token> </Token>
) : (
'' <Token className={classNames({ FullAuto: true, On: fullAuto })}>
)} {`${t('party.details.labels.full_auto')} ${
{clearTime > 0 ? <Token>{clearTimeString()}</Token> : ''} fullAuto ? 'On' : 'Off'
{buttonChainToken()} }`}
</Token>
<Token className={classNames({ AutoGuard: true, On: autoGuard })}>
{`${t('party.details.labels.auto_guard')} ${
fullAuto ? 'On' : 'Off'
}`}
</Token>
{turnCount ? (
<Token>
{t('party.details.turns.with_count', {
count: turnCount,
})}
</Token>
) : (
''
)}
{clearTime > 0 ? <Token>{clearTimeString()}</Token> : ''}
{buttonChainToken()}
</section>
<Linkify>{embeddedDescription}</Linkify>
</section> </section>
<Linkify>{embeddedDescription}</Linkify> )
</section> }
)
const remixSection = () => { const remixSection = () => {
return ( return (
@ -755,8 +785,8 @@ const PartyDetails = (props: Props) => {
'' ''
)} )}
</div> </div>
{readOnly} {readOnly()}
{editable} {editable()}
{deleteAlert()} {deleteAlert()}
</section> </section>