Skip to content

Commit

Permalink
Merge pull request #1413 from Arnei/refactor-save-button-code
Browse files Browse the repository at this point in the history 
Remove duplicate save code
  • Loading branch information
@geichelberger
geichelberger authored Dec 9, 2024
2 parents 61cb12a + 56ca930 commit eeed3c6
Show file tree
Hide file tree
Showing 9 changed files with 78 additions and 236 deletions.
7 changes: 2 additions & 5 deletions src/main/Discard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,7 @@ import { basicButtonStyle, backOrContinueStyle, navigationButtonStyle } from "..

import { LuChevronLeft, LuXCircle } from "react-icons/lu";

import { useAppDispatch, useAppSelector } from "../redux/store";
import { selectFinishState } from "../redux/finishSlice";
import { useAppDispatch } from "../redux/store";
import { setEnd } from "../redux/endSlice";

import { PageButton } from "./Finish";
Expand All @@ -22,10 +21,8 @@ const Discard: React.FC = () => {

const { t } = useTranslation();

const finishState = useAppSelector(selectFinishState);

const cancelStyle = css({
display: finishState !== "Discard changes" ? "none" : "flex",
display: "flex",
flexDirection: "column" as const,
alignItems: "center",
gap: "30px",
Expand Down
53 changes: 28 additions & 25 deletions src/main/Finish.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import { basicButtonStyle, navigationButtonStyle } from "../cssStyles";
import { IconType } from "react-icons";

import { useAppDispatch, useAppSelector } from "../redux/store";
import { selectPageNumber, setPageNumber } from "../redux/finishSlice";
import { selectFinishState, selectPageNumber, setPageNumber } from "../redux/finishSlice";
import { useTheme } from "../themes";
import { settings } from "../config";
import { useTranslation } from "react-i18next";
Expand All @@ -25,33 +25,36 @@ import { useTranslation } from "react-i18next";
const Finish: React.FC = () => {

const pageNumber = useAppSelector(selectPageNumber);
const finishState = useAppSelector(selectFinishState);

const pageZeroStyle = css({
display: pageNumber !== 0 ? "none" : "block",
});

const pageOneStyle = css({
display: pageNumber !== 1 ? "none" : "block",
});

const pageTwoStyle = css({
display: pageNumber !== 2 ? "none" : "block",
});

return (
<div>
<div css={pageZeroStyle} >
const render = () => {
if (pageNumber === 0) {
return (
<FinishMenu />
</div>
<div css={pageOneStyle} >
<Save />
<WorkflowSelection />
<Discard />
</div>
<div css={pageTwoStyle} >
);
} else if (pageNumber === 1) {
if (finishState === "Save changes") {
return (
<Save />
);
} else if (finishState === "Start processing") {
return (
<WorkflowSelection />
);
} else if (finishState === "Discard changes") {
return (
<Discard />
);
}
} else if (pageNumber === 2) {
return (
<WorkflowConfiguration />
</div>
</div>
);
}
};

return (
<>{render()}</>
);
};

Expand Down
29 changes: 19 additions & 10 deletions src/main/Save.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import {
import { LuLoader, LuCheckCircle, LuAlertCircle, LuChevronLeft, LuSave, LuCheck } from "react-icons/lu";

import { useAppDispatch, useAppSelector } from "../redux/store";
import { selectFinishState } from "../redux/finishSlice";
import {
selectHasChanges,
selectSegments,
Expand All @@ -33,6 +32,8 @@ import {
import { serializeSubtitle } from "../util/utilityFunctions";
import { useTheme } from "../themes";
import { ThemedTooltip } from "./Tooltip";
import { IconType } from "react-icons";
import { setEnd } from "../redux/endSlice";

/**
* Shown if the user wishes to save.
Expand All @@ -42,8 +43,6 @@ const Save: React.FC = () => {

const { t } = useTranslation();

const finishState = useAppSelector(selectFinishState);

const postWorkflowStatus = useAppSelector(selectStatus);
const postError = useAppSelector(selectError);
const theme = useTheme();
Expand All @@ -52,9 +51,9 @@ const Save: React.FC = () => {
const subtitleHasChanges = useAppSelector(selectSubtitleHasChanges);

const saveStyle = css({
height: "100%",
display: finishState !== "Save changes" ? "none" : "flex",
flexDirection: "column" as const,
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
gap: "30px",
});
Expand Down Expand Up @@ -101,8 +100,15 @@ const Save: React.FC = () => {
/**
* Button that sends a post request to save current changes
*/
export const SaveButton: React.FC = () => {

export const SaveButton: React.FC<{
basicIcon?: IconType
text?: string
isTransitionToEnd?: boolean
}> = ({
basicIcon = LuSave,
text,
isTransitionToEnd = false,
}) => {
const { t } = useTranslation();

// Initialize redux variables
Expand All @@ -116,7 +122,7 @@ export const SaveButton: React.FC = () => {
const theme = useTheme();

// Update based on current fetching status
let Icon = LuSave;
let Icon = basicIcon;
let spin = false;
let tooltip = null;
if (workflowStatus === "failed") {
Expand Down Expand Up @@ -164,6 +170,9 @@ export const SaveButton: React.FC = () => {
// Let users leave the page without warning after a successful save
useEffect(() => {
if (workflowStatus === "success") {
if (isTransitionToEnd) {
dispatch(setEnd({ hasEnded: true, value: "success" }));
}
dispatch(videoSetHasChanges(false));
dispatch(metadataSetHasChanges(false));
dispatch(subtitleSetHasChanges(false));
Expand All @@ -181,7 +190,7 @@ export const SaveButton: React.FC = () => {
}
}}>
<Icon css={spin ? spinningStyle : undefined} />
<span>{t("save.confirm-button")}</span>
<span>{text ?? t("save.confirm-button")}</span>
<div css={ariaLive} aria-live="polite" aria-atomic="true">{ariaSaveUpdate()}</div>
</div>
</ThemedTooltip>
Expand Down
119 changes: 10 additions & 109 deletions src/main/WorkflowConfiguration.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,38 +1,21 @@
import React, { useEffect } from "react";
import React from "react";

import { css } from "@emotion/react";
import {
basicButtonStyle,
backOrContinueStyle,
errorBoxStyle,
spinningStyle,
} from "../cssStyles";

import { LuLoader, LuCheck, LuAlertCircle, LuChevronLeft, LuDatabase, LuMoreHorizontal } from "react-icons/lu";
import { LuChevronLeft, LuDatabase, LuMoreHorizontal } from "react-icons/lu";

import { useAppDispatch, useAppSelector } from "../redux/store";
import {
selectSegments,
selectTracks,
setHasChanges as videoSetHasChanges,
selectSelectedWorkflowId,
} from "../redux/videoSlice";
import { postVideoInformationWithWorkflow, selectStatus, selectError } from "../redux/workflowPostAndProcessSlice";
import { useAppSelector } from "../redux/store";

import { PageButton } from "./Finish";
import { setEnd } from "../redux/endSlice";

import { useTranslation } from "react-i18next";
import {
setHasChanges as metadataSetHasChanges,
selectCatalogs,
} from "../redux/metadataSlice";
import {
selectSubtitles,
setHasChanges as subtitleSetHasChanges,
} from "../redux/subtitleSlice";
import { serializeSubtitle } from "../util/utilityFunctions";
import { useTheme } from "../themes";
import { selectError, selectStatus } from "../redux/workflowPostSlice";
import { SaveButton } from "./Save";

/**
* Will eventually display settings based on the selected workflow index
Expand Down Expand Up @@ -61,7 +44,11 @@ const WorkflowConfiguration: React.FC = () => {
<div>{t("workflowConfig.satisfied-text")}</div>
<div css={backOrContinueStyle}>
<PageButton pageNumber={1} label={t("various.goBack-button")} Icon={LuChevronLeft} />
<SaveAndProcessButton text={t("workflowConfig.confirm-button")} />
<SaveButton
basicIcon={LuDatabase}
isTransitionToEnd={true}
text={t("workflowConfig.confirm-button")}
/>
</div>
<div css={errorBoxStyle(postAndProcessWorkflowStatus === "failed", theme)} role="alert">
<span>{t("various.error-text")}</span><br />
Expand All @@ -73,90 +60,4 @@ const WorkflowConfiguration: React.FC = () => {
);
};

/**
* Button that sends a post request to save current changes
* and starts the selected workflow
*/
export const SaveAndProcessButton: React.FC<{ text: string; }> = ({ text }) => {

// Initialize redux variables
const dispatch = useAppDispatch();

const selectedWorkflowId = useAppSelector(selectSelectedWorkflowId);
const segments = useAppSelector(selectSegments);
const tracks = useAppSelector(selectTracks);
const subtitles = useAppSelector(selectSubtitles);
const metadata = useAppSelector(selectCatalogs);
const workflowStatus = useAppSelector(selectStatus);
const theme = useTheme();

// Let users leave the page without warning after a successful save
useEffect(() => {
if (workflowStatus === "success") {
dispatch(setEnd({ hasEnded: true, value: "success" }));
dispatch(videoSetHasChanges(false));
dispatch(metadataSetHasChanges(false));
dispatch(subtitleSetHasChanges(false));
}
}, [dispatch, workflowStatus]);

const prepareSubtitles = () => {
const subtitlesForPosting = [];

for (const identifier in subtitles) {
subtitlesForPosting.push({
id: identifier,
subtitle: serializeSubtitle(subtitles[identifier].cues),
tags: subtitles[identifier].tags,
});
}
return subtitlesForPosting;
};

const saveAndProcess = () => {
dispatch(postVideoInformationWithWorkflow({
segments: segments,
tracks: tracks,
workflow: [{ id: selectedWorkflowId }],
subtitles: prepareSubtitles(),
metadata: metadata,
}));
};

// Update based on current fetching status
let Icon = LuDatabase;
let spin = false;
if (workflowStatus === "failed") {
Icon = LuAlertCircle;
spin = false;
} else if (workflowStatus === "success") {
Icon = LuCheck;
spin = false;
} else if (workflowStatus === "loading") {
Icon = LuLoader;
spin = true;

}

const saveButtonStyle = css({
padding: "16px",
boxShadow: `${theme.boxShadow}`,
background: `${theme.element_bg}`,
});

return (
<div css={[basicButtonStyle(theme), saveButtonStyle]}
role="button" tabIndex={0}
onClick={saveAndProcess}
onKeyDown={(event: React.KeyboardEvent<HTMLDivElement>) => {
if (event.key === " " || event.key === "Enter") {
saveAndProcess();
}
}}>
<Icon css={spin ? spinningStyle : undefined} />
<span>{text}</span>
</div>
);
};

export default WorkflowConfiguration;
Loading

0 comments on commit eeed3c6

Please sign in to comment.