ButtonGuardarColecao.js

import React, { useState, useContext } from 'react'
import { Store } from '../Store.js'
import Button from '@material-ui/core/Button';
import styled from 'styled-components'
import CreateNewFolderIcon from '@material-ui/icons/CreateNewFolder';
import GuardarModal from './GuardarModal'
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 ButtonGuardarColecao(props) {
    const { state } = useContext(Store)
    const [saveToCol, toggleSave] = useState(false)
    const handleGuardar = () => {
        if (!state.currentUser.id) {
            handleLogin()
        }
        else {
            toggleSave(true);
        }
    }

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

    const [signUpOpen, setSignUp] = useState(false)
    const [loginOpen, setLogin] = useState(false)
    const [successfulLoginOpen, handleSuccessfulLogin] = useState(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>
            <GuardarModal contrast={props.contrast} open={saveToCol} handleClose={() => { toggleSave(false) }}
                thumb={props.thumb} title={props.title} recursoId={props.learningObjectId}
            /> 
            <StyledButton onClick={handleGuardar} className={`${props.contrast}LinkColor`}
                style={props.contrast === "" ? {border: "2px solid #f07e05", borderRadius : "5px", color :"#f07e05"} : {border: "1px solid white", borderRadius : "5px", color :"#f07e05"}}
            >
                <CreateNewFolderIcon className={`${props.contrast}IconColor`}/><span>GUARDAR</span>
            </StyledButton>
        </>
    )
}

const StyledButton = styled(Button)`
    background-color : transparent !important;
    font-size : 14px important;
    font-weight : 500 !important;

    .MuiSvgIcon-root {
        font-size : 24px;
    }

    &:hover {
        color: rgb(107, 35, 142);
    }
`