adding model creation and cleanup

Author: Mletter1

web-server/plugins/slycat-cca/js/components/CCAWizard.tsx

@@ -5,35 +5,69 @@ import * as React from "react";
 import { CCAModalContent } from "./CCAWizardContent";
 import { CCAWizardSteps } from "./CCAWizardSteps";
 import { useCCAWizardFooter } from "./CCAWizardUtils";
-import { useAppDispatch } from "./wizard-store/hooks";
-import { resetCCAWizard, setPid } from "./wizard-store/reducers/cCAWizardSlice";
+import { useAppDispatch, useAppSelector } from "./wizard-store/hooks";
+import {
+  resetCCAWizard,
+  selectMid,
+  selectPid,
+  setMid,
+  setPid,
+} from "./wizard-store/reducers/cCAWizardSlice";
+import client from "js/slycat-web-client";
 
 interface CCAWizardParams {
   pid: string;
+  marking?: string;
 }
 
 export const CCAWizard = (params: CCAWizardParams) => {
-  const { pid } = params;
+  const { pid, marking } = params;
+  const [modalOpen, setModalOpen] = React.useState(true);
   const cCAWizardFooter = useCCAWizardFooter();
   const dispatch = useAppDispatch();
+  const statePid = useAppSelector(selectPid);
+  const stateMid = useAppSelector(selectMid);
 
   React.useEffect(() => {
-    dispatch(setPid(pid));
-   }, [dispatch, pid])
-  
+    console.log("statePid, pid, selectMid", statePid, pid, stateMid);
+    if (modalOpen) {
+      if (!statePid) {
+        dispatch(setPid(pid));
+      }
+      if (!stateMid && statePid) {
+        // create the model on open so we have something to reference later
+        client
+          .post_project_models_fetch({
+            pid: statePid,
+            type: "cca",
+            name: "",
+            description: "",
+            marking: marking ?? "",
+          })
+          .then((result) => {
+            dispatch(setMid(result.id));
+          });
+      }
+    }
+  }, [dispatch, pid, statePid, stateMid]);
+
   return (
     <CCAModalContent
       key={"slycat-wizard"}
       // slycat-wizard is the standard wizard id from knockout
       modalId={"slycat-wizard"}
-      closingCallBack={() => {
-        console.log("clean and delete model");
+      closingCallBack={React.useCallback(() => {
+        setModalOpen(false);
+        if (stateMid) {
+          console.log("delete");
+          client.delete_model_fetch({ mid: stateMid });
+        }
         dispatch(resetCCAWizard());
-      }}
+      }, [stateMid])}
       title={"New CCA Model"}
       footer={cCAWizardFooter}
     >
       <CCAWizardSteps key={"CCA Steps"} />
     </CCAModalContent>
   );
-};
+};

web-server/plugins/slycat-cca/js/components/wizard-store/reducers/cCAWizardSlice.tsx

@@ -57,5 +57,7 @@ export const {
 // Other code such as selectors can use the imported `RootState` type
 export const selectTab = (state: RootState) => state.cCAWizard.tab;
 export const selectDataLocation = (state: RootState) => state.cCAWizard.dataLocation;
+export const selectPid = (state: RootState) => state.cCAWizard.pid;
+export const selectMid = (state: RootState) => state.cCAWizard.mid;
 
 export default cCAWizardSlice.reducer;

web-server/plugins/slycat-cca/js/wizard-ui.js

@@ -8,18 +8,15 @@ import { CCAWizard } from ".//components/CCAWizard.tsx";
 import ccaWizardUI from "../wizard-ui.html";
 import { Provider } from 'react-redux'
 import { cCAWizardStore } from ".//components/wizard-store/store";
+import markings from "js/slycat-selectable-markings";
 
 function constructor(params) {
-  console.log(params.projects()[0]?._id());
   const react_wizard_root = createRoot(document.querySelector(".react-wizard"));
   react_wizard_root.render(
     <Provider store={cCAWizardStore}>
-      <CCAWizard pid={params.projects()[0]?._id()}/>
+      <CCAWizard pid={params.projects()[0]?._id()} marking={markings.preselected()}/>
     </Provider>
 );
-
-  // return an empty component since we are just using it to render react
-  return {};
 }
 
 export default {