From c533565dc3377ddea4035e2f80b6acb6bd535008 Mon Sep 17 00:00:00 2001
From: Luis Felipe Risch <lfr20@inf.ufpr.br>
Date: Wed, 3 Feb 2021 12:41:30 -0300
Subject: [PATCH] add a tab to open the collection page in other browser tab
---
src/Components/ColCardPublicOptions.js | 209 +++++++++++++++----------
1 file changed, 127 insertions(+), 82 deletions(-)
diff --git a/src/Components/ColCardPublicOptions.js b/src/Components/ColCardPublicOptions.js
index 53c8e8a3..0974c292 100644
--- a/src/Components/ColCardPublicOptions.js
+++ b/src/Components/ColCardPublicOptions.js
@@ -16,92 +16,137 @@ 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} from 'react';
-import Button from '@material-ui/core/Button';
-import Menu from '@material-ui/core/Menu';
-import ListItemIcon from '@material-ui/core/ListItemIcon';
-import MenuItem from '@material-ui/core/MenuItem';
-import OpenIcon from '@material-ui/icons/OpenInNew';
-import {Link} from 'react-router-dom'
-import MoreVertIcon from '@material-ui/icons/MoreVert';
-import styled from 'styled-components'
-import ErrorIcon from '@material-ui/icons/Error';
-import ReportModal from './ReportModal.js'
-import {getAxiosConfig} from '../Components/HelperFunctions/getAxiosConfig'
-import axios from 'axios'
-import {apiUrl} from '../env';
-
-export default function ColCardPublicOptions (props) {
- const [anchorEl, setAnchorEl] = React.useState(null);
-
- function handleClick(event) {
- setAnchorEl(event.currentTarget);
- }
-
- function handleClose() {
- setAnchorEl(null);
- }
-
- const [reportModalOpen, toggleReportModal] = useState(false)
- const handleReportModal = (value) => {toggleReportModal(value)}
-
- const handleUnfollow = () => {
- let config = getAxiosConfig()
- let payload = {}
+import React, { useState } from "react";
+import Button from "@material-ui/core/Button";
+import Menu from "@material-ui/core/Menu";
+import ListItemIcon from "@material-ui/core/ListItemIcon";
+import MenuItem from "@material-ui/core/MenuItem";
+import OpenIcon from "@material-ui/icons/OpenInNew";
+import { Link } from "react-router-dom";
+import MoreVertIcon from "@material-ui/icons/MoreVert";
+import styled from "styled-components";
+import ErrorIcon from "@material-ui/icons/Error";
+import ReportModal from "./ReportModal.js";
+import { getAxiosConfig } from "../Components/HelperFunctions/getAxiosConfig";
+import axios from "axios";
+import ReportProblemIcon from '@material-ui/icons/ReportProblem';
+import OpenInBrowserIcon from '@material-ui/icons/OpenInBrowser';
+import { apiUrl } from "../env";
+
+export default function ColCardPublicOptions(props) {
+ const [anchorEl, setAnchorEl] = React.useState(null);
+
+ function handleClick(event) {
+ setAnchorEl(event.currentTarget);
+ }
- axios.put( (`${apiUrl}/collections/` + props.id + '/follow'),payload, config).then(
- (response) => {
- console.log(response.data)
- if ( response.headers['access-token'] ) {
- sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
- }
- }, (error) => {console.log(error)})
- }
+ function handleClose() {
+ setAnchorEl(null);
+ }
- return (
- <>
- <ReportModal open={reportModalOpen} handleClose={() => handleReportModal(false)}
- form="colecao" complainableId={props.id}
- complainableType={"Collection"}
- />
- <div style={{fontSize: "12px"}}>
- <Button aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick} style={{color : "#666"}}>
- <MoreVertIcon style={{color : "inherit"}}/>
- </Button>
- <Menu
- id="simple-menu"
- anchorEl={anchorEl}
- keepMounted
- open={Boolean(anchorEl)}
- onClose={handleClose}
- >
- <StyledMenuItem>
- <Link to={"/colecao-do-usuario/" + props.id}>
- <ListItemIcon><OpenIcon /></ListItemIcon>Abrir
- </Link>
- </StyledMenuItem>
-
- <StyledMenuItem onClick={handleUnfollow}>
- <ListItemIcon><ErrorIcon /></ListItemIcon>Deixar de Seguir
- </StyledMenuItem>
-
- <StyledMenuItem onClick={() => {handleReportModal(true)}}>
- <ListItemIcon><ErrorIcon /></ListItemIcon>Reportar
- </StyledMenuItem>
- </Menu>
- </div>
+ const [reportModalOpen, toggleReportModal] = useState(false);
+ const handleReportModal = (value) => {
+ toggleReportModal(value);
+ };
+
+ const handleUnfollow = () => {
+ let config = getAxiosConfig();
+ let payload = {};
+
+ axios
+ .put(`${apiUrl}/collections/` + props.id + "/follow", payload, config)
+ .then(
+ (response) => {
+ console.log(response.data);
+ if (response.headers["access-token"]) {
+ sessionStorage.setItem(
+ "@portalmec/accessToken",
+ response.headers["access-token"]
+ );
+ }
+ },
+ (error) => {
+ console.log(error);
+ }
+ );
+ };
+
+ return (
+ <>
+ <ReportModal
+ open={reportModalOpen}
+ handleClose={() => handleReportModal(false)}
+ form="colecao"
+ complainableId={props.id}
+ complainableType={"Collection"}
+ />
+ <div style={{ fontSize: "12px" }}>
+ <Button
+ aria-controls="simple-menu"
+ aria-haspopup="true"
+ onClick={handleClick}
+ style={{ color: "#666" }}
+ >
+ <MoreVertIcon style={{ color: "inherit" }} />
+ </Button>
+ <Menu
+ id="simple-menu"
+ anchorEl={anchorEl}
+ keepMounted
+ open={Boolean(anchorEl)}
+ onClose={handleClose}
+ >
+ <StyledMenuItem>
+ <Link to={"/colecao-do-usuario/" + props.id}>
+ <ListItemIcon>
+ <OpenIcon />
+ </ListItemIcon>
+ Abrir
+ </Link>
+ </StyledMenuItem>
+
+ <StyledMenuItem
+ onClick={() =>
+ window.open("/colecao-do-usuario/" + props.id, "_blank")
+ }
+ >
+ <ListItemIcon>
+ <OpenInBrowserIcon />
+ </ListItemIcon>
+ Abrir em nova guia
+ </StyledMenuItem>
+
+ <StyledMenuItem onClick={handleUnfollow}>
+ <ListItemIcon>
+ <ErrorIcon />
+ </ListItemIcon>
+ Deixar de Seguir
+ </StyledMenuItem>
+
+ <StyledMenuItem
+ onClick={() => {
+ handleReportModal(true);
+ }}
+ >
+ <ListItemIcon>
+ <ReportProblemIcon />
+ </ListItemIcon>
+ Reportar
+ </StyledMenuItem>
+ </Menu>
+ </div>
</>
- )
+ );
}
export const StyledMenuItem = styled(MenuItem)`
- color : #666 !important;
+ color: #666 !important;
- .MuiSvgIcon-root {
- vertical-align : middle !important;
- }
- a {
- text-decoration : none !important;
- color : #666 !important;
- }
-`
+ .MuiSvgIcon-root {
+ vertical-align: middle !important;
+ }
+ a {
+ text-decoration: none !important;
+ color: #666 !important;
+ }
+`;
--
GitLab