From ae76365cdc895760436e78644de4c66cd99e89c7 Mon Sep 17 00:00:00 2001
From: computer <computer@localhost.localdomain>
Date: Fri, 26 Jan 2024 09:12:39 +0100
Subject: [PATCH] Pushed frontend

---
 Frontend/src/api/recent-activities.ts               | 13 ++++++-------
 Frontend/src/components/button/view-screenshot.tsx  |  6 +++---
 Frontend/src/containers/modal-container.tsx         |  5 ++---
 .../src/containers/recent-activities-container.tsx  | 13 ++++---------
 Frontend/src/containers/video-stream-container.tsx  |  4 +++-
 Frontend/src/store/slices/modal-slice.ts            |  4 ++--
 6 files changed, 20 insertions(+), 25 deletions(-)

diff --git a/Frontend/src/api/recent-activities.ts b/Frontend/src/api/recent-activities.ts
index 038f1d6..1956ce7 100644
--- a/Frontend/src/api/recent-activities.ts
+++ b/Frontend/src/api/recent-activities.ts
@@ -2,18 +2,14 @@ import { Activity } from "@/types";
 import { axiosClient } from "./axios-client";
 import { endpoints } from "./endpoints";
 
-type RecentActivitiesResponseDTO = {
-  data: Activity[];
-};
+type RecentActivitiesResponseDTO = Activity[];
 
 type RecentActivitiesCountResponseDTO = {
   _id: string;
   count: number;
 }[];
 
-type RecentActivityImageResponseDTO = {
-  data: any;
-};
+type RecentActivityImageResponseDTO = any;
 
 export const getRecentActivities = (top: number, skip: number) => {
   return () =>
@@ -50,5 +46,8 @@ export const getActivityImage = (id: string, timestamp: string) => {
         `${id}/${timestamp}`,
         {}
       )
-      .then((result) => result.data);
+      .then((result) => {
+        const blob = new Blob([result.data], { type: 'image/jpeg' });
+        return {imageUrl:URL.createObjectURL(blob)}
+      });
 };
diff --git a/Frontend/src/components/button/view-screenshot.tsx b/Frontend/src/components/button/view-screenshot.tsx
index 913baf7..98fb019 100644
--- a/Frontend/src/components/button/view-screenshot.tsx
+++ b/Frontend/src/components/button/view-screenshot.tsx
@@ -26,7 +26,7 @@ export const ViewScreenshotButton: React.FC<PropsType> = ({
     data: imageData,
     refetch: fetchImage,
   } = useQuery(
-    ["recentActivitiesCount", cameraId],
+    ["recentActivitiesImage", cameraId, timestamp],
     getActivityImage(cameraId, timestamp),
     { enabled: false }
   );
@@ -39,8 +39,8 @@ export const ViewScreenshotButton: React.FC<PropsType> = ({
     if (imageData) {
       openModal({
         title: timestamp,
-        modalContent: imageData.data,
-        isLoading: true,
+        modalContent: imageData,
+        isLoading: false,
       });
     }
   }, [imageData]);
diff --git a/Frontend/src/containers/modal-container.tsx b/Frontend/src/containers/modal-container.tsx
index a843aa1..53ade47 100644
--- a/Frontend/src/containers/modal-container.tsx
+++ b/Frontend/src/containers/modal-container.tsx
@@ -9,16 +9,15 @@ export const ModalContainer = () => {
   const onCancel = () => {
     closeModal();
   }
-
+  console
   return (
     <>
       <Modal title={title} open={isModalOpen} onOk={onCancel} onCancel={onCancel} afterClose={onCancel}>
-        {modalContent}
         {isLoading &&
           <Spin/>
         }
         {!isLoading &&
-          <img src={modalContent} alt="Ima"/>
+          <img src={modalContent} alt="Image detection"/>
         }
       </Modal>
     </>
diff --git a/Frontend/src/containers/recent-activities-container.tsx b/Frontend/src/containers/recent-activities-container.tsx
index d9cacac..ff3e31c 100644
--- a/Frontend/src/containers/recent-activities-container.tsx
+++ b/Frontend/src/containers/recent-activities-container.tsx
@@ -68,15 +68,10 @@ export const RecentActivitiesContainer: FC<PropsType> = () => {
     <>
       <Table
         columns={recentActivitiesColumns}
-        data={
-          /* recentActivitiesFetchedData */ recentActivitiesData?.map(
-            (event) => ({
-              ...event,
-              cameraName: cameras.find((item) => item.id == event.cameraId)
-                ?.name,
-            })
-          )
-        }
+        data={recentActivitiesFetchedData?.map((event) => ({
+          ...event,
+          cameraName: cameras.find((item) => item.id == event.cameraId)?.name,
+        }))}
         pagination={{
           total: recentActivitiesCountFetchedData,
           onChange: setPageNumber,
diff --git a/Frontend/src/containers/video-stream-container.tsx b/Frontend/src/containers/video-stream-container.tsx
index 440ceff..eddf93a 100644
--- a/Frontend/src/containers/video-stream-container.tsx
+++ b/Frontend/src/containers/video-stream-container.tsx
@@ -173,13 +173,15 @@ export const VideoStreamContainer: FC<PropsType> = ({ sizePerScreen = 9 }) => {
           subscriber.addVideoElement(
             videoRef.current?.[subscriber?.stream?.connection?.data]
           );
+        console.log(toBeInActive);
+
           toBeInActive = toBeInActive.filter(
             (item) => item.id != subscriber?.stream?.connection?.data
           );
         } catch (err) {
           console.log(err);
         }
-
+        console.log(toBeInActive);
         if (index === subscribers.length - 1) {
           toBeInActive.forEach((item) =>
             updateCameraStatus({
diff --git a/Frontend/src/store/slices/modal-slice.ts b/Frontend/src/store/slices/modal-slice.ts
index 64e70ca..af1a9ee 100644
--- a/Frontend/src/store/slices/modal-slice.ts
+++ b/Frontend/src/store/slices/modal-slice.ts
@@ -9,13 +9,13 @@ type ModalStateType = {
     title: string;
     isModalOpen: boolean;
     isLoading: boolean;
-    modalContent: string;
+    modalContent: any;
   };
 };
 
 type OpenModalPayloadType = {
   title: string;
-  modalContent: string;
+  modalContent: any;
   isLoading: boolean;
 };