Notifications.js

/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
Departamento de Informatica - Universidade Federal do Parana

This file is part of Plataforma Integrada MEC.

Plataforma Integrada MEC is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

Plataforma Integrada MEC is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
import React, {useState, useEffect} from 'react';
import NotificationsIcon from '@material-ui/icons/Notifications';
import { Button } from '@material-ui/core';
import Badge from '@material-ui/core/Badge';
import styled from 'styled-components'
import Menu from '@material-ui/core/Menu';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import MenuItem from '@material-ui/core/MenuItem';
import MoreVertIcon from '@material-ui/icons/MoreVert';
import OpenIcon from '@material-ui/icons/OpenInNew';
import ReportIcon from '@material-ui/icons/Error';
import NotificationsInner from './NotificationsInner.js'
import {apiDomain, apiUrl} from '../env.js'
import axios from 'axios'
import ActivityListItem from './ActivityListItem.js'
import {getAxiosConfig} from './HelperFunctions/getAxiosConfig.js'
import { withStyles } from '@material-ui/core/styles';
import {Link} from 'react-router-dom'

const StyledBadge = styled(Badge) `
    .MuiBadge-dot-45{
        height : 9px ;
        width : 9px ;
        transform : scale(1) translate( 01%, -40%);
    }
`

const StyledNotificationsIcon = styled(NotificationsIcon)`
    flex : 1;
    align-self : center;
    margin-left : 0 !important;
    color: #00bcd4;
`

const StyledNotificationButton = styled(Button)`
    height : 56px !important;
    width : 56px !important;
    border-radius : 50% !important;
    &:hover {
        color : #00bcd4 !important;
    }
`

const StyledMenu = withStyles({
  paper: {
    border: '1px solid #d3d4d5',
  },
})((props) => (
  <Menu
    elevation={0}
    getContentAnchorEl={null}
    anchorOrigin={{
      horizontal: 'center',
      vertical: "bottom",
    }}
    transformOrigin={{
      vertical: 'top',
      horizontal: 'center',
    }}
    {...props}
  />
));

export default function Notification (props) {
    const [anchorEl, setAnchorEl] = React.useState(null);
    const [notifications, setNotifications] = useState([]);
    const [notificatonsLength, setLength] = useState(0);
    useEffect(() => {

        setTimeout(() => {
            let config = getAxiosConfig()
            axios.get(`${apiUrl}/feed?offset=0&limit=30`, config)
            .then( (response) => {
                if ( response.headers['access-token'] ) {
                    sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
                }

                console.log('atividades response: ', response)
                setNotifications(response.data)
                setLength(response.data.length)

                },
                (error) => {
                    console.log('error while running getNotifications')
                }
            )
        }, 1000);
    }, [sessionStorage.getItem('@portalmec/uid')])
    function handleClick(event) {
        console.log('event.currentTarget: ', event.currentTarget)
        setAnchorEl(event.currentTarget);
    }

    function handleClose() {
        setAnchorEl(null);
    }
    return (
        <React.Fragment>
        <StyledNotificationButton onClick={handleClick}>
            <StyledBadge badgeContent={1} color="secondary" variant="dot" overlap="circle" className="badge">
                <StyledNotificationsIcon/>
            </StyledBadge>
        </StyledNotificationButton>
        <StyledMenu
            id="simple-menu"
            anchorEl={anchorEl}
            keepMounted
            open={Boolean(anchorEl)}
            onClose={handleClose}
        >
            <ContainerDiv>
                <div className="cabecalho">
                    <span style={{fontSize : "15px"}}>NOTIFICAÇÕES •</span>
                    <span className="cabecalho-marcar">Marcar todas como lidas</span>
                </div>
                {
                    notifications.map( (notification) =>
                        <ActivityListItem
                            onMenuBar={true}
                            avatar = {notification.owner.avatar ? apiDomain + notification.owner.avatar : null}
                            activity = {notification.activity}
                            actionType = {notification.trackable_type}
                            objectType = {notification.recipient_type}
                            createdAt = {notification.created_at}
                            ownerName = {notification.owner.name}
                            ownerHref = {'/usuario-publico/' + notification.owner.id}
                            recipientName =  {notification.recipient.name}
                        />
                    )
                }
                <div style={{padding : "0 15px", borderTop : "1px solid #dadada"}}>
                    <Link to="/perfil">
                        <NoPadButton>
                            MOSTRAR TODAS
                        </NoPadButton>
                    </Link>
                </div>
            </ContainerDiv>
        </StyledMenu>
        </React.Fragment>
    )

}

const NoPadButton = styled(Button)`
    padding : 6px 0 !important;
`

const ContainerDiv = styled.div`
    margin-top : 10px;
    right : 5%;
    width : 360px;
    max-height : 400px;
    box-shadow : 8px 8px 8px 8px
    rgba(0,0,0,.1);
    overflow-y : scroll;
    padding : 5px 5px 5px 5px;
    min-width : 160px;
    background-color : #f1f1f1;

    .cabecalho {
        border-bottom : 1px solid #dadada;
        padding : 10px 15px;

        .cabecalho-marcar {
            font-family: Lato,bold;
            font-size: 12px;
            -webkit-text-decoration-line: underline;
            text-decoration-line: underline;
            float: right;
        }
    }
`