Fixed the menu of the card

src/Components/ResourceCardOptions.js

@@ -16,8 +16,8 @@ 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, {useContext, useState} from 'react';
-import {Store} from '../Store.js'
+import React, { useContext, useState } from 'react';
+import { Store } from '../Store.js'
 import styled from 'styled-components'
 import Button from '@material-ui/core/Button';
 import Menu from '@material-ui/core/Menu';
@@ -27,16 +27,22 @@ import MoreVertIcon from '@material-ui/icons/MoreVert';
 import OpenIcon from '@material-ui/icons/OpenInNew';
 import ReportIcon from '@material-ui/icons/Error';
 import ReportModal from './ReportModal.js'
-import {Link} from 'react-router-dom'
+import { Link } from 'react-router-dom'
 import DownloadIcon from '@material-ui/icons/CloudDownload';
 import ShareIcon from '@material-ui/icons/Share';
 import AddIcon from '@material-ui/icons/CreateNewFolder';
 import GuardarModal from './GuardarModal'
 import ShareModal from './ShareModal'
 import SnackbarComponent from './SnackbarComponent'
-
-export default function ResourceCardOptions (props) {
-    const {state} = useContext(Store)
+import OpenInBrowserIcon from '@material-ui/icons/OpenInBrowser';
+import Tooltip from '@material-ui/core/Tooltip';
+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 ResourceCardOptions(props) {
+    const { state } = useContext(Store)
     const [anchorEl, setAnchorEl] = React.useState(null);
 
     function handleClick(event) {
@@ -60,8 +66,8 @@ export default function ResourceCardOptions (props) {
 
     const [saveToCol, toggleSave] = useState(false)
     const handleGuardar = () => {
-        if(state.currentUser.id === '') {
-            console.log('abrir login modal');
+        if (!state.currentUser.id) {
+            handleLogin();
         }
         else {
             toggleSave(true);
@@ -78,8 +84,8 @@ export default function ResourceCardOptions (props) {
     const [shareOpen, toggleShare] = useState(false)
 
     const handleShare = () => {
-        if(state.currentUser.id === '') {
-            console.log('abrir login modal');
+        if (!state.currentUser.id) {
+            handleLogin()
         }
         else {
             toggleShare(true);
@@ -87,65 +93,109 @@ export default function ResourceCardOptions (props) {
         handleClose()
     }
     const getShareablePageLink = () => {
-        return (window.location.href + "/recurso/" + props.learningObjectId)
+        return (window.origin + "/recurso/" + props.learningObjectId)
+    }
+
+    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 [snackbarOpen, toggleSnackbar] = useState(false)
+    const [signUpOpen, setSignUp] = useState(false)
+    const [loginOpen, setLogin] = useState(false)
+    const [successfulLoginOpen, handleSuccessfulLogin] = useState(false)
 
     return (
-        <React.Fragment>
-        <ReportModal open={reportModal} handleClose={() => handleModalReportar(false)}
-            form="recurso" complainableId={props.learningObjectId}
-            complainableType={"LearningObject"}
-            {...props}
-        />
-        <GuardarModal open={saveToCol} handleClose={() => {toggleSave(false)}}
-            thumb={props.thumb} title={props.title} recursoId={props.learningObjectId}
-        />
-        <ShareModal open={shareOpen} handleClose={() => {toggleShare(false)}}
-            thumb={props.thumb} title={props.title} link={getShareablePageLink()}
-        />
-        <SnackbarComponent snackbarOpen={snackbarOpen} severity={"info"} handleClose={() => {toggleSnackbar(false)}} text={"Baixando o Recurso... Lembre-se de relatar sua experiência após o uso do Recurso!"}
-            />
-        <div style={{fontSize: "12px", display : "flex", flexDirection : "column", justifyContent : "center"}}>
-            <ButtonNoWidth aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick} style={{color : "#666"}}>
-                <MoreVertIcon style={{color : "#666"}}/>
-            </ButtonNoWidth>
-            <Menu
-                id="simple-menu"
-                anchorEl={anchorEl}
-                keepMounted
-                open={Boolean(anchorEl)}
-                onClose={handleClose}
-            >
-                <StyledMenuItem onClick={handleClose}>
-                    <Link to={"/recurso/" + props.learningObjectId}>
-                        <ListItemIcon><OpenIcon /></ListItemIcon>Abrir
-                    </Link>
-                </StyledMenuItem>
-
-                {
-                    props.downloadableLink &&
-                    <StyledMenuItem onClick={() => {enableDownload(); handleClose()}}>
-                        <ListItemIcon><DownloadIcon /></ListItemIcon>Baixar
-                    </StyledMenuItem>
-                }
-
-                <StyledMenuItem onClick={handleShare}>
-                    <ListItemIcon><ShareIcon /></ListItemIcon>Compartilhar
-                </StyledMenuItem>
-
-                <StyledMenuItem onClick={handleGuardar}>
-                    <ListItemIcon><AddIcon /></ListItemIcon>Guardar
-                </StyledMenuItem>
-
-                <StyledMenuItem onClick={() => {handleModalReportar(true); handleClose()}}>
-                    <ListItemIcon><ReportIcon /></ListItemIcon>Reportar
-                </StyledMenuItem>
-            </Menu>
-        </div>
-    </React.Fragment>
-  );
+        <>
+
+            <React.Fragment>
+                <ReportModal open={reportModal} handleClose={() => handleModalReportar(false)}
+                    form="recurso" complainableId={props.learningObjectId}
+                    complainableType={"LearningObject"}
+                    {...props}
+                />
+                <GuardarModal open={saveToCol} handleClose={() => { toggleSave(false) }}
+                    thumb={props.thumb} title={props.title} recursoId={props.learningObjectId}
+                />
+                <ShareModal open={shareOpen} handleClose={() => { toggleShare(false) }}
+                    thumb={props.thumb} title={props.title} link={getShareablePageLink()}
+                />
+                <SnackbarComponent snackbarOpen={snackbarOpen} severity={"info"} handleClose={() => { toggleSnackbar(false) }} text={"Baixando o Recurso... Lembre-se de relatar sua experiência após o uso do Recurso!"}
+                />
+                <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>
+                <div style={{ fontSize: "12px", display: "flex", flexDirection: "column", justifyContent: "center" }}>
+                    <ButtonNoWidth aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick} style={{ color: "#666" }}>
+                        <MoreVertIcon style={{ color: "#666" }} />
+                    </ButtonNoWidth>
+                    <Menu
+                        id="simple-menu"
+                        anchorEl={anchorEl}
+                        keepMounted
+                        open={Boolean(anchorEl)}
+                        onClose={handleClose}
+                    >
+                        <Tooltip title="Não preserva filtro" arrow>
+                            <StyledMenuItem onClick={handleClose}>
+                                <Link to={"/recurso/" + props.learningObjectId}>
+                                    <ListItemIcon><OpenIcon /></ListItemIcon>Abrir
+                                </Link>
+                            </StyledMenuItem>
+                        </Tooltip>
+
+                        <Tooltip title="Preserva filtro" arrow>
+                            <StyledMenuItem onClick={() => window.open("/recurso/" + props.learningObjectId, "_blank")}>
+                                <ListItemIcon><OpenInBrowserIcon /></ListItemIcon> Abrir em nova guia
+                            </StyledMenuItem>
+                        </Tooltip>
+
+                        {
+                            props.downloadableLink &&
+                            <StyledMenuItem onClick={() => { enableDownload(); handleClose() }}>
+                                <ListItemIcon><DownloadIcon /></ListItemIcon>Baixar
+                            </StyledMenuItem>
+                        }
+
+                        <StyledMenuItem onClick={handleShare}>
+                            <ListItemIcon><ShareIcon /></ListItemIcon>Compartilhar
+                        </StyledMenuItem>
+
+                        <StyledMenuItem onClick={handleGuardar}>
+                            <ListItemIcon><AddIcon /></ListItemIcon>Guardar
+                        </StyledMenuItem>
+
+                        <StyledMenuItem onClick={() => { handleModalReportar(true); handleClose() }}>
+                            <ListItemIcon><ReportIcon /></ListItemIcon>Reportar
+                        </StyledMenuItem>
+
+                    </Menu>
+                </div>
+            </React.Fragment>
+        </>
+    );
 }
 
 const ButtonNoWidth = styled(Button)`