Save connected spells on module changes

client/src/features/Thoth/components/Workspace.jsx

@@ -1,11 +1,14 @@
 import { useEffect } from 'react'
 
+import { store } from '../../../state/store'
 import { Editor, useEditor } from '../../../contexts/EditorProvider'
 import { Layout } from '../../../contexts/LayoutProvider'
 import { useModule } from '../../../contexts/ModuleProvider'
 import {
   useLazyGetSpellQuery,
   useSaveSpellMutation,
+  selectSpellsByModuleName,
+  selectSpellById,
 } from '../../../state/spells'
 import WorkspaceProvider from '../../../contexts/WorkspaceProvider'
 import { debounce } from '../../../utils/debounce'
@@ -16,7 +19,7 @@ import Playtest from './PlaytestWindow'
 import StateManager from './StateManagerWindow'
 import TextEditor from './TextEditorWindow'
 
-const Workspace = ({ tab, appPubSub }) => {
+const Workspace = ({ tab, tabs, appPubSub }) => {
   const [loadSpell, { data: spellData }] = useLazyGetSpellQuery()
   const [saveSpell] = useSaveSpellMutation()
   const { saveModule } = useModule()
@@ -33,6 +36,20 @@ const Workspace = ({ tab, appPubSub }) => {
         }
         if (tab.type === 'module') {
           saveModule(tab.module, { data: editor.toJSON() }, false)
+          // when a module is saved, we look for any open spell tabs, and check if they have the module.
+          /// if they do, we trigger a save to ensure the module change is captured to the server
+          tabs
+            .filter(tab => tab.type === 'spell')
+            .forEach(filteredTab => {
+              if (filteredTab.spell) {
+                const spell = selectSpellById(
+                  store.getState(),
+                  filteredTab.spell
+                )
+                if (spell?.modules.some(module => module.name === tab.module))
+                  saveSpell({ ...spell })
+              }
+            })
         }
       }, 500)
     )