diff --git a/src/Components/Notifications.js b/src/Components/Notifications.js index 45af4b5fb90a7d7b62598fe0a7ace6e5a1559e78..87d20942268212fae9e5a745d4abd363567d3464 100644 --- a/src/Components/Notifications.js +++ b/src/Components/Notifications.js @@ -31,6 +31,9 @@ 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 ; @@ -55,29 +58,53 @@ const StyledNotificationButton = styled(Button)` } ` +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(() => { - // 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') - // } - // ) - // }, []) + 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); } @@ -118,6 +145,13 @@ export default function Notification (props) { /> ) } + <div style={{padding : "0 15px", borderTop : "1px solid #dadada"}}> + <Link to="/perfil"> + <NoPadButton> + MOSTRAR TODAS + </NoPadButton> + </Link> + </div> </ContainerDiv> </StyledMenu> </React.Fragment> @@ -125,8 +159,8 @@ export default function Notification (props) { } -const StyledMenu = styled(Menu)` - +const NoPadButton = styled(Button)` + padding : 6px 0 !important; ` const ContainerDiv = styled.div` @@ -134,15 +168,16 @@ const ContainerDiv = styled.div` right : 5%; width : 360px; max-height : 400px; - position : absolute; 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 #666; + border-bottom : 1px solid #dadada; + padding : 10px 15px; .cabecalho-marcar { font-family: Lato,bold;