Skip to content

Commit

Permalink
Merge pull request #575 from bounswe/frontend/responder_task_map
Browse files Browse the repository at this point in the history 
Responder Specific Map Implementation Changed with The Purpose of Showing Responders Their Tasks Only
  • Loading branch information
@kubraaksux
kubraaksux authored Dec 19, 2023
2 parents 571c73c + 7c17f4e commit c6de288
Show file tree
Hide file tree
Showing 2 changed files with 104 additions and 65 deletions.
114 changes: 58 additions & 56 deletions resq/frontend/src/App.js
View file
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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 = () =>
Expand All @@ -25,7 +26,7 @@ const SmallRedCircle = () =>
height="20"
viewBox="0 0 20 20"
>
<circle cx="10" cy="10" r="8" fill="red"/>
<circle cx="10" cy="10" r="8" fill="red" />
</svg>

const queryClient = new QueryClient()
Expand Down Expand Up @@ -63,12 +64,13 @@ function App() {
}

const navLinks = [
{path: '/map', label: <strong>Victim Map</strong>, component: VictimMapPage, icon: <SmallRedCircle/>},
{ path: '/victimmap', label: <strong>Victim Map</strong>, component: VictimMapPage, icon: <SmallRedCircle /> },
{ path: '/respondermap', label: <strong>Responder Map</strong>, component: ResponderMapPage, icon: <SmallRedCircle /> },
(role === "responder") && {
path: '/responder',
label: <strong>Responder Panel</strong>,
component: <div>Responder Panel</div>,
icon: <SmallRedCircle/>
icon: <SmallRedCircle />
},
].filter(l => !!l);

Expand Down Expand Up @@ -97,14 +99,14 @@ function App() {
<div>
<Navbar bg="light" variant="light" expand="lg">
<Container ref={ref}>
<Navbar.Brand href="/" style={{color: 'red', fontWeight: 'bold'}}>
<SmallRedCircle/>
<Navbar.Brand href="/" style={{ color: 'red', fontWeight: 'bold' }}>
<SmallRedCircle />
ResQ
</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav"/>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="me-auto">
{navLinks.map(({path, label, icon}) => (
{navLinks.map(({ path, label, icon }) => (
<Nav.Link key={path} href={path}>
{icon}
{label}
Expand All @@ -115,39 +117,39 @@ function App() {
{token ?
<>
<Nav.Link key={"/account"} href={"/account"}
style={{"marginLeft": "auto"}}>
<SmallRedCircle/>
style={{ "marginLeft": "auto" }}>
<SmallRedCircle />
<strong>Account</strong>
</Nav.Link>
<Nav.Link key={"/requestcreation"} href={"/requestcreation"}
style={{"marginLeft": "auto"}}>
<SmallRedCircle/>
style={{ "marginLeft": "auto" }}>
<SmallRedCircle />
<strong>Create Request</strong>
</Nav.Link>
<Nav.Link key={"/resourcecreation"} href={"/resourcecreation"}
style={{"marginLeft": "auto"}}>
<SmallRedCircle/>
style={{ "marginLeft": "auto" }}>
<SmallRedCircle />
<strong>Create Resource</strong>
</Nav.Link>
<Nav.Link key={"/notifications"} href={"/notifications"}
style={{"marginLeft": "auto"}}>
style={{ "marginLeft": "auto" }}>
<Badge badgeContent={notifications.filter(n => !n?.read).length}
color={"primary"}>
<NotificationsIcon/>
color={"primary"}>
<NotificationsIcon />
</Badge>
</Nav.Link>
<Nav.Link key={"signout"} href={"#"} onClick={signOut}
style={{"marginLeft": "auto"}}>
<LogoutIcon/>
style={{ "marginLeft": "auto" }}>
<LogoutIcon />
</Nav.Link>
</> :
<>
<Nav.Link key={'/signin'} href={'/signin'}
style={{"marginLeft": "auto"}}>
style={{ "marginLeft": "auto" }}>
<strong>Sign In</strong>
</Nav.Link>
<Nav.Link key={'/signup'} href={'/signup'}
style={{"marginLeft": "auto"}}>
style={{ "marginLeft": "auto" }}>
<strong>Sign Up</strong>
</Nav.Link>
</>
Expand All @@ -157,40 +159,40 @@ function App() {
</Container>
</Navbar>

<main style={{height: `${height - 57}px`}}>
<main style={{ height: `${height - 57}px` }}>
<Routes>
{navLinks.map(({path, component}) => (
{navLinks.map(({ path, component }) => (
<Route key={path} path={path}
element={React.createElement(component, {
token,
setToken,
role,
setRole
})}/>
element={React.createElement(component, {
token,
setToken,
role,
setRole
})} />
))}
<Route path="/" element={<Navigate to="/map"/>}/>
<Route path="/rolerequest" state={{token, setToken}}
element={React.createElement(RoleRequest, {token, setToken})}/>
<Route path="/" element={<Navigate to="/map" />} />
<Route path="/rolerequest" state={{ token, setToken }}
element={React.createElement(RoleRequest, { token, setToken })} />
{
token ? <>
<Route path="/account" state={{token, setToken}}
element={React.createElement(Account, {token, setToken})}/>
<Route path="/requestcreation" state={{token, setToken}}
element={React.createElement(Request, {token, setToken})}/>
<Route path="/notifications" state={{token, setToken}}
element={React.createElement(Notifications, {
token,
notifications,
setNotifications
})}/>
<Route path="/resourcecreation" state={{token, setToken}}
element={React.createElement(Resource, {token, setToken})}/>
</>
<Route path="/account" state={{ token, setToken }}
element={React.createElement(Account, { token, setToken })} />
<Route path="/requestcreation" state={{ token, setToken }}
element={React.createElement(Request, { token, setToken })} />
<Route path="/notifications" state={{ token, setToken }}
element={React.createElement(Notifications, {
token,
notifications,
setNotifications
})} />
<Route path="/resourcecreation" state={{ token, setToken }}
element={React.createElement(Resource, { token, setToken })} />
</>
: <>
<Route path="/signin" state={{token, setToken}}
element={React.createElement(SignIn, {token, setToken})}/>
<Route path="/signup" state={{token, setToken}}
element={React.createElement(SignUp, {token, setToken})}/>
<Route path="/signin" state={{ token, setToken }}
element={React.createElement(SignIn, { token, setToken })} />
<Route path="/signup" state={{ token, setToken }}
element={React.createElement(SignUp, { token, setToken })} />
</>
}
</Routes>
Expand Down
55 changes: 46 additions & 9 deletions resq/frontend/src/pages/ResponderMapPage.js
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,50 @@
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 { 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 userId = parseInt(localStorage.getItem('userId'));

const { data, isError, isLoading, error } = useQuery({
queryKey: ['viewAllTasks', userId],
queryFn: () => viewAllTasks(userId),
});

if (isLoading) {
return <div>Loading tasks...</div>;
}

if (isError) {
console.error('Error fetching tasks:', error);
return <div>Error fetching tasks.</div>;
}

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 (
<>
<MapPage allMarkers={taskMarkers || []} />
<Fab color="primary" variant="extended" onClick={() => navigate("/account")} sx={{
position: 'absolute',
bottom: 32,
right: 32,
}}>
<Add sx={{ mr: 1 }} />
My Tasks
</Fab>
</>
);
}

0 comments on commit c6de288

Please sign in to comment.