Use snapshot for reactive Edit party modal

components/party/EditPartyModal/index.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react'
 import { useRouter } from 'next/router'
+import { useSnapshot } from 'valtio'
 import { useTranslation } from 'react-i18next'
 
 import {
@@ -22,6 +23,8 @@ import TableField from '~components/common/TableField'
 import type { DetailsObject } from 'types'
 import type { DialogProps } from '@radix-ui/react-dialog'
 
+import { appState } from '~utils/appState'
+
 import CheckIcon from '~public/icons/Check.svg'
 import CrossIcon from '~public/icons/Cross.svg'
 import './index.scss'
@@ -31,14 +34,16 @@ interface Props extends DialogProps {
   updateCallback: (details: DetailsObject) => void
 }
 
-const EditPartyModal = ({ party, updateCallback, ...props }: Props) => {
+const EditPartyModal = ({ updateCallback, ...props }: Props) => {
   // Set up router
   const router = useRouter()
-  const locale = router.locale
 
   // Set up translation
   const { t } = useTranslation('common')
 
+  // Set up reactive state
+  const { party } = useSnapshot(appState)
+
   // Refs
   const headerRef = React.createRef<HTMLDivElement>()
   const footerRef = React.createRef<HTMLDivElement>()
@@ -54,6 +59,7 @@ const EditPartyModal = ({ party, updateCallback, ...props }: Props) => {
 
   // States: Data
   const [name, setName] = useState('')
+  const [description, setDescription] = useState('')
   const [raid, setRaid] = useState<Raid>()
   const [extra, setExtra] = useState(false)
   const [chargeAttack, setChargeAttack] = useState(true)
@@ -70,16 +76,17 @@ const EditPartyModal = ({ party, updateCallback, ...props }: Props) => {
   useEffect(() => {
     if (!party) return
 
-    setName(party.name)
+    setName(party.name ? party.name : '')
+    setDescription(party.description ? party.description : '')
     setRaid(party.raid)
-    setAutoGuard(party.auto_guard)
+    setAutoGuard(party.autoGuard)
-    setAutoSummon(party.auto_summon)
+    setAutoSummon(party.autoSummon)
-    setFullAuto(party.full_auto)
+    setFullAuto(party.fullAuto)
-    setChargeAttack(party.charge_attack)
+    setChargeAttack(party.chargeAttack)
-    setClearTime(party.clear_time)
+    setClearTime(party.clearTime)
-    if (party.turn_count) setTurnCount(party.turn_count)
+    if (party.turnCount) setTurnCount(party.turnCount)
-    if (party.button_count) setButtonCount(party.button_count)
+    if (party.buttonCount) setButtonCount(party.buttonCount)
-    if (party.chain_count) setChainCount(party.chain_count)
+    if (party.chainCount) setChainCount(party.chainCount)
   }, [party])
 
   // Methods: Event handlers (Dialog)
@@ -272,9 +279,8 @@ const EditPartyModal = ({ party, updateCallback, ...props }: Props) => {
           }
           onChange={handleTextAreaChanged}
           ref={descriptionInput}
-        >
+          defaultValue={description}
-          {party ? party.description : ''}
+        />
-        </textarea>
       </div>
     )
   }

components/party/PartyHeader/index.tsx

@@ -12,6 +12,7 @@ import Token from '~components/common/Token'
 import EditPartyModal from '~components/party/EditPartyModal'
 import PartyDropdown from '~components/party/PartyDropdown'
 
+import api from '~utils/api'
 import { accountState } from '~utils/accountState'
 import { appState, initialAppState } from '~utils/appState'
 import { formatTimeAgo } from '~utils/timeAgo'
@@ -23,7 +24,6 @@ import SaveIcon from '~public/icons/Save.svg'
 import type { DetailsObject } from 'types'
 
 import './index.scss'
-import api from '~utils/api'
 
 // Props
 interface Props {