diff --git a/components/Alert/index.tsx b/components/Alert/index.tsx index a9564424..8315495d 100644 --- a/components/Alert/index.tsx +++ b/components/Alert/index.tsx @@ -23,7 +23,11 @@ const Alert = (props: Props) => {
- {props.title ? Error : ''} + {props.title ? ( + {props.title} + ) : ( + '' + )} {props.message} diff --git a/components/CharacterGrid/index.tsx b/components/CharacterGrid/index.tsx index f0b59039..46c5348c 100644 --- a/components/CharacterGrid/index.tsx +++ b/components/CharacterGrid/index.tsx @@ -2,8 +2,9 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react' import { getCookie } from 'cookies-next' import { useSnapshot } from 'valtio' +import { useTranslation } from 'next-i18next' -import { AxiosResponse } from 'axios' +import { AxiosError, AxiosResponse } from 'axios' import debounce from 'lodash.debounce' import Alert from '~components/Alert' @@ -31,12 +32,19 @@ const CharacterGrid = (props: Props) => { // Constants const numCharacters: number = 5 + // Localization + const { t } = useTranslation('common') + // Cookies const cookie = getCookie('account') const accountData: AccountCookie = cookie ? JSON.parse(cookie as string) : null + // Set up state for error handling + const [axiosError, setAxiosError] = useState() + const [errorAlertOpen, setErrorAlertOpen] = useState(false) + // Set up state for view management const { party, grid } = useSnapshot(appState) const [slug, setSlug] = useState() @@ -111,7 +119,15 @@ const CharacterGrid = (props: Props) => { if (party.editable) saveCharacter(party.id, character, position) .then((response) => handleCharacterResponse(response.data)) - .catch((error) => console.error(error)) + .catch((error) => { + const axiosError = error as AxiosError + const response = axiosError.response + + if (response) { + setErrorAlertOpen(true) + setAxiosError(response) + } + }) } } @@ -482,6 +498,19 @@ const CharacterGrid = (props: Props) => { } // Render: JSX components + const errorAlert = () => { + console.log(axiosError?.status) + return ( + setErrorAlertOpen(false)} + cancelActionText={t('buttons.confirm')} + /> + ) + } + return (
{ })}
+ {errorAlert()}
) } diff --git a/components/SummonGrid/index.tsx b/components/SummonGrid/index.tsx index 0da1200e..e612409e 100644 --- a/components/SummonGrid/index.tsx +++ b/components/SummonGrid/index.tsx @@ -4,9 +4,10 @@ import { getCookie } from 'cookies-next' import { useSnapshot } from 'valtio' import { useTranslation } from 'next-i18next' -import { AxiosResponse } from 'axios' +import { AxiosError, AxiosResponse } from 'axios' import debounce from 'lodash.debounce' +import Alert from '~components/Alert' import SummonUnit from '~components/SummonUnit' import ExtraSummons from '~components/ExtraSummons' @@ -38,6 +39,10 @@ const SummonGrid = (props: Props) => { // Localization const { t } = useTranslation('common') + // Set up state for error handling + const [axiosError, setAxiosError] = useState() + const [errorAlertOpen, setErrorAlertOpen] = useState(false) + // Set up state for view management const { party, grid } = useSnapshot(appState) const [slug, setSlug] = useState() @@ -100,12 +105,12 @@ const SummonGrid = (props: Props) => { saveSummon(party.id, summon, position) .then((response) => handleSummonResponse(response.data)) .catch((error) => { - const code = error.response.status - const data = error.response.data - if (code === 422) { - if (data.code === 'incompatible_summon_for_position') { - // setShowIncompatibleAlert(true) - } + const axiosError = error as AxiosError + const response = axiosError.response + + if (response) { + setErrorAlertOpen(true) + setAxiosError(response) } }) } @@ -380,6 +385,19 @@ const SummonGrid = (props: Props) => { } // Render: JSX components + const errorAlert = () => { + console.log(axiosError?.status) + return ( + setErrorAlertOpen(false)} + cancelActionText={t('buttons.confirm')} + /> + ) + } + const mainSummonElement = (
{t('summons.main')}
@@ -460,6 +478,7 @@ const SummonGrid = (props: Props) => {
{subAuraSummonElement} + {errorAlert()} ) } diff --git a/components/WeaponGrid/index.tsx b/components/WeaponGrid/index.tsx index b32b442e..06af305d 100644 --- a/components/WeaponGrid/index.tsx +++ b/components/WeaponGrid/index.tsx @@ -4,7 +4,7 @@ import { getCookie } from 'cookies-next' import { useSnapshot } from 'valtio' import { useTranslation } from 'next-i18next' -import { AxiosResponse } from 'axios' +import { AxiosError, AxiosResponse } from 'axios' import debounce from 'lodash.debounce' import Alert from '~components/Alert' @@ -41,11 +41,15 @@ const WeaponGrid = (props: Props) => { ? JSON.parse(cookie as string) : null + // Set up state for error handling + const [axiosError, setAxiosError] = useState() + const [errorAlertOpen, setErrorAlertOpen] = useState(false) + const [showIncompatibleAlert, setShowIncompatibleAlert] = useState(false) + // Set up state for view management const { party, grid } = useSnapshot(appState) const [slug, setSlug] = useState() const [modalOpen, setModalOpen] = useState(false) - const [showIncompatibleAlert, setShowIncompatibleAlert] = useState(false) // Set up state for conflict management const [incoming, setIncoming] = useState() @@ -100,11 +104,21 @@ const WeaponGrid = (props: Props) => { saveWeapon(party.id, weapon, position) .then((response) => handleWeaponResponse(response.data)) .catch((error) => { - const code = error.response.status - const data = error.response.data - if (code === 422) { - if (data.code === 'incompatible_weapon_for_position') { + const axiosError = error as AxiosError + const response = axiosError.response + + if (response) { + const code = response.status + const data = response.data + + if ( + code === 422 && + data.code === 'incompatible_weapon_for_position' + ) { setShowIncompatibleAlert(true) + } else { + setErrorAlertOpen(true) + setAxiosError(response) } } }) @@ -362,16 +376,30 @@ const WeaponGrid = (props: Props) => { cancelAction={() => setShowIncompatibleAlert(!showIncompatibleAlert)} cancelActionText={t('buttons.confirm')} message={t('alert.incompatible_weapon')} - >
+ /> ) : ( '' ) } + const errorAlert = () => { + console.log(axiosError?.status) + return ( + setErrorAlertOpen(false)} + cancelActionText={t('buttons.confirm')} + /> + ) + } + return (
{conflicts ? conflictModal() : ''} {incompatibleAlert()} + {errorAlert()}
{mainhandElement}
    {weaponGridElement}
diff --git a/public/locales/en/common.json b/public/locales/en/common.json index 89fc5b77..1754ed94 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -51,6 +51,9 @@ }, "remove": "Remove from grid" }, + "errors": { + "unauthorized": "You don't have permission to perform that action" + }, "filters": { "labels": { "element": "Element", diff --git a/public/locales/ja/common.json b/public/locales/ja/common.json index 5faa47b8..305251b1 100644 --- a/public/locales/ja/common.json +++ b/public/locales/ja/common.json @@ -59,6 +59,9 @@ "rarity": "レアリティ" } }, + "errors": { + "unauthorized": "行ったアクションを実行する権限がありません" + }, "header": { "anonymous": "無名", "untitled_team": "{{username}}さんからの無題編成",