Skip to content

Commit f9fd5be

Browse files
adamrefaeyadamrefaey
committed
Refactor report handling in ReportDetailPage and ActionButtons components for improved clarity and functionality
1 parent 7c84e3f commit f9fd5be

File tree

3 files changed

+98
-88
lines changed

3 files changed

+98
-88
lines changed

‎frontend/src/pages/Processing/ProcessingPage.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,9 @@ const ProcessingPage: React.FC = () => {
7676
await queryClient.invalidateQueries({ queryKey: [QueryKey.Reports] });
7777
await queryClient.invalidateQueries({ queryKey: [QueryKey.LatestReports] });
7878

79-
history.push(`/tabs/reports/${reportId}`);
79+
history.push(`/tabs/reports/${reportId}`, {
80+
from: location.pathname,
81+
});
8082
} else if (data.status === 'failed') {
8183
if (data.isMedicalReport === false) {
8284
setIsProcessing(false);

‎frontend/src/pages/ReportDetail/ReportDetailPage.tsx‎

Lines changed: 24 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,11 @@ import { IonPage, IonContent } from '@ionic/react';
22
import { FC, useState } from 'react';
33
import { useHistory, useParams } from 'react-router-dom';
44
import './ReportDetailPage.scss';
5-
import { useQuery, useQueryClient } from '@tanstack/react-query';
5+
import { useQuery } from '@tanstack/react-query';
66
import axios from 'axios';
77
import { MedicalReport } from '../../common/models/medicalReport';
88
import { useTranslation } from 'react-i18next';
99
import { getAuthConfig } from 'common/api/reportService';
10-
import { useToasts } from 'common/hooks/useToasts';
1110
import AiAssistantNotice from './components/AiAssistantNotice';
1211
import ReportHeader from './components/ReportHeader';
1312
import ReportTabs from './components/ReportTabs';
@@ -20,15 +19,6 @@ import { QueryKey } from 'common/utils/constants';
2019

2120
const API_URL = import.meta.env.VITE_BASE_URL_API || '';
2221

23-
// Function to fetch report by ID
24-
const fetchReportById = async (id: string): Promise<MedicalReport> => {
25-
const response = await axios.get<MedicalReport>(
26-
`${API_URL}/api/reports/${id}`,
27-
await getAuthConfig(),
28-
);
29-
return response.data;
30-
};
31-
3222
/**
3323
* Page component for displaying detailed medical report analysis.
3424
* This shows AI insights and original report data with flagged values.
@@ -37,25 +27,39 @@ const ReportDetailPage: FC = () => {
3727
const { reportId } = useParams<{ reportId: string }>();
3828
const history = useHistory();
3929
const { t } = useTranslation();
40-
const { createToast } = useToasts();
4130
const [isUploadModalOpen, setIsUploadModalOpen] = useState(false);
42-
const queryClient = useQueryClient();
31+
const [activeTab, setActiveTab] = useState<'ai' | 'original'>('ai');
4332

4433
const handleUploadComplete = () => {
4534
setIsUploadModalOpen(false);
4635
history.push('/tabs/home');
4736
};
4837

38+
// Handle tab selection
39+
const handleTabChange = (tab: 'ai' | 'original') => {
40+
setActiveTab(tab);
41+
};
42+
43+
// Function to fetch report by ID
44+
const fetchReportById = async (id: string): Promise<MedicalReport> => {
45+
const response = await axios.get<MedicalReport>(
46+
`${API_URL}/api/reports/${id}`,
47+
await getAuthConfig(),
48+
);
49+
return response.data;
50+
};
51+
4952
// Fetch report data using react-query
50-
const { data, isLoading, error } = useQuery<MedicalReport>({
53+
const {
54+
data: reportData,
55+
isLoading,
56+
error,
57+
} = useQuery<MedicalReport>({
5158
queryKey: [QueryKey.ReportDetail, reportId],
5259
queryFn: () => fetchReportById(reportId!),
5360
enabled: !!reportId,
5461
});
5562

56-
// State to track expanded sections
57-
const [activeTab, setActiveTab] = useState<'ai' | 'original'>('ai');
58-
5963
// Handle loading and error states
6064
if (isLoading) {
6165
return <IonPage></IonPage>;
@@ -71,7 +75,7 @@ const ReportDetailPage: FC = () => {
7175
);
7276
}
7377

74-
if (!data) {
78+
if (!reportData) {
7579
return (
7680
<IonPage>
7781
<IonContent className="ion-padding">
@@ -81,67 +85,6 @@ const ReportDetailPage: FC = () => {
8185
);
8286
}
8387

84-
const reportData = data;
85-
86-
// Handle tab selection
87-
const handleTabChange = (tab: 'ai' | 'original') => {
88-
setActiveTab(tab);
89-
};
90-
91-
// Handle action buttons
92-
const handleDiscard = async (setIsProcessing: (isProcessing: boolean) => void) => {
93-
try {
94-
setIsProcessing(true);
95-
await axios.delete(`${API_URL}/api/reports/${reportId}`, await getAuthConfig());
96-
setIsProcessing(false);
97-
98-
// Show toast notification
99-
createToast({
100-
message: t('report.discard.success', {
101-
ns: 'reportDetail',
102-
defaultValue: 'Report deleted successfully',
103-
}),
104-
duration: 2000,
105-
});
106-
107-
await queryClient.invalidateQueries({ queryKey: [QueryKey.Reports] });
108-
await queryClient.invalidateQueries({ queryKey: [QueryKey.LatestReports] });
109-
await queryClient.invalidateQueries({ queryKey: [QueryKey.ReportDetail, reportId] });
110-
111-
// Navigate back
112-
history.push('/tabs/home');
113-
} catch (error) {
114-
setIsProcessing(false);
115-
116-
console.error('Error discarding report:', error);
117-
createToast({
118-
message: t('report.discard.error', {
119-
ns: 'reportDetail',
120-
defaultValue: 'Failed to delete report',
121-
}),
122-
duration: 2000,
123-
color: 'danger',
124-
});
125-
}
126-
};
127-
128-
const handleNewUpload = async (setIsProcessing: (isProcessing: boolean) => void) => {
129-
try {
130-
setIsProcessing(true);
131-
await axios.delete(`${API_URL}/api/reports/${reportId}`, await getAuthConfig());
132-
setIsProcessing(false);
133-
134-
await queryClient.invalidateQueries({ queryKey: [QueryKey.Reports] });
135-
await queryClient.invalidateQueries({ queryKey: [QueryKey.LatestReports] });
136-
await queryClient.invalidateQueries({ queryKey: [QueryKey.ReportDetail, reportId] });
137-
138-
setIsUploadModalOpen(true);
139-
} catch (error) {
140-
setIsProcessing(false);
141-
console.error('Error deleting report before new upload:', error);
142-
}
143-
};
144-
14588
return (
14689
<IonPage className="report-detail-page">
14790
<IonContent fullscreen>
@@ -167,9 +110,9 @@ const ReportDetailPage: FC = () => {
167110

168111
{/* Action buttons at the bottom */}
169112
<ActionButtons
170-
onDiscard={handleDiscard}
171-
onNewUpload={handleNewUpload}
113+
reportId={reportId}
172114
reportTitle={reportData.title}
115+
setIsUploadModalOpen={setIsUploadModalOpen}
173116
/>
174117

175118
<UploadModal

‎frontend/src/pages/ReportDetail/components/ActionButtons.tsx‎

Lines changed: 71 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,26 @@
11
import { FC, useState } from 'react';
22
import { useTranslation } from 'react-i18next';
33
import ConfirmationModal from '../../../common/components/Modal/ConfirmationModal';
4+
import { useToasts } from 'common/hooks/useToasts';
5+
import { useQueryClient } from '@tanstack/react-query';
6+
import { useHistory } from 'react-router';
7+
import axios from 'axios';
8+
import { QueryKey } from 'common/utils/constants';
9+
import { getAuthConfig } from 'common/api/reportService';
10+
11+
const API_URL = import.meta.env.VITE_BASE_URL_API || '';
412

513
interface ActionButtonsProps {
6-
onDiscard: (setIsProcessing: (isProcessing: boolean) => void) => Promise<void>;
7-
onNewUpload: (setIsProcessing: (isProcessing: boolean) => void) => Promise<void>;
8-
reportTitle?: string;
14+
reportId: string;
15+
reportTitle: string;
16+
setIsUploadModalOpen: (isOpen: boolean) => void;
917
}
1018

11-
const ActionButtons: FC<ActionButtonsProps> = ({ onDiscard, onNewUpload, reportTitle }) => {
19+
const ActionButtons: FC<ActionButtonsProps> = ({ reportId, reportTitle, setIsUploadModalOpen }) => {
1220
const { t } = useTranslation(['reportDetail', 'common']);
21+
const { createToast } = useToasts();
22+
const history = useHistory();
23+
const queryClient = useQueryClient();
1324
const [showConfirmDiscard, setShowConfirmDiscard] = useState(false);
1425
const [showConfirmNewUpload, setShowConfirmNewUpload] = useState(false);
1526
const [isProcessing, setIsProcessing] = useState(false);
@@ -21,7 +32,7 @@ const ActionButtons: FC<ActionButtonsProps> = ({ onDiscard, onNewUpload, reportT
2132
const handleConfirmDiscard = async () => {
2233
setShowConfirmDiscard(false);
2334

24-
await onDiscard(setIsProcessing);
35+
await handleDiscard();
2536
};
2637

2738
const handleCancelDiscard = () => {
@@ -35,13 +46,67 @@ const ActionButtons: FC<ActionButtonsProps> = ({ onDiscard, onNewUpload, reportT
3546
const handleConfirmNewUpload = async () => {
3647
setShowConfirmNewUpload(false);
3748

38-
await onNewUpload(setIsProcessing);
49+
await handleNewUpload();
3950
};
4051

4152
const handleCancelNewUpload = () => {
4253
setShowConfirmNewUpload(false);
4354
};
4455

56+
// Handle action buttons
57+
const handleDiscard = async () => {
58+
try {
59+
setIsProcessing(true);
60+
await axios.delete(`${API_URL}/api/reports/${reportId}`, await getAuthConfig());
61+
setIsProcessing(false);
62+
63+
// Show toast notification
64+
createToast({
65+
message: t('report.discard.success', {
66+
ns: 'reportDetail',
67+
defaultValue: 'Report deleted successfully',
68+
}),
69+
duration: 2000,
70+
});
71+
72+
await queryClient.invalidateQueries({ queryKey: [QueryKey.Reports] });
73+
await queryClient.invalidateQueries({ queryKey: [QueryKey.LatestReports] });
74+
await queryClient.invalidateQueries({ queryKey: [QueryKey.ReportDetail, reportId] });
75+
76+
// Navigate back
77+
history.push('/tabs/home');
78+
} catch (error) {
79+
setIsProcessing(false);
80+
81+
console.error('Error discarding report:', error);
82+
createToast({
83+
message: t('report.discard.error', {
84+
ns: 'reportDetail',
85+
defaultValue: 'Failed to delete report',
86+
}),
87+
duration: 2000,
88+
color: 'danger',
89+
});
90+
}
91+
};
92+
93+
const handleNewUpload = async () => {
94+
try {
95+
setIsProcessing(true);
96+
await axios.delete(`${API_URL}/api/reports/${reportId}`, await getAuthConfig());
97+
setIsProcessing(false);
98+
99+
await queryClient.invalidateQueries({ queryKey: [QueryKey.Reports] });
100+
await queryClient.invalidateQueries({ queryKey: [QueryKey.LatestReports] });
101+
await queryClient.invalidateQueries({ queryKey: [QueryKey.ReportDetail, reportId] });
102+
103+
setIsUploadModalOpen(true);
104+
} catch (error) {
105+
setIsProcessing(false);
106+
console.error('Error deleting report before new upload:', error);
107+
}
108+
};
109+
45110
return (
46111
<>
47112
<div className="report-detail-page__actions">

0 commit comments

Comments
 (0)