Skip to content
Snippets Groups Projects
Commit 06b5ac10 authored by Lucas Eduardo Schoenfelder's avatar Lucas Eduardo Schoenfelder
Browse files

wip header refactor

parent 2397c2a5
No related branches found
No related tags found
3 merge requests!57Merge of develop into master,!56Fixed buttons reportar, seguir, compartilhar, guardar and entrar (in comments...,!24Tela recurso
Hide whitespace changes
Inline Side-by-side
src/Components/ActivityListItem.js
+ 11
− 4
View file @ 06b5ac10
......@@ -116,10 +116,17 @@ export default function ActivityListItem (props) {
return (
<StyledListItem>
<ListItemAvatar>
<Avatar alt='user avatar' src={props.avatar ? props.avatar : noAvatar}/>
</ListItemAvatar>
{getNotificationIcon(activity.icon)}
{
!props.onMenuBar &&
<>
<ListItemAvatar>
<Avatar alt='user avatar' src={props.avatar ? props.avatar : noAvatar}/>
</ListItemAvatar>
getNotificationIcon(activity.icon)
</>
}
<ListItemText
primary = {
<div>
......
src/Components/LoginComponent.js deleted 100644 → 0
+ 0
− 158
View file @ 2397c2a5
/*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, useState, useEffect} from 'react';
import { Button } from '@material-ui/core';
import Modal from '@material-ui/core/Modal';
import Backdrop from '@material-ui/core/Backdrop';
import Zoom from '@material-ui/core/Fade';
import styled from 'styled-components'
import LoginContainer from './LoginContainerFunction.js'
import {Store} from '../Store.js'
import axios from 'axios'
import {apiUrl} from '../env';
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 LoginComponent (props) {
const {state, dispatch} = useContext(Store)
/*snackbar variables*/
const [successSnackbar, toggleSuccessSnackbar] = useState(false)
const [failSnackbar, toggleFailSnackbar] = useState(false)
useEffect( () => {
if(state.currentUser.id === '') {
const email = sessionStorage.getItem('@portalmec/uid')
const password = sessionStorage.getItem('@portalmec/senha')
let loginInfo = {email : email, senha : password}
tryLogin(loginInfo)
}
}, [])
const tryLogin = (login) => {
axios.post(`${apiUrl}/auth/sign_in`,
{
email : login.email,
password : login.senha
}).then( (response) => {
console.log(response)
handleSuccess(response, login.senha)
},
(error) => {
handleFailure()
}
)
}
const handleSuccess = (response, senha) => {
toggleSuccessSnackbar(true)
dispatch ({
type: "USER_LOGGED_IN",
userLoggedIn: !state.userIsLoggedIn,
login: {
id : response.data.data.id,
username : response.data.data.name,
email : response.data.data.email,
accessToken : response.headers['access-token'],
clientToken : response.headers.client,
userAvatar : response.data.data.avatar_file_name,
userCover : response.data.data.cover_file_name,
uid : response.data.data.uid,
followCount : response.data.data.follows_count,
collectionsCount : response.data.data.collections_count,
submitter_request : response.data.data.submitter_request
}
}
)
sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
sessionStorage.setItem('@portalmec/clientToken', response.headers.client)
sessionStorage.setItem('@portalmec/id', response.data.data.id)
sessionStorage.setItem('@portalmec/username', response.data.data.name)
sessionStorage.setItem('@portalmec/uid', response.data.data.uid)
sessionStorage.setItem('@portalmec/senha', senha)
props.handleClose()
}
const handleFailure = () => {
toggleFailSnackbar(false)
}
return (
<>
{/*failure snackbar-----------------------------------------------------------------*/}
<Snackbar open={failSnackbar} autoHideDuration={1000} onClose={() => {toggleFailSnackbar(false)}}
anchorOrigin = {{ vertical:'top', horizontal:'right' }}
>
<Alert severity="error">Ocorreu um erro ao se conectar!</Alert>
</Snackbar>
{/*---------------------------------------------------------------------------------*/}
{/*success snackbar-----------------------------------------------------------------*/}
<Snackbar open={successSnackbar} autoHideDuration={1000}
onClose={() => {toggleSuccessSnackbar(false)}} anchorOrigin = {{ vertical:'top', horizontal:'middle' }}
>
<Alert severity="success" style={{backgroundColor:"#00acc1"}}>Você está conectado(a)!</Alert>
</Snackbar>
{/*---------------------------------------------------------------------------------*/}
<StyledLogin
aria-labelledby="transition-modal-title"
aria-describedby="transition-modal-description"
open={props.open}
animation="true"
centered="true"
onClose={props.handleClose}
closeAfterTransition
BackdropComponent={Backdrop}
BackdropProps={{
timeout: 500,
}}
>
<Zoom in={props.open} style={{ transitionDelay :"0.2ms"}}>
<LoginContainer
handleClose={props.handleClose}
openSignUp={props.openSignUp}
handleLoginInfo={tryLogin}
/>
</Zoom>
</StyledLogin>
</>
)
}
const StyledLogin = styled(Modal)`
margin : 0 !important;
margin-left : 0 !important;
display : flex;
align-items: center;
justify-content : center;
text-align : center;
padding : 10px !important;
border-radius : 4px;
`
src/Components/Notifications.js
+ 103
− 13
View file @ 06b5ac10
......@@ -15,12 +15,22 @@ 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 React, {useState, useEffect} from 'react';
import NotificationsIcon from '@material-ui/icons/Notifications';
import { Button } from '@material-ui/core';
import Badge from '@material-ui/core/Badge';
import styled from 'styled-components'
import Menu from '@material-ui/core/Menu';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import MenuItem from '@material-ui/core/MenuItem';
import MoreVertIcon from '@material-ui/icons/MoreVert';
import OpenIcon from '@material-ui/icons/OpenInNew';
import ReportIcon from '@material-ui/icons/Error';
import NotificationsInner from './NotificationsInner.js'
import {apiDomain, apiUrl} from '../env.js'
import axios from 'axios'
import ActivityListItem from './ActivityListItem.js'
import {getAxiosConfig} from './HelperFunctions/getAxiosConfig.js'
const StyledBadge = styled(Badge) `
.MuiBadge-dot-45{
height : 9px ;
......@@ -40,26 +50,106 @@ const StyledNotificationButton = styled(Button)`
height : 56px !important;
width : 56px !important;
border-radius : 50% !important;
&&:hover {
color : #00bcd4;
&:hover {
color : #00bcd4 !important;
}
`
function NotificationButton () {
export default function Notification (props) {
const [anchorEl, setAnchorEl] = React.useState(null);
const [notifications, setNotifications] = useState([]);
const [notificatonsLength, setLength] = useState(0);
useEffect(() => {
let config = getAxiosConfig()
axios.get(`${apiUrl}/feed?offset=0&limit=30`, config)
.then( (response) => {
if ( response.headers['access-token'] ) {
sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
}
console.log('atividades response: ', response)
setNotifications(response.data)
setLength(response.data.length)
},
(error) => {
console.log('error while running getNotifications')
}
)
}, [])
function handleClick(event) {
setAnchorEl(event.currentTarget);
}
function handleClose() {
setAnchorEl(null);
}
return (
<StyledNotificationButton>
<StyledBadge badgeContent="1" color="secondary" variant="dot" overlap="circle" className="badge">
<React.Fragment>
<StyledNotificationButton onClick={handleClick}>
<StyledBadge badgeContent={1} color="secondary" variant="dot" overlap="circle" className="badge">
<StyledNotificationsIcon/>
</StyledBadge>
</StyledNotificationButton>
<StyledMenu
id="simple-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
>
<ContainerDiv>
<div className="cabecalho">
<span style={{fontSize : "15px"}}>NOTIFICAÇÕES •</span>
<span className="cabecalho-marcar">Marcar todas como lidas</span>
</div>
{
notifications.map( (notification) =>
<ActivityListItem
onMenuBar={true}
avatar = {notification.owner.avatar ? apiDomain + notification.owner.avatar : null}
activity = {notification.activity}
actionType = {notification.trackable_type}
objectType = {notification.recipient_type}
createdAt = {notification.created_at}
ownerName = {notification.owner.name}
ownerHref = {'/usuario-publico/' + notification.owner.id}
recipientName = {notification.recipient.name}
/>
)
}
</ContainerDiv>
</StyledMenu>
</React.Fragment>
)
}
export default function Notification (props) {
const StyledMenu = styled(Menu)`
`
return (
<NotificationButton>
</NotificationButton>
)
const ContainerDiv = styled.div`
margin-top : 10px;
right : 5%;
width : 360px;
max-height : 400px;
position : absolute;
box-shadow : 8px 8px 8px 8px
rgba(0,0,0,.1);
overflow-y : scroll;
padding : 5px 5px 5px 5px;
min-width : 160px;
}
.cabecalho {
border-bottom : 1px solid #666;
.cabecalho-marcar {
font-family: Lato,bold;
font-size: 12px;
-webkit-text-decoration-line: underline;
text-decoration-line: underline;
float: right;
}
}
`
src/Components/NotificationsInner.js 0 → 100644
+ 79
− 0
View file @ 06b5ac10
import React, {useState, useContext, useEffect} from 'react'
import styled from 'styled-components'
import {apiDomain, apiUrl} from '../env.js'
import axios from 'axios'
import ActivityListItem from './ActivityListItem.js'
import {getAxiosConfig} from './HelperFunctions/getAxiosConfig.js'
export default function NotificationInner (props) {
const [notifications, setNotifications] = useState([]);
const [notificatonsLength, setLength] = useState(0);
useEffect(() => {
let config = getAxiosConfig()
axios.get(`${apiUrl}/feed?offset=0&limit=30`, config)
.then( (response) => {
if ( response.headers['access-token'] ) {
sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
}
console.log('atividades response: ', response)
setNotifications(response.data)
setLength(response.data.length)
},
(error) => {
console.log('error while running getNotifications')
}
)
}, [])
return (
<ContainerDiv>
<div className="cabecalho">
<span style={{fontSize : "15px"}}>NOTIFICAÇÕES •</span>
<span className="cabecalho-marcar">Marcar todas como lidas</span>
</div>
{
notifications.map( (notification) =>
<ActivityListItem
onMenuBar={true}
avatar = {notification.owner.avatar ? apiDomain + notification.owner.avatar : null}
activity = {notification.activity}
actionType = {notification.trackable_type}
objectType = {notification.recipient_type}
createdAt = {notification.created_at}
ownerName = {notification.owner.name}
ownerHref = {'/usuario-publico/' + notification.owner.id}
recipientName = {notification.recipient.name}
/>
)
}
</ContainerDiv>
)
}
const ContainerDiv = styled.div`
margin-top : 10px;
right : 5%;
width : 360px;
max-height : 400px;
position : absolute;
box-shadow : 8px 8px 8px 8px
rgba(0,0,0,.1);
overflow-y : scroll;
padding : 5px 5px 5px 5px;
min-width : 160px;
.cabecalho {
border-bottom : 1px solid #666;
.cabecalho-marcar {
font-family: Lato,bold;
font-size: 12px;
-webkit-text-decoration-line: underline;
text-decoration-line: underline;
float: right;
}
}
`
src/Components/UploadPageComponents/UploadFileWrapper.js
+ 6
− 6
View file @ 06b5ac10
......@@ -47,16 +47,16 @@ export default function UploadFileWrapper (props) {
- submit : called when the user clicks "ENVIAR" inside ChooseLinkSection; renders the alert snackbar to let them know the link was submitted
*/
const [stage, setStage] = useState("default")
const [stage, setStage] = useState(props.prevFile ? "fileSelected" : "default")
const handleNextStage = (newStage) => {setStage(newStage)}
const [fileToUpload, setFileToUpload] = useState(null);
const chunkSize = 262144
const uploadUrl = `${apiUrl}/learning_objects/` + props.draftID + '/chunk'
const [fileName, setFileName] = useState(null)
const [fileDoneUploading, setFileDoneUploading] = useState(false)
const [fileName, setFileName] = useState(props.prevFile ? props.prevFile.name : null)
const [fileDoneUploading, setFileDoneUploading] = useState(props.prevFile ? true : false)
const [uploadProgress, setProgress] = useState(0)
const [attachmentID, setAttachmentID] = useState(null)
const [attachmentID, setAttachmentID] = useState(props.prevFile ? props.prevFile.id : null)
async function onFileChange (file) {
if(!file) return;
......@@ -178,8 +178,8 @@ export default function UploadFileWrapper (props) {
return(
<WrapperBox>
<div className="inner">
<div className="upload-title"> Enviar Link</div>
<span>Ocorreu um erro, clique no botão para tentar novamente.</span>
<div className="upload-title">Erro</div>
<span>Clique no botão para tentar novamente.</span>
<div className="flex-column">
<div className="buttons-div">
<GrayButton onClick={() => {handleNextStage("default")}}>
......
src/Pages/EditLearningObjectPage.js
+ 17
− 11
View file @ 06b5ac10
......@@ -104,10 +104,6 @@ export default function EditLearningObjectPage (props) {
)
}, [, state.currentUser.id])
const [object, setObject] = useState()
const handleChooseObject = (obj) => {
setObject(obj)
}
const [loading, toggleLoading] = useState(true)
const [updatedInfo, setUpdatedInfo] = useState({})
......@@ -127,7 +123,7 @@ export default function EditLearningObjectPage (props) {
if ( response.headers['access-token'] ) {
sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
}
props.history.goBack()
props.history.push("/")
},
(error) => {
console.log(error)
......@@ -143,7 +139,12 @@ export default function EditLearningObjectPage (props) {
}
console.log(payload)
axios.put((`${apiUrl}/learning_objects/` + learningObject.id), payload, config).then(
(response) => {console.log(response.data); props.history.goBack()},
(response) => {
if ( response.headers['access-token'] ) {
sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
}
console.log(response.data); props.history.goBack()
},
(error) => {console.log(error)}
)
}
......@@ -156,7 +157,13 @@ export default function EditLearningObjectPage (props) {
}
console.log(payload)
axios.post((`${apiUrl}/learning_objects/` + learningObject.id + '/publish'), payload, config).then(
(response) => {console.log(response.data); props.history.push('/recurso/' + learningObject.id)},
(response) => {
if ( response.headers['access-token'] ) {
sessionStorage.setItem('@portalmec/accessToken', response.headers['access-token'])
}
console.log(response.data);
props.history.push('/recurso/' + learningObject.id)
},
(error) => {console.log(error)}
)
}
......@@ -254,7 +261,6 @@ export default function EditLearningObjectPage (props) {
}
}
{/*PEGAR A THUMBNAIL JA EXISTENTE SE HOUVER*/}
return (
<React.Fragment>
<Snackbar open={snackbarOpen} autoHideDuration={1000} onClose={() => {toggleSnackbar(false)}}
......@@ -271,11 +277,11 @@ export default function EditLearningObjectPage (props) {
<div className="container">
<Grid container spacing={2}>
<Grid item md={4} xs={12}>
<UploadFileWrapper submit={handleChooseObject}/>
<UploadFileWrapper draftID={recursoId} prevFile={learningObject. attachments ? learningObject.attachments[0] : null}/>
</Grid>
<Grid item md={8} xs={12}>
<InfoBox>
<form>
<form onSubmit={handlePost}>
<div className="cabecalho">
<h2>Editar Recurso</h2>
</div>
......@@ -355,7 +361,7 @@ export default function EditLearningObjectPage (props) {
{
learningObject.state === "draft" &&
<OrangeButton onClick={() => {handlePost()}}>
<OrangeButton type="submit">
PUBLICAR RECURSO
</OrangeButton>
}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment