WIP Collection Page

src/Components/CollectionAuthor.js

+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+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 from 'react';
+import { Grid } from '@material-ui/core';
+import styled from 'styled-components';
+
+
+export default function CollectionAuthor(props) {
+	return (
+		<Grid container
+			direction="column"
+			justify="center"
+			alignItems="center">
+			<UserAvatar src={props.imgsrc}/>
+			<InfoText>Coleção organizada por:</InfoText>
+			<UserName>{props.name}</UserName>
+		</Grid>
+	);
+}
+
+const UserAvatar = styled.img`
+	border-radius: 100px;
+	width: 100px;
+	height: auto;
+`
+const InfoText = styled.p`
+	margin-bottom: 0;
+	padding-bottom: 0;
+	color: #666;
+`
+const UserName = styled.h1`
+	margin-top: 10px;
+	color: #673ab7;
+`

src/Components/CollectionCommentSection.js

+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+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 { Grid } from '@material-ui/core';
+import styled from 'styled-components';
+import Button from '@material-ui/core/Button';
+import Card from '@material-ui/core/Card';
+
+export default function CollectionCommentSection() {
+	return (
+		<BackDiv>
+			<CommentContainer container direction="row" justify="center" alignItems="center">
+				<Grid item style={{width: '100%'}} xs={12}>
+					<Title>Conte sua experiência com a Coleção</Title>
+					<Divider />
+				</Grid>
+				<Grid item>
+					avatar
+				</Grid>
+				<Grid item>
+					avaliação (componente separado, grid container direction="column" e no final tem um grid item container direction="row" (escrever + botão de enviar))
+				</Grid>
+
+			</CommentContainer>
+			componente de compartilhar opiniao com a rede, grid container direction="column" + modal
+			n esqueça que tem que colocar modal de login em tudo se a pessoa n estiver logada
+		</BackDiv>
+	);
+}
+
+const BackDiv = styled(Card)`
+	background-color: white;
+	padding: 7px;
+`
+const CommentContainer = styled(Grid)`
+	background-color: #f4f4f4;
+`
+const Title = styled.p`
+	color: rgb(102, 102, 102);
+	font-weight: 300;
+	font-size: 1.5em;
+	margin-left: 30px;
+`
+const Divider = styled.div`
+	margin-top: 10px;
+	margin-bottom: 10px;
+	background-color: rgb(102, 102, 102);
+	height: 0.5px;
+`

src/Components/CollectionDescription.js

+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+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 } from 'react';
+import { Store } from '../Store.js'
+import { Grid } from '@material-ui/core';
+import Button from '@material-ui/core/Button';
+import GetAppIcon from '@material-ui/icons/GetApp';
+import AddIcon from '@material-ui/icons/Add';
+import styled from 'styled-components';
+import CollectionReview from './CollectionReview.js';
+import FollowCollectionButton from './FollowCollectionButton.js';
+
+export default function CollectionDescription(props) {
+	const { state } = useContext(Store);
+	console.log(state.currentUser);
+	return (
+		<Grid container direction="column" justify="center" alignItems="center">
+			<Grid item>
+				<Title>{props.title}</Title>
+			</Grid>
+			<Grid item container
+				direction="row" justify="space-between" alignItems="center"
+			>
+				<Grid item sm={4}>
+					<CollectionReview/>
+				</Grid>
+				<Grid item container sm={8}
+					direction="column" justify="center" alignItems="flex-end"
+				>
+					<Grid item style={{marginBottom: 10}}>
+						<DownloadButton
+							variant="outlined"
+							color="primary"
+							startIcon={<GetAppIcon fontSize="large"/>}
+							size="large"
+						>
+							<ButtonText>Baixar Coleção</ButtonText>
+						</DownloadButton>
+					</Grid>
+					<Grid item>
+						<FollowCollectionButton user_id={state.currentUser.id}/>
+					</Grid>
+				</Grid>
+			</Grid>
+
+		</Grid>
+	);
+}
+
+const Title=styled.h1`
+	font-size: 3em;
+	color: rgb(102, 102, 102);
+	float: left;
+`
+const ButtonText=styled.span`
+	font-weight: bolder;
+	font-size: 1.2em;
+`
+const DownloadButton=styled(Button)`
+	padding-left: 10,
+	padding-right: 10,
+	width: 210,
+`

src/Components/CollectionReview.js

