CollectionCardFunction.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, useContext} from 'react';
import {Store} from '../Store.js'
import {apiDomain, apiUrl} from '../env';
import noAvatar from "../img/default_profile.png";
import Button from '@material-ui/core/Button';
import styled from 'styled-components'
import Slide from '@material-ui/core/Slide';
import Grid from '@material-ui/core/Grid';
import {StyledCard, CardDiv, CardReaDiv, Footer, LikeCounter, ButtonNoWidth, EnviadoPor, TagContainer} from './ResourceCardFunction.js'
import Rating from '@material-ui/lab/Rating';
import StarBorderIcon from '@material-ui/icons/StarBorder';
import FolderIcon from '@material-ui/icons/Folder';
import FavoriteIcon from '@material-ui/icons/Favorite';
import AddIcon from '@material-ui/icons/Add';
import CheckIcon from '@material-ui/icons/Check';
import LockIcon from '@material-ui/icons/Lock';
import ColCardOwnerOptions from './ColCardOwnerOptions.js'
import ColCardPublicOptions from './ColCardPublicOptions'
import {Link} from 'react-router-dom';
import axios from 'axios'
import {getAxiosConfig} from '../Components/HelperFunctions/getAxiosConfig'

export default function CollectionCardFunction (props) {
    const {state} = useContext(Store)

    // eslint-disable-next-line
    const [userAvatar] = useState(props.avatar ? (`${apiDomain}` + props.avatar) : noAvatar)
    const [userFollowingCol, toggleUserFollowingCol] = useState(props.followed)
    const handleToggleUserFollowingCol = () => {toggleUserFollowingCol(!userFollowingCol)}

    const [likesCount, setLikesCount] = useState(props.likeCount)
    const [liked, toggleLiked] = useState(props.liked)
    const handleLike = () => {
        let payload = {}
        let config = getAxiosConfig()

        axios.put( (`${apiUrl}/collections/` + props.id + '/like'),payload, config
        ).then(
            (response) => {
                if ( response.headers['access-token'] ) {
                    sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
                }
                toggleLiked(!liked)
                setLikesCount(response.data.count)
            },
            (error) => {console.log(error)}
        )
    }

    const [followingHover, handleFollowingHover] = useState(false)
    const toggleFollowingHover = (value) => {handleFollowingHover(value)}

    const [slideIn, setSlide] = useState(false)
    const controlSlide = () => {setSlide(!slideIn)}

    const handleFollow = () => {
        let config = getAxiosConfig()
        let payload = {}

        axios.put( (`${apiUrl}/collections/` + props.id + '/follow'),payload, config).then(
            (response) => {
                if ( response.headers['access-token'] ) {
                    sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
                }
                console.log(response.data)
                handleToggleUserFollowingCol()
            },
            (error) => {console.log(error)}
        )
    }

    const RenderFollowButton = () => {
        return (
            <FollowButton onClick={handleFollow}>
                <AddIcon/><span>SEGUIR</span>
            </FollowButton>
        )
    }

    const RenderFollowingButton = () => {
        return (
            <FollowingButton onMouseOver={() => toggleFollowingHover(true)}
                onMouseLeave={() => toggleFollowingHover(false)} onClick={handleFollow}>
                {
                    followingHover ?
                    (
                        [
                            <span>DEIXAR DE SEGUIR</span>
                        ]
                    )
                    :
                    (
                        [
                            <React.Fragment>
                                <CheckIcon/><span>SEGUINDO</span>
                            </React.Fragment>
                        ]
                    )
                }
            </FollowingButton>
        )
    }

    const SlideAnimationContent = () => {
        return (
            <SlideContentDiv>
                <div style={{display:"flex", flex:"1"}}>{/*marginBottom:10px*/}
                    <SlideAvatarDiv>
                        <img className="img" src={userAvatar} alt="user avatar"/>
                    </SlideAvatarDiv>
                    <EnviadoPor>
                        Enviado por:
                        <br/>
                        <p>{props.author}</p>
                    </EnviadoPor>
                </div>
                {
                props.tags &&
                <TagContainer>
                    <Grid container spacing={1} justify='safe' style={{height : "inherit"}}>
                    {
                        props.tags.map( (tag) =>
                            <Grid item key={tag.id}>
                                <span key={tag.id}>{tag.name}</span>
                            </Grid>
                        )
                    }
                    </Grid>
                </TagContainer>
                }
            </SlideContentDiv>
        )
    }

    return (
        <StyledCard>
            <CardDiv>
                <CardReaDiv>
                    <Header onMouseEnter={controlSlide} onMouseLeave={controlSlide}>
                        {/*slide animation and content*/}
                        <Slide direction="right" in={slideIn} timeout={300}>
                            <Link to={"/colecao-do-usuario/" + props.id} className="text">
                            {/* <a href={"/colecao-do-usuario/" + props.id} className="text"> */}
                                {SlideAnimationContent()}
                            </Link>
                        </Slide>
                        <Slide direction="left" in={!slideIn} timeout={700}>
                            <a href={"/colecao-do-usuario/" + props.id}>

                                        <UserInfo>
                                            <AvatarDiv>
                                                <img src={userAvatar} alt="user avatar"/>
                                            </AvatarDiv>
                                            <UserAndTitle>
                                                <span>{props.author}</span>
                                                <span className={"col-name"}>{props.name}</span>
                                            </UserAndTitle>
                                        </UserInfo>


                                <StyledGrid container direction="row">
                                    {
                                        props.thumbnails.map( (thumb) =>
                                            <Grid item xs={props.thumbnails <= 4 && props.thumbnails > 0 ? 12/props.thumbnails.length : 6}>
                                                <div style={{backgroundImage : `url(${ `${apiDomain}` + thumb})`, height : "100%", width : "100%", backgroundSize : "cover", backgroundPosition : "center"}}/>
                                            </Grid>
                                        )
                                    }
                                </StyledGrid>
                            </a>
                        </Slide>
                    </Header>

                    <Description> {/*renders rating, number of learning objects and likes count*/}
                        {
                            props.authorID !== state.currentUser.id &&
                            <Rating
                              name="customized-empty"
                              value={props.rating*10}
                              precision={0.5}
                              style={{color:"#666"}}
                              emptyIcon={<StarBorderIcon fontSize="inherit" />}
                            />
                        }

                        <Footer>
                            <Type>
                                <FolderIcon />
                                <span style={{fontWeight:"bold"}}>{props.thumbnails.length} </span>
                                <span>{props.thumbnails.length !== 1 ? "Recursos" : "Recurso"}</span>
                            </Type>
                            <LikeCounter>
                                <span>{likesCount}</span>
                                <ButtonNoWidth onClick={handleLike}>
                                    <FavoriteIcon style={{color : liked ? "red" : "#666" }}/>
                                </ButtonNoWidth>
                            </LikeCounter>
                        </Footer>
                    </Description>

                </CardReaDiv>

                {
                    props.authorID === state.currentUser.id ?
                    (
                        <CardReaFooter style={{justifyContent : "space-between"}}> {/*renders following/unfollow and follow button*/}
                            <Grid container>
                                <Grid item xs={6} style={{display : "flex", justifyContent : "center"}}>
                                    {
                                        props.privacy === 'private' &&
                                        <LockIcon style={{color : "#666"}}/>
                                    }
                                </Grid>
                                <Grid item xs={6} style={{display : "flex", justifyContent : "flex-end"}}>
                                    <ColCardOwnerOptions
                                        id={props.id}
                                        />
                                </Grid>
                            </Grid>
                        </CardReaFooter>
                    )
                    :
                    (
                        <CardReaFooter> {/*renders following/unfollow and follow button*/}
                        {
                            userFollowingCol ?
                            (
                                [
                                    RenderFollowingButton()
                                ]
                            )
                            :
                            (
                                [
                                    RenderFollowButton()
                                ]
                            )
                        }
                        <ColCardPublicOptions
                            id={props.id}
                            />
                        </CardReaFooter>
                    )
                }

            </CardDiv>
        </StyledCard>
    )
}

