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

Fix how we handle state

Browse source 
- New route will reset state instead of it happening when the "New" button is clicked
- Added key to <React.Fragment> in party and new pages to force it to rerun getServerSideProps
This commit is contained in:
Justin Edmund 2023-01-27 23:11:25 -08:00
parent f450c87e42
commit c224184dee
3 changed files with 19 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
components/Header/index.tsx
View file

@ -9,7 +9,7 @@ import Link from 'next/link'
import api from '~utils/api'
import { accountState, initialAccountState } from '~utils/accountState'
import { appState, initialAppState } from '~utils/appState'
import { appState } from '~utils/appState'
import capitalizeFirstLetter from '~utils/capitalizeFirstLetter'
import {
@ -84,10 +84,6 @@ const Header = () => {
setRightMenuOpen(false)
}
function handleSettingsOpenChanged(open: boolean) {
setRightMenuOpen(false)
}
function copyToClipboard() {
const el = document.createElement('input')
el.value = window.location.href
@ -107,15 +103,6 @@ const Header = () => {
// Push the root URL
router.push(path)
// Clean state
const resetState = clonedeep(initialAppState)
Object.keys(resetState).forEach((key) => {
appState[key] = resetState[key]
})
// Set party to be editable
appState.party.editable = true
// Close right menu
closeRightMenu()
}

19
pages/new/index.tsx
View file

@ -1,7 +1,9 @@
import React, { useEffect } from 'react'
import { useRouter } from 'next/router'
import Head from 'next/head'
import { useTranslation } from 'next-i18next'
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
import clonedeep from 'lodash.clonedeep'
import Party from '~components/Party'
@ -9,7 +11,7 @@ import api from '~utils/api'
import fetchLatestVersion from '~utils/fetchLatestVersion'
import organizeRaids from '~utils/organizeRaids'
import setUserToken from '~utils/setUserToken'
import { appState } from '~utils/appState'
import { appState, initialAppState } from '~utils/appState'
import { groupWeaponKeys } from '~utils/groupWeaponKeys'
import { printError } from '~utils/reportError'
@ -29,6 +31,9 @@ const NewRoute: React.FC<Props> = (props: Props) => {
// Import translations
const { t } = useTranslation('common')
// Set up router
const router = useRouter()
function callback(path: string) {
// This is scuffed, how do we do this natively?
window.history.replaceState(null, `Grid Tool`, `${path}`)
@ -38,6 +43,16 @@ const NewRoute: React.FC<Props> = (props: Props) => {
persistStaticData()
}, [persistStaticData])
useEffect(() => {
// Clean state
const resetState = clonedeep(initialAppState)
Object.keys(resetState).forEach((key) => {
appState[key] = resetState[key]
})
// Set party to be editable
appState.party.editable = true
}, [])
function persistStaticData() {
appState.raids = props.raids
appState.jobs = props.jobs
@ -47,7 +62,7 @@ const NewRoute: React.FC<Props> = (props: Props) => {
}
return (
<React.Fragment>
<React.Fragment key={router.asPath}>
<Head>
{/* HTML */}
<title>{t('page.titles.new')}</title>

2
pages/p/[party].tsx
View file

@ -70,7 +70,7 @@ const PartyRoute: React.FC<Props> = (props: Props) => {
}
return (
<React.Fragment>
<React.Fragment key={router.asPath}>
<Party
team={props.party}
raids={props.sortedRaids}