From f6d0a0b79571c2b0e88d817401d5d10b0171bfdc Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Thu, 6 Jul 2023 02:45:37 -0700
Subject: [PATCH] Ensure content gets reset when edits are committed

Here, we do some tactical bandaid fixes to ensure that when the user saves data to the server, the editor will show the freshest data in both editable and read-only mode.

In the Editor, its as easy as calling the setContent command in a useEffect hook when the content changes.

In the party, we are saving party in a state and passing it down to the components via props. This is because the party prop we get from pages is only from the first time the server loaded data, so any edits are not reflected. The app state should have the latest updates, but due to reasons I don't completely understand, it is showing the old state first and then the one we want, causing the Editor to get stuck on old data.

By storing the party in a state, we can populate the state from the server when the component mounts, then update it whenever the user saves data since all party data is saved in that component.
---
 components/common/Editor/index.tsx |  5 ++---
 components/party/Party/index.tsx   | 22 +++++++++++++++-------
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/components/common/Editor/index.tsx b/components/common/Editor/index.tsx
index 33f2eee5..06bb5dd2 100644
--- a/components/common/Editor/index.tsx
+++ b/components/common/Editor/index.tsx
@@ -41,13 +41,12 @@ const Editor = ({
   onUpdate,
   ...props
 }: Props) => {
+  // Hooks: Router
   const router = useRouter()
   const locale = router.locale || 'en'
 
   useEffect(() => {
-    // console.log('Recreating editor...')
-    // editor?.destroy()
-    // setEditor(newEditor)
+    editor?.commands.setContent(formatContent(content))
   }, [content])
 
   // Setup: Editor
diff --git a/components/party/Party/index.tsx b/components/party/Party/index.tsx
index b6206b75..51780610 100644
--- a/components/party/Party/index.tsx
+++ b/components/party/Party/index.tsx
@@ -46,6 +46,7 @@ const Party = (props: Props) => {
 
   // Set up states
   const { party } = useSnapshot(appState)
+  const [updatedParty, setUpdatedParty] = useState<Party | undefined>()
   const [editable, setEditable] = useState(false)
   const [refresh, setRefresh] = useState(false)
   const [errorMessage, setErrorMessage] = useState('')
@@ -57,7 +58,10 @@ const Party = (props: Props) => {
   useEffect(() => {
     const resetState = clonedeep(initialAppState)
     appState.grid = resetState.grid
-    if (props.team) storeParty(props.team)
+    if (props.team) {
+      storeParty(props.team)
+      setUpdatedParty(props.team)
+    }
   }, [])
 
   // Subscribe to app state to listen for account changes and
@@ -108,9 +112,10 @@ const Party = (props: Props) => {
     let payload = {}
     if (details) payload = formatDetailsObject(details)
 
-    return await api.endpoints.parties
-      .create(payload)
-      .then((response) => storeParty(response.data.party))
+    return await api.endpoints.parties.create(payload).then((response) => {
+      storeParty(response.data.party)
+      setUpdatedParty(response.data.party)
+    })
   }
 
   async function updateParty(details: DetailsObject) {
@@ -119,7 +124,10 @@ const Party = (props: Props) => {
     if (props.team && props.team.id) {
       return await api.endpoints.parties
         .update(props.team.id, payload)
-        .then((response) => storeParty(response.data.party))
+        .then((response) => {
+          storeParty(response.data.party)
+          setUpdatedParty(response.data.party)
+        })
         .catch((error) => {
           const data = error.response.data
           if (data.errors && Object.keys(data.errors).includes('guidebooks')) {
@@ -438,7 +446,7 @@ const Party = (props: Props) => {
       {errorAlert()}
 
       <PartyHeader
-        party={props.team}
+        party={updatedParty}
         new={props.new || false}
         editable={props.new ? true : party.editable}
         raidGroups={props.raidGroups}
@@ -452,7 +460,7 @@ const Party = (props: Props) => {
       <section id="Party">{currentGrid()}</section>
 
       <PartyFooter
-        party={props.team}
+        party={updatedParty}
         new={props.new || false}
         editable={party.editable}
         raidGroups={props.raidGroups}