const SlideAvatarDiv = styled.div`
    vertical-align : middle;
    border : 0;

    img {
        height : 40px !important;
        width : 40px !important;
        border : 0;
        vertical-align : middle;
        border-radius : 50%;
    }
`

const SlideContentDiv = styled.div`
    background-color : #7e57c2;
    padding : 10px;
    width : 100%;
    height : 100%;
    position : absolute;
    display : flex;
    flex-direction : column;
`

const UserAndTitle = styled.div`
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 30px 10px 10px 10px;
    margin-top: -25px;
    background-color: rgba(0,0,0,.5);
    color: #fff;

    .col-name {
        padding-top: 5px;
        font-size: 17px;
        font-weight: 500;
        text-overflow: ellipsis;
        overflow: hidden;
        text-align: center;
        width: 100%;
    }
`

const AvatarDiv = styled.div`
    z-index : 5;
    overflow : hidden;

    img {
        border-radius : 50%;
        height : 70px;
        width : 70px;
        border : 2px solid #fff !important;
        background-color : #fff;
        box-shadow : 0 1px 3px rgba(0,0,0,.45);
    }
`

const UserInfo = styled.div`
    position : absolute;
    display : flex;
    flex-direction : column;
    width : 100%;
    height : 100%;
    justify-content : flex-end;
    align-items : center;

`

