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, useEffect } from 'react';
import { Store } from '../Store.js'
import { apiDomain } from '../env';
import noAvatar from "../img/default_profile.png";
import Button from '@material-ui/core/Button';
import styled from 'styled-components'
import Grid from '@material-ui/core/Grid';
import { StyledCard, CardDiv, CardReaDiv, Footer, LikeCounter, ButtonNoWidth, EnviadoPor, TagContainer, HeaderContainer, AvatarDiv } 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 { putRequest } from '../Components/HelperFunctions/getAxiosConfig'
import SignUpModal from './SignUpModal'
import LoginModal from './LoginModal.js'
import Snackbar from '@material-ui/core/Snackbar';
import MuiAlert from '@material-ui/lab/Alert';

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 [name, setName] = useState(props.name)
    const changeColName = (newName) => { setName(newName) }

    const [privacy, setPrivacy] = useState(props.privacy)
    const changeColPrivacy = (newPrivacy) => { setPrivacy(newPrivacy) }

    const [likesCount, setLikesCount] = useState(props.likeCount)
    const [liked, toggleLiked] = useState(props.liked)

    const [signUpOpen, setSignUp] = useState(false)
    const [loginOpen, setLogin] = useState(false)
    const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)


    function handleSuccessLike(data) {
        toggleLiked(!liked)
        setLikesCount(data.count)
    }
    const handleLike = () => {
        if (state.currentUser.id)
            putRequest(`/collections/${props.id}/like`, {}, handleSuccessLike, (error) => { console.log(error) })
        else
            handleLogin()
    }

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

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

    function handleSuccessFollow(data) {
        handleToggleUserFollowingCol()
    }
    const handleFollow = () => {
        if (state.currentUser.id)
            putRequest(`/collections/${props.id}/follow`, {}, handleSuccessFollow, (error) => { console.log(error) })
        else
            handleLogin()
    }

    const RenderFollowButton = () => {
        return (
            <FollowButton className={`${props.contrast}LinkColor`} style={props.contrast === "" ? { border: "2px solid #503096", borderRadius: "5px", color: "#503096" } : { border: "1px solid white", borderRadius: "5px", color: "#503096" }} onClick={handleFollow}>
                <AddIcon /><span>SEGUIR</span>
            </FollowButton>
        )
    }

    useEffect(() => {
        if (!state.currentUser.id) {
            toggleLiked(false);
            toggleUserFollowingCol(false);
        }
    }, [state.currentUser.id])

    const RenderFollowingButton = () => {
        return (
            <FollowingButton className={`${props.contrast}LinkColor`} style={props.contrast === "" ? { border: "2px solid #503096", borderRadius: "5px", color: "#fff", backgroundColor: "#503096" } : { border: "1px solid white", borderRadius: "5px", color: "#503096" }} 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 = (contrast) => {
        return (
            <SlideContentDiv style={contrast === '' ? { backgroundColor: "#7e57c2" } : { backgroundColor: "inherit" }}>
                <HeaderContainer container="row" justify="flex-start" alignItems="center">
                    <AvatarDiv item xs={2}>
                        <img className="img" src={userAvatar} alt="user avatar" />
                    </AvatarDiv>
                    <EnviadoPor item xs={10}>
                        Enviado por:
                        <br />
                        <p>{props.author}</p>
                    </EnviadoPor>
                </HeaderContainer>
                {
                    props.tags ?
                        <TagContainer container direction="row">
                            {
                                props.tags.map((tag) =>
                                    <Grid item key={tag.id}>
                                        <span className={`${props.contrast}BackColor ${props.contrast}Text`}>{tag.name}</span>
                                    </Grid>
                                )
                            }
                        </TagContainer> :
                        null
                }
            </SlideContentDiv>
        )
    }

    const handleSignUp = () => {
        setSignUp(!signUpOpen)
    }

    const handleLogin = () => {
        setLogin(!loginOpen)
    }

    function Alert(props) {
        return <MuiAlert elevation={6} variant="filled" {...props} />;
    }

    function toggleLoginSnackbar(reason) {
        if (reason === 'clickaway') {
            return;
        }
        handleSuccessfulLogin(false);
    }

    return (
        <>
            <SignUpModal open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin}
            />
            <LoginModal open={loginOpen} handleClose={() => setLogin(false)} openSignUp={handleSignUp}
                openSnackbar={() => { handleSuccessfulLogin(true) }}
            />
            <Snackbar open={successfulLoginOpen} autoHideDuration={1000} onClose={toggleLoginSnackbar}
                anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
            >
                <Alert severity="success" style={{ backgroundColor: "#00acc1" }}>Você está conectado(a)!</Alert>
            </Snackbar>
            <StyledCard>
                <CardDiv className={`${props.contrast}Border`}>
                    <CardReaDiv className={`${props.contrast}BackColor`}>
                        <Link to={"/colecao-do-usuario/" + props.id}>
                            <Header onMouseEnter={controlSlide} onMouseLeave={controlSlide}>
                                <div className={`slideContentLinkBeforeActive${slideIn}`} style={{ width: '272.5px', height: '230px' }}>
                                    <UserInfo style={{ width: '272.5px' }}>
                                        {/* I(Luis) dont know why, but if i use styled components, sometimes the avatar will be deconfigured */}
                                        <img src={userAvatar} alt="user avatar" style={{
                                            height: "70px", width: "70px", borderRadius: "50%",
                                            zIndex: 1, border: "2px solid white",
                                            boxShadow: "0 1px 3px rgba(0,0,0,.45)"
                                        }} />
                                        <UserAndTitle>
                                            <span>{props.author}</span>
                                            <span className={"col-name"}>{name}</span>
                                        </UserAndTitle>
                                    </UserInfo>
                                    <StyledGrid container direction="row" style={{ width: '272.5px' }}>
                                        {
                                            props.thumbnails.map((thumb) =>
                                                <Grid item xs={props.thumbnails.length <= 3 && props.thumbnails.length > 0 ? 12 / props.thumbnails.length : 6}>
                                                    <div style={{ backgroundImage: `url(${`${apiDomain}` + thumb})`, height: `${props.thumbnails.length <= 3 ? '230px' : '100%'}`, width: "100%", backgroundSize: "cover", backgroundPosition: "center" }} />
                                                </Grid>
                                            )
                                        }
                                    </StyledGrid>
                                </div>
                                {
                                    <div className={`slideContentLinkAfterActive${slideIn}`}>
                                        <div className="Text" style={{ width: "100%" }}>
                                            {SlideAnimationContent(props.contrast)}
                                        </div>
                                    </div>
                                }
                            </Header>
                        </Link>

                        <Description className={`${props.contrast}BackColor`}> {/*renders rating, number of learning objects and likes count*/}
                            {
                                props.authorID !== state.currentUser.id &&
                                <Rating
                                    style={state.contrast === "" ? { color: "#666" } : { color: "yellow" }}
                                    name="customized-empty"
                                    value={props.rating}
                                    readOnly
                                    emptyIcon={<StarBorderIcon style={state.contrast === "" ? { color: "#666" } : { color: "yellow" }} fontSize="inherit" />}
                                />
                            }

                            <Footer className={`${props.contrast}Text`}>
                                <Type>
                                    <FolderIcon style={props.contrast === "" ? {} : { color: "white" }} />
                                    <span style={{ fontWeight: "bold" }}>{props.collections ? props.collections.length : 0} </span>
                                    <span>{props.collections ? props.collections.length !== 1 ? "Recursos" : "Recurso" : 0}</span>
                                </Type>
                                <LikeCounter>
                                    <span>{likesCount}</span>
                                    <ButtonNoWidth onClick={handleLike}>
                                        <FavoriteIcon className={`${props.contrast}LinkColor`} style={props.contrast === "" ? { color: liked ? "red" : "#666" } : { color: liked ? "red" : "white" }} />
                                    </ButtonNoWidth>
                                </LikeCounter>
                            </Footer>
                        </Description>

                    </CardReaDiv>

                    {
                        props.authorID === state.currentUser.id ?
                            (
                                <CardReaFooter className={`${props.contrast}BackColor`} style={{ justifyContent: "space-between" }}> {/*renders following/unfollow and follow button*/}
                                    <Grid container>
                                        <Grid item xs={6} style={{ display: "flex", justifyContent: "center" }}>
                                            {
                                                privacy === 'private' &&
                                                <LockIcon style={{ color: "#666" }} />
                                            }
                                        </Grid>
                                        <Grid item xs={6} style={{ display: "flex", justifyContent: "flex-end" }}>
                                            <ColCardOwnerOptions
                                                contrast={props.contrast}
                                                id={props.id}
                                                changeColName={changeColName}
                                                changeColPrivacy={changeColPrivacy}
                                                removeColl={props.removeColl}
                                            />
                                        </Grid>
                                    </Grid>
                                </CardReaFooter>
                            )
                            :
                            (
                                <CardReaFooter className={`${props.contrast}BackColor`}> {/*renders following/unfollow and follow button*/}
                                    <Grid container>
                                        <Grid item xs={2}></Grid>
                                        <Grid item xs={8} style={{ display: "flex", justifyContent: "center" }}>
                                            {
                                                userFollowingCol ?
                                                    (
                                                        [
                                                            RenderFollowingButton()
                                                        ]
                                                    )
                                                    :
                                                    (
                                                        [
                                                            RenderFollowButton()
                                                        ]
                                                    )
                                            }
                                        </Grid>
                                        <Grid item xs={2} style={{ display: "flex", justifyContent: "flex-end" }}>
                                            <ColCardPublicOptions
                                                contrast={props.contrast}
                                                id={props.id}
                                                userFollowingCol={userFollowingCol}
                                                handleLike={handleLike}
                                                handleFollow={handleFollow}
                                                liked={liked}
                                                handleLogin={handleLogin}
                                                currentUserId={state.currentUser.id}
                                            />
                                        </Grid>
                                    </Grid>
                                </CardReaFooter>
                            )
                    }

                </CardDiv>
            </StyledCard>
        </>
    )
}



const SlideContentDiv = styled.div`
    padding : 10px;
    width : 272.5px;
    height : 230px;
`

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 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;

    .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;
    }
`

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)`
    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;

`
const FollowingButton = styled(Button)`
    text-align : center !important;
    vertical-align : middle !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;

`