From 35a4ab7cef0dba5c9c74e2a3a719d4d3a489d107 Mon Sep 17 00:00:00 2001
From: Luis Felipe Risch <lfr20@inf.ufpr.br>
Date: Fri, 18 Dec 2020 09:37:12 -0300
Subject: [PATCH] tryed to improve the style to appear as the angular portal
---
src/Components/CollectionAuthor.js | 6 +-
src/Components/CollectionDescription.js | 25 ++--
src/Components/CollectionReview.js | 84 ++++++++---
src/Pages/CollectionPage.js | 188 +++++++++++++++++++-----
4 files changed, 230 insertions(+), 73 deletions(-)
diff --git a/src/Components/CollectionAuthor.js b/src/Components/CollectionAuthor.js
index 54ce4440..56b940a4 100644
--- a/src/Components/CollectionAuthor.js
+++ b/src/Components/CollectionAuthor.js
@@ -52,8 +52,8 @@ export default function CollectionAuthor(props) {
}
const UserAvatar = styled.img`
- border-radius: 100px;
- width: 100px;
+ border-radius: 75px;
+ width: 75px;
height: auto;
`
const InfoText = styled.p`
@@ -61,7 +61,7 @@ const InfoText = styled.p`
padding-bottom: 0;
color: #666;
`
-const UserName = styled.h1`
+const UserName = styled.h2`
margin-top: 10px;
color: #673ab7;
`
diff --git a/src/Components/CollectionDescription.js b/src/Components/CollectionDescription.js
index 062a13bc..e6b2cd07 100644
--- a/src/Components/CollectionDescription.js
+++ b/src/Components/CollectionDescription.js
@@ -47,19 +47,26 @@ export default function CollectionDescription(props) {
});}, [props.collection_id]);
return (
- <Grid container direction="column" justify="center" alignItems="center">
- <Grid item>
+ <Grid container direction="column" justify="center" alignItems="center" spacing={5}>
+ <Grid
+ item
+ justify="center"
+ alignItems="center"
+ >
<Title>{props.title}</Title>
</Grid>
- <Grid item container
- direction="row" justify="space-between" alignItems="center"
+ <Grid
+ item
+ direction="row"
+ justify="center"
+ alignItems="center"
>
- <Grid item sm={4}>
+ <Grid item>
<CollectionReview
scrollToComment={props.scrollToComments}
id={props.collection_id}/>
</Grid>
- <Grid item container sm={8}
+ {/* <Grid item container sm={8}
direction="column" justify="center" alignItems="flex-end"
>
<Grid item style={{marginBottom: 10}}>
@@ -77,7 +84,7 @@ export default function CollectionDescription(props) {
<Grid item>
<FollowCollectionButton user_id={state.currentUser.id} collection_id={props.collection_id}/>
</Grid>
- </Grid>
+ </Grid> */}
</Grid>
</Grid>
@@ -85,9 +92,9 @@ export default function CollectionDescription(props) {
}
const Title=styled.h1`
- font-size: 3em;
+ font-size: 2.5em;
color: rgb(102, 102, 102);
- float: left;
+ text-align: center
`
const ButtonText=styled.span`
font-weight: bolder;
diff --git a/src/Components/CollectionReview.js b/src/Components/CollectionReview.js
index be63b1d3..eaa5eb4e 100644
--- a/src/Components/CollectionReview.js
+++ b/src/Components/CollectionReview.js
@@ -41,7 +41,7 @@ export default function CollectionReview(props) {
const { state } = useContext(Store);
useEffect(() => {
- axios.get(apiUrl+'/collections/'+props.id)
+ axios.get(apiUrl + '/collections/' + props.id)
.then(res => {
setLikes(Number(res.data.likes_count));
setLiked(res.data.liked);
@@ -51,15 +51,50 @@ export default function CollectionReview(props) {
const handleClickReport = () => {
setReportOpen(true);
}
+
+ const SaveNewHeaders = (response) => {
+ if (
+ (response.headers['access-token'] === undefined || response.headers['access-token'] === null) &&
+ (response.headers.client === undefined || response.headers.client === null)
+ ) {
+ } else {
+ sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
+ sessionStorage.setItem('@portalmec/clientToken', response.headers.client)
+ console.log('saved')
+ }
+ }
+
const handleLikeClick = () => {
if (state.currentUser.id) {
- const url = apiUrl+'/collections/'+props.id+'/like';
+ const url = apiUrl + '/collections/' + props.id + '/like';
if (!liked)
- axios.put(url);
+ axios({
+ method: 'put',
+ url: url,
+ headers: {
+ 'Accept': 'application/json',
+ 'Content-Type': 'application/json; charset=utf-8',
+ 'access-token': sessionStorage.getItem('@portalmec/accessToken'),
+ 'client': sessionStorage.getItem('@portalmec/clientToken'),
+ 'uid': sessionStorage.getItem('@portalmec/uid'),
+ 'If-None-Match': null
+ },
+ }).then(response => {
+ if(response.status === 201)
+ {
+ setLiked(true)
+ setLikes(response.data.count);
+ }
+ else
+ {
+ setLiked(false);
+ setLikes(response.data.count);
+ }
+ SaveNewHeaders(response)
+ })
else
- axios.delete(url);
- setLiked(!liked);
+ setLiked(!liked);
} else
setSignUpOpen(true);
}
@@ -74,26 +109,28 @@ export default function CollectionReview(props) {
}
return (
- <Grid container direction="row" justify="center" alignItems="center">
- <Grid item sm={8}>
- <Rating
- name="customized-empty"
- value={stars}
- onChange={(e, value) => handleSetStars(value)}
- precision={0.5}
- style={{color:"#666"}}
- emptyIcon={<StarBorderIcon fontSize="inherit" />}
- />
- </Grid>
- <Grid item sm={4}>
- <IconButton aria-label="like" onClick={handleLikeClick}>
- {likes + (liked ? 1 : 0)}<FavoriteIcon />
- </IconButton>
+ <Grid container direction="column">
+ <Grid sm={12} container direction="row" alignItems="center">
+ <Grid item>
+ <Rating
+ name="customized-empty"
+ value={stars}
+ onChange={(e, value) => handleSetStars(value)}
+ precision={0.5}
+ style={{ color: "#666" }}
+ emptyIcon={<StarBorderIcon fontSize="inherit" />}
+ />
+ </Grid>
+ <Grid item justify="center" alignItems="center">
+ <IconButton aria-label="like" onClick={handleLikeClick}>
+ {likes}<FavoriteIcon style={{fill : liked ? "red" : null}} />
+ </IconButton>
+ </Grid>
</Grid>
<Grid item sm={12}>
- <IconButton
- aria-label="report"
- style={{fontSize: 'small'}}
+ <IconButton
+ aria-label="report"
+ style={{ fontSize: 'small' }}
onClick={handleClickReport}>
<InfoIcon />Reportar erro ou abuso
</IconButton>
@@ -114,7 +151,6 @@ export default function CollectionReview(props) {
open={log_in_open}
handleClose={() => setLoginOpen(false)}
/>
-
</Grid>
);
}
diff --git a/src/Pages/CollectionPage.js b/src/Pages/CollectionPage.js
index f7b3a32e..37cd3daf 100644
--- a/src/Pages/CollectionPage.js
+++ b/src/Pages/CollectionPage.js
@@ -15,7 +15,7 @@ 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, { useRef, useState, useEffect } from 'react';
+import React, { useRef, useState, useEffect, useContext } from 'react';
import axios from 'axios';
import { Grid } from '@material-ui/core';
import CollectionAuthor from '../Components/CollectionAuthor.js';
@@ -25,17 +25,26 @@ import ResourceList from '../Components/ResourceList.js';
import CollectionCommentSection from '../Components/CollectionCommentSection.js';
import { apiUrl, apiDomain } from '../env';
import CircularProgress from '@material-ui/core/CircularProgress';
+import GetAppIcon from '@material-ui/icons/GetApp';
+import styled from 'styled-components';
+import DowloadButton from '../Components/CollectionDowloadButton.js';
+import Breadcrumbs from "@material-ui/core/Breadcrumbs";
+import { Link } from 'react-router-dom';
+import FollowCollectionButton from '../Components/FollowCollectionButton';
+import { Store } from '../Store.js'
export default function CollectionPage(props) {
+ const { state } = useContext(Store);
+
const [collection, setCollection] = useState({
- name: '',
- id: 0,
- });
+ name: '',
+ id: 0,
+ });
const collection_id = props.match.params.id;
const comment_ref = useRef(null);
- useEffect(()=>{
- axios.get(apiUrl+'/collections/'+collection_id)
+ useEffect(() => {
+ axios.get(apiUrl + '/collections/' + collection_id)
.then(res => {
setCollection(Object.assign({}, res.data));
});
@@ -46,32 +55,61 @@ export default function CollectionPage(props) {
}
return (
- <Grid container
- direction="row"
- justify="space-around"
- alignItems="center"
- style={mainContainerStyle}>
-
- <Grid item xs={10} md={3}>
- <CollectionAuthor
- author_id={collection.owner ? collection.owner.id : 0}
- name={collection.owner ? collection.owner.name : ""}
- imgsrc={collection.owner ? apiDomain+collection.owner.avatar : ''}/>
- </Grid>
-
- <VerticalRuler width={1} height={300} color="rgb(238, 238, 238)"/>
-
- <Grid item xs={10} md={6}>
- <CollectionDescription
- scrollToComments={handleScrollToComments}
- title={collection.name ? collection.name : ""}
- collection_id={collection.id ? collection.id : 0}/>
- </Grid>
-
- <Grid container item xs={12} direction="row" justify="center" alignItems="center" style={{backgroundColor: '#f4f4f4'}}>
- <Grid item xs={10}>
+ <>
+ <BreadCrumbsDiv>
+ <StyledBreadCrumbs>
+ <Link to="/">Página Inicial</Link>
+ <span>Coleções</span>
+ </StyledBreadCrumbs>
+ </BreadCrumbsDiv>
+ <Grid
+ container
+ direction="row"
+ justify="space-around"
+ alignItems="center"
+ spacing={4}
+ >
+ <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 : ''} />
+ </Grid>
+
+
+ <Grid
+ item
+ md={5}
+ >
+ <CollectionDescription
+ scrollToComments={handleScrollToComments}
+ title={collection.name ? collection.name : ""}
+ collection_id={collection.id ? collection.id : 0} />
+ </Grid>
+
+ <Grid
+ item
+ md={3}
+ >
+ <DowloadButton
+ id={collection.id ? collection.id : 0}
+ />
+ <div style={{height : 12}}></div>
+ <FollowCollectionButton
+ user_id={state.currentUser.id}
+ collection_id={collection_id} />
+ </Grid>
+ </Grid>
+
+ <VerticalRuler width={1} height={100} color="rgb(238, 238, 238)" />
+
+ <Grid container item xs={12} direction="row" justify="center" alignItems="center" style={{ backgroundColor: '#f4f4f4' }}>
+ <Grid item xs={10} alignItems="center" justify="center">
<ResourceList resources={
- collection.collection_items ?
+ collection.collection_items ?
collection.collection_items.map(i => {
return {
type: i.collectionable.object_type,
@@ -83,22 +121,98 @@ export default function CollectionPage(props) {
liked: i.collectionable.liked,
avatar: i.collectionable.publisher.avatar,
thumbnail: i.collectionable.thumbnail,
- tags: i.collectionable.tags.map(t => t.name),
+ tags: i.collectionable.tags.map(t => t),
id: i.collectionable.id,
}
})
: []
- }/>
-
+ } />
+
</Grid>
- <Grid container item xs={12} style={{marginTop: 40}} ref={comment_ref}>
- <CollectionCommentSection id={collection_id}/>
+ <Grid container item xs={12} style={{ marginTop: 40 }} ref={comment_ref}>
+ <CollectionCommentSection id={collection_id} />
</Grid>
</Grid>
- </Grid>
+ </>
+
+
+ // <Grid container
+ // direction="row"
+ // justify="space-around"
+ // alignItems="center"
+ // style={mainContainerStyle}>
+
+ // <Grid item xs={10} md={3}>
+ // <CollectionAuthor
+ // author_id={collection.owner ? collection.owner.id : 0}
+ // name={collection.owner ? collection.owner.name : ""}
+ // imgsrc={collection.owner ? apiDomain+collection.owner.avatar : ''}/>
+ // </Grid>
+
+ // <VerticalRuler width={1} height={300} color="rgb(238, 238, 238)"/>
+
+ // <Grid item xs={10} md={6}>
+ // <CollectionDescription
+ // scrollToComments={handleScrollToComments}
+ // title={collection.name ? collection.name : ""}
+ // collection_id={collection.id ? collection.id : 0}/>
+ // </Grid>
+
+ // <Grid container item xs={12} direction="row" justify="center" alignItems="center" style={{backgroundColor: '#f4f4f4'}}>
+ // <Grid item xs={10}>
+ // <ResourceList resources={
+ // collection.collection_items ?
+ // collection.collection_items.map(i => {
+ // return {
+ // type: i.collectionable.object_type,
+ // author: i.collectionable.author,
+ // published: i.collectionable.published_at,
+ // title: i.collectionable.name,
+ // rating: i.collectionable.review_average,
+ // likeCount: i.collectionable.likes_count,
+ // liked: i.collectionable.liked,
+ // avatar: i.collectionable.publisher.avatar,
+ // thumbnail: i.collectionable.thumbnail,
+ // tags: i.collectionable.tags.map(t => t.name),
+ // id: i.collectionable.id,
+ // }
+ // })
+ // : []
+ // }/>
+
+ // </Grid>
+ // <Grid container item xs={12} style={{marginTop: 40}} ref={comment_ref}>
+ // <CollectionCommentSection id={collection_id}/>
+ // </Grid>
+ // </Grid>
+ // </Grid>
);
}
const mainContainerStyle = {
marginTop: '5%',
}
+
+const StyledBreadCrumbs = styled(Breadcrumbs)`
+ display: flex;
+ justify-content: flex-start;
+ max-width: 1170px;
+ span {
+ color: #a5a5a5;
+ }
+ a {
+ color: #00bcd4;
+ text-decoration: none;
+ }
+`;
+
+const BreadCrumbsDiv = styled.div`
+ padding: 10px;
+ display: flex;
+`;
+
+const TopInfos = styled(Grid)`
+ marginTop: 0;
+ marginLeft: 20;
+`
+
--
GitLab