ActivityListItem.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, { useEffect } from 'react'
import styled from 'styled-components'
import ListItem from '@material-ui/core/ListItem';
import ListItemAvatar from '@material-ui/core/ListItemAvatar';
import ListItemText from '@material-ui/core/ListItemText';
import Avatar from '@material-ui/core/Avatar';
import { GetActivityProperties, Tag, ObjectColor } from './Activities/Definitions.js'
//icons
import FavoriteIcon from '@material-ui/icons/Favorite';
import CreateIcon from '@material-ui/icons/Create';
import GetAppIcon from '@material-ui/icons/GetApp';
import StarIcon from '@material-ui/icons/Star';
import SpeakerNotesIcon from '@material-ui/icons/SpeakerNotes';
import ReportIcon from '@material-ui/icons/Report';
import CloudUploadIcon from '@material-ui/icons/CloudUpload';
import ThumbDownIcon from '@material-ui/icons/ThumbDown';
import DeleteIcon from '@material-ui/icons/Delete';
import { Link } from 'react-router-dom'

//Image Import
import { noAvatar } from "ImportImages.js";

const GetObjectColor = (tag) => {
    return ObjectColor[tag]
}

const getNotificationIcon = (iconType) => {
    switch (iconType) {
        case 'create':
            return <CreateIcon className="icon" />;
        case 'favorite':
            return <FavoriteIcon className="icon" />;
        case 'get_app':
            return <GetAppIcon className="icon" />;
        case 'star':
            return <StarIcon className="icon" />;
        case 'report':
            return <ReportIcon className="icon" />;
        case 'cloud_upload':
            return <CloudUploadIcon className="icon" />;
        case 'delete':
            return <DeleteIcon className="icon" />;
        case 'thumb_down':
            return <ThumbDownIcon className="icon" />;
        default:
            return <SpeakerNotesIcon className="icon" />;
    }
}

const getTimeDifference = (timestamp) => {
    //returns time difference between now and the moment the notification was created
    var moment = require('moment')

    const now = moment()
    const then = moment(timestamp, moment.ISO_8601)

    let duration = moment.duration(now.diff(then))
    // {/*console.log('duration: ', duration)*/}
    let timeDiff;
    if (duration._data.years > 0) {
        timeDiff = duration._data.years + (duration._data.years > 1 ? ' anos' : ' ano')
    }
    else if (duration._data.months > 0) {
        timeDiff = duration._data.months + (duration._data.months > 1 ? ' meses' : ' mês')
    }
    else if (duration._data.days > 0) {
        timeDiff = duration._data.days + (duration._data.days > 1 ? ' dias' : ' dia')
    }
    else if (duration._data.hours > 0) {
        timeDiff = duration._data.hours + (duration._data.hours > 1 ? ' horas' : ' hora')
    }
    else if (duration._data.minutes > 0) {
        timeDiff = duration._data.minutes + (duration._data.minutes > 1 ? ' minutos' : ' minuto')
    }

    return timeDiff;
}

export default function ActivityListItem(props) {
    const [activity, setActivity] = React.useState({
        tag: '',
        icon: '',
        text: '',
        text2: '',
    })

    useEffect(() => {
        const newTag = Tag[(props.actionType === 'CuratorAssignment' ? props.actionType : props.objectType)]
        const { icon, text, text2 } = GetActivityProperties(props.activity)
        // {/*console.log('icon, text, text2: ', icon, text, text2)*/}

        setActivity({
            ...activity,
            tag: newTag,
            icon: icon,
            text: text,
            text2: text2
        })
    }, [])

    return (
        <StyledListItem onMenuBar={props.onMenuBar} contrast={props.contrast}>
            {
                !props.onMenuBar &&
                <>

                    <ListItemAvatar>
                        <Avatar alt='user avatar' src={props.avatar ? props.avatar : noAvatar} />
                    </ListItemAvatar>
                    {getNotificationIcon(activity.icon)}

                </>
            }
            <ListItemText
                primary={
                    <div>
                        <span className={`tag-object ${GetObjectColor(activity.tag)}`}>
                            {activity.tag}
                        </span>
                        <span className="time-ago-span">&#32;· há {getTimeDifference(props.createdAt)}</span>
                    </div>
                }
                secondary={
                    <div>

                        <span style={props.contrast === "" ? { color: "#666" } : {color: "white"}}>

                            <Link to={{
                                pathname: props.ownerHref,
                                state: '0',
                            }} className="owner-name-a" >{props.ownerName}</Link> {activity.text} <Link to={props.recipientHref} className="recipient-name-a">{props.recipientName}</Link> {activity.text2}
                        </span>
                    </div>
                }
            />
        </StyledListItem>
    )

}

const StyledListItem = styled(ListItem)`
    padding : ${props => props.onMenuBar ? "8px 16px !important" : "20px 60px !important"};
    border-bottom : 1px solid #eee;
    display : flex;
    justify-content : flex-start;
    align-items : center;
    min-heigth : 40px;

    a {
        text-decoration : none !important;
    }

    .time-ago-span {
    	font-size : 12px;
        font-family : 'Lato', medium;
        color: ${props => props.contrast === '' ? "#787380" : "white"};
    }

    .owner-name-a {
        color: ${props => props.contrast === '' ? "#00bcd4" : "yellow"};
        text-decoration: ${props => props.contrast === "" ? "none" : "underline !important"};
    }

    .recipient-name-a {
    	cursor : pointer;
        color: ${props => props.contrast === '' ? "#337ab7" : "yellow"};
        text-decoration: ${props => props.contrast === "" ? "none" : "underline !important"};
    }

    .icon {
        padding-right : 10px;
        color: ${props => props.contrast === '' ? "#666" : "white"};
    }

    .tag-object {
        font-family: Roboto;
        font-style: normal;
        font-weight: 700;
        font-size: 12px;
        line-height: normal;
        text-align: center;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: #fff;
        height: -webkit-fit-content;
        height: -moz-fit-content;
        height: fit-content;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        border-radius: 10px;
        padding: 2px 4px;
    }

    .recurso-color {
        background-color: ${props => props.contrast === '' ? "orange" : ""};
        border: ${props => props.contrast === '' ? "" : "1px solid #d4d4d4"};
    }

    .colecao-color {
        background-color: ${props => props.contrast === '' ? "blue" : ""};
        border: ${props => props.contrast === '' ? "" : "1px solid #d4d4d4"};
    }

    .curadoria-color {
        background-color: ${props => props.contrast === '' ? "red" : ""};
        border: ${props => props.contrast === '' ? "" : "1px solid #d4d4d4"};
    }


`