+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+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 { Grid } from '@material-ui/core';
+import styled from 'styled-components';
+import Rating from '@material-ui/lab/Rating';
+import IconButton from '@material-ui/core/IconButton';
+import StarBorderIcon from '@material-ui/icons/StarBorder';
+import FavoriteIcon from '@material-ui/icons/Favorite';
+import InfoIcon from '@material-ui/icons/Info';
+
+export default function CollectionReview() {
+	//TODO: axios aqui
+	//TODO: chamar o modal de report
+	const likes = 2;
+	const [liked, setLiked] = useState(false);
+	const [stars, setStars] = useState(0);
+
+	return (
+		<Grid container direction="row" justify="center" alignItems="center">
+			<Grid item sm={8}>
+				<Rating
+				 name="customized-empty"
+				 value={stars}
+				 onChange={(e, value) => {setStars(value)}}
+				 precision={0.5}
+				 style={{color:"#666"}}
+				 emptyIcon={<StarBorderIcon fontSize="inherit" />}
+				/>
+			</Grid>
+			<Grid item sm={4}>
+				<IconButton aria-label="like" onClick={() => setLiked(!liked)}>
+					{likes + (liked ? 1 : 0)}<FavoriteIcon />
+				</IconButton>
+			</Grid>
+			<Grid item sm={12}>
+				<IconButton aria-label="report" style={{fontSize: 'small'}}>
+					<InfoIcon />Reportar erro ou abuso
+				</IconButton>
+			</Grid>
+		</Grid>
+	);
+}

src/Components/FollowCollectionButton.js

+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+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 CheckIcon from '@material-ui/icons/Check';
+import AddIcon from '@material-ui/icons/Add';
+import styled from 'styled-components';
+import SignUpModal from './SignUpModal.js';
+
+export default function FollowCollectionButton(props) {
+	const [icon, setIcon] = useState(<AddIcon fontSize="large"/>);
+	const [button_text, setButtonText] = useState("Seguir Coleção");
+	const [variant, setVariant] = useState("outlined");
+	const [sign_up_open, setSignUpOpen] = useState(false);
+
+	const handleClick = () => {
+		//aqui tem que ter:
+		//se o usuário não está logado, abre a tela de criar conta
+
+		//setSignUpOpen(true);
+
+		//se o usuário já segue a coleção,deixa de seguir
+
+		//setButtonText("Seguir Coleção");
+
+		//se o usuário não segue a coleção, muda o visual por alguns instantes e depois mostra o "deixa de seguir"
+		setVariant("contained");
+		setButtonText("Seguindo");
+		setIcon(<CheckIcon fontSize="large"/>)
+	};
+
+	return (
+		<div>
+			<FollowButton
+				variant={variant}
+				color="primary"
+				startIcon={icon}
+				size="large"
+				onClick={() => handleClick()}
+			>
+				<ButtonText>{button_text}</ButtonText>
+			</FollowButton>
+			<SignUpModal open={sign_up_open} handleClose={() => setSignUpOpen(false)} />
+		</div>
+	);
+}
+
+const Title=styled.h1`
+	font-size: 3em;
+	color: rgb(102, 102, 102);
+	float: left;
+`
+const ButtonText=styled.span`
+	font-weight: bolder;
+	font-size: 1.2em;
+`
+const FollowButton=styled(Button)`
+	padding-left: 10,
+	padding-right: 10,
+	width: 210,
+`

src/Components/ResourceList.js

