diff --git a/apps/client/src/common/api/ontimeApi.ts b/apps/client/src/common/api/ontimeApi.ts index edf306862..ccd7388cb 100644 --- a/apps/client/src/common/api/ontimeApi.ts +++ b/apps/client/src/common/api/ontimeApi.ts @@ -9,7 +9,6 @@ import { OscSubscription, ProjectData, Settings, - SheetState, UserFields, ViewSettings, } from 'ontime-types'; @@ -248,14 +247,13 @@ export async function postNew(initialData: Partial) { } /** - * @description sheet Client File - * @return {Promise} + * @description STEP 1 */ export const uploadSheetClientFile = async (file: File) => { const formData = new FormData(); formData.append('userFile', file); const res = await axios - .post(`${ontimeURL}/sheet-clientsecrect`, formData, { + .post(`${ontimeURL}/sheet/clientsecrect`, formData, { headers: { 'Content-Type': 'multipart/form-data', }, @@ -264,11 +262,50 @@ export const uploadSheetClientFile = async (file: File) => { return res; }; -export const getSheetsAuthUrl = async () => { - const response = await axios.get(`${ontimeURL}/sheet-authurl`); +/** + * @description STEP 1 test + */ +export const getClientSecrect = async () => { + const response = await axios.get(`${ontimeURL}/sheet/clientsecrect`); return response.data; }; +/** + * @description STEP 2 + */ +export const getSheetsAuthUrl = async () => { + const response = await axios.get(`${ontimeURL}/sheet/authentication/url`); + return response.data; +}; + +/** + * @description STEP 2 test + */ +export const getAuthentication = async () => { + const response = await axios.get(`${ontimeURL}/sheet/authentication`); + return response.data; +}; + +/** + * @description STEP 3 + * @returns worksheetOptions + */ +export const postId = async (id: string) => { + const response = await axios.post(`${ontimeURL}/sheet/id`, { id }); + return response.data; +}; + +/** + * @description STEP 4 + */ +export const postWorksheet = async (id: string, worksheet: string) => { + const response = await axios.post(`${ontimeURL}/sheet/worksheet`, { id, worksheet }); + return response.data; +}; + +/** + * @description STEP 5 + */ export const postPreviewSheet = async (id: string, worksheet: string) => { const response = await axios.post(`${ontimeURL}/sheet-preview`, { id, @@ -277,6 +314,9 @@ export const postPreviewSheet = async (id: string, worksheet: string) => { return response.data.data; }; +/** + * @description STEP 5 + */ export const postPushSheet = async (id: string, worksheet: string) => { const response = await axios.post(`${ontimeURL}/sheet-push`, { id, @@ -284,15 +324,3 @@ export const postPushSheet = async (id: string, worksheet: string) => { }); return response.data.data; }; - -/** - * @description HTTP request to retrieve sheets state - * @return {Promise} - */ -export const getSheetState = async (id: string, worksheet: string): Promise => { - const response = await axios.post(`${ontimeURL}/sheet-state`, { - id, - worksheet, - }); - return response.data; -}; diff --git a/apps/client/src/features/modals/sheets-modal/SheetsModal.tsx b/apps/client/src/features/modals/sheets-modal/SheetsModal.tsx index 5c7bbdbe0..e2f830997 100644 --- a/apps/client/src/features/modals/sheets-modal/SheetsModal.tsx +++ b/apps/client/src/features/modals/sheets-modal/SheetsModal.tsx @@ -17,16 +17,19 @@ import { Select, } from '@chakra-ui/react'; import { useQueryClient } from '@tanstack/react-query'; -import { OntimeRundown, ProjectData, SheetState, UserFields } from 'ontime-types'; +import { OntimeRundown, ProjectData, UserFields } from 'ontime-types'; import { PROJECT_DATA, RUNDOWN, USERFIELDS } from '../../../common/api/apiConstants'; import { maybeAxiosError } from '../../../common/api/apiUtils'; import { + getAuthentication, + getClientSecrect, getSheetsAuthUrl, - getSheetState, patchData, + postId, postPreviewSheet, postPushSheet, + postWorksheet, uploadSheetClientFile, } from '../../../common/api/ontimeApi'; import { projectDataPlaceholder } from '../../../common/models/ProjectData'; @@ -51,25 +54,27 @@ export default function SheetsModal(props: SheetsModalProps) { const [userFields, setUserFields] = useState(null); const [project, setProject] = useState(null); + const [id, setSheetId] = useState(''); + const [worksheet, setWorksheet] = useState(''); + const [worksheetOptions, setWorksheetOptions] = useState(new Array()); + const fileInputRef = useRef(null); - const sheetRef = useRef(null); - const worksheetRef = useRef(null); - const [errors, setErrors] = useState({ - clientSecret: '', - authenticate: '', - sheetId: '', - worksheet: '', - pullPush: '', + const [state, setState] = useState({ + clientSecret: { complet: false, message: '' }, + authenticate: { complet: false, message: '' }, + id: { complet: false, message: '' }, + worksheet: { complet: false, message: '' }, + pullPush: { complet: false, message: '' }, }); - const [sheetState, setState] = useState({ - secret: false, - auth: false, - id: false, - worksheet: false, - worksheetOptions: [], - }); + useEffect(() => { + if (isOpen) { + testClientSecrect(); + if (state.clientSecret.complet) testAuthentication(); + if (state.authenticate.complet) testSheetId(); + } + }, []); const handleClose = () => { setRundown(null); @@ -78,66 +83,127 @@ export default function SheetsModal(props: SheetsModalProps) { onClose(); }; + //SETP-1 Upload Client ID const handleClick = () => { fileInputRef.current?.click(); }; - const updateSheetState = () => { - const currentSheetId = sheetRef.current?.value ?? ''; - const currentWorksheet = worksheetRef.current?.value ?? ''; - return getSheetState(currentSheetId, currentWorksheet).then((data) => setState(data)); - }; - - const testId = () => { - const currentSheetId = sheetRef.current?.value ?? ''; - const currentWorksheet = worksheetRef.current?.value ?? ''; - getSheetState(currentSheetId, currentWorksheet) - .then((data) => setState(data)) - .catch((err) => { - const message = maybeAxiosError(err); - setErrors({ ...errors, sheetId: message }); - }); - }; - const handleFile = (event: ChangeEvent) => { if (!event.target.files?.length) { - setErrors({ ...errors, clientSecret: 'Missing file' }); + setState({ + clientSecret: { complet: false, message: 'Missing file' }, + authenticate: { complet: false, message: '' }, + id: { complet: false, message: '' }, + worksheet: { complet: false, message: '' }, + pullPush: { complet: false, message: '' }, + }); return; } - const selectedFile = event.target.files[0]; uploadSheetClientFile(selectedFile) .then(() => { - setErrors({ ...errors, clientSecret: '' }); + setState({ ...state, clientSecret: { complet: true, message: '' } }); }) .catch((err) => { - if (err.response.data.message) { - setErrors({ ...errors, clientSecret: err.response.data.message }); - } + const message = maybeAxiosError(err); + setState({ + clientSecret: { complet: false, message }, + authenticate: { complet: false, message: '' }, + id: { complet: false, message: '' }, + worksheet: { complet: false, message: '' }, + pullPush: { complet: false, message: '' }, + }); }); - updateSheetState(); }; - useEffect(() => { - if (isOpen) { - updateSheetState(); - } - }, [isOpen]); + const testClientSecrect = () => { + getClientSecrect() + .then(() => { + setState({ ...state, clientSecret: { complet: true, message: '' } }); + }) + .catch((err) => { + const message = maybeAxiosError(err); + setState({ + clientSecret: { complet: false, message }, + authenticate: { complet: false, message: '' }, + id: { complet: false, message: '' }, + worksheet: { complet: false, message: '' }, + pullPush: { complet: false, message: '' }, + }); + }); + }; + //SETP-2 Authenticate const handleAuthenticate = () => { getSheetsAuthUrl() .then((data) => { openLink(data); - window.addEventListener('focus', () => updateSheetState(), { once: true }); + window.addEventListener('focus', () => testAuthentication(), { once: true }); }) .catch((err) => { const message = maybeAxiosError(err); - setErrors({ ...errors, authenticate: message }); + setState({ + ...state, + authenticate: { complet: false, message }, + id: { complet: false, message: '' }, + worksheet: { complet: false, message: '' }, + pullPush: { complet: false, message: '' }, + }); }); }; + const testAuthentication = () => { + getAuthentication() + .then(() => { + setState({ ...state, authenticate: { complet: true, message: '' } }); + }) + .catch((error) => { + const message = maybeAxiosError(error); + setState({ + ...state, + authenticate: { complet: false, message }, + id: { complet: false, message: '' }, + worksheet: { complet: false, message: '' }, + pullPush: { complet: false, message: '' }, + }); + }); + }; + + //SETP-3 set sheet ID + const testSheetId = () => { + postId(id) + .then((data) => { + setState({ ...state, id: { complet: true, message: '' } }); + setWorksheetOptions(data.worksheetOptions); + }) + .catch((err) => { + const message = maybeAxiosError(err); + setState({ + ...state, + id: { complet: false, message }, + worksheet: { complet: false, message: '' }, + pullPush: { complet: false, message: '' }, + }); + setWorksheetOptions([]); + }); + }; + + //SETP-4 Select Worksheet + const testWorksheet = (value: string) => { + setWorksheet(value); + postWorksheet(id, worksheet) + .then(() => { + setState({ ...state, worksheet: { complet: true, message: '' } }); + }) + .catch((err) => { + const message = maybeAxiosError(err); + setState({ ...state, worksheet: { complet: false, message }, pullPush: { complet: false, message: '' } }); + }); + }; + + //SETP-5 Upload / Download const handlePullData = () => { - postPreviewSheet(sheetRef.current?.value ?? '', worksheetRef.current?.value ?? '').then((data) => { + postPreviewSheet(id, worksheet).then((data) => { setProject(data.project); setRundown(data.rundown); setUserFields(data.userFields); @@ -145,13 +211,11 @@ export default function SheetsModal(props: SheetsModalProps) { }; const handlePushData = () => { - const currentSheetId = sheetRef.current?.value ?? ''; - const currentWorksheet = worksheetRef.current?.value ?? ''; - postPushSheet(currentSheetId, currentWorksheet); + postPushSheet(id, worksheet); }; + //GET preview const handleFinalise = async () => { - // this step is currently only used for excel files, after preview if (rundown && userFields && project) { let doClose = false; try { @@ -165,8 +229,7 @@ export default function SheetsModal(props: SheetsModalProps) { doClose = true; } catch (error) { const message = maybeAxiosError(error); - console.log(message); - // setErrors(`Failed applying changes ${message}`); + console.error(message); } finally { if (doClose) { handleClose(); @@ -204,9 +267,9 @@ export default function SheetsModal(props: SheetsModalProps) { <> - +
+ + +
- +
+ + +
setSheetId(event.target.value)} /> - @@ -260,11 +338,17 @@ export default function SheetsModal(props: SheetsModalProps) { - testWorksheet(event.target.value)} + value={worksheet} + > + {worksheetOptions.map((value) => ( @@ -272,10 +356,10 @@ export default function SheetsModal(props: SheetsModalProps) { - +