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 api from '~utils/api'
import { accountState, initialAccountState } from '~utils/accountState' import { accountState, initialAccountState } from '~utils/accountState'
import { appState, initialAppState } from '~utils/appState' import { appState } from '~utils/appState'
import capitalizeFirstLetter from '~utils/capitalizeFirstLetter' import capitalizeFirstLetter from '~utils/capitalizeFirstLetter'
import { import {
@ -84,10 +84,6 @@ const Header = () => {
setRightMenuOpen(false) setRightMenuOpen(false)
} }
function handleSettingsOpenChanged(open: boolean) {
setRightMenuOpen(false)
}
function copyToClipboard() { function copyToClipboard() {
const el = document.createElement('input') const el = document.createElement('input')
el.value = window.location.href el.value = window.location.href
@ -107,15 +103,6 @@ const Header = () => {
// Push the root URL // Push the root URL
router.push(path) 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 // Close right menu
closeRightMenu() closeRightMenu()
} }

19
pages/new/index.tsx
View file

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