NotificationsInner.js

import React, {useState, useContext, useEffect} from 'react'
import styled from 'styled-components'
import {apiDomain} from '../env.js'
import ActivityListItem from './ActivityListItem.js'
import {makeAxiosGetRequest} from './HelperFunctions/getAxiosConfig'

export default function NotificationInner (props) {
    const [notifications, setNotifications] = useState([]);
    const [notificatonsLength, setLength] = useState(0);

    function handleSuccess (data) {
        setNotifications(data)
        setLength(data.length)
    }
    useEffect(() => {
        let config = getAxiosConfig()
        const url = `/feed?offset=0&limit=30`

        makeAxiosGetRequest(url, handleSuccess, (error) => {console.log('error while running getNotifications')})
    }, [])

    return (
        <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}
                    />
                )
            }
        </ContainerDiv>

    )
}

const ContainerDiv = styled.div`
    margin-top : 10px;
    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;

    .cabecalho {
        border-bottom : 1px solid #666;

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