opencast · geichelberger · Dec 5, 2024 · Oct 15, 2024
diff --git a/src/main/MainMenu.tsx b/src/main/MainMenu.tsx
@@ -17,7 +17,6 @@ import { basicButtonStyle } from "../cssStyles";
 import { setIsPlaying } from "../redux/videoSlice";
 
 import { useTranslation } from "react-i18next";
-import { resetPostRequestState as metadataResetPostRequestState } from "../redux/metadataSlice";
 import { resetPostRequestState } from "../redux/workflowPostSlice";
 import { setIsDisplayEditView } from "../redux/subtitleSlice";
 
@@ -126,7 +125,6 @@ export const MainMenuButton: React.FC<mainMenuButtonInterface> = ({
     dispatch(setIsPlaying(false));
     // Reset states
     dispatch(resetPostRequestState());
-    dispatch(metadataResetPostRequestState());
   };
 
   const mainMenuButtonStyle = css({

diff --git a/src/main/Metadata.tsx b/src/main/Metadata.tsx
@@ -6,15 +6,12 @@ import { calendarStyle, errorBoxStyle, selectFieldStyle, titleStyle, titleStyleB
 import { useAppDispatch, useAppSelector } from "../redux/store";
 import {
   fetchMetadata,
-  postMetadata,
   selectCatalogs,
   Catalog,
   MetadataField,
   setFieldValue,
   selectGetError,
   selectGetStatus,
-  selectPostError,
-  selectPostStatus,
   setFieldReadonly,
 } from "../redux/metadataSlice";
 
@@ -49,8 +46,6 @@ const Metadata: React.FC = () => {
   const catalogs = useAppSelector(selectCatalogs);
   const getStatus = useAppSelector(selectGetStatus);
   const getError = useAppSelector(selectGetError);
-  const postStatus = useAppSelector(selectPostStatus);
-  const postError = useAppSelector(selectPostError);
   const theme = useTheme();
 
   // Try to fetch URL from external API
@@ -433,7 +428,7 @@ const Metadata: React.FC = () => {
 
   /**
    * Callback for when the form is submitted
-   * Saves values in redux state and sends them to Opencast
+   * Saves values in redux state
    * @param values
    */
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -458,8 +453,6 @@ const Metadata: React.FC = () => {
         }
       });
 
-      // Send updated values to Opencast
-      dispatch(postMetadata());
     });
   };
 
@@ -730,36 +723,6 @@ const Metadata: React.FC = () => {
               return renderCatalog(catalog, i, {});
             })}
 
