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

Localize unsaved changes alert

Browse source
This commit is contained in:
Justin Edmund 2023-07-03 19:03:40 -07:00
parent e8a346cc71
commit 7b465f6d5d
1 changed files with 16 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
components/character/CharacterModal/index.tsx
View file

@ -1,7 +1,7 @@
// Core dependencies // Core dependencies
import React, { PropsWithChildren, useEffect, useState } from 'react' import React, { PropsWithChildren, useEffect, useState } from 'react'
import { useRouter } from 'next/router' import { useRouter } from 'next/router'
import { useTranslation } from 'next-i18next' import { Trans, useTranslation } from 'next-i18next'
import isEqual from 'lodash/isEqual' import isEqual from 'lodash/isEqual'
// UI dependencies // UI dependencies
@ -57,16 +57,10 @@ const CharacterModal = ({
router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en' router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en'
const { t } = useTranslation('common') const { t } = useTranslation('common')
// UI state
const [open, setOpen] = useState(false)
const [formValid, setFormValid] = useState(false)
// Refs
const headerRef = React.createRef<HTMLDivElement>()
const footerRef = React.createRef<HTMLDivElement>()
// State: Component // State: Component
const [open, setOpen] = useState(false)
const [alertOpen, setAlertOpen] = useState(false) const [alertOpen, setAlertOpen] = useState(false)
const [formValid, setFormValid] = useState(false)
// State: Data // State: Data
const [perpetuity, setPerpetuity] = useState(false) const [perpetuity, setPerpetuity] = useState(false)
@ -81,6 +75,10 @@ const CharacterModal = ({
const [awakeningLevel, setAwakeningLevel] = useState(1) const [awakeningLevel, setAwakeningLevel] = useState(1)
const [transcendenceStep, setTranscendenceStep] = useState(0) const [transcendenceStep, setTranscendenceStep] = useState(0)
// Refs
const headerRef = React.createRef<HTMLDivElement>()
const footerRef = React.createRef<HTMLDivElement>()
// Hooks // Hooks
useEffect(() => { useEffect(() => {
setOpen(modalOpen) setOpen(modalOpen)
@ -136,7 +134,7 @@ const CharacterModal = ({
return object return object
} }
// Methods: Convenience // Methods: Modification checking
function hasBeenModified() { function hasBeenModified() {
const rings = ringsChanged() const rings = ringsChanged()
const aetherialMastery = aetherialMasteryChanged() const aetherialMastery = aetherialMasteryChanged()
@ -272,11 +270,14 @@ const CharacterModal = ({
<Alert <Alert
message={ message={
<span> <span>
You will lose all changes to{' '} <Trans i18nKey="alerts.unsaved_changes.object">
<strong>{gridCharacter.object.name[locale]}</strong> if you continue. You will lose all changes to{' '}
<br /> <strong>{{ objectName: gridCharacter.object.name[locale] }}</strong>{' '}
<br /> if you continue.
Are you sure you want to continue without saving? <br />
<br />
Are you sure you want to continue without saving?
</Trans>
</span> </span>
} }
open={alertOpen} open={alertOpen}