From 80f43811f9707d9a0215285436d804a340b92ed1 Mon Sep 17 00:00:00 2001
From: Lucas Schoenfelder <les17@inf.ufpr.br>
Date: Wed, 13 May 2020 12:20:09 -0300
Subject: [PATCH] all components were previously in user page
---
src/Components/UserPageComponents/Avatar.js | 79 +++++++++++++++++++
src/Components/UserPageComponents/Cover.js | 64 +++++++++++++++
.../UserPageComponents/EditProfileButton.js | 74 +++++++++++++++++
.../UserPageComponents/SubmitterStatus.js | 51 ++++++++++++
src/Components/UserPageComponents/UserInfo.js | 36 +++++++++
5 files changed, 304 insertions(+)
create mode 100644 src/Components/UserPageComponents/Avatar.js
create mode 100644 src/Components/UserPageComponents/Cover.js
create mode 100644 src/Components/UserPageComponents/EditProfileButton.js
create mode 100644 src/Components/UserPageComponents/SubmitterStatus.js
create mode 100644 src/Components/UserPageComponents/UserInfo.js
diff --git a/src/Components/UserPageComponents/Avatar.js b/src/Components/UserPageComponents/Avatar.js
new file mode 100644
index 00000000..ba78c155
--- /dev/null
+++ b/src/Components/UserPageComponents/Avatar.js
@@ -0,0 +1,79 @@
+/*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, useContext} from 'react';
+import styled from 'styled-components'
+import { Store } from '../../Store.js';
+import axios from 'axios'
+import {apiUrl, apiDomain} from '../../env';
+import noAvatar from "../../img/default_profile.png";
+import ModalAlterarAvatar from '../ModalAlterarAvatar/ModalAlterarAvatar.js'
+
+export default function ProfileAvatar (props) {
+ const {state} = useContext(Store)
+
+ const [currentAvatar, setAvatar] = useState(state.currentUser.userAvatar)
+
+ const [hoverBool, toggleHover] = React.useState(false)
+ const handleToggleHover = () => {toggleHover(!hoverBool)}
+
+ const [open, toggleOpen] = useState(false)
+ const controlModal = () => {toggleOpen(!open)}
+
+ return (
+ <>
+ <ModalAlterarAvatar
+ open={open}
+ handleClose={controlModal}
+ userAvatar={currentAvatar}
+ />
+
+ <ProfileAvatarDiv onMouseEnter={handleToggleHover} onMouseLeave={handleToggleHover} onClick={controlModal}>
+ <img src={currentAvatar ? apiDomain + currentAvatar : noAvatar} alt = "user avatar" style={{height : "inherit", width : "inherit", border:"0", verticalAlign:"middle"}}/>
+ <ChangeAvatarDiv style={ {display : hoverBool ? 'flex' : 'none'}}>
+ <span>Alterar Foto</span>
+ </ChangeAvatarDiv>
+ </ProfileAvatarDiv>
+
+ </>
+ )
+}
+
+const ProfileAvatarDiv = styled.div`
+ bottom : -55px;
+ left : 60px;
+ border-radius : 100%;
+ position : absolute;
+ width : 150px;
+ height : 150px;
+ overflow : hidden;
+ border : 8px solid #fff;
+ outline : 0;
+ cursor : pointer;
+ background-color : #a5a5a5;
+`
+
+const ChangeAvatarDiv = styled.div`
+ height : 40px;
+ position: absolute;
+ width : 100%;
+ bottom : 0;
+ display : flex;
+ background-color : #000;
+ color : #fff;
+ justify-content : center;
+`
diff --git a/src/Components/UserPageComponents/Cover.js b/src/Components/UserPageComponents/Cover.js
new file mode 100644
index 00000000..ea5e1892
--- /dev/null
+++ b/src/Components/UserPageComponents/Cover.js
@@ -0,0 +1,64 @@
+/*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, useContext} from 'react';
+import { Store } from '../../Store.js';
+import axios from 'axios'
+import {apiUrl, apiDomain} from '../../env';
+import {CoverContainer} from '../TabPanels/StyledComponents.js'
+import IconButton from '@material-ui/core/IconButton';
+import PhotoCamera from '@material-ui/icons/PhotoCamera';
+import Tooltip from '@material-ui/core/Tooltip';
+import ModalAlterarCover from '../ModalAlterarCover/ModalAlterarCover.js'
+
+export default function Cover (props) {
+ const {state} = useContext(Store)
+
+ const [currentCover, setCoverImg] = useState(state.currentUser.userCover)
+ const [tempCover, setTempCover] = useState('')
+
+ const [open, toggleOpen] = useState(false)
+ const controlModal = () => {toggleOpen(!open)}
+
+ const updateCover = (selectorFiles : FileList) => {
+ const objectURL = URL.createObjectURL(selectorFiles[0])
+ console.log(objectURL)
+ setTempCover(objectURL)
+ controlModal()
+ }
+
+ return (
+ <>
+ <ModalAlterarCover
+ open = {open}
+ handleClose={controlModal}
+ cover={tempCover}
+ />
+ <CoverContainer>
+ {currentCover && <img src={apiDomain + currentCover} alt = '' style= {{width:"100%", height:"100%", objectFit : "cover" }}/>}
+ <input accept="image/*" style = {{display:"none"}} id="icon-button-file" type="file" onChange={(e) => updateCover(e.target.files)}/>
+ <label htmlFor="icon-button-file">
+ <Tooltip title={<span style={{fontSize:"14px", overflow:"hidden", transition:"all .5s ease"}}>ALTERAR CAPA</span>} placement="left">
+ <IconButton style={{position:"absolute",right:"0",top:"0",color:"#fff"}}color="primary" aria-label="upload picture" component="span">
+ <PhotoCamera />
+ </IconButton>
+ </Tooltip>
+ </label>
+ </CoverContainer>
+ </>
+ )
+}
diff --git a/src/Components/UserPageComponents/EditProfileButton.js b/src/Components/UserPageComponents/EditProfileButton.js
new file mode 100644
index 00000000..64606638
--- /dev/null
+++ b/src/Components/UserPageComponents/EditProfileButton.js
@@ -0,0 +1,74 @@
+/*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 styled from 'styled-components'
+import {Link} from 'react-router-dom';
+import EditIcon from '@material-ui/icons/Edit';
+import Button from '@material-ui/core/Button';
+
+export default function EditProfileButton () {
+ const {state} = React.useContext(Store)
+
+ return (
+ <EditProfileAnchor to="/editarperfil">
+ <Button>
+ {state.windowSize.width >=900 ?
+ (
+ <React.Fragment>
+ <EditIcon style={{marginRight:"5px", verticalAlign:"middle"}}/> <span>EDITAR PERFIL</span>
+ </React.Fragment>
+ )
+ :
+ (
+ <EditIcon style={{marginRight:"5px", verticalAlign:"middle"}}/>
+ )
+ }
+ </Button>
+ </EditProfileAnchor>
+ )
+}
+
+const EditProfileAnchor = styled(Link)`
+ Button {
+ box-shadow : 0 2px 5px 0 rgba(0,0,0,.26);
+ background-color : #fafafa;
+ position : absolute;
+ right : 5px;
+ bottom : 0;
+ margin-bottom : 20px;
+ color : #666;
+ padding : 0 10px;
+ text-decoration : none;
+ border-radius : 3px;
+ @media screen and (min-width: 800px) {
+ min-height : 36px;
+ min-width : 88px;
+ }
+ line-height : 36px;
+ border : 0;
+ display: inline-block;
+ text-align : center;
+ :hover{
+ background-color : #fafafa;
+ }
+ @media screen and (max-width: 600px) {
+ max-width : 44px !important ;
+ }
+ }
+`
diff --git a/src/Components/UserPageComponents/SubmitterStatus.js b/src/Components/UserPageComponents/SubmitterStatus.js
new file mode 100644
index 00000000..47924373
--- /dev/null
+++ b/src/Components/UserPageComponents/SubmitterStatus.js
@@ -0,0 +1,51 @@
+/*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 CheckDecagram from '../../img/check-decagram-gray.svg'
+
+export default function SubmitterStatus (props) {
+ const {state} = React.useContext(Store)
+
+ let text;
+ switch (state.currentUser.submitter_request) {
+ case 'requested':
+ text = "Verificando cadastro de professor(a)"
+ break;
+ case 'accepted':
+ text = "Professor(a)"
+ break;
+ default:
+ text = "Você é professor(a) e gostaria de publicar recursos?"
+ }
+
+ return (
+ <React.Fragment>
+ <p style={{fontSize:"15px", lineHeight:"22px", textAlign:"left", margin:"0 0 10px"}}>
+ <span style={{cursor:"pointer"}}>
+ <span style={{paddingRight:"5px"}}>
+ <img src={CheckDecagram}/>
+ </span>
+ {text}
+ <span style={{color:"#00bcd4"}}> SAIBA MAIS</span>
+ </span>
+ </p>
+ </React.Fragment>
+ )
+
+}
diff --git a/src/Components/UserPageComponents/UserInfo.js b/src/Components/UserPageComponents/UserInfo.js
new file mode 100644
index 00000000..0a45ac75
--- /dev/null
+++ b/src/Components/UserPageComponents/UserInfo.js
@@ -0,0 +1,36 @@
+/*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 {UserProfileInfoDiv} from '../TabPanels/StyledComponents.js'
+
+export default function UserInfo (props) {
+ const {state} = useContext(Store)
+
+ const user = state.currentUser.username
+ const education = state.currentUser.education
+
+ return (
+ <UserProfileInfoDiv>
+ <p style={{fontSize:"28px", color:"#fff", paddingTop:"5px", paddingBottom:"5px", fontWeight:"500", backgroundColor:"#77777796", borderRadius : "5px"}}>{user}</p>
+ <div style={{fontSize:"14px", color:"#fff", marginBottom:"2px"}}>
+ <p>{education}</p>
+ </div>
+ </UserProfileInfoDiv>
+ )
+}
--
GitLab