merge dev to the frontend/back_integrate branch

resq/frontend/src/components/AnnotationCard.js

@@ -13,18 +13,21 @@ const AnnotationCard = ({ annotation }) => {
                 .then((name) => setLocationName(name))
                 .catch((error) => console.error('Error fetching location name:', error));
         }
-    }, [annotation.latitude, annotation.longitude]);
+        console.log(annotation);
 
-    const handleViewMore = () => {
         setLongDescription(annotation.long_description || 'Long description not available.');
+    }, [annotation]);
+
+    const handleViewMore = () => {
+        setLongDescription(item.long_description || 'Long description not available.');
         setOpen(true);
     };
 
-
     const handleClose = () => {
         setOpen(false);
     };
 
+
     const LongDescriptionDialog = () => (
         <Dialog open={open} onClose={handleClose}>
             <DialogTitle>{annotation.title}</DialogTitle>
@@ -70,11 +73,10 @@ const AnnotationCard = ({ annotation }) => {
                 </Box>
             )}
 
-            <Button color="primary" onClick={() => handleViewMore(annotation)}>
+            <Button color="primary" onClick={handleViewMore}>
                 View More
             </Button>
 
-            {/* Long Description Dialog */}
             <LongDescriptionDialog />
         </Box>
     );

resq/frontend/src/components/Cards/AnnotationCard.js

@@ -4,39 +4,27 @@ import reverseGeocode from '../Geolocation';
 
 const AnnotationCard = ({ item }) => {
     const [locationName, setLocationName] = useState('Unknown Location');
-    const [open, setOpen] = useState(false); // Added for Dialog control
-    const [longDescription, setLongDescription] = useState(''); // State to hold long description
+    const [open, setOpen] = useState(false);
+    const [longDescription, setLongDescription] = useState('');
 
     useEffect(() => {
         if (item.latitude && item.longitude) {
             reverseGeocode(item.latitude, item.longitude)
                 .then((name) => setLocationName(name))
                 .catch((error) => console.error('Error fetching location name:', error));
         }
-    }, [item.latitude, item.longitude]);
-
-    const handleViewMore = () => {
         setLongDescription(item.long_description || 'Long description not available.');
-        setOpen(true); // Open the dialog
-    };
+    }, [item]);
 
+    const handleViewMore = (e) => {
+        e.stopPropagation();
+        setOpen(true);
+    };
 
     const handleClose = () => {
-        setOpen(false); // Close the dialog
+        setOpen(false);
     };
 
-    // Dialog component to show long description
-    const LongDescriptionDialog = () => (
-        <Dialog open={open} onClose={handleClose}>
-            <DialogTitle>{item.title}</DialogTitle>
-            <DialogContent>
-                <DialogContentText>
-                    {longDescription || 'Long description not available.'}
-                </DialogContentText>
-            </DialogContent>
-        </Dialog>
-    );
-
     return (
         <Box
             padding={2}
@@ -69,12 +57,18 @@ const AnnotationCard = ({ item }) => {
                 </Box>
             )}
 
-            <Button color="primary" onClick={() => handleViewMore(item)}>
+            <Button color="primary" onClick={handleViewMore}>
                 View More
             </Button>
 
-            {/* Long Description Dialog */}
-            <LongDescriptionDialog />
+            <Dialog open={open} onClose={handleClose}>
+                <DialogTitle>{item.title}</DialogTitle>
+                <DialogContent>
+                    <DialogContentText>
+                        {longDescription}
+                    </DialogContentText>
+                </DialogContent>
+            </Dialog>
         </Box>
     );
 };

resq/frontend/src/components/Resource/ResourceAddress.js

@@ -1,15 +1,15 @@
-import React, {useState, useEffect} from 'react';
-import {TextField, Button, FormControl, InputLabel, Select, MenuItem, Box} from '@mui/material';
+import React, { useState, useEffect } from 'react';
+import { TextField, Button, FormControl, InputLabel, Select, MenuItem, Box } from '@mui/material';
 import '@fontsource/inter';
 import Grid from '@mui/material/Grid';
 import Typography from '@mui/material/Typography';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Checkbox from '@mui/material/Checkbox';
-import {createTheme, ThemeProvider} from '@mui/material/styles';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
 import Container from '@mui/material/Container';
