Set battle settings in state on update

Also renames PartyDetails to PartyFooter and makes description reactive

components/party/Party/index.tsx

@@ -7,7 +7,7 @@ import clonedeep from 'lodash.clonedeep'
 
 import Alert from '~components/common/Alert'
 import PartySegmentedControl from '~components/party/PartySegmentedControl'
-import PartyDetails from '~components/party/PartyDetails'
+import PartyFooter from '~components/party/PartyFooter'
 import PartyHeader from '~components/party/PartyHeader'
 import WeaponGrid from '~components/weapon/WeaponGrid'
 import SummonGrid from '~components/summon/SummonGrid'
@@ -265,6 +265,15 @@ const Party = (props: Props) => {
     appState.party.jobSkills = team.job_skills
     appState.party.accessory = team.accessory
 
+    appState.party.chargeAttack = team.charge_attack
+    appState.party.fullAuto = team.full_auto
+    appState.party.autoGuard = team.auto_guard
+    appState.party.autoSummon = team.auto_summon
+    appState.party.clearTime = team.clear_time
+    appState.party.buttonCount = team.button_count
+    appState.party.chainCount = team.chain_count
+    appState.party.turnCount = team.turn_count
+
     appState.party.id = team.id
     appState.party.shortcode = team.shortcode
     appState.party.extra = team.extra
@@ -445,7 +454,7 @@ const Party = (props: Props) => {
 
       <section id="Party">{currentGrid()}</section>
 
-      <PartyDetails
+      <PartyFooter
         party={props.team}
         new={props.new || false}
         editable={party.editable}

components/party/PartyFooter/index.scss

@@ -1,4 +1,4 @@
-.DetailsWrapper {
+.FooterWrapper {
   display: flex;
   flex-direction: column;
   gap: $unit-2x;
@@ -16,10 +16,13 @@
     }
   }
 
-  .PartyDetails {
+  .PartyFooter {
     box-sizing: border-box;
-    display: none;
+    line-height: 1.4;
+    white-space: pre-wrap;
     margin: 0 auto $unit-2x;
+    margin-bottom: $unit-12x;
+    min-height: 10vh;
     max-width: $unit * 94;
     overflow: hidden;
     width: 100%;
@@ -27,11 +30,6 @@
     @include breakpoint(phone) {
       padding: 0 $unit;
     }
-
-    &.Visible {
-      // margin-bottom: $unit-12x;
-    }
-
     &.Editable {
       gap: $unit;
 
@@ -174,11 +172,6 @@
       }
     }
 
-    &.ReadOnly {
-      box-sizing: border-box;
-      line-height: 1.4;
-      white-space: pre-wrap;
-
     &.Visible {
       display: block;
     }
@@ -285,7 +278,6 @@
       }
     }
   }
-  }
 
   .PartyInfo {
     box-sizing: border-box;

components/party/PartyFooter/index.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import { useRouter } from 'next/router'
+import { useSnapshot } from 'valtio'
 import { useTranslation } from 'next-i18next'
 import clonedeep from 'lodash.clonedeep'
 
@@ -27,10 +28,12 @@ interface Props {
   updateCallback: (details: DetailsObject) => void
 }
 
-const PartyDetails = (props: Props) => {
+const PartyFooter = (props: Props) => {
   const { t } = useTranslation('common')
   const router = useRouter()
 
+  const { party } = useSnapshot(appState)
+
   const youtubeUrlRegex =
     /(?:https:\/\/www\.youtube\.com\/watch\?v=|https:\/\/youtu\.be\/)([\w-]+)/g
 
@@ -40,16 +43,10 @@ const PartyDetails = (props: Props) => {
   const [embeddedDescription, setEmbeddedDescription] =
     useState<React.ReactNode>()
 
-  const readOnlyClasses = classNames({
-    PartyDetails: true,
-    ReadOnly: true,
-    Visible: !open,
-  })
-
   useEffect(() => {
     // Extract the video IDs from the description
-    if (appState.party.description) {
+    if (party.description) {
-      const videoIds = extractYoutubeVideoIds(appState.party.description)
+      const videoIds = extractYoutubeVideoIds(party.description)
 
       // Fetch the video titles for each ID
       const fetchPromises = videoIds.map(({ id }) => fetchYoutubeData(id))
@@ -58,7 +55,7 @@ const PartyDetails = (props: Props) => {
       Promise.all(fetchPromises).then((videoTitles) => {
         // Replace the video URLs in the description with LiteYoutubeEmbed elements
         const newDescription = reactStringReplace(
-          appState.party.description,
+          party.description,
           youtubeUrlRegex,
           (match, i) => (
             <LiteYouTubeEmbed
@@ -77,7 +74,7 @@ const PartyDetails = (props: Props) => {
     } else {
       setEmbeddedDescription('')
     }
-  }, [appState.party.description])
+  }, [party.description])
 
   async function fetchYoutubeData(videoId: string) {
     return await youtube
@@ -173,14 +170,6 @@ const PartyDetails = (props: Props) => {
     })
   }
 
-  const readOnly = () => {
-    return (
-      <section className={readOnlyClasses}>
-        <Linkify>{embeddedDescription}</Linkify>
-      </section>
-    )
-  }
-
   const remixSection = () => {
     return (
       <section className="Remixes">
@@ -192,10 +181,14 @@ const PartyDetails = (props: Props) => {
 
   return (
     <>
-      <section className="DetailsWrapper">{readOnly()}</section>
+      <section className="FooterWrapper">
+        <section className="PartyFooter">
+          <Linkify>{embeddedDescription}</Linkify>
+        </section>
+      </section>
       {remixes && remixes.length > 0 ? remixSection() : ''}
     </>
   )
 }
 
-export default PartyDetails
+export default PartyFooter