disease details made into separate component

Author: mateo-budanovic-vlf

src/components/services/DiseaseDetails/DiseaseDetails.tsx

@@ -0,0 +1,30 @@
+import { Box, Card, CardContent, Typography } from "@mui/material"
+import { DiseaseDetailsProps } from "./DiseaseDetails.types"
+
+const DiseaseDetails: React.FC<DiseaseDetailsProps> = ({ disease }) => {
+    return (
+        <Box display={'flex'} flexDirection={'column'} gap={2}>
+            <Typography variant="body1">
+                Disease description: {disease?.description}
+            </Typography>
+            <Typography variant="body1">
+                EPPO code: {disease?.eppo_code}
+            </Typography>
+            <Typography variant="body1">
+                Base GDD: {disease?.base_gdd}
+            </Typography>
+            <Typography variant="h6">GDD points</Typography>
+            {disease?.gdd_points.map(gddp => {
+                return <Card key={"GDDP-ID-" + gddp.id}>
+                    <CardContent>
+                        <div>From: {gddp.start}</div>
+                        <div>To: {gddp.end}</div>
+                        <div>Descriptor: {gddp.descriptor}</div>
+                    </CardContent>
+                </Card>
+            })}
+        </Box>
+    )
+}
+
+export default DiseaseDetails

src/components/services/DiseaseDetails/DiseaseDetails.types.ts

@@ -0,0 +1,5 @@
+import { DiseaseModel } from "@models/Disease";
+
+export interface DiseaseDetailsProps {
+    disease?: DiseaseModel;
+}

src/pages/dashboard/services/PestAndDisease/Diseases.tsx

@@ -1,15 +1,16 @@
 import GenericDialog from "@components/shared/GenericDialog/GenericDialog";
 import GenericSortableTable from "@components/shared/GenericSortableTable/GenericSortableTable";
 import { HeadCell } from "@components/shared/GenericSortableTable/GenericSortableTable.types";
+import DiseaseDetails from "@components/services/DiseaseDetails/DiseaseDetails";
 import useDialog from "@hooks/useDialog";
 import useFetch from "@hooks/useFetch";
-import { DiseasesResponseModel } from "@models/Disease";
-import { Box, Card, CardContent, Skeleton, Typography } from "@mui/material";
+import { DiseaseModel, DiseasesResponseModel } from "@models/Disease";
+import { Box, Skeleton } from "@mui/material";
 import { useEffect, useState } from "react";
 
 const DiseasesPage = () => {
     const [diseases, setDiseases] = useState<DiseaseRow[]>([]);
-    const [selectedDisease, setSelectedDisease] = useState<DiseaseRow | null>(null);
+    const [selectedDisease, setSelectedDisease] = useState<DiseaseModel | undefined>(undefined);
 
     const { fetchData: getFetchData, response: getResponse, error: getError, loading: getLoading } = useFetch<DiseasesResponseModel>(
         `proxy/pdm/api/v1/disease/`,
@@ -61,7 +62,14 @@ const DiseasesPage = () => {
     ];
 
     const handleRowClick = (disease: DiseaseRow) => {
-        setSelectedDisease(disease);
+        setSelectedDisease({
+            id: disease.id,
+            name: disease.name,
+            base_gdd: disease.baseGDD,
+            eppo_code: disease.eppoCode,
+            description: disease.description,
+            gdd_points: disease.gddPoints
+        });
         showDialog({
             title: `Details for ${disease.name}`,
             variant: 'empty',
@@ -71,7 +79,7 @@ const DiseasesPage = () => {
 
     const handleCloseDialog = () => {
         dialogProps.onClose();
-        setSelectedDisease(null);
+        setSelectedDisease(undefined);
     };
 
     return (
@@ -84,29 +92,7 @@ const DiseasesPage = () => {
                 }
             </Box>
             <GenericDialog {...dialogProps} onClose={handleCloseDialog}>
-                <>
-                    <Box display={'flex'} flexDirection={'column'} gap={2}>
-                        <Typography variant="body1">
-                            Disease description: {selectedDisease?.description}
-                        </Typography>
-                        <Typography variant="body1">
-                            EPPO code: {selectedDisease?.eppoCode}
-                        </Typography>
-                        <Typography variant="body1">
-                            Base GDD: {selectedDisease?.baseGDD}
-                        </Typography>
-                        <Typography variant="h6">GDD points</Typography>
-                        {selectedDisease?.gddPoints.map(gddp => {
-                            return <Card key={"GDDP-ID-" + gddp.id}>
-                                <CardContent>
-                                    <div>From: {gddp.start}</div>
-                                    <div>To: {gddp.end}</div>
-                                    <div>Descriptor: {gddp.descriptor}</div>
-                                </CardContent>
-                            </Card>
-                        })}
-                    </Box>
-                </>
+                <DiseaseDetails disease={selectedDisease}></DiseaseDetails>
             </GenericDialog>
         </>
     )