-import {ResourceContext} from './ResourceContext';
-import {useContext} from 'react';
+import { ResourceContext } from './ResourceContext';
+import { useContext } from 'react';
 
 const customTheme = createTheme({
     palette: {
@@ -19,7 +19,7 @@ const customTheme = createTheme({
     },
 });
 
-export default function ResourceAddress({resourceData, setResourceData}) {
+export default function ResourceAddress({ resourceData, setResourceData }) {
     const [address1, setAddress1] = useState("")
     const [address2, setAddress2] = useState("")
     const [city, setCity] = useState("")
@@ -44,7 +44,7 @@ export default function ResourceAddress({resourceData, setResourceData}) {
                 if (data.results && data.results.length > 0) {
                     const location = data.results[0].geometry.location;
                     setResourceData(
-                        {...resourceData, latitude: location.lat, longitude: location.lng}
+                        { ...resourceData, latitude: location.lat, longitude: location.lng }
                     )
                 } else {
                     console.error('Geocoding failed: No results found');
@@ -64,7 +64,7 @@ export default function ResourceAddress({resourceData, setResourceData}) {
     return (
         <ThemeProvider theme={customTheme}>
             <Container component="main" maxWidth="xs">
-                <CssBaseline/>
+                <CssBaseline />
                 <Box
                     sx={{
                         marginTop: 1,
@@ -76,7 +76,7 @@ export default function ResourceAddress({resourceData, setResourceData}) {
                     <Typography
                         component="h1"
                         variant="h5"
-                        sx={{color: 'red', fontWeight: 'bold', margin: '0'}}
+                        sx={{ color: 'red', fontWeight: 'bold', margin: '0' }}
                     >
                         Resource Delivery Address
                     </Typography>

resq/frontend/src/pages/MapPage.js

@@ -1,18 +1,16 @@
-// noinspection JSUnusedLocalSymbols
-
 import * as React from 'react';
-import {useEffect, useState} from 'react';
+import { useEffect, useState } from 'react';
 import CssBaseline from '@mui/material/CssBaseline';
 import Box from '@mui/material/Box';
-import {createTheme, ThemeProvider} from '@mui/material/styles';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
 import Container from '@mui/material/Container';
 import DisasterMap from "../components/DisasterMap";
-import {cards} from "../components/Cards/ListCards";
-import {AmountSelector, MultiCheckbox} from "../components/MultiCheckbox";
-import {DatePicker} from "@mui/x-date-pickers";
+import { cards } from "../components/Cards/ListCards";
+import { AmountSelector, MultiCheckbox } from "../components/MultiCheckbox";
+import { DatePicker } from "@mui/x-date-pickers";
 import dayjs from "dayjs";
-import {useQuery} from "@tanstack/react-query";
-import {getCategoryTree} from "../AppService";
+import { useQuery } from "@tanstack/react-query";
+import { getCategoryTree } from "../AppService";
 
 const customTheme = createTheme({
     palette: {
@@ -27,7 +25,7 @@ const getAllCategories = categoryTree => {
         return item => {
             switch (item.type) {
                 case "Annotation":
-                    return [{id: item?.category, data: item?.category}]
+                    return [{ id: item?.category, data: item?.category }]
                 default:
                     return categoryTree.findCategoryWithId(parseInt(item.categoryTreeId))?.getAllParentCategories()
             }
@@ -65,7 +63,7 @@ const makeFilterByCategory = categories => {
     }
 };
 
-const makeFilterByType = (typeFilter) => item => typeFilter.length === 0 || typeFilter.map(t=>t.id).indexOf(item.type) !== -1
+const makeFilterByType = (typeFilter) => item => typeFilter.length === 0 || typeFilter.map(t => t.id).indexOf(item.type) !== -1
 
 const makeFilterByAmount = ([amount]) => {
     if (typeof amount !== "string" || amount.indexOf("-") === -1)
@@ -79,7 +77,7 @@ const makeFilterByAmount = ([amount]) => {
 const makeFilterByDateFrom = (dateFrom) => item => dateFrom === null || !dateFrom.isValid() || !(dateFrom > dayjs(item.date))
 const makeFilterByDateTo = (dateTo) => item => dateTo === null || !dateTo.isValid() || !(dateTo < dayjs(item.date))
 
-const makeFilterByBounds = ({ne: [ne_lat, ne_lng], sw: [sw_lat, sw_lng]}) =>
+const makeFilterByBounds = ({ ne: [ne_lat, ne_lng], sw: [sw_lat, sw_lng] }) =>
     function (item) {
         return item.latitude <= ne_lat &&
             item.longitude <= ne_lng &&
@@ -88,38 +86,37 @@ const makeFilterByBounds = ({ne: [ne_lat, ne_lng], sw: [sw_lat, sw_lng]}) =>
     }
 
 
-export default function MapPage({allMarkers}) {
-    const [shownMarkers, setShownMarkers] = useState(allMarkers)
-    const [selectedPoint, setSelectedPoint] = useState(null)
-    const [mapCenter, setMapCenter] = useState([39, 34.5])
+const MapPage = ({ allMarkers }) => {
+    const [shownMarkers, setShownMarkers] = useState(allMarkers);
+    const [selectedPoint, setSelectedPoint] = useState(null);
+    const [mapCenter, setMapCenter] = useState([39, 34.5]);
 
-    const [typeFilter, setTypeFilter] = useState([])
-    const [dateFromFilter, setDateFromFilter] = useState(null)
-    const [dateToFilter, setDateToFilter] = useState(null)
-    const [amountFilter, setAmountFilter] = useState([])
-    const [categoryFilter, setCategoryFilter] = useState([])
-    const [mapBounds, setMapBounds] = useState({ne: [0, 0], sw: [0, 0]})
+    const [typeFilter, setTypeFilter] = useState([]);
+    const [dateFromFilter, setDateFromFilter] = useState(null);
+    const [dateToFilter, setDateToFilter] = useState(null);
+    const [amountFilter, setAmountFilter] = useState([]);
+    const [categoryFilter, setCategoryFilter] = useState([]);
+    const [mapBounds, setMapBounds] = useState({ ne: [0, 0], sw: [0, 0] });
 
-    const categoryTree = useQuery({queryKey: ['categoryTree'], queryFn: getCategoryTree})
+    const categoryTree = useQuery({ queryKey: ['categoryTree'], queryFn: getCategoryTree });
 
 
     useEffect(() => {
         if (selectedPoint) {
             setMapCenter([selectedPoint.latitude, selectedPoint.longitude]);
         }
-    }, [selectedPoint]);
-
-    useEffect(() => setShownMarkers(allMarkers), [allMarkers])
 
-    useEffect(() => setShownMarkers(
-        allMarkers
+        const filteredMarkers = allMarkers
             .filter(makeFilterByCategory(categoryFilter))
             .filter(makeFilterByType(typeFilter))
             .filter(makeFilterByAmount(amountFilter))
             .filter(makeFilterByDateFrom(dateFromFilter))
             .filter(makeFilterByDateTo(dateToFilter))
-            .filter(makeFilterByBounds(mapBounds))
-    ), [allMarkers, amountFilter, categoryFilter, dateFromFilter, dateToFilter, mapBounds, typeFilter])
+            .filter(makeFilterByBounds(mapBounds));
+
+        setShownMarkers(filteredMarkers);
+    }, [selectedPoint, allMarkers, amountFilter, categoryFilter, dateFromFilter, dateToFilter, mapBounds, typeFilter]);
+
 
     const choices = new Map([
         ...allMarkers
@@ -133,29 +130,29 @@ export default function MapPage({allMarkers}) {
     // noinspection JSValidateTypes
     return (
         <ThemeProvider theme={customTheme}>
-            <Container maxWidth="100%" style={{height: "100%", display: "flex", flexDirection: "column"}}>
-                <CssBaseline/>
+            <Container maxWidth="100%" style={{ height: "100%", display: "flex", flexDirection: "column" }}>
+                <CssBaseline />
                 <Box sx={{
                     display: "flex", flexDirection: "row", flexWrap: 'nowrap', margin: "12px", width: "100%",
                     justifyContent: "center"
                 }}>
                     <MultiCheckbox name={"Type"}
-                                   choices={["Annotation", "Resource", "Request"].map(i => ({id: i, data: i}))}
-                                   onChosenChanged={setTypeFilter}/>
+                        choices={["Annotation", "Resource", "Request"].map(i => ({ id: i, data: i }))}
+                        onChosenChanged={setTypeFilter} />
                     <MultiCheckbox name={"Category"}
-                                   choices={[...choices.values()]}
-                                   onChosenChanged={setCategoryFilter}/>
+                        choices={[...choices.values()]}
+                        onChosenChanged={setCategoryFilter} />
                     <AmountSelector name={"Amount"}
-                                    onChosenChanged={setAmountFilter}/>
+                        onChosenChanged={setAmountFilter} />
                     <DatePicker
-                        sx={{m: 1}}
+                        sx={{ m: 1 }}
                         label="From"
                         format="DD/MM/YYYY"
                         value={dateFromFilter}
                         onChange={e => setDateFromFilter(e)}
                     />
                     <DatePicker
-                        sx={{m: 1}}
+                        sx={{ m: 1 }}
                         label="To"
                         format="DD/MM/YYYY"
                         value={dateToFilter}
@@ -184,17 +181,17 @@ export default function MapPage({allMarkers}) {
                         }}>
                             {shownMarkers.map((marker) => {
                                 const SelectedCard = cards[marker.type]
-                                return <div onClick={() => setSelectedPoint(marker)}>< SelectedCard item={marker}/></div>
+                                return <div onClick={() => setSelectedPoint(marker)}>< SelectedCard item={marker} /></div>
                             })}
                         </Box>
                     </Box>
-                    <Box sx={{width: "36px"}}/>
-                    <Box sx={{flexGrow: 100}}>
+                    <Box sx={{ width: "36px" }} />
+                    <Box sx={{ flexGrow: 100 }}>
                         <DisasterMap markers={shownMarkers}
-                                     mapCenter={mapCenter}
-                                     setMapCenter={setMapCenter}
-                                     onPointSelected={setSelectedPoint}
-                                     onBoundsChanged={setMapBounds}
+                            mapCenter={mapCenter}
+                            setMapCenter={setMapCenter}
+                            onPointSelected={setSelectedPoint}
+                            onBoundsChanged={setMapBounds}
                         />
                     </Box>
                 </Box>
@@ -203,5 +200,6 @@ export default function MapPage({allMarkers}) {
     );
 }
 
+export default MapPage;