Firulas.js

import React, { useState, useContext } from 'react';
import { Store } from '../Store'
import styled from 'styled-components'
import Rating from '@material-ui/lab/Rating';
import StarBorderIcon from '@material-ui/icons/StarBorder';
import { LikeCounter, ButtonNoWidth } from '../Components/ResourceCardFunction.js'
import FavoriteIcon from '@material-ui/icons/Favorite';
import { putRequest } from './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 Firulas(props) {
    const { state } = useContext(Store);
    const [liked, toggleLiked] = useState(props.liked)
    const [likesCount, setLikesCount] = useState(props.likesCount)

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

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

    function handleSuccessLike(data) {
        toggleLiked(!liked)
        setLikesCount(data.count)
    }

    const handleLike = () => {
        if (!state.currentUser.id) {
            handleLogin()
        }
        else {
            const url = `/learning_objects/${props.recursoId}/like/`

            putRequest(url, {}, handleSuccessLike, (error) => { console.log(error) })
        }
    }

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

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

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

    return (
        <ConteinerFirulas style={props.contrast === "" ? {} : {color: "white"}}>
            <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>
            <Rating
                className={`${props.contrast}IconColor`}
                name="customized-empty"
                value={props.rating}
                readOnly
                emptyIcon={<StarBorderIcon className={`${props.contrast}IconColor`} fontSize="inherit"/>}
            />
            <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>
        </ConteinerFirulas>
    )
}

const ConteinerFirulas = styled.div`
    margin-bottom : 30px;
    display : inline-flex;
    padding-bottom : 10px;
`