From a372bc5f7c5e371f4ab1bae7dfdf2202c713f86d Mon Sep 17 00:00:00 2001 From: Ilgaz Er Date: Fri, 24 Nov 2023 03:16:28 +0300 Subject: [PATCH 1/3] add notifications and its page --- resq/frontend/src/App.js | 196 ++++++++++++++--------- resq/frontend/src/pages/Notifications.js | 85 ++++++++++ 2 files changed, 202 insertions(+), 79 deletions(-) create mode 100644 resq/frontend/src/pages/Notifications.js diff --git a/resq/frontend/src/App.js b/resq/frontend/src/App.js index 44c062d6..367fe074 100644 --- a/resq/frontend/src/App.js +++ b/resq/frontend/src/App.js @@ -1,6 +1,6 @@ -import React, { useState } from 'react'; -import { BrowserRouter as Router, Routes, Route, Navigate } from "react-router-dom"; -import { Navbar, Container, Nav } from 'react-bootstrap'; +import React, {useState} from 'react'; +import {BrowserRouter as Router, Routes, Route, Navigate} from "react-router-dom"; +import {Navbar, Container, Nav} from 'react-bootstrap'; import UserRoles from "./pages/UserRoles"; import SignIn from "./pages/SignIn"; import SignUp from "./pages/SignUp"; @@ -8,7 +8,11 @@ import MapDemo from "./pages/MapDemo"; import Account from "./pages/Account"; import RoleRequest from "./pages/RoleRequest"; import LogoutIcon from '@mui/icons-material/Logout'; +import NotificationsIcon from '@mui/icons-material/Notifications'; import Request from "./pages/RequestCreation"; +import {Badge} from "@mui/material"; +import {createTheme, ThemeProvider} from "@mui/material/styles"; +import Notifications from "./pages/Notifications"; const SmallRedCircle = () => height="20" viewBox="0 0 20 20" > - + function App() { const [token, _setToken] = useState(localStorage.getItem("token")) const [role, setRole] = useState("") + const [notifications, setNotifications] = useState([ + { + title: "Ongoing fire on Cami Sk.", + desc: "A fire has been reported on Rumeli Hisarı Mh, Cami Sk, Sarıyer/İstanbul.", + read: false + },{ + title: "New Soup Kitchen Near You", + desc: "A soup kitchen has opened on Etiler, Hisar Üstü Nispetiye Cd No:1, Beşiktaş/İstanbul.", + read: true + } + ]) + const setToken = t => { localStorage.setItem("token", t || "") _setToken(t) } const navLinks = [ - { path: '/map', label: Map Demo, component: MapDemo, icon: }, + {path: '/map', label: Map Demo, component: MapDemo, icon: }, token && { path: '/userroles', label: User Roles, component: UserRoles, - icon: + icon: }, (role === "responder") && { path: '/responder', label: Responder Panel, component:
Responder Panel
, - icon: + icon: }, ].filter(l => !!l); @@ -48,81 +64,103 @@ function App() { setToken(null) } + const theme = createTheme({ + palette: { + primary: { + main: "#ff0000" + }, + secondary: { + main: '#00f0ff' + } + } + }); + return ( - -
- - - - - ResQ - - - - - - - - -
- - {navLinks.map(({ path, component }) => ( - - ))} - } /> - - { - token ? <> - - - - : <> - - - - } - -
-
- + } + + + + + ); } diff --git a/resq/frontend/src/pages/Notifications.js b/resq/frontend/src/pages/Notifications.js new file mode 100644 index 00000000..69aeb53c --- /dev/null +++ b/resq/frontend/src/pages/Notifications.js @@ -0,0 +1,85 @@ +import * as React from 'react'; +import CssBaseline from '@mui/material/CssBaseline'; +import Link from '@mui/material/Link'; +import Box from '@mui/material/Box'; +import Typography from '@mui/material/Typography'; +import {createTheme, ThemeProvider} from '@mui/material/styles'; +import Container from '@mui/material/Container'; +import {useNavigate} from 'react-router-dom'; +import {Card, CardContent, CardHeader} from "@mui/material"; + + +function Copyright(props) { + return ( +
+ + {'Copyright © '} + + ResQ + {' '} + {new Date().getFullYear()} + {'.'} + +
+ ); +} + +const customTheme = createTheme({ + palette: { + primary: { + main: '#FF0000', + }, + }, +}); + +const NotificationCard = ({notif, onClick}) => + + + + {notif.desc} + + + + +export default function Notifications({token, notifications, setNotifications}) { + + const [selectedRole, setSelectedRole] = React.useState(''); + + const handleRoleChange = (event) => { + setSelectedRole(event.target.value); + }; + + const navigate = useNavigate(); + + const handleNotifRead = (i) => { + const new_notifs = JSON.parse(JSON.stringify(notifications)) + new_notifs[i].read = true + setNotifications(new_notifs) + } + + return ( + + + + + { + notifications.map((notif, i) => notif.read || handleNotifRead(i)}/>) + } + + + + + + ); +} + From 5d330ac508184de87bc306dea063c78b723f6d49 Mon Sep 17 00:00:00 2001 From: Ilgaz Er Date: Fri, 24 Nov 2023 03:17:06 +0300 Subject: [PATCH 2/3] remove unused --- resq/frontend/src/pages/Notifications.js | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/resq/frontend/src/pages/Notifications.js b/resq/frontend/src/pages/Notifications.js index 69aeb53c..f3b19b44 100644 --- a/resq/frontend/src/pages/Notifications.js +++ b/resq/frontend/src/pages/Notifications.js @@ -5,7 +5,6 @@ import Box from '@mui/material/Box'; import Typography from '@mui/material/Typography'; import {createTheme, ThemeProvider} from '@mui/material/styles'; import Container from '@mui/material/Container'; -import {useNavigate} from 'react-router-dom'; import {Card, CardContent, CardHeader} from "@mui/material"; @@ -44,16 +43,9 @@ const NotificationCard = ({notif, onClick}) => +// noinspection JSUnusedLocalSymbols export default function Notifications({token, notifications, setNotifications}) { - const [selectedRole, setSelectedRole] = React.useState(''); - - const handleRoleChange = (event) => { - setSelectedRole(event.target.value); - }; - - const navigate = useNavigate(); - const handleNotifRead = (i) => { const new_notifs = JSON.parse(JSON.stringify(notifications)) new_notifs[i].read = true From d2a6d164b1c4f988bd51c04fdc30b7c2c602e926 Mon Sep 17 00:00:00 2001 From: Ilgaz Er Date: Tue, 28 Nov 2023 00:21:56 +0300 Subject: [PATCH 3/3] fixed merge issues add folders --- resq/frontend/src/App.js | 229 ++++++++---------- .../{ => Request}/RequestAddress.js | 2 +- .../{ => Request}/RequestDetails1.js | 0 .../{ => Request}/RequestDetails2.js | 0 .../{ => Request}/RequestDetails3.js | 0 .../components/{ => Request}/RequestReview.js | 0 .../{ => Resource}/ResourceAddress.js | 2 +- .../{ => Resource}/ResourceContext.js | 0 .../{ => Resource}/ResourceDetail1.js | 0 .../{ => Resource}/ResourceDetail2.js | 0 resq/frontend/src/pages/RequestCreation.js | 10 +- resq/frontend/src/pages/ResourceCreation.js | 8 +- 12 files changed, 116 insertions(+), 135 deletions(-) rename resq/frontend/src/components/{ => Request}/RequestAddress.js (99%) rename resq/frontend/src/components/{ => Request}/RequestDetails1.js (100%) rename resq/frontend/src/components/{ => Request}/RequestDetails2.js (100%) rename resq/frontend/src/components/{ => Request}/RequestDetails3.js (100%) rename resq/frontend/src/components/{ => Request}/RequestReview.js (100%) rename resq/frontend/src/components/{ => Resource}/ResourceAddress.js (99%) rename resq/frontend/src/components/{ => Resource}/ResourceContext.js (100%) rename resq/frontend/src/components/{ => Resource}/ResourceDetail1.js (100%) rename resq/frontend/src/components/{ => Resource}/ResourceDetail2.js (100%) diff --git a/resq/frontend/src/App.js b/resq/frontend/src/App.js index 7247d0fe..148abc31 100644 --- a/resq/frontend/src/App.js +++ b/resq/frontend/src/App.js @@ -53,7 +53,7 @@ function App() { title: "Ongoing fire on Cami Sk.", desc: "A fire has been reported on Rumeli Hisarı Mh, Cami Sk, Sarıyer/İstanbul.", read: false - },{ + }, { title: "New Soup Kitchen Near You", desc: "A soup kitchen has opened on Etiler, Hisar Üstü Nispetiye Cd No:1, Beşiktaş/İstanbul.", read: true @@ -101,132 +101,113 @@ function App() { - -
- - - - - ResQ - - - - - - - - -
- - {navLinks.map(({path, component}) => ( - - ))} - }/> - - { - token ? <> - - - - - : <> - - - } - - - - -
- - {navLinks.map(({path, component}) => ( - - ))} - }/> - - { - token ? <> - - - - - - : <> - - - - } - -
-
- - - - ); + + + + + + + ); } export default App; \ No newline at end of file diff --git a/resq/frontend/src/components/RequestAddress.js b/resq/frontend/src/components/Request/RequestAddress.js similarity index 99% rename from resq/frontend/src/components/RequestAddress.js rename to resq/frontend/src/components/Request/RequestAddress.js index 61688d50..43a481e7 100644 --- a/resq/frontend/src/components/RequestAddress.js +++ b/resq/frontend/src/components/Request/RequestAddress.js @@ -6,7 +6,7 @@ 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 disasterImage from '../disaster.png'; +import disasterImage from '../../disaster.png'; import Avatar from '@mui/material/Avatar'; import CssBaseline from '@mui/material/CssBaseline'; import Container from '@mui/material/Container'; diff --git a/resq/frontend/src/components/RequestDetails1.js b/resq/frontend/src/components/Request/RequestDetails1.js similarity index 100% rename from resq/frontend/src/components/RequestDetails1.js rename to resq/frontend/src/components/Request/RequestDetails1.js diff --git a/resq/frontend/src/components/RequestDetails2.js b/resq/frontend/src/components/Request/RequestDetails2.js similarity index 100% rename from resq/frontend/src/components/RequestDetails2.js rename to resq/frontend/src/components/Request/RequestDetails2.js diff --git a/resq/frontend/src/components/RequestDetails3.js b/resq/frontend/src/components/Request/RequestDetails3.js similarity index 100% rename from resq/frontend/src/components/RequestDetails3.js rename to resq/frontend/src/components/Request/RequestDetails3.js diff --git a/resq/frontend/src/components/RequestReview.js b/resq/frontend/src/components/Request/RequestReview.js similarity index 100% rename from resq/frontend/src/components/RequestReview.js rename to resq/frontend/src/components/Request/RequestReview.js diff --git a/resq/frontend/src/components/ResourceAddress.js b/resq/frontend/src/components/Resource/ResourceAddress.js similarity index 99% rename from resq/frontend/src/components/ResourceAddress.js rename to resq/frontend/src/components/Resource/ResourceAddress.js index 170fc6c1..af704eb2 100644 --- a/resq/frontend/src/components/ResourceAddress.js +++ b/resq/frontend/src/components/Resource/ResourceAddress.js @@ -6,7 +6,7 @@ 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 disasterImage from '../disaster.png'; +import disasterImage from '../../disaster.png'; import Avatar from '@mui/material/Avatar'; import CssBaseline from '@mui/material/CssBaseline'; import Container from '@mui/material/Container'; diff --git a/resq/frontend/src/components/ResourceContext.js b/resq/frontend/src/components/Resource/ResourceContext.js similarity index 100% rename from resq/frontend/src/components/ResourceContext.js rename to resq/frontend/src/components/Resource/ResourceContext.js diff --git a/resq/frontend/src/components/ResourceDetail1.js b/resq/frontend/src/components/Resource/ResourceDetail1.js similarity index 100% rename from resq/frontend/src/components/ResourceDetail1.js rename to resq/frontend/src/components/Resource/ResourceDetail1.js diff --git a/resq/frontend/src/components/ResourceDetail2.js b/resq/frontend/src/components/Resource/ResourceDetail2.js similarity index 100% rename from resq/frontend/src/components/ResourceDetail2.js rename to resq/frontend/src/components/Resource/ResourceDetail2.js diff --git a/resq/frontend/src/pages/RequestCreation.js b/resq/frontend/src/pages/RequestCreation.js index 1423c90b..fa4e1e31 100644 --- a/resq/frontend/src/pages/RequestCreation.js +++ b/resq/frontend/src/pages/RequestCreation.js @@ -11,11 +11,11 @@ import StepLabel from '@mui/material/StepLabel'; import Button from '@mui/material/Button'; import Link from '@mui/material/Link'; import Typography from '@mui/material/Typography'; -import RequestAddress from '../components/RequestAddress'; -import RequestDetails1 from '../components/RequestDetails1'; -import RequestDetails2 from '../components/RequestDetails2'; -import RequestDetails3 from '../components/RequestDetails3'; -import RequestReview from '../components/RequestReview'; +import RequestAddress from '../components/Request/RequestAddress'; +import RequestDetails1 from '../components/Request/RequestDetails1'; +import RequestDetails2 from '../components/Request/RequestDetails2'; +import RequestDetails3 from '../components/Request/RequestDetails3'; +import RequestReview from '../components/Request/RequestReview'; import { createTheme, ThemeProvider } from '@mui/material/styles'; function Copyright(props) { diff --git a/resq/frontend/src/pages/ResourceCreation.js b/resq/frontend/src/pages/ResourceCreation.js index 7a38c52f..17b3da52 100644 --- a/resq/frontend/src/pages/ResourceCreation.js +++ b/resq/frontend/src/pages/ResourceCreation.js @@ -11,11 +11,11 @@ import StepLabel from '@mui/material/StepLabel'; import Button from '@mui/material/Button'; import Link from '@mui/material/Link'; import Typography from '@mui/material/Typography'; -import ResourceAddress from '../components/ResourceAddress'; -import ResourceDetail1 from '../components/ResourceDetail1'; -import ResourceDetail2 from '../components/ResourceDetail2'; +import ResourceAddress from '../components/Resource/ResourceAddress'; +import ResourceDetail1 from '../components/Resource/ResourceDetail1'; +import ResourceDetail2 from '../components/Resource/ResourceDetail2'; import { createTheme, ThemeProvider } from '@mui/material/styles'; -import { ResourceProvider } from '../components/ResourceContext'; +import { ResourceProvider } from '../components/Resource/ResourceContext'; import { useResource } from './ResourceContext'; import axios from 'axios';