From 83efa017b1bbb7768311ecbf0e6fb805e8b19129 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?K=C3=BCbra=20Aksu?= Date: Tue, 19 Dec 2023 14:00:52 +0300 Subject: [PATCH 1/4] responder task map is enhanced change of plans. responder map shows their tasks instead of all the requests --- resq/frontend/src/pages/ResponderMapPage.js | 44 +++++++++++++++++---- 1 file changed, 37 insertions(+), 7 deletions(-) diff --git a/resq/frontend/src/pages/ResponderMapPage.js b/resq/frontend/src/pages/ResponderMapPage.js index 9ebfb390..bbdcc31e 100644 --- a/resq/frontend/src/pages/ResponderMapPage.js +++ b/resq/frontend/src/pages/ResponderMapPage.js @@ -1,13 +1,43 @@ import MapPage from "./MapPage"; -import {useQuery} from "@tanstack/react-query"; -import {getAllResources} from "../AppService"; -import {mock_markers} from "./Mock_markers"; -import {Fab} from "@mui/material"; -import {useNavigate} from "react-router-dom"; -import {Add} from "@mui/icons-material"; +import { useQuery } from "@tanstack/react-query"; +import { getAllResources } from "../AppService"; +import { mock_markers } from "./Mock_markers"; +import { Fab } from "@mui/material"; +import { useNavigate } from "react-router-dom"; +import { Add } from "@mui/icons-material"; export default function ResponderMapPage() { - + //const queryClient = useQueryClient() + + const navigate = useNavigate() + const resources = useQuery({ queryKey: ['viewAllTasks'], queryFn: viewAllTasks }) + + const mytaskMarkers = (resources.data?.data || []).map(a => ({ ...a, type: "My Tasks" })) + const allMarkers = [...mock_markers, ...mytaskMarkers] + /*/ Mutations + const mutation = useMutation({ + mutationFn: postTodo, + onSuccess: () => { + // Invalidate and refetch + queryClient.invalidateQueries({queryKey: ['todos']}) + }, + })*/ + + return ( + <> + + navigate("/account")} sx={{ + position: 'absolute', + bottom: 32, + right: 32, + }}> + + My Tasks + + + + ) + } \ No newline at end of file From c43edbc6ebf3349f1e6d2c3aa66c77a6edf0e52a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?K=C3=BCbra=20Aksu?= Date: Tue, 19 Dec 2023 16:24:41 +0300 Subject: [PATCH 2/4] tasks adjusted X-selected role shouldn't be there. Backend is working on that. Also, we have decided that responder should see their tasks on map specifically, not other requests/tasks or resources. I changed implementation according to that. --- resq/frontend/src/pages/ResponderMapPage.js | 39 +++++++++++---------- 1 file changed, 21 insertions(+), 18 deletions(-) diff --git a/resq/frontend/src/pages/ResponderMapPage.js b/resq/frontend/src/pages/ResponderMapPage.js index bbdcc31e..dfa841c1 100644 --- a/resq/frontend/src/pages/ResponderMapPage.js +++ b/resq/frontend/src/pages/ResponderMapPage.js @@ -8,26 +8,31 @@ import { Add } from "@mui/icons-material"; export default function ResponderMapPage() { + const navigate = useNavigate(); + const { data, isError, isLoading, error } = useQuery(['viewAllTasks'], () => viewAllTasks(userId)); - //const queryClient = useQueryClient() + if (isLoading) { + return
Loading tasks...
; + } - const navigate = useNavigate() - const resources = useQuery({ queryKey: ['viewAllTasks'], queryFn: viewAllTasks }) + if (isError) { + console.error('Error fetching tasks:', error); + return
Error fetching tasks.
; + } - const mytaskMarkers = (resources.data?.data || []).map(a => ({ ...a, type: "My Tasks" })) - const allMarkers = [...mock_markers, ...mytaskMarkers] - /*/ Mutations - const mutation = useMutation({ - mutationFn: postTodo, - onSuccess: () => { - // Invalidate and refetch - queryClient.invalidateQueries({queryKey: ['todos']}) - }, - })*/ + console.log('Tasks data:', data); + + const taskMarkers = data?.map(task => ({ + lat: task.startLatitude, + lng: task.startLongitude, + title: task.description, + dueDate: task.dueDate, + isCompleted: task.completed, + })); return ( <> - + navigate("/account")} sx={{ position: 'absolute', bottom: 32, @@ -37,7 +42,5 @@ export default function ResponderMapPage() { My Tasks - - ) - -} \ No newline at end of file + ); +} From 04090011c8037f169abb8049827767b861345dac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?K=C3=BCbra=20Aksu?= Date: Tue, 19 Dec 2023 18:23:01 +0300 Subject: [PATCH 3/4] user id is required for responder map page view From swagger, it is clarified that we should ask user id to show responder map. --- resq/frontend/src/pages/ResponderMapPage.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/resq/frontend/src/pages/ResponderMapPage.js b/resq/frontend/src/pages/ResponderMapPage.js index dfa841c1..bd2ced84 100644 --- a/resq/frontend/src/pages/ResponderMapPage.js +++ b/resq/frontend/src/pages/ResponderMapPage.js @@ -1,15 +1,19 @@ import MapPage from "./MapPage"; import { useQuery } from "@tanstack/react-query"; -import { getAllResources } from "../AppService"; -import { mock_markers } from "./Mock_markers"; +import { viewAllTasks } from "../AppService"; import { Fab } from "@mui/material"; import { useNavigate } from "react-router-dom"; import { Add } from "@mui/icons-material"; - export default function ResponderMapPage() { const navigate = useNavigate(); - const { data, isError, isLoading, error } = useQuery(['viewAllTasks'], () => viewAllTasks(userId)); + + const userId = parseInt(localStorage.getItem('userId')); + + const { data, isError, isLoading, error } = useQuery( + ['viewAllTasks', userId], + () => viewAllTasks(userId), + ); if (isLoading) { return
Loading tasks...
; From 7c17f4ee4cd0dd93281cfb5abbb263ac15273824 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?K=C3=BCbra=20Aksu?= Date: Tue, 19 Dec 2023 18:34:47 +0300 Subject: [PATCH 4/4] routes implemented & errors fixed at respondermap Since tasks still not implemented, i have added those lines for now: "if (isLoading) { return
Loading tasks...
; }" --- resq/frontend/src/App.js | 114 ++++++++++---------- resq/frontend/src/pages/ResponderMapPage.js | 8 +- 2 files changed, 62 insertions(+), 60 deletions(-) diff --git a/resq/frontend/src/App.js b/resq/frontend/src/App.js index 74c957c1..e3fa420d 100644 --- a/resq/frontend/src/App.js +++ b/resq/frontend/src/App.js @@ -1,6 +1,6 @@ -import React, {useEffect, useRef, useState} from 'react'; -import {BrowserRouter as Router, Routes, Route, Navigate} from "react-router-dom"; -import {Navbar, Container, Nav} from 'react-bootstrap'; +import React, { useEffect, useRef, useState } from 'react'; +import { BrowserRouter as Router, Routes, Route, Navigate } from "react-router-dom"; +import { Navbar, Container, Nav } from 'react-bootstrap'; import SignIn from "./pages/SignIn"; import SignUp from "./pages/SignUp"; import Account from "./pages/Account"; @@ -9,13 +9,14 @@ import LogoutIcon from '@mui/icons-material/Logout'; import NotificationsIcon from '@mui/icons-material/Notifications'; import Request from "./components/Request/RequestCreation"; import Resource from "./components/Resource/ResourceCreation"; -import {LocalizationProvider} from "@mui/x-date-pickers"; -import {AdapterDayjs} from "@mui/x-date-pickers/AdapterDayjs"; -import {QueryClient, QueryClientProvider} from "@tanstack/react-query"; +import { LocalizationProvider } from "@mui/x-date-pickers"; +import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs"; +import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import axios from "axios"; import VictimMapPage from "./pages/VictimMapPage"; -import {Badge} from "@mui/material"; -import {createTheme, ThemeProvider} from "@mui/material/styles"; +import ResponderMapPage from "./pages/ResponderMapPage"; +import { Badge } from "@mui/material"; +import { createTheme, ThemeProvider } from "@mui/material/styles"; import Notifications from "./pages/Notifications"; const SmallRedCircle = () => @@ -25,7 +26,7 @@ const SmallRedCircle = () => height="20" viewBox="0 0 20 20" > - + const queryClient = new QueryClient() @@ -63,12 +64,13 @@ function App() { } const navLinks = [ - {path: '/map', label: Victim Map, component: VictimMapPage, icon: }, + { path: '/victimmap', label: Victim Map, component: VictimMapPage, icon: }, + { path: '/respondermap', label: Responder Map, component: ResponderMapPage, icon: }, (role === "responder") && { path: '/responder', label: Responder Panel, component:
Responder Panel
, - icon: + icon: }, ].filter(l => !!l); @@ -97,14 +99,14 @@ function App() {
- - + + ResQ - +