Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove duplicate save code #1413

Merged
merged 2 commits into from
Dec 9, 2024
Merged

Remove duplicate save code #1413

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
26ac0c5
Remove duplicate save code
Arnei Jul 9, 2024
56ca930
Merge branch 'main' into refactor-save-button-code
Arnei Dec 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 2 additions & 5 deletions src/main/Discard.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading