Merge pull request #564 from AI4Bharat/CL-645

added preview subtitle functionality in editing screens
AI4Bharat · Feb 27, 2024 · ae408e5 · ae408e5
2 parents 6417ea4 + 6fc2e8c
commit ae408e5
Show file tree

Hide file tree

Showing 5 changed files with 149 additions and 140 deletions.
diff --git a/src/common/PreviewDialog.jsx b/src/common/PreviewDialog.jsx
@@ -1,22 +1,53 @@
 import {
   Dialog,
-  DialogActions,
   DialogContent,
   DialogContentText,
   Box,
   IconButton,
   DialogTitle,
   Typography,
 } from "@mui/material";
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import CloseIcon from "@mui/icons-material/Close";
+import { FetchpreviewTaskAPI, setSnackBar } from "redux/actions";
+import { useDispatch } from "react-redux";
 
-const PreviewDialog = ({ openPreviewDialog, handleClose, data, task_type }) => {
-  const [Previewdata, setPreviewdata] = useState();
+const PreviewDialog = ({
+  openPreviewDialog,
+  handleClose,
+  videoId,
+  taskType,
+  targetLanguage,
+}) => {
+  const dispatch = useDispatch();
+
+  const [previewdata, setPreviewdata] = useState([]);
+
+  const fetchPreviewData = useCallback(async () => {
+    const taskObj = new FetchpreviewTaskAPI(videoId, taskType, targetLanguage);
+    try {
+      const res = await fetch(taskObj.apiEndPoint(), {
+        method: "GET",
+        headers: taskObj.getHeaders().headers,
+      });
+
+      const response = await res.json();
+      setPreviewdata(response.data.payload);
+    } catch (error) {
+      dispatch(
+        setSnackBar({
+          open: true,
+          message: "Something went wrong!!",
+          variant: "error",
+        })
+      );
+    }
+  }, [dispatch, videoId, taskType, targetLanguage]);
 
   useEffect(() => {
-    setPreviewdata(data);
-  }, [data]);
+    fetchPreviewData();
+  }, [fetchPreviewData]);
+
   return (
     <Dialog
       open={openPreviewDialog}
@@ -38,53 +69,27 @@ const PreviewDialog = ({ openPreviewDialog, handleClose, data, task_type }) => {
 
       <DialogContent sx={{ height: "410px" }}>
         <DialogContentText id="alert-dialog-description">
-          {Previewdata?.data?.payload &&
-          Previewdata?.data?.payload.length > 0 ? (
-            Previewdata?.data?.payload.map((el, i) => {
-              return (
-                <Box
-                  key={i}
-                  id={`sub_${i}`}
-                  textAlign={"start"}
-                  sx={{
-                    mb: 2,
-                    padding: 2,
-                    border: "1px solid #000000",
-                    borderRadius: 2,
-                    width: "90%",
-                  }}
-                >
-                  {task_type === "TRANSCRIPTION_EDIT" ||
-                  task_type === "TRANSCRIPTION_REVIEW"
-                    ? el.text
-                    : el.target_text}
-                </Box>
-              );
-            })
-          ) : (
-            <Box
-              sx={{
-                // marginY: 2,
-                padding: 3,
-                border: "1px solid #000000",
-                borderRadius: 2,
-                width: "80%",
-              }}
-            ></Box>
-          )}
+          {previewdata.map((el, i) => {
+            return (
+              <Box
+                key={`sub-${i}`}
+                textAlign={"start"}
+                sx={{
+                  mb: 2,
+                  padding: 2,
+                  border: "1px solid #000000",
+                  borderRadius: 2,
+                  width: "90%",
+                }}
+              >
+                {taskType.includes("TRANSCRIPTION") ? el.text : el.target_text}
+              </Box>
+            );
+          })}
         </DialogContentText>
       </DialogContent>
-      <DialogActions sx={{ p: "20px" }}>
-        {/* <Button
-          variant="text"
-          onClick={handleClose}
-          sx={{ lineHeight: "1", borderRadius: "6px" }}
-        >
-          Close
-        </Button> */}
-      </DialogActions>
     </Dialog>
   );
 };
 
