From b2ec8829edfffd302c34a56c474cdf1cbcb0ce23 Mon Sep 17 00:00:00 2001
From: Omran NAJJAR <omran.najjar@gmail.com>
Date: Tue, 1 Aug 2023 13:58:28 +0200
Subject: [PATCH] showing feedback for each trining

---
 .../Layout/AIModels/AIModelEditor/Feedback.js | 60 +++++++++++++++++++
 .../AIModels/AIModelEditor/Trainings.js       | 27 +++++----
 2 files changed, 77 insertions(+), 10 deletions(-)
 create mode 100644 frontend/src/components/Layout/AIModels/AIModelEditor/Feedback.js

diff --git a/frontend/src/components/Layout/AIModels/AIModelEditor/Feedback.js b/frontend/src/components/Layout/AIModels/AIModelEditor/Feedback.js
new file mode 100644
index 00000000..353b0104
--- /dev/null
+++ b/frontend/src/components/Layout/AIModels/AIModelEditor/Feedback.js
@@ -0,0 +1,60 @@
+import { IconButton, Tooltip } from "@mui/material";
+import React, { useContext } from "react";
+import InfoIcon from "@mui/icons-material/Info";
+import FeedbackIcon from "@mui/icons-material/Feedback";
+import { useQuery } from "react-query";
+import axios from "../../../../axios";
+import AuthContext from "../../../../Context/AuthContext";
+import FindReplaceIcon from "@mui/icons-material/FindReplace";
+const Feedback = ({ trainingId }) => {
+  const { accessToken } = useContext(AuthContext);
+  const getFeedback = async () => {
+    try {
+      const headers = {
+        "access-token": accessToken,
+      };
+      const res = await axios.get(`/feedback/?training=${trainingId}`, null, {
+        headers,
+      });
+
+      if (res.error) {
+      } else {
+        console.log(`/feedback/?training=${trainingId}`, res.data);
+        return res.data;
+      }
+    } catch (e) {
+      console.log("isError", e);
+    } finally {
+    }
+  };
+  const { data: feedbackData, isLoading } = useQuery(
+    "getFeedback" + trainingId,
+    getFeedback,
+    {
+      refetchInterval: 10000,
+    }
+  );
+
+  return (
+    <>
+      {feedbackData &&
+        feedbackData.features &&
+        feedbackData.features.length > 0 && (
+          <Tooltip
+            title={`Total number of feedback on this training is ${feedbackData.features.length}`}
+            placement="left"
+          >
+            <IconButton aria-label="popup">
+              <FeedbackIcon size="small" />
+            </IconButton>
+          </Tooltip>
+        )}
+      {isLoading && (
+        <IconButton aria-label="popup">
+          <FindReplaceIcon size="small" />
+        </IconButton>
+      )}
+    </>
+  );
+};
+export default Feedback;
diff --git a/frontend/src/components/Layout/AIModels/AIModelEditor/Trainings.js b/frontend/src/components/Layout/AIModels/AIModelEditor/Trainings.js
index f6526afb..49515c33 100644
--- a/frontend/src/components/Layout/AIModels/AIModelEditor/Trainings.js
+++ b/frontend/src/components/Layout/AIModels/AIModelEditor/Trainings.js
@@ -20,6 +20,7 @@ import Popup from "./Popup";
 import InfoIcon from "@mui/icons-material/Info";
 
 import AuthContext from "../../../../Context/AuthContext";
+import Feedback from "./Feedback";
 
 const DEFAULT_FILTER = {
   items: [{ columnField: "created_date", id: 8537, operatorValue: "contains" }],
@@ -151,16 +152,22 @@ const TrainingsList = (props) => {
     },
     {
       field: "popup",
-      headerName: "Info",
-      width: 10,
-      renderCell: (params) => (
-        <IconButton
-          onClick={() => handlePopupOpen(params.row)}
-          aria-label="popup"
-        >
-          <InfoIcon size="small" />
-        </IconButton>
-      ),
+      headerName: "Info/Feedback",
+      width: 100,
+      renderCell: (params) => {
+        console.log("params in info row", params);
+        return (
+          <div>
+            <IconButton
+              onClick={() => handlePopupOpen(params.row)}
+              aria-label="popup"
+            >
+              <InfoIcon size="small" />
+            </IconButton>
+            <Feedback trainingId={params.row.id}></Feedback>
+          </div>
+        );
+      },
     },
     {
       field: "accuracy",