Merge pull request #428 from bounswe/feature/frontend-notifications-page

Feature/frontend notifications page

resq/frontend/src/components/RequestAddress.js → 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';

resq/frontend/src/components/ResourceAddress.js → 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';

resq/frontend/src/pages/Notifications.js

@@ -0,0 +1,77 @@
+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 {Card, CardContent, CardHeader} from "@mui/material";
+
+
+function Copyright(props) {
+    return (
+        <div style={{position: 'fixed', bottom: 0, width: '100%'}}>
+            <Typography variant="body2" color="text.secondary" align="center" {...props}>
+                {'Copyright © '}
+                <Link color="inherit" href="https://github.com/bounswe/bounswe2023group1">
+                    <span style={{fontWeight: 'bold'}}>ResQ</span>
+                </Link>{' '}
+                {new Date().getFullYear()}
+                {'.'}
+            </Typography>
+        </div>
+    );
+}
+
+const customTheme = createTheme({
+    palette: {
+        primary: {
+            main: '#FF0000',
+        },
+    },
+});
+
+const NotificationCard = ({notif, onClick}) => <Card
+    sx={{marginBottom: "24px", backgroundColor: notif.read ? "lightgrey" : "white"}}
+    onClick={onClick}
+>
+    <CardHeader title={notif.title}/>
+    <CardContent>
+        <Typography variant="body2" color="text.primary" sx={{fontSize: '16px'}}>
+            {notif.desc}
+        </Typography>
+    </CardContent>
+</Card>
+
+// noinspection JSUnusedLocalSymbols
+export default function Notifications({token, notifications, setNotifications}) {
+
+    const handleNotifRead = (i) => {
+        const new_notifs = JSON.parse(JSON.stringify(notifications))
+        new_notifs[i].read = true
+        setNotifications(new_notifs)
+    }
+
+    return (
+        <ThemeProvider theme={customTheme}>
+            <Container component="main" maxWidth="xs">
+                <CssBaseline/>
+                <Box
+                    sx={{
+                        marginTop: 1,
+                        display: 'flex',
+                        flexDirection: 'column',
+                        alignItems: 'center',
+                    }}
+                >
+                    {
+                        notifications.map((notif, i) => <NotificationCard notif={notif} onClick={() => notif.read || handleNotifRead(i)}/>)
+                    }
+
+                </Box>
+            </Container>
+            <Copyright sx={{mt: 5}}/>
+        </ThemeProvider>
+    );
+}
+

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) {

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';