-export default PreviewDialog;
+export default PreviewDialog;
diff --git a/src/containers/Organization/OrgLevelTaskList.jsx b/src/containers/Organization/OrgLevelTaskList.jsx
@@ -79,7 +79,6 @@ import {
   FetchTranscriptExportTypesAPI,
   FetchTranslationExportTypesAPI,
   FetchVoiceoverExportTypesAPI,
-  FetchpreviewTaskAPI,
   GenerateTranslationOutputAPI,
   RegenerateResponseAPI,
   ReopenTaskAPI,
@@ -168,7 +167,6 @@ const OrgLevelTaskList = () => {
   const orgId = userData?.organization?.id;
 
   const apiStatus = useSelector((state) => state.apiStatus);
-  const previewData = useSelector((state) => state.getPreviewData?.data);
 
   //Fiters and Search
   const orgSelectedFilters = useSelector(
@@ -488,9 +486,6 @@ const OrgLevelTaskList = () => {
 
   const handlePreviewTask = async (id, taskType, targetlanguage) => {
     handleDialogOpen("previewDialog");
-
-    const taskObj = new FetchpreviewTaskAPI(id, taskType, targetlanguage);
-    dispatch(APITransport(taskObj));
   };
 
   const handleShowSearch = (col, event) => {
@@ -594,7 +589,7 @@ const OrgLevelTaskList = () => {
     const { tableData: data, rowIndex } = tableMeta;
     const selectedTask = data[rowIndex];
 
-    const { id, task_type, status, video, target_language } = selectedTask;
+    const { id, task_type, status } = selectedTask;
     setCurrentTaskDetails(selectedTask);
 
     switch (action) {
@@ -635,7 +630,7 @@ const OrgLevelTaskList = () => {
         break;
 
       case "Preview":
-        handlePreviewTask(video, task_type, target_language);
+        handlePreviewTask();
         break;
 
       case "Delete":
@@ -1241,8 +1236,9 @@ const OrgLevelTaskList = () => {
         <PreviewDialog
           openPreviewDialog={openDialogs.previewDialog}
           handleClose={() => handleDialogClose("previewDialog")}
-          data={previewData}
-          task_type={currentTaskDetails?.task_type}
+          taskType={currentTaskDetails?.task_type}
+          videoId={currentTaskDetails?.video}
+          targetLanguage={currentTaskDetails?.target_language}
         />
       )}
 

diff --git a/src/containers/Organization/Project/TaskList.jsx b/src/containers/Organization/Project/TaskList.jsx
@@ -80,7 +80,6 @@ import {
   FetchTranscriptExportTypesAPI,
   FetchTranslationExportTypesAPI,
   FetchVoiceoverExportTypesAPI,
-  FetchpreviewTaskAPI,
   GenerateTranslationOutputAPI,
   RegenerateResponseAPI,
   ReopenTaskAPI,
@@ -178,7 +177,6 @@ const TaskList = () => {
   );
   const userData = useSelector((state) => state.getLoggedInUserDetails.data);
   const apiStatus = useSelector((state) => state.apiStatus);
-  const previewData = useSelector((state) => state.getPreviewData?.data);
   const selectedFilters = useSelector(
     (state) => state.taskFilters.selectedFilters
   );
@@ -588,11 +586,8 @@ const TaskList = () => {
     handleDialogClose("TaskReopenDialog");
   };
 
-  const handlePreviewTask = async (videoId, taskType, targetlanguage) => {
+  const handlePreviewTask = () => {
     handleDialogOpen("previewDialog");
-
-    const taskObj = new FetchpreviewTaskAPI(videoId, taskType, targetlanguage);
-    dispatch(APITransport(taskObj));
   };
 
   const generateTranslationCall = async (id, taskStatus) => {
@@ -695,7 +690,7 @@ const TaskList = () => {
     const { tableData: data, rowIndex } = tableMeta;
     const selectedTask = data[rowIndex];
 
-    const { id, task_type, status, video, target_language } = selectedTask;
+    const { id, task_type, status } = selectedTask;
     setCurrentTaskDetails(selectedTask);
 
     switch (action) {
@@ -736,7 +731,7 @@ const TaskList = () => {
         break;
 
       case "Preview":
-        handlePreviewTask(video, task_type, target_language);
+        handlePreviewTask();
         break;
 
       case "Delete":
@@ -1287,8 +1282,9 @@ const TaskList = () => {
         <PreviewDialog
           openPreviewDialog={openDialogs.previewDialog}
           handleClose={() => handleDialogClose("previewDialog")}
-          data={previewData}
-          task_type={currentTaskDetails?.task_type}
+          taskType={currentTaskDetails?.task_type}
+          videoId={currentTaskDetails?.video}
+          targetLanguage={currentTaskDetails?.target_language}
         />
       )}