const CardReaFooter = styled.div`
    height : 60px;
    display : flex;
    justify-content : center;
    align-items : center;
    border-top : 1px solid #e5e5e5;

    .MuiSvgIcon-root {
        font-family: 'Material Icons';
        color : inherit;
        font-weight: normal;
        font-style: normal;
        font-size: 24px;
        line-height: 1;
        letter-spacing: normal;
        text-transform: none;
        display: inline-block;
        white-space: nowrap;
        word-wrap: normal;
        direction: ltr;
    }
`

const Type = styled.div`
    line-height : 1;
    font-size : .85em;

    .MuiSvgIcon-root {
        font-size : 21px;
        color : #673ab7;
        vertical-align : middle;
        padding-right : .4em;
    }
`

const StyledGrid = styled(Grid)`
    .MuiGrid-item {
        height : 136px;
        width 130px;
        background : #f9f9f9;
        border : 1px solid #f4f4f4;
        border-color : #f4f4f4;
    }
`

const Header = styled.div`
    display : flex;
    height : 230px;
    position : relative;
    overflow : hidden;
`

const Description = styled.div`
    display : flex;
    height : 60px
    background-color : #fff;
    flex-direction : column;
    justify-content: space-between;
    padding : 15px;
`
const FollowButton = styled(Button)`
    border : 2px solid #503096 !important;
    border-radius : 5px !important;
    margin : 10px !important;
    color :#503096 !important;
    min-width : 150px !important;
    min-height : 36px !important;
    text-align : center !important;
    vertical-align : middle !important;
    background : transparent !important;
    text-transform : uppercase !important;
    font-family : inherit !important;
    overflow : hidden !important;
    font-weight : normal !important;
    text-decoration : none !important;
    letter-spacing: .01em !important;
    white-space : nowrap !important;
    font-weight: 500;

    &:hover {
        background-color : rgba(158,158,158,0.2) !important;

    }

`
const FollowingButton = styled(Button)`
    border : 2px solid #503096 !important;
    border-radius : 5px !important;
    margin : 10px !important;
    color :#fff !important;
    min-width : 150px !important;
    min-height : 36px !important;
    text-align : center !important;
    vertical-align : middle !important;
    background-color : #503096 !important;
    text-transform : uppercase !important;
    font-family : inherit !important;
    overflow : hidden !important;
    font-weight : normal !important;
    text-decoration : none !important;
    letter-spacing: .01em !important;
    white-space : nowrap !important;
    font-weight: 500;

    &:hover {
        background-color : rgba(158,158,158,0.2) !important;
        color : #503096 !important;
        box-shadow : none !important;
    }

`