[feat] add delete report functionality

app/actions/sustainabilityReport/deleteReports.ts

@@ -0,0 +1,24 @@
+import axios from 'axios';
+
+interface IParams {
+  userId: string;
+  projectId: string;
+  reportIds: string[];
+}
+
+export const deleteReports = async ({ userId, projectId, reportIds }: IParams) => {
+  const data = {
+    userId: userId,
+    projectId: projectId,
+    reportIds: reportIds,
+  };
+  return await axios
+    .patch(process.env.NEXT_PUBLIC_PORTFOLIO_INSIGHT_API_URL + '/delete-reports', data)
+    .then((response) => {
+      return response.data;
+    })
+    .catch((error) => {
+      console.error('Error adding attribute. Please try again.');
+      throw error;
+    });
+};

app/components/SustainabilityReport/FileTag.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { Typography } from '@material-tailwind/react';
 import { Report } from '@/app/types/SustainabilityReportTypes';
+import useSustainabilityReportDeleteModal from '@/app/hooks/sustainabilityReport/useSustainabilityReportDeleteModal';
+import { X } from '@phosphor-icons/react';
 
 function truncateMiddle(text: string, maxLength = 25) {
   if (text.length <= maxLength) return text;
@@ -11,14 +13,29 @@ function truncateMiddle(text: string, maxLength = 25) {
 
 interface FileTagProps {
   report: Report;
+  projectId: string;
 }
 
-const FileTag = ({ report }: FileTagProps) => {
+const FileTag = ({ report, projectId }: FileTagProps) => {
+  const sustainabilityReportDeleteModal = useSustainabilityReportDeleteModal();
+
+  const handleDeleteReport = () => {
+    console.log('Deleting report:', report);
+    sustainabilityReportDeleteModal.setProjectId(projectId);
+    sustainabilityReportDeleteModal.setDeleteItem(report);
+    sustainabilityReportDeleteModal.onOpen();
+  };
   return (
-    <div className="bg-blue-gray-50 px-2 py-1 rounded-full w-full overflow-hidden flex items-center justify-center">
+    <div className="relative bg-blue-gray-50 px-2 py-1 rounded-full w-full overflow-hidden flex items-center justify-center group">
       <Typography variant="paragraph" color="blue-gray" className="font-normal whitespace-nowrap overflow-hidden">
         {truncateMiddle(report.name, 25)}
       </Typography>
+      <div
+        onClick={handleDeleteReport}
+        className="absolute right-2 bg-blue-gray-50 p-2 rounded-md cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity duration-300"
+      >
+        <X size={16} />
+      </div>
     </div>
   );
 };

app/components/SustainabilityReport/FilesContainer.tsx

@@ -19,14 +19,14 @@ const FilesContainer = ({ reports, projectId }: FilesContainerProps) => {
   return (
     <div className="relative flex flex-wrap gap-2 max-w-[250px] h-full overflow-y-auto p-2 rounded group">
       <div
-        className="absolute hidden top-0 right-2 p-1 cursor-pointer bg-blue-gray-50 hover:bg-gray-300 rounded-lg group-hover:block"
+        className="absolute opacity-0 top-0 right-2 p-1 cursor-pointer bg-blue-gray-50 hover:bg-gray-300 rounded-lg group-hover:opacity-100 transition-opacity duration-300"
         onClick={handleAddFile}
       >
         <Plus size={16} />
       </div>
       <div className="flex flex-col gap-2 py-6">
         {reports.map((report, i) => (
-          <FileTag key={i} report={report} />
+          <FileTag key={i} report={report} projectId={projectId} />
         ))}
       </div>
     </div>

app/components/modals/sustainabilityReport/SustainabilityReportDeleteModal.tsx

@@ -2,6 +2,7 @@
 
 import { useState } from 'react';
 import { FieldValues, SubmitHandler, useForm } from 'react-hook-form';
+import { isAttribute, isReport } from '@/app/types/SustainabilityReportTypes';
 
 import FormModal from '../FormModal';
 import Heading from '../../Heading';
@@ -10,12 +11,14 @@ import { Typography } from '@material-tailwind/react';
 import useSustainabilityReportDeleteModal from '@/app/hooks/sustainabilityReport/useSustainabilityReportDeleteModal';
 import useSustainabilityStore from '@/app/hooks/sustainabilityReport/sustainabilityReportStore';
 import { deleteAttribute } from '@/app/actions/sustainabilityReport/deleteAttribute';
+import { deleteReports } from '@/app/actions/sustainabilityReport/deleteReports';
+import useFetchSustainabilityData from '@/app/hooks/sustainabilityReport/useFetchSustainabilityData';
 
 const SustainabilityReportDeleteModal = () => {
   const SustainabilityReportDeleteModal = useSustainabilityReportDeleteModal();
   const [isLoading, setIsLoading] = useState(false);
   const { userId, deleteStoreAttribute } = useSustainabilityStore();
-
+  const { fetchAttributesThenProjects } = useFetchSustainabilityData();
   const { handleSubmit, reset } = useForm<FieldValues>({});
 
   const onSubmit: SubmitHandler<FieldValues> = async () => {
@@ -25,14 +28,25 @@ const SustainabilityReportDeleteModal = () => {
       if (!deleteItemId) {
         throw new Error('Delete ID is missing');
       }
-      await deleteAttribute({ userId, attributeId: deleteItemId });
-      deleteStoreAttribute(deleteItemId);
+      if (isAttribute(SustainabilityReportDeleteModal.deleteItem)) {
+        await deleteAttribute({ userId, attributeId: deleteItemId });
+        deleteStoreAttribute(deleteItemId);
+      } else if (isReport(SustainabilityReportDeleteModal.deleteItem)) {
+        await deleteReports({
+          userId,
+          projectId: SustainabilityReportDeleteModal.projectId,
+          reportIds: [deleteItemId],
+        });
+        console.log('deleting report', JSON.stringify(SustainabilityReportDeleteModal.deleteItem));
+      }
       SustainabilityReportDeleteModal.onClose();
+      fetch;
     } catch (error) {
       toast.error('Delete deleteItem failed. Please try again.');
     } finally {
       setIsLoading(false);
       reset();
+      fetchAttributesThenProjects();
     }
   };
 
@@ -47,7 +61,7 @@ const SustainabilityReportDeleteModal = () => {
       <div className="flex flex-col gap-4 items-center">
         <Heading title={`Delete ${SustainabilityReportDeleteModal.deleteItem?.name}`} subtitle="" center />
         <Typography color="gray" variant="h5">
-          Are you sure you want to delete this deleteItem?
+          {`Are you sure you want to delete ${SustainabilityReportDeleteModal.deleteItem?.name}?`}
         </Typography>
       </div>
     </>

app/hooks/sustainabilityReport/useSustainabilityReportDeleteModal.ts

@@ -4,17 +4,21 @@ import { create } from 'zustand';
 interface SustainabilityReportDeleteModalStore {
   isOpen: boolean;
   deleteItem: Attribute | Report | null;
+  projectId: string;
   onOpen: () => void;
   onClose: () => void;
   setDeleteItem: (deleteItem: Attribute | Report) => void;
+  setProjectId: (projectId: string) => void;
 }
 
 const useSustainabilityReportDeleteModal = create<SustainabilityReportDeleteModalStore>((set) => ({
   isOpen: false,
   deleteItem: null,
+  projectId: '',
   onOpen: () => set({ isOpen: true }),
   onClose: () => set({ isOpen: false }),
   setDeleteItem: (deleteItem: Attribute | Report) => set({ deleteItem }),
+  setProjectId: (projectId: string) => set({ projectId }),
 }));
 
 export default useSustainabilityReportDeleteModal;

app/types/SustainabilityReportTypes.ts

@@ -44,3 +44,24 @@ export type RawReport = {
   uploadedTimestamp: string;
   userId: string;
 };
+
+export function isReport(obj: any): obj is Report {
+  return obj && typeof obj.id === 'string' && typeof obj.name === 'string';
+}
+
+export function isProject(obj: any): obj is Project {
+  return (
+    obj &&
+    typeof obj.id === 'string' &&
+    typeof obj.name === 'string' &&
+    typeof obj.description === 'string' &&
+    typeof obj.projectResults === 'object' &&
+    Array.isArray(obj.reports) &&
+    obj.reports.every(isReport) &&
+    Object.values(GenerationStatus).includes(obj.status)
+  );
+}
+
+export function isAttribute(obj: any): obj is Attribute {
+  return obj && typeof obj.id === 'string' && typeof obj.name === 'string' && typeof obj.description === 'string';
+}