+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+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 { Grid } from '@material-ui/core';
+import styled from 'styled-components';
+import Button from '@material-ui/core/Button';
+import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
+import CheckBoxIcon from '@material-ui/icons/CheckBox';
+import GetAppIcon from '@material-ui/icons/GetApp';
+import ResourceCardFunction from './ResourceCardFunction.js';
+
+
+export default function ResourceList(props) {
+	const [selected, setSelected] = useState(Array.apply(
+		null, {length: props.resources.length}).map(i => false));
+	const [selectable, setSelectable] = useState(false);
+
+	const updateSelected = (index) => {
+		let new_selected = selected.slice();
+		new_selected[index] = !new_selected[index];
+		setSelected(new_selected);
+	}
+
+	const checkBoxIcon = (s) => {
+		if (s)
+			return <CheckBoxIcon />;
+		else
+			return <CheckBoxOutlineBlankIcon />;
+	}
+
+	return (
+		<ResourceListContainer>
+			<Grid container direction="row" justify="space-between" alignItems="center">
+				<Grid item>
+					<Title>{props.resources.length} recurso{props.resources.length == 1 ? "" : "s"}</Title>
+				</Grid>
+				<Grid item>
+					<Button color="primary" onClick={() => setSelectable(!selectable)}>
+						<PanelButtonText>
+							Ativar seleção
+						</PanelButtonText>
+					</Button>
+				</Grid>
+				<Grid item>
+					<Button 
+						color="primary" 
+						variant="outlined"
+						startIcon={<GetAppIcon fontSize="large"/>}
+					>
+						<PanelButtonText>baixar seleção</PanelButtonText>
+					</Button>
+				</Grid>
+			</Grid>
+			<Grid container direction="row" justify="space-around" alignItems="center">
+			{props.resources.map((r) => {
+					return (
+						<Grid item key={r.title}>
+							<ResourceCardFunction
+								type={r.type}
+								author={r.author}
+								tags={r.tags}
+								published={r.published}
+								title={r.title}
+								rating={r.rating}
+								likeCount={r.likeCount}
+								liked={r.liked}
+								thumbnail={r.thumbnail}
+							/>
+							{selectable ? 
+								(<SelectButton
+									variant="outline"
+									color="primary"
+									startIcon={checkBoxIcon(selected[props.resources.indexOf(r)])}
+									onClick={() => updateSelected(props.resources.indexOf(r))}
+								>
+									Selecionar
+								</SelectButton>)
+								:
+								<span></span>}
+								
+						</Grid>
+					);
+				})}
+			</Grid>
+		</ResourceListContainer>
+	);
+}
+
+const ResourceListContainer=styled.div`
+	margin-left: 20;
+	margin-right: 20;
+`
+const Title=styled.p`
+	color: rgb(102, 102, 102);
+	font-size: 2em;
+	font-weigth: 300;
+`
+const SelectButton=styled(Button)`
+	width: 100%;
+`
+const PanelButtonText=styled.span` 
+	font-weight: 900;
+`

src/Components/VerticalRuler.js

+/*Copyright (C) 2019 Centro de Computacao Cientifica e Software Livre
+Departamento de Informatica - Universidade Federal do Parana
+
+This file is part of Plataforma Integrada MEC.
+
+Plataforma Integrada MEC is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+Plataforma Integrada MEC is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+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 from 'react';
+
+
+export default function VerticalRuler(props) {
+	return (
+		<div
+			style={{
+				borderLeft: ''+props.width+'px solid '+props.color,
+				height:props.height
+			}}/>
+	);
+}

src/Pages/CollectionPage.js

@@ -16,15 +16,57 @@ 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, {Component} from 'react';
+import React from 'react';
+import { Grid } from '@material-ui/core';
+import CollectionAuthor from '../Components/CollectionAuthor.js';
+import VerticalRuler from '../Components/VerticalRuler.js';
+import CollectionDescription from '../Components/CollectionDescription.js';
+import ResourceList from '../Components/ResourceList.js';
+import CollectionCommentSection from '../Components/CollectionCommentSection.js';
 
-
-class CollectionPage extends Component {
-    render() {
+export default function CollectionPage() {
 	return (
-        <h1> Página visulizar coleção</h1>
+		<Grid container
+			direction="row"
+			justify="space-around"
+			alignItems="center"
+			style={mainContainerStyle}>
+
+			<Grid item xs={10} md={3}>
+				<CollectionAuthor name="Glaucia Gomes" imgsrc="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fcdn2.iconfinder.com%2Fdata%2Ficons%2Fsocial-flat-buttons-3%2F512%2Fduckduckgo-512.png&f=1&nofb=1"/>
+			</Grid> 
+
+			<VerticalRuler width={1} height={300} color="rgb(238, 238, 238)"/>
+
+			<Grid item xs={10} md={6}>
+				<CollectionDescription title="Linguagem de Programacao"/>
+			</Grid> 
+
+			<Grid container item direction="row" justify="center" alignItems="center" style={{backgroundColor: '#f4f4f4'}}>
+				<Grid item xs={10}>
+					<ResourceList resources={[{
+						type: "Outros",
+						author: "Luciano Hulk",
+						tags: ["Recursos_do_luciano", "Matemática"],
+						published: true,
+						title: "Caldeirão do Pitágoras",
+						rating: 0.5,
+						likeCount: 8,
+						liked: false,
+						avatar: null,
+						thumbnail: null
+						}]}
+						selectable={true}
+					/>
+				</Grid>
+				<Grid item xs={10} style={{marginTop: 40}}>
+					<CollectionCommentSection />
+				</Grid>
+			</Grid>
+		</Grid>
 	);
 }
-  }
 
-export default CollectionPage;
+const mainContainerStyle = {
+	marginTop: '5%',
+}