diff --git a/src/Components/CollectionAuthor.js b/src/Components/CollectionAuthor.js
index c81f227aadb22527f80b95f72cd226920a63379f..c6c299cf08bba817e4a14e684609084840c44f4b 100644
--- a/src/Components/CollectionAuthor.js
+++ b/src/Components/CollectionAuthor.js
@@ -29,17 +29,17 @@ export default function CollectionAuthor(props) {
direction="column"
justify="center"
alignItems="center">
- {props.imgsrc ?
+ {props.imgsrc ?
<UserLink
to={`/usuario-publico/${props.author_id}`}
- >
- <UserAvatar src={props.imgsrc}/>
+ >
+ <UserAvatar src={props.imgsrc} />
</UserLink>
:
- <CircularProgress color="secondary"/>
+ <CircularProgress color="secondary" />
}
<InfoText>Coleção organizada por:</InfoText>
- {props.name ?
+ {props.name ?
<UserLink to={`/usuario-publico/${props.author_id}`} >
<UserName>{props.name}</UserName>
</UserLink>
diff --git a/src/Components/CollectionDowloadButton.js b/src/Components/CollectionDowloadButton.js
index d7820da26c20262c585c60eff2723a2d5bc78b52..bda45946d26e9fb373ba79d5e006d4cacb5bb495 100644
--- a/src/Components/CollectionDowloadButton.js
+++ b/src/Components/CollectionDowloadButton.js
@@ -5,29 +5,62 @@ import Button from '@material-ui/core/Button';
import styled from 'styled-components';
import { apiUrl, apiDomain } from '../env';
import { getRequest } from './HelperFunctions/getAxiosConfig'
+import Snackbar from '@material-ui/core/Snackbar';
+import MuiAlert from '@material-ui/lab/Alert';
+function Alert(props) {
+ return <MuiAlert elevation={6} variant="filled" {...props} />;
+}
const DowloadButton = (props) => {
const [download_url, setDownloadUrl] = useState('');
+ const [snackInfo, setSnackInfo] = useState({
+ open: false,
+ text: "",
+ severity: "",
+ });
useEffect(() => {
- const body = {
- "package": {
- "object": [{ "type": "Collection", "id": props.id }]
- }
- };
- axios
- .post(apiUrl + '/package', body)
- .catch(err => {
- if (err.response && err.response.status === 302) {
- setDownloadUrl(apiDomain + '/' + err.response.data.url);
+ if (props.id && props.id !== "0") {
+ const body = {
+ "package": {
+ "object": [{ "type": "Collection", "id": props.id }]
}
- });
+ };
+ axios
+ .post(apiUrl + '/package', body)
+ .catch(err => {
+ if (err.response && err.response.status === 302) {
+ setDownloadUrl(apiDomain + '/' + err.response.data.url);
+ }
+ });
+ }
+
}, [props.id]);
- const handleDowloadCollection = () => {
+ const handleDowloadCollection = (e) => {
// there is no error controller here because the router
///:type/:id/download is always returning error
+ e.preventDefault()
+
+ let snackInfo = {}
+ if (download_url) {
+ window.open(download_url, '_blank')
+ snackInfo = {
+ open: true,
+ text: "A coleção está sendo baixada...",
+ severity: "success",
+ }
+ handleSnackInfo(snackInfo)
+ }
+ else {
+ snackInfo = {
+ open: true,
+ text: "Não foi possível baixar a coleção",
+ severity: "warning",
+ }
+ handleSnackInfo(snackInfo)
+ }
getRequest(
`/collections/${props.id}/download`,
(data, header) => {
@@ -37,18 +70,40 @@ const DowloadButton = (props) => {
)
}
+ const handleSnackInfo = (info) => {
+ setSnackInfo({ ...info })
+ }
+
+ const handleCloseSnack = () => {
+ const snackInfo = {
+ open: false,
+ text: "",
+ severity: "",
+ }
+ handleSnackInfo(snackInfo)
+ }
+
return (
<>
- <DownloadAnchor href={download_url} >
- <DownloadButton
- variant="outlined"
- color="primary"
- startIcon={<GetAppIcon fontSize="large" />}
- size="small"
- >
- <ButtonText onClick={handleDowloadCollection}>Baixar Coleção</ButtonText>
- </DownloadButton>
- </DownloadAnchor>
+ <Snackbar
+ open={snackInfo.open}
+ autoHideDuration={6000}
+ onClose={handleCloseSnack}
+ anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+ >
+ <Alert onClose={handleCloseSnack} severity={snackInfo.severity}>
+ {snackInfo.text}
+ </Alert>
+ </Snackbar>
+ <DownloadButton
+ variant="outlined"
+ color="primary"
+ startIcon={<GetAppIcon fontSize="large" />}
+ size="small"
+ onClick={handleDowloadCollection}
+ >
+ <ButtonText>Baixar Coleção</ButtonText>
+ </DownloadButton>
</>
)
}
@@ -62,8 +117,5 @@ const DownloadButton = styled(Button)`
padding-right: 10;
width: 250px;
`
-const DownloadAnchor = styled.a`
- text-decoration: none !important;
-`
export default DowloadButton;
diff --git a/src/Components/FloatingDownloadButton.js b/src/Components/FloatingDownloadButton.js
index 96537210b046c1d0fc841ec4016e16c52e12c3c1..dcd9db430c7d96705bd4dc91e5295710a5642c21 100644
--- a/src/Components/FloatingDownloadButton.js
+++ b/src/Components/FloatingDownloadButton.js
@@ -16,54 +16,24 @@ 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 React from 'react';
import styled from 'styled-components';
import GetAppIcon from '@material-ui/icons/GetApp';
import Fab from '@material-ui/core/Fab';
-import Snackbar from '@material-ui/core/Snackbar';
-import MuiAlert from '@material-ui/lab/Alert';
-
-function Alert(props) {
- return <MuiAlert elevation={6} variant="filled" {...props} />;
-}
-
-export default function FloatingDownloadButton (props) {
- const [snackbar, setSnackbar] = useState(false);
-
- const handleClickDownload = () => {
- if (props.empty_selection)
- setSnackbar(true);
- }
-
- const handleClose = () => {
- setSnackbar(false);
- }
+export default function FloatingDownloadButton(props) {
return (
- <div>
- <DownloadAnchor href={props.url} alt="Baixar recursos selecionados">
- <FloatingDownload
- color="primary"
- aria-label="download"
- onClick={handleClickDownload}
- >
- <GetAppIcon />
- </FloatingDownload>
- </DownloadAnchor>
- <Snackbar open={snackbar} autoHideDuration={6000} onClose={handleClose}>
- <Alert onClose={handleClose} severity="alert">
- Selecione recursos para poder baixar
- </Alert>
- </Snackbar>
- </div>
+ <FloatingDownload
+ color="primary"
+ aria-label="download"
+ onClick={props.handleDownloadSelection}
+ >
+ <GetAppIcon />
+ </FloatingDownload>
);
}
-const DownloadAnchor=styled.a`
- text-decoration: none !important;
-`
-
-const FloatingDownload=styled(Fab)`
+const FloatingDownload = styled(Fab)`
position: fixed !important;
right: 15px !important;
bottom: 25px !important;
diff --git a/src/Components/ResourceList.js b/src/Components/ResourceList.js
index 4f2572f4fae05fe6ee995918d48a4584af4b0264..e32176c7166f62820cf88517c7f8f5dc8faf503c 100644
--- a/src/Components/ResourceList.js
+++ b/src/Components/ResourceList.js
@@ -41,7 +41,11 @@ export default function ResourceList(props) {
null, { length: props.resources.length }).map(i => false));
const [selectable, setSelectable] = useState(false);
const [download_url, setDownloadUrl] = useState('');
- const [snackbar_open, setSnackbarOpen] = useState(false);
+ const [snackInfo, setSnackInfo] = useState({
+ open: false,
+ text: "",
+ severity: "",
+ });
const updateSelected = (index) => {
let new_selected = selected.slice();
@@ -49,6 +53,10 @@ export default function ResourceList(props) {
setSelected(new_selected);
}
+ const handleSnackInfo = (info) => {
+ setSnackInfo({ ...info })
+ }
+
const checkBoxIcon = (s) => {
if (s)
return <CheckBoxIcon />;
@@ -56,9 +64,36 @@ export default function ResourceList(props) {
return <CheckBoxOutlineBlankIcon />;
}
- const handleDownloadSelection = () => {
+ const handleDownloadSelection = (e) => {
+ e.preventDefault()
// const selected_resources = props.resources.filter(resource => selected[props.resources.indexOf(resource)]);
- setSnackbarOpen(true);
+ let snackInfo = {}
+ if (download_url) {
+ window.open(download_url, '_blank')
+ snackInfo = {
+ open: true,
+ text: "Os recursos estão sendo baixados...",
+ severity: "success",
+ }
+ handleSnackInfo(snackInfo)
+ }
+ else {
+ snackInfo = {
+ open: true,
+ text: "Selecione os recursos que deseja baixar",
+ severity: "warning",
+ }
+ handleSnackInfo(snackInfo)
+ }
+ }
+
+ const handleCloseSnack = () => {
+ const snackInfo = {
+ open: false,
+ text: "",
+ severity: "",
+ }
+ handleSnackInfo(snackInfo)
}
useEffect(() => {
@@ -103,16 +138,14 @@ export default function ResourceList(props) {
</Button>
</Grid>
<Grid item>
- <UnstyledAnchor href={download_url}>
- <Button
- color="primary"
- variant="outlined"
- startIcon={<GetAppIcon fontSize="large" />}
- onClick={handleDownloadSelection}
- >
- <PanelButtonText>baixar seleção</PanelButtonText>
- </Button>
- </UnstyledAnchor>
+ <Button
+ color="primary"
+ variant="outlined"
+ startIcon={<GetAppIcon fontSize="large" />}
+ onClick={handleDownloadSelection}
+ >
+ <PanelButtonText>baixar seleção</PanelButtonText>
+ </Button>
</Grid>
</Grid>
<Grid container direction="row" justify="center" alignItems="center">
@@ -151,16 +184,18 @@ export default function ResourceList(props) {
})}
</Grid>
<Snackbar
- open={snackbar_open}
+ open={snackInfo.open}
autoHideDuration={6000}
- onClose={() => setSnackbarOpen(false)}
+ onClose={handleCloseSnack}
anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
>
- <Alert onClose={() => setSnackbarOpen(false)} severity="info">
- Os recursos serão baixados
+ <Alert onClose={handleCloseSnack} severity={snackInfo.severity}>
+ {snackInfo.text}
</Alert>
</Snackbar>
- <FloatingDownloadButton url={download_url} empty={selected.indexOf(true) === -1} />
+ <FloatingDownloadButton
+ handleDownloadSelection={handleDownloadSelection}
+ />
</ResourceListContainer>
);
}
@@ -182,7 +217,4 @@ const PanelButtonText = styled.span`
`
const ResourceGrid = styled(Grid)`
padding-right: 7px;
-`
-const UnstyledAnchor = styled.a`
- text-decoration: none !important;
-`
+`
\ No newline at end of file
diff --git a/src/Pages/CollectionPage.js b/src/Pages/CollectionPage.js
index 52a26eb90d29edfd109b41dd6cf90604e130f449..ca24610afcfce36a979619386add2b529551e423 100644
--- a/src/Pages/CollectionPage.js
+++ b/src/Pages/CollectionPage.js
@@ -22,7 +22,7 @@ import VerticalRuler from '../Components/VerticalRuler.js';
import CollectionDescription from '../Components/CollectionDescription.js';
import ResourceList from '../Components/ResourceList.js';
import CollectionCommentSection from '../Components/CollectionCommentSection.js';
-import { apiDomain } from '../env';
+import LoadingSpinner from '../Components/LoadingSpinner';
import styled from 'styled-components';
import DowloadButton from '../Components/CollectionDowloadButton.js';
import Breadcrumbs from "@material-ui/core/Breadcrumbs";
@@ -31,12 +31,13 @@ import FollowCollectionButton from '../Components/FollowCollectionButton';
import { Store } from '../Store.js';
import Button from '@material-ui/core/Button';
import { getRequest } from '../Components/HelperFunctions/getAxiosConfig.js';
+import noAvatar from '../img/default_profile.png';
export default function CollectionPage(props) {
const { state } = useContext(Store);
const [error, setError] = useState(false)
-
+ const [loading, setLoading] = useState(true)
const [collection, setCollection] = useState({
name: '',
id: 0,
@@ -46,8 +47,7 @@ export default function CollectionPage(props) {
useEffect(() => {
const url = `/collections/${collection_id}`
-
- getRequest(url, (data) => { setCollection(Object.assign({}, data)) }, (error) => { setError(true) })
+ getRequest(url, (data) => { setCollection(Object.assign({}, data)); setLoading(false) }, (error) => { setError(true); setLoading(false) })
}, [state.currentUser.id]);
const handleScrollToComments = () => {
@@ -74,6 +74,8 @@ export default function CollectionPage(props) {
</Grid>
</Grid>
</CollectionNotFound>
+ if (loading)
+ return <LoadingSpinner text="Carregando coleção..." />
else
return (
<>
@@ -86,9 +88,9 @@ export default function CollectionPage(props) {
<Grid container direction="row" justify="center" alignItems="center">
<Grid item md={3}>
<CollectionAuthor
- author_id={collection.owner ? collection.owner.id : 0}
- name={collection.owner ? collection.owner.name : ""}
- imgsrc={collection.owner ? apiDomain + collection.owner.avatar : ''} />
+ author_id={collection.owner.id ? collection.owner.id : 0}
+ name={collection.owner.name ? collection.owner.name : ""}
+ imgsrc={collection.owner.avatar ? collection.owner.avatar : noAvatar} />
</Grid>
@@ -99,12 +101,12 @@ export default function CollectionPage(props) {
liked={collection.liked}
scrollToComments={handleScrollToComments}
title={collection.name ? collection.name : ""}
- collection_id={collection.id ? collection.id : 0} />
+ collection_id={collection_id} />
</Grid>
<Grid item md={3}>
<DowloadButton
- id={collection.id ? collection.id : 0}
+ id={collection_id}
/>
<div style={{ height: 12 }}></div>
<FollowCollectionButton
@@ -143,10 +145,9 @@ export default function CollectionPage(props) {
</Grid>
<Grid container item xs={12} style={{ marginTop: 40, paddingBottom: 40 }} ref={comment_ref}>
- <CollectionCommentSection
- id={collection_id}
- currentUserId={state.currentUser.id}
-
+ <CollectionCommentSection
+ id={collection_id}
+ currentUserId={state.currentUser.id}
/>
</Grid>
</Grid>
diff --git a/src/env.js b/src/env.js
index b7359157e1c0e9d260976bbe2b2545a2e0ca51b0..7284c42754e5c679138196c2bae2a2f128779c2b 100644
--- a/src/env.js
+++ b/src/env.js
@@ -17,15 +17,15 @@ 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/>.*/
-var apiDomain = 'https://api.portalmec.c3sl.ufpr.br',
- apiVersion = 'v1',
- apiUrl = apiDomain + '/' + apiVersion;
+var apiDomain = 'https://api.portalmectest.c3sl.ufpr.br',
+ apiVersion = 'v1',
+ apiUrl = apiDomain + '/' + apiVersion;
var simcaqAPIDomain = 'https://www.simcaq.c3sl.ufpr.br/api',
- apiSimcaqVersion = 'v1',
- simcaqAPIurl = simcaqAPIDomain + '/' + apiSimcaqVersion
+ apiSimcaqVersion = 'v1',
+ simcaqAPIurl = simcaqAPIDomain + '/' + apiSimcaqVersion
-export {apiUrl};
-export {apiDomain};
-export {simcaqAPIurl}
+export { apiUrl };
+export { apiDomain };
+export { simcaqAPIurl }