|
| 1 | +import { useContext, useState } from 'react' |
| 2 | +import Modal from '../components/Modal' |
| 3 | +import TextInput from '../components/TextInput' |
| 4 | +import Button from '../components/Button' |
| 5 | +import buildError from '../utils/buildError' |
| 6 | +import ErrorMessage, { TaloError } from '../components/ErrorMessage' |
| 7 | +import Select from '../components/Select' |
| 8 | +import activeGameState, { SelectedActiveGame } from '../state/activeGameState' |
| 9 | +import { useRecoilValue } from 'recoil' |
| 10 | +import { GameStat } from '../entities/gameStat' |
| 11 | +import clsx from 'clsx' |
| 12 | +import { resetStat } from '../api/resetStat' |
| 13 | +import ToastContext from '../components/toast/ToastContext' |
| 14 | +import { ResetMode, resetModeOptions } from '../constants/resetMode' |
| 15 | + |
| 16 | +type ResetStatProps = { |
| 17 | + modalState: [boolean, (goBack: boolean) => void] |
| 18 | + editingStat: GameStat | null |
| 19 | +} |
| 20 | + |
| 21 | +export function ResetStat({ |
| 22 | + modalState, |
| 23 | + editingStat |
| 24 | +}: ResetStatProps) { |
| 25 | + const [, goBack] = modalState |
| 26 | + const [isLoading, setLoading] = useState(false) |
| 27 | + const [error, setError] = useState<TaloError | null>(null) |
| 28 | + |
| 29 | + const activeGame = useRecoilValue(activeGameState) as SelectedActiveGame |
| 30 | + |
| 31 | + const [confirmText, setConfirmText] = useState('') |
| 32 | + const [resetMode, setResetMode] = useState<ResetMode>('dev') |
| 33 | + |
| 34 | + const [isMenuOpen, setMenuOpen] = useState(false) |
| 35 | + |
| 36 | + const toast = useContext(ToastContext) |
| 37 | + |
| 38 | + const onResetClick = async () => { |
| 39 | + setLoading(true) |
| 40 | + setError(null) |
| 41 | + |
| 42 | + try { |
| 43 | + const res = await resetStat(activeGame.id, editingStat!.id, resetMode) |
| 44 | + toast.trigger(`${res.deletedCount} ${res.deletedCount === 1 ? 'entry was' : 'entries were'} deleted`) |
| 45 | + goBack(true) |
| 46 | + } catch (err) { |
| 47 | + setError(buildError(err)) |
| 48 | + setLoading(false) |
| 49 | + } |
| 50 | + } |
| 51 | + |
| 52 | + return ( |
| 53 | + <Modal |
| 54 | + id='reset-stat' |
| 55 | + title={`Reset ${editingStat?.name}`} |
| 56 | + modalState={[true, () => goBack(true)]} |
| 57 | + className={clsx('flex flex-col', { |
| 58 | + 'md:!h-[55vh]': isMenuOpen |
| 59 | + })} |
| 60 | + > |
| 61 | + <form className='flex flex-col grow'> |
| 62 | + <div className='p-4 space-y-4'> |
| 63 | + <p> |
| 64 | + After clicking <b>Reset</b>, all player stat data matching the selected reset mode will be permanently deleted. This action cannot be undone. |
| 65 | + </p> |
| 66 | + <div className='p-4 text-sm bg-yellow-50 border border-yellow-300 rounded'> |
| 67 | + <p>If Steamworks syncing is enabled, your Talo stat data is deleted instantly, but the Steamworks stats may take up to an hour to update.</p> |
| 68 | + </div> |
| 69 | + |
| 70 | + <div className='w-full'> |
| 71 | + <label htmlFor='reset-mode' className='block font-semibold mb-1'>Reset mode</label> |
| 72 | + <Select |
| 73 | + inputId='reset-mode' |
| 74 | + onChange={(option) => setResetMode(option!.value)} |
| 75 | + defaultValue={resetModeOptions.find((option) => option.value === 'dev')} |
| 76 | + options={resetModeOptions} |
| 77 | + onMenuOpen={() => setMenuOpen(true)} |
| 78 | + onMenuClose={() => setMenuOpen(false)} |
| 79 | + /> |
| 80 | + </div> |
| 81 | + |
| 82 | + <TextInput |
| 83 | + id='confirm' |
| 84 | + variant='modal' |
| 85 | + label='Type "confirm" below' |
| 86 | + placeholder='confirm' |
| 87 | + onChange={setConfirmText} |
| 88 | + value={confirmText} |
| 89 | + /> |
| 90 | + |
| 91 | + {error && <ErrorMessage error={error} />} |
| 92 | + </div> |
| 93 | + |
| 94 | + <div className='flex flex-col md:flex-row-reverse md:justify-between space-y-4 md:space-y-0 p-4 border-t border-gray-200 mt-auto'> |
| 95 | + <div className='w-full md:w-32'> |
| 96 | + <Button |
| 97 | + type='button' |
| 98 | + isLoading={isLoading} |
| 99 | + disabled={confirmText !== 'confirm'} |
| 100 | + onClick={onResetClick} |
| 101 | + variant='red' |
| 102 | + > |
| 103 | + Reset |
| 104 | + </Button> |
| 105 | + </div> |
| 106 | + <div className='w-full md:w-32'> |
| 107 | + <Button type='button' variant='grey' onClick={() => goBack(false)}>Back</Button> |
| 108 | + </div> |
| 109 | + </div> |
| 110 | + </form> |
| 111 | + </Modal> |
| 112 | + ) |
| 113 | +} |
0 commit comments