Add alert if user tries to add a disallowed weapon to extra

components/Alert/index.tsx

@@ -3,7 +3,6 @@ import * as AlertDialog from '@radix-ui/react-alert-dialog'
 
 import './index.scss'
 import Button from '~components/Button'
-import { ButtonType } from '~utils/enums'
 
 // Props
 interface Props {

components/CharacterConflictModal/index.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import { useRouter } from 'next/router'
-import { Trans, useTranslation } from 'react-i18next'
+import { Trans, useTranslation } from 'next-i18next'
 
 import * as Dialog from '@radix-ui/react-dialog'
 

components/WeaponGrid/index.tsx

@@ -2,6 +2,7 @@
 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 debounce from 'lodash.debounce'
@@ -16,6 +17,7 @@ import type { SearchableObject } from '~types'
 
 import './index.scss'
 import WeaponConflictModal from '~components/WeaponConflictModal'
+import Alert from '~components/Alert'
 
 // Props
 interface Props {
@@ -29,19 +31,20 @@ const WeaponGrid = (props: Props) => {
   // Constants
   const numWeapons: number = 9
 
+  // Localization
+  const { t } = useTranslation('common')
+
   // Cookies
   const cookie = getCookie('account')
   const accountData: AccountCookie = cookie
     ? JSON.parse(cookie as string)
     : null
-  const headers = accountData
-    ? { headers: { Authorization: `Bearer ${accountData.token}` } }
-    : {}
 
   // 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<Weapon>()
@@ -100,7 +103,19 @@ const WeaponGrid = (props: Props) => {
       if (party.editable)
         saveWeapon(party.id, weapon, position)
           .then((response) => handleWeaponResponse(response.data))
-          .catch((error) => console.error(error))
+          .catch((error) => {
+            const code = error.response.status
+            const data = error.response.data
+            console.log(error.response)
+
+            console.log(data, code)
+            if (code === 422) {
+              if (data.code === 'incompatible_weapon_for_position') {
+                console.log('Here')
+                setShowIncompatibleAlert(true)
+              }
+            }
+          })
     }
   }
 
@@ -132,18 +147,15 @@ const WeaponGrid = (props: Props) => {
     if (weapon.uncap.ulb) uncapLevel = 5
     else if (weapon.uncap.flb) uncapLevel = 4
 
-    return await api.endpoints.weapons.create(
-      {
-        weapon: {
-          party_id: partyId,
-          weapon_id: weapon.id,
-          position: position,
-          mainhand: position == -1,
-          uncap_level: uncapLevel,
-        },
+    return await api.endpoints.weapons.create({
+      weapon: {
+        party_id: partyId,
+        weapon_id: weapon.id,
+        position: position,
+        mainhand: position == -1,
+        uncap_level: uncapLevel,
       },
-      headers
-    )
+    })
   }
 
   function storeGridWeapon(gridWeapon: GridWeapon) {
@@ -326,9 +338,24 @@ const WeaponGrid = (props: Props) => {
     )
   }
 
+  const incompatibleAlert = () => {
+    console.log(t('alert.incompatible_weapon'))
+    return showIncompatibleAlert ? (
+      <Alert
+        open={showIncompatibleAlert}
+        cancelAction={() => setShowIncompatibleAlert(!showIncompatibleAlert)}
+        cancelActionText={t('buttons.confirm')}
+        message={t('alert.incompatible_weapon')}
+      ></Alert>
+    ) : (
+      ''
+    )
+  }
+
   return (
     <div id="WeaponGrid">
       {conflicts ? conflictModal() : ''}
+      {incompatibleAlert()}
       <div id="MainGrid">
         {mainhandElement}
         <ul className="grid_weapons">{weaponGridElement}</ul>

public/locales/en/common.json

@@ -1,4 +1,7 @@
 {
+  "alert": {
+    "incompatible_weapon": "You've selected a weapon that can't be added to the Additional Weapon slots."
+  },
   "ax": {
     "no_skill": "No AX Skill",
     "errors": {
@@ -20,6 +23,7 @@
   "buttons": {
     "cancel": "Cancel",
     "copy": "Copy link",
+    "confirm": "Got it",
     "delete": "Delete team",
     "show_info": "Edit info",
     "hide_info": "Hide info",

public/locales/ja/common.json

@@ -1,4 +1,7 @@
 {
+  "alert": {
+    "incompatible_weapon": "Additional Weaponsに装備できない武器を入れました。"
+  },
   "ax": {
     "no_skill": "EXスキルなし",
     "errors": {
@@ -20,6 +23,7 @@
   "buttons": {
     "cancel": "キャンセル",
     "copy": "リンクをコピー",
+    "confirm": "OK",
     "delete": "編成を削除",
     "show_info": "詳細を編集",
     "save_info": "詳細を保存",