reload files on model show page when uploading new ones w/ burnettk

package.json

@@ -41,7 +41,7 @@
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "PORT=7001 craco start",
+    "start": "ESLINT_NO_DEV_ERRORS=true PORT=7001 craco start",
     "build": "craco build",
     "test": "react-scripts test",
     "eject": "craco eject",

src/components/FileInput.tsx

@@ -5,6 +5,7 @@ import { BACKEND_BASE_URL, HOT_AUTH_TOKEN } from '../config';
 type Props = {
   processGroupId: string;
   processModelId: string;
+  onUploadedCallback?: (..._args: any[]) => any;
 };
 
 export default class FileInput extends React.Component<Props> {
@@ -14,12 +15,15 @@ export default class FileInput extends React.Component<Props> {
 
   processModelId: any;
 
-  constructor({ processGroupId, processModelId }: Props) {
-    super({ processGroupId, processModelId });
+  onUploadedCallback: any;
+
+  constructor({ processGroupId, processModelId, onUploadedCallback }: Props) {
+    super({ processGroupId, processModelId, onUploadedCallback });
     this.handleSubmit = this.handleSubmit.bind(this);
     this.fileInput = React.createRef();
     this.processGroupId = processGroupId;
     this.processModelId = processModelId;
+    this.onUploadedCallback = onUploadedCallback;
   }
 
   handleSubmit(event: any) {
@@ -55,6 +59,9 @@ export default class FileInput extends React.Component<Props> {
     };
     axios.post(url, formData, config).then((response) => {
       console.log(response.data);
+      if (this.onUploadedCallback) {
+        this.onUploadedCallback();
+      }
     });
   }
 

src/routes/ProcessModelShow.tsx

@@ -10,6 +10,7 @@ export default function ProcessModelShow() {
 
   const [processModel, setProcessModel] = useState(null);
   const [processInstanceResult, setProcessInstanceResult] = useState(null);
+  const [reloadModel, setReloadModel] = useState(false);
 
   useEffect(() => {
     fetch(
@@ -24,12 +25,13 @@ export default function ProcessModelShow() {
       .then(
         (result) => {
           setProcessModel(result);
+          setReloadModel(false);
         },
         (error) => {
           console.log(error);
         }
       );
-  }, [params]);
+  }, [params, reloadModel]);
 
   const processModelRun = (processInstance: any) => {
     fetch(
@@ -96,6 +98,10 @@ export default function ProcessModelShow() {
     );
   }
 
+  const onUploadedCallback = () => {
+    setReloadModel(true);
+  };
+
   if (processModel) {
     const processModelFilesTag = (processModel as any).files.map(
       (fileBpmn: any) => {
@@ -132,6 +138,7 @@ export default function ProcessModelShow() {
         <FileInput
           processModelId={(processModel as any).id}
           processGroupId={(processModel as any).process_group_id}
+          onUploadedCallback={onUploadedCallback}
         />
         <br />
         <Stack direction="horizontal" gap={3}>