marker/shuffle-cracked
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added a notification icon, parser, backend and basic APIs

Browse Source
This commit is contained in:
frikky
2021-10-04 19:52:58 +02:00
parent 908d8d9cd3
commit 8551f82330
3 changed files with 139 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.jsx
+51 -1
View File
@@ -49,6 +49,36 @@ if ( window.location.port === "3000") {
const App = (message, props) => {
const [userdata, setUserData] = useState({});
const [notifications, setNotifications] = useState([
{
"image": "https://dytvr9ot2sszz.cloudfront.net/whats-new-announcements/billboard_metricsdashbd_sept2021.png",
"created_at": 1519211809934,
"updated_at": 1519211809934,
"title": "some title",
"description": "This is a description",
"dismissable": true,
"personal": false,
"org_id": "",
"tags": ["tag1", "tag2"],
"amount": 3,
"id": "123",
"read": false,
},
{
"image": "https://dytvr9ot2sszz.cloudfront.net/whats-new-announcements/billboard_metricsdashbd_sept2021.png",
"created_at": 1519211809934,
"updated_at": 1519211809934,
"title": "some title",
"description": "This is a description",
"dismissable": true,
"personal": false,
"org_id": "",
"tags": ["tag1", "tag2"],
"amount": 3,
"id": "456",
"read": true,
}
]);
const [cookies, setCookie, removeCookie] = useCookies([]);
const [isLoggedIn, setIsLoggedIn] = useState(false);
const [dataset, setDataset] = useState(false);
@@ -57,6 +87,7 @@ const App = (message, props) => {
useEffect(() => {
if (dataset === false) {
getUserNotifications()
checkLogin()
setDataset(true)
}
@@ -66,6 +97,25 @@ const App = (message, props) => {
window.location = "/login"
}
const getUserNotifications = () => {
fetch(`${globalUrl}/api/v1/notifications`, {
credentials: "include",
headers: {
'Content-Type': 'application/json',
},
})
.then(response => response.json())
.then(responseJson => {
if (responseJson.success === true && responseJson.notifications !== null && responseJson.notifications !== undefined) {
console.log("RESP: ", responseJson)
setNotifications(responseJson.notifications)
}
})
.catch(error => {
console.log("Failed getting notifications for user: ", error)
});
}
const checkLogin = () => {
var baseurl = globalUrl
fetch(baseurl + "/api/v1/users/getinfo", {
@@ -107,7 +157,7 @@ const App = (message, props) => {
</div> :
<div style={{ backgroundColor: "#1F2023", color: "rgba(255, 255, 255, 0.65)", minHeight: "100vh" }}>
<ScrollToTop setCurpath={setCurpath} />
<Header checkLogin={checkLogin} cookies={cookies} removeCookie={removeCookie} isLoaded={isLoaded} globalUrl={globalUrl} setIsLoggedIn={setIsLoggedIn} isLoggedIn={isLoggedIn} userdata={userdata} {...props} />
<Header notifications={notifications} checkLogin={checkLogin} cookies={cookies} removeCookie={removeCookie} isLoaded={isLoaded} globalUrl={globalUrl} setIsLoggedIn={setIsLoggedIn} isLoggedIn={isLoggedIn} userdata={userdata} {...props} />
<div style={{marginTop: 60}}/>
<Route exact path="/login" render={props => <LoginPage isLoggedIn={isLoggedIn} setIsLoggedIn={setIsLoggedIn} register={true} isLoaded={isLoaded} globalUrl={globalUrl} setCookie={setCookie} cookies={cookies} checkLogin={checkLogin} {...props} />} />
<Route exact path="/admin" render={props => <Admin userdata={userdata} isLoggedIn={isLoggedIn} setIsLoggedIn={setIsLoggedIn} register={true} isLoaded={isLoaded} globalUrl={globalUrl} setCookie={setCookie} cookies={cookies} {...props} />} />
frontend/src/components/Header.js
+87 -30
View File
@@ -5,7 +5,7 @@ import {Link} from 'react-router-dom';
import { useTheme } from '@material-ui/core/styles';
import { Badge, Typography, Paper, Tooltip, List, Avatar, Menu, ListItem, MenuItem, Select, Button, IconButton, Grid } from '@material-ui/core';
import { Chip, Badge, Typography, Paper, Tooltip, List, Avatar, Menu, ListItem, MenuItem, Select, Button, IconButton, Grid } from '@material-ui/core';
import { Notifications as NotificationsIcon, Home as HomeIcon, Polymer as PolymerIcon, Apps as AppsIcon, Description as DescriptionIcon} from '@material-ui/icons';
import { useAlert } from "react-alert";
@@ -13,7 +13,7 @@ const hoverColor = "#f85a3e"
const hoverOutColor = "#e8eaf6"
const Header = props => {
const { globalUrl, isLoggedIn, removeCookie, homePage, isLoaded, userdata, cookies } = props;
const { globalUrl, notifications, isLoggedIn, removeCookie, homePage, isLoaded, userdata, cookies } = props;
const theme = useTheme();
const [HomeHoverColor, setHomeHoverColor] = useState(hoverOutColor);
@@ -22,6 +22,7 @@ const Header = props => {
const [DocsHoverColor, setDocsHoverColor] = useState(hoverOutColor);
const [HelpHoverColor, setHelpHoverColor] = useState(hoverOutColor);
const [anchorEl, setAnchorEl] = React.useState(null);
const [anchorElAvatar, setAnchorElAvatar] = React.useState(null);
const alert = useAlert()
const hrefStyle = {
@@ -29,6 +30,36 @@ const Header = props => {
textDecoration: "none",
}
const dismissNotification = (alert_id) => {
// Don't really care about the logout
fetch(`${globalUrl}/api/v1/notifications/${alert_id}/markasread`, {
credentials: "include",
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
})
.then(function(response) {
if (response.status !== 200) {
console.log("Error in response")
}
return response.json();
}).then(function(responseJson) {
if (responseJson.success !== undefined && responseJson.success) {
setTimeout(() => {
window.location.reload()
}, 2000)
} else {
alert.error("Failed changing org: ", responseJson.reason)
}
})
.catch(error => {
console.log("error changing: ", error)
//removeCookie("session_token", {path: "/"})
})
}
// DEBUG HERE
const handleClickLogout = () => {
console.log("COOKIES: ", cookies, "Remover: ", removeCookie)
@@ -146,17 +177,56 @@ const Header = props => {
const handleClose = () => {
setAnchorEl(null);
setAnchorElAvatar(null);
};
const notifications = [{
"image": "https://dytvr9ot2sszz.cloudfront.net/whats-new-announcements/billboard_metricsdashbd_sept2021.png",
"date": "1519211809934",
"title": "some title",
"description": "This is a escription",
"dismissable": true,
"personal": false,
"org_id": "",
}]
const chipStyle = {
backgroundColor: "#3d3f43", height: 30, marginRight: 5, paddingLeft: 5, paddingRight: 5, height: 28, cursor: "pointer", borderColor: "#3d3f43", color: "white",
}
const NotificationItem = (props) => {
const {data} = props
return (
<Paper style={{width: 300, padding: 25, borderBottom: "1px solid rgba(255,255,255,0.4)"}}>
<Typography variant="h6">
{new Date(data.updated_at).toISOString()}
</Typography >
<Typography variant="h6">
{data.title}
</Typography >
{data.image !== undefined && data.image !== null && data.image.length > 0 ?
<img alt={data.title} src={data.image} style={{height: 100, width: 100, }} />
:
null
}
<Typography variant="body1">
{data.description}
</Typography >
{/*data.tags !== undefined && data.tags !== null && data.tags.length > 0 ?
data.tags.map((tag, index) => {
return (
<Chip
key={index}
style={chipStyle}
label={tag}
onClick={() => {
}}
variant="outlined"
color="primary"
/>
)
})
: null */}
{data.read === false ?
<Button color="primary" variant="contained" style={{marginTop: 15}} onClick={() => {
dismissNotification(data.id)
}}>
Dismiss
</Button>
: null}
</Paper>
)
}
const notificationMenu =
<span style={{zIndex: 10001}}>
@@ -172,27 +242,14 @@ const Header = props => {
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
style={{zIndex: 10002}}
style={{zIndex: 10002, maxHeight: "100vh", overflowX: "hidden", overflowY: "auto",}}
onClose={() => {
handleClose()
}}
>
{notifications.map((data, index) => {
return (
<MenuItem onClick={(event) => {}}>
<Paper style={{width: 300, height: 150, }}>
<Grid container direction="row" alignItems="center">
<Grid item>
<Typography variant="h6">
{new Date(data.date).toISOString()}
</Typography >
<Typography variant="h6">
{data.title}
</Typography >
</Grid>
</Grid>
</Paper>
</MenuItem>
<NotificationItem data={data} key={index} />
)
})}
</Menu>
@@ -202,15 +259,15 @@ const Header = props => {
const avatarMenu =
<span style={{zIndex: 10001}}>
<IconButton color="primary" style={{zIndex: 10001, marginRight: 15, }} aria-controls="simple-menu" aria-haspopup="true" onClick={(event) => {
setAnchorEl(event.currentTarget);
setAnchorElAvatar(event.currentTarget);
}}>
<Avatar style={{height: 35, width: 35,}} alt="Your username here" src="" />
</IconButton>
<Menu
id="simple-menu"
anchorEl={anchorEl}
anchorEl={anchorElAvatar}
keepMounted
open={Boolean(anchorEl)}
open={Boolean(anchorElAvatar)}
style={{zIndex: 10002}}
onClose={() => {
handleClose()
@@ -315,7 +372,7 @@ const Header = props => {
</div>
<div style={{flex: "10", display: "flex", flexDirection: "row-reverse"}}>
{avatarMenu}
{notificationMenu}
{/*notificationMenu*/}
{userdata === undefined || userdata.admin === undefined || userdata.admin === null || !userdata.admin ? null :
<Link to="/admin" style={hrefStyle}>
<Button color="primary" variant="contained" style={{marginRight: 15, marginTop: 12}}>