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

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

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 className={`${props.contrast}IconColor`}/><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 className={`${props.contrast}IconColor`}/><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 contrast={props.contrast} open={signUpOpen} handleClose={handleSignUp} openLogin={handleLogin}
            />
            <LoginModal contrast={props.contrast} 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={props.contrast === "" ? {} : {color: "white"}}
                                name="customized-empty"
                                value={props.rating}
                                readOnly
                                emptyIcon={<StarBorderIcon className={`${props.contrast}Text`} 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 className={`${props.contrast}IconColor`} />
                                }
                                </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;

`