From 21a805334a39c9cdbf3bb93834f1079bd16e20e0 Mon Sep 17 00:00:00 2001
From: Viet Anh Nguyen <nv.anh5@samsung.com>
Date: Thu, 22 Feb 2024 10:43:14 +0700
Subject: [PATCH] Handle changes for revised data

---
 cope2n-fe/src/pages/reviews/index.tsx | 76 +++++++++++++--------------
 1 file changed, 36 insertions(+), 40 deletions(-)

diff --git a/cope2n-fe/src/pages/reviews/index.tsx b/cope2n-fe/src/pages/reviews/index.tsx
index 5468049..66f74d8 100644
--- a/cope2n-fe/src/pages/reviews/index.tsx
+++ b/cope2n-fe/src/pages/reviews/index.tsx
@@ -4,7 +4,7 @@ import React, { useContext, useEffect, useRef, useState } from 'react';
 import type { GetRef } from 'antd';
 import { Layout } from 'antd';
 import {
-  EditOutlined, DownloadOutlined, CheckCircleOutlined,
+  DownloadOutlined, CheckCircleOutlined,
   ArrowLeftOutlined,
   ArrowRightOutlined,
   FullscreenOutlined,
@@ -129,21 +129,7 @@ const EditableCell: React.FC<EditableCellProps> = ({
   return <td {...restProps}>{childNode}</td>;
 };
 
-type EditableTableProps = Parameters<typeof Table>[0];
-
-
-type ColumnTypes = Exclude<EditableTableProps['columns'], undefined>;
-
-
-const StyledEditOutlined = styled(EditOutlined)`
-  & {
-    color: #6666ff;
-    margin-left: 8px;
-  }
-  &:hover {
-    color: #0000ff;
-  }
-`;
+// type EditableTableProps = Parameters<typeof Table>[0];
 
 const defaultColumns = [
   {
@@ -152,15 +138,15 @@ const defaultColumns = [
     key: 'key',
     width: 200,
   },
-  {
-    title: 'Accuracy',
-    dataIndex: 'acc',
-    key: 'acc',
-    render: (text, record) => {
-      return <div>100%</div>;
-    },
-    width: 150,
-  },
+  // {
+  //   title: 'Accuracy',
+  //   dataIndex: 'acc',
+  //   key: 'acc',
+  //   render: (text, record) => {
+  //     return <div>100%</div>;
+  //   },
+  //   width: 150,
+  // },
   {
     title: 'Predicted',
     dataIndex: 'predicted',
@@ -287,9 +273,7 @@ const ReviewPage = () => {
   const [fullscreen, setFullscreen] = useState(false);
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [selectedFileId, setSelectedFileId] = useState(0);
-  const selectFileByIndex = (index) => {
-    setSelectedFileId(index);
-  };
+  const [selectedFileData, setSelectedFileData] = useState(null);
 
   // Default date range: 1 month ago to today
   const [filterDateRange, setFilterDateRange] = useState([
@@ -356,6 +340,19 @@ const ReviewPage = () => {
     loadCurrentRequest(previousRequestIndex);
   };
 
+  const setAndLoadSelectedFile = (index) => {
+    setCurrentRequestIndex(index);
+    const fileURL = currentRequest["Files"][index]["File URL"];
+      fetch(fileURL)
+        .then(response => response.blob())
+        .then(blob => {
+          const reader = new FileReader();
+          reader.readAsDataURL(blob);
+          reader.onload = () => {
+            setSelectedFileData(reader.result);
+          };
+        });
+  };
 
   const reloadFilters = () => {
     setCurrentRequestIndex(1);
@@ -365,8 +362,10 @@ const ReviewPage = () => {
       setHasNextRequest(data?.subscription_requests.length > 1);
       const firstRequest = fetchRequest(data?.subscription_requests[0].RequestID);
       firstRequest.then(async (data) => {
-        console.log(firstRequest)
         if (data) setCurrentRequest(data);
+        setTimeout(() => {
+          setAndLoadSelectedFile(0);
+        }, 300);
       });
     });
 
@@ -386,8 +385,6 @@ const ReviewPage = () => {
     });
   }, []);
 
-  const fileURL = (currentRequest && currentRequest["Files"][selectedFileId]) ? baseURL + currentRequest["Files"][selectedFileId]["File URL"].replace("http://be-ctel-sbt:9000/api", "") : "dummy.pdf";
-
   const components = {
     body: {
       row: EditableRow,
@@ -413,7 +410,9 @@ const ReviewPage = () => {
         "Authorization": `${JSON.parse(token)}`,
         "Content-Type": "application/json",
       },
-      body: JSON.stringify(newRevisedData),
+      body: JSON.stringify({
+        "reviewed_result": newRevisedData
+      }),
     }).catch((error) => {
       console.log(error);
       message.error("Could not update revised data");
@@ -422,7 +421,6 @@ const ReviewPage = () => {
 
   const handleSave = (row: DataType) => {
     const newData = [...dataSource];
-    console.log(row);
     const index = newData.findIndex((item) => row.key === item.key);
     const item = newData[index];
     newData.splice(index, 1, {
@@ -524,7 +522,7 @@ const ReviewPage = () => {
             {currentRequest?.Files.map((file, index) => (
               <FileCard key={index} file={file} isSelected={index === selectedFileId} onClick={
                 () => {
-                  setSelectedFileId(index);
+                  setAndLoadSelectedFile(index);
                 }
               } />
             ))}
@@ -534,11 +532,9 @@ const ReviewPage = () => {
             flexGrow: 1,
             height: '100%',
           }}>
-            <FileViewer documents={
-              [
-                { uri: fileURL }
-              ]
-            } config={{
+            {selectedFileData && <FileViewer documents={[
+              {uri: selectedFileData}
+            ]} config={{
               header: {
                 disableHeader: true,
                 disableFileName: true,
@@ -546,7 +542,7 @@ const ReviewPage = () => {
               },
               csvDelimiter: ",", // "," as default,
               pdfVerticalScrollByDefault: true, // false as default
-            }} />
+            }} />}
           </div>
         </Content>
         <Sider width="400px" style={siderStyle}>