-            {/*
-                <div css={{display: "block", wordWrap: "normal", whiteSpace: "pre"}}>
-                  {t("metadata.submit-helpertext", { buttonName: t("metadata.submit-button") })}
-                </div>
-
-
-              <div title="buttons" css={buttonContainerStyle}>
-                <button css={[basicButtonStyleCOPY, nagivationButtonStyle, submitButtonStyle]}
-                  type="submit"
-                  title={t("metadata.submit-button-tooltip")}
-                  aria-label={t("metadata.submit-button-tooltip")}
-                  disabled={submitting || pristine}>
-                    {t("metadata.submit-button")}
-                </button>
-                <button css={[basicButtonStyleCOPY, nagivationButtonStyle, submitButtonStyle]}
-                  type="button"
-                  title={t("metadata.reset-button-tooltip")}
-                  aria-label={t("metadata.reset-button-tooltip")}
-                  onClick={() => {form.reset()}}
-                  disabled={submitting || pristine}>
-                    {t("metadata.reset-button")}
-                </button>
-              </div> */}
-
-            <div css={errorBoxStyle(postStatus === "failed", theme)} role="alert">
-              <span>A problem occurred during communication with Opencast. <br />
-                Changes could not be saved to Opencast.</span><br />
-              {postError ? "Details: " + postError : "No error details are available."}<br />
-            </div>
-
             {/* For debugging the forms current values*/}
             {/* <FormSpy subscription={{ values: true }}>
                 {({ values }) => (

diff --git a/src/main/Save.tsx b/src/main/Save.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
 
 import { css } from "@emotion/react";
 import {
@@ -22,8 +22,9 @@ import { CallbackButton, PageButton } from "./Finish";
 
 import { useTranslation } from "react-i18next";
 import {
-  postMetadata, selectPostError, selectPostStatus, setHasChanges as metadataSetHasChanges,
+  setHasChanges as metadataSetHasChanges,
   selectHasChanges as metadataSelectHasChanges,
+  selectCatalogs,
 } from "../redux/metadataSlice";
 import {
   selectSubtitles, selectHasChanges as selectSubtitleHasChanges,
@@ -45,8 +46,6 @@ const Save: React.FC = () => {
 
   const postWorkflowStatus = useAppSelector(selectStatus);
   const postError = useAppSelector(selectError);
-  const postMetadataStatus = useAppSelector(selectPostStatus);
-  const postMetadataError = useAppSelector(selectPostError);
   const theme = useTheme();
   const metadataHasChanges = useAppSelector(metadataSelectHasChanges);
   const hasChanges = useAppSelector(selectHasChanges);
@@ -62,7 +61,7 @@ const Save: React.FC = () => {
 
   const render = () => {
     // Post (successful) save
-    if (postWorkflowStatus === "success" && postMetadataStatus === "success"
+    if (postWorkflowStatus === "success"
       && !hasChanges && !metadataHasChanges && !subtitleHasChanges) {
       return (
         <>
@@ -95,12 +94,6 @@ const Save: React.FC = () => {
         <span>{t("various.error-text")}</span><br />
         {postError ? t("various.error-details-text", { errorMessage: postError }) : t("various.error-text")}<br />
       </div>
-      <div css={errorBoxStyle(postMetadataStatus === "failed", theme)} role="alert">
-        <span>{t("various.error-text")}</span><br />
-        {postMetadataError ?
-          t("various.error-details-text", { errorMessage: postMetadataError }) : t("various.error-text")
-        }<br />
-      </div>
     </div>
   );
 };
@@ -118,24 +111,23 @@ export const SaveButton: React.FC = () => {
   const segments = useAppSelector(selectSegments);
   const tracks = useAppSelector(selectTracks);
   const subtitles = useAppSelector(selectSubtitles);
+  const metadata = useAppSelector(selectCatalogs);
   const workflowStatus = useAppSelector(selectStatus);
-  const metadataStatus = useAppSelector(selectPostStatus);
   const theme = useTheme();
-  const [metadataSaveStarted, setMetadataSaveStarted] = useState(false);
 
   // Update based on current fetching status
   let Icon = LuSave;
   let spin = false;
   let tooltip = null;
-  if (workflowStatus === "failed" || metadataStatus === "failed") {
+  if (workflowStatus === "failed") {
     Icon = LuAlertCircle;
     spin = false;
     tooltip = t("save.confirmButton-failed-tooltip");
-  } else if (workflowStatus === "success" && metadataStatus === "success") {
+  } else if (workflowStatus === "success") {
     Icon = LuCheck;
     spin = false;
     tooltip = t("save.confirmButton-success-tooltip");
-  } else if (workflowStatus === "loading" || metadataStatus === "loading") {
+  } else if (workflowStatus === "loading") {
     Icon = LuLoader;
     spin = true;
     tooltip = t("save.confirmButton-attempting-tooltip");
@@ -160,36 +152,23 @@ export const SaveButton: React.FC = () => {
     return subtitlesForPosting;
   };
 
-  // Dispatches first save request
-  // Subsequent save requests should be wrapped in useEffect hooks,
-  // so they are only sent after the previous one has finished
   const save = () => {
-    setMetadataSaveStarted(true);
-    dispatch(postMetadata());
+    dispatch(postVideoInformation({
+      segments: segments,
+      tracks: tracks,
+      subtitles: prepareSubtitles(),
+      metadata: metadata,
+    }));
   };
 
-  // Subsequent save request
-  useEffect(() => {
-    if (metadataStatus === "success" && metadataSaveStarted) {
-      setMetadataSaveStarted(false);
-      dispatch(postVideoInformation({
-        segments: segments,
-        tracks: tracks,
-        subtitles: prepareSubtitles(),
-      }));
-
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [metadataStatus]);
-
   // Let users leave the page without warning after a successful save
   useEffect(() => {
-    if (workflowStatus === "success" && metadataStatus === "success") {
+    if (workflowStatus === "success") {
       dispatch(videoSetHasChanges(false));
       dispatch(metadataSetHasChanges(false));
       dispatch(subtitleSetHasChanges(false));
     }
-  }, [dispatch, metadataStatus, workflowStatus]);
+  }, [dispatch, workflowStatus]);
 
   return (
     <ThemedTooltip title={tooltip == null ? tooltip = "" : tooltip}>

diff --git a/src/main/WorkflowConfiguration.tsx b/src/main/WorkflowConfiguration.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect } from "react";
 
 import { css } from "@emotion/react";
 import {
@@ -24,10 +24,8 @@ import { setEnd } from "../redux/endSlice";
 
 import { useTranslation } from "react-i18next";
 import {
-  postMetadata,
-  selectPostError,
-  selectPostStatus,
   setHasChanges as metadataSetHasChanges,
+  selectCatalogs,
 } from "../redux/metadataSlice";
 import {
   selectSubtitles,
@@ -45,8 +43,6 @@ const WorkflowConfiguration: React.FC = () => {
 
   const postAndProcessWorkflowStatus = useAppSelector(selectStatus);
   const postAndProcessError = useAppSelector(selectError);
-  const postMetadataStatus = useAppSelector(selectPostStatus);
-  const postMetadataError = useAppSelector(selectPostError);
   const theme = useTheme();
 
   const workflowConfigurationStyle = css({
@@ -73,12 +69,6 @@ const WorkflowConfiguration: React.FC = () => {
           { errorMessage: postAndProcessError }) :
           t("various.error-text")}<br />
       </div>
-      <div css={errorBoxStyle(postMetadataStatus === "failed", theme)} role="alert">
-        <span>{t("various.error-text")}</span><br />
-        {postMetadataError ? t("various.error-details-text",
-          { errorMessage: postMetadataError }) :
-          t("various.error-text")}<br />
-      </div>
     </div>
   );
 };
@@ -96,20 +86,19 @@ export const SaveAndProcessButton: React.FC<{ text: string; }> = ({ text }) => {
   const segments = useAppSelector(selectSegments);
   const tracks = useAppSelector(selectTracks);
   const subtitles = useAppSelector(selectSubtitles);
+  const metadata = useAppSelector(selectCatalogs);
   const workflowStatus = useAppSelector(selectStatus);
-  const metadataStatus = useAppSelector(selectPostStatus);
-  const [metadataSaveStarted, setMetadataSaveStarted] = useState(false);
   const theme = useTheme();
 
   // Let users leave the page without warning after a successful save
   useEffect(() => {
-    if (workflowStatus === "success" && metadataStatus === "success") {
+    if (workflowStatus === "success") {
       dispatch(setEnd({ hasEnded: true, value: "success" }));
       dispatch(videoSetHasChanges(false));
       dispatch(metadataSetHasChanges(false));
       dispatch(subtitleSetHasChanges(false));
     }
-  }, [dispatch, metadataStatus, workflowStatus]);
+  }, [dispatch, workflowStatus]);
 
   const prepareSubtitles = () => {
     const subtitlesForPosting = [];
@@ -124,38 +113,26 @@ export const SaveAndProcessButton: React.FC<{ text: string; }> = ({ text }) => {
     return subtitlesForPosting;
   };
 
-  // Dispatches first save request
-  // Subsequent save requests should be wrapped in useEffect hooks,
-  // so they are only sent after the previous one has finished
   const saveAndProcess = () => {
-    setMetadataSaveStarted(true);
-    dispatch(postMetadata());
+    dispatch(postVideoInformationWithWorkflow({
+      segments: segments,
+      tracks: tracks,
+      workflow: [{ id: selectedWorkflowId }],
+      subtitles: prepareSubtitles(),
+      metadata: metadata,
+    }));
   };
 
-  // Subsequent save request
-  useEffect(() => {
-    if (metadataStatus === "success" && metadataSaveStarted) {
-      setMetadataSaveStarted(false);
-      dispatch(postVideoInformationWithWorkflow({
-        segments: segments,
-        tracks: tracks,
-        workflow: [{ id: selectedWorkflowId }],
-        subtitles: prepareSubtitles(),
-      }));
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [metadataStatus]);
-
   // Update based on current fetching status
   let Icon = LuDatabase;
   let spin = false;
-  if (workflowStatus === "failed" || metadataStatus === "failed") {
+  if (workflowStatus === "failed") {
     Icon = LuAlertCircle;
     spin = false;
-  } else if (workflowStatus === "success" && metadataStatus === "success") {
+  } else if (workflowStatus === "success") {
     Icon = LuCheck;
     spin = false;
-  } else if (workflowStatus === "loading" || metadataStatus === "loading") {
+  } else if (workflowStatus === "loading") {
     Icon = LuLoader;
     spin = true;