From fbdb6e69f8acc2832f89c61494efabb724d1b846 Mon Sep 17 00:00:00 2001
From: Alexandru Munteanu <alexandru.munt@gmail.com>
Date: Thu, 5 Jul 2018 12:50:09 +0300
Subject: [PATCH] feat(author-confirm): show notification bar untill author has
confirmed
---
.../component-faraday-selectors/src/index.js | 4 +
.../src/components/AppBar/AppBar.js | 139 +++++++++++-------
.../src/components/Dashboard/Dashboard.js | 4 +-
.../src/components/Dashboard/DashboardPage.js | 1 +
packages/xpub-faraday/app/FaradayApp.js | 8 +-
5 files changed, 96 insertions(+), 60 deletions(-)
diff --git a/packages/component-faraday-selectors/src/index.js b/packages/component-faraday-selectors/src/index.js
index ad0747cc0..bdb821d5a 100644
--- a/packages/component-faraday-selectors/src/index.js
+++ b/packages/component-faraday-selectors/src/index.js
@@ -97,3 +97,7 @@ export const getUserPermissions = ({ currentUser }) =>
objectType: t.object.type,
role: t.teamType.permissions,
}))
+
+export const isAuthorConfirmed = ({ currentUser }) =>
+ !currentUserIs({ currentUser }, 'staff') &&
+ get(currentUser, 'user.isConfirmed')
diff --git a/packages/components-faraday/src/components/AppBar/AppBar.js b/packages/components-faraday/src/components/AppBar/AppBar.js
index 9c04e8949..ad8a6eacc 100644
--- a/packages/components-faraday/src/components/AppBar/AppBar.js
+++ b/packages/components-faraday/src/components/AppBar/AppBar.js
@@ -4,65 +4,112 @@ import { connect } from 'react-redux'
import { Icon, th } from '@pubsweet/ui'
import { withRouter } from 'react-router-dom'
import styled, { withTheme } from 'styled-components'
-import { withState, withHandlers, compose } from 'recompose'
+import { withState, withHandlers, withProps, compose } from 'recompose'
+
+import { currentUserIs } from '../../../../component-faraday-selectors/src'
const AppBar = ({
+ goTo,
+ user,
+ brand,
+ theme,
expanded,
toggleMenu,
- brand,
- user,
- goTo,
currentUser,
onLogoutClick,
- theme,
+ shouldShowConfirmation,
}) => (
- <Root>
- <Brand>
- {React.cloneElement(brand, {
- onClick: goTo('/'),
- })}
- </Brand>
- {user && (
- <User>
- <div onClick={toggleMenu}>
- <Icon color={theme.colorText}>user</Icon>
- <span>
- {get(user, 'firstName') || get(user, 'username') || 'User'}
- </span>
- <Icon color={theme.colorText}>chevron-down</Icon>
- </div>
- {expanded && (
- <Dropdown>
- <DropdownOption>Settings</DropdownOption>
- {currentUser.admin && (
- <DropdownOption onClick={goTo('/admin')}>
- Admin dashboard
- </DropdownOption>
- )}
- <DropdownOption onClick={onLogoutClick}>Logout</DropdownOption>
- </Dropdown>
- )}
- </User>
+ <Root className="appbar">
+ <Row bordered className="row">
+ <Brand>
+ {React.cloneElement(brand, {
+ onClick: goTo('/'),
+ })}
+ </Brand>
+ {user && (
+ <User>
+ <div onClick={toggleMenu}>
+ <Icon color={theme.colorText}>user</Icon>
+ <span>
+ {get(user, 'firstName') || get(user, 'username') || 'User'}
+ </span>
+ <Icon color={theme.colorText}>chevron-down</Icon>
+ </div>
+ {expanded && (
+ <Dropdown>
+ <DropdownOption>Settings</DropdownOption>
+ {currentUser.admin && (
+ <DropdownOption onClick={goTo('/admin')}>
+ Admin dashboard
+ </DropdownOption>
+ )}
+ <DropdownOption onClick={onLogoutClick}>Logout</DropdownOption>
+ </Dropdown>
+ )}
+ </User>
+ )}
+ </Row>
+ {shouldShowConfirmation && (
+ <Row bgColor="salmon" centered className="row">
+ <ConfirmationText>
+ Your author account is not confirmed. Check your email.
+ </ConfirmationText>
+ </Row>
)}
{expanded && <ToggleOverlay onClick={toggleMenu} />}
</Root>
)
+export default compose(
+ withRouter,
+ withTheme,
+ connect(state => ({
+ currentUser: get(state, 'currentUser.user'),
+ isStaff: currentUserIs(state, 'staff'),
+ })),
+ withState('expanded', 'setExpanded', false),
+ withHandlers({
+ toggleMenu: ({ setExpanded }) => () => {
+ setExpanded(v => !v)
+ },
+ goTo: ({ setExpanded, history }) => path => () => {
+ setExpanded(v => false)
+ history.push(path)
+ },
+ }),
+ withProps(({ isStaff, currentUser }) => ({
+ shouldShowConfirmation: !isStaff && !get(currentUser, 'isConfirmed'),
+ })),
+)(AppBar)
+
// #region styled-components
const Root = styled.div`
align-items: center;
- box-shadow: ${th('dropShadow')};
+ background-color: #ffffff;
font-family: ${th('fontInterface')};
display: flex;
- justify-content: space-between;
- height: 60px;
+ flex-direction: column;
flex-grow: 1;
+ width: 100vw;
+
position: fixed;
- width: 100%;
+ top: 0;
z-index: 10;
- background-color: #ffffff;
`
+const Row = styled.div`
+ align-items: center;
+ align-self: stretch;
+ background-color: ${({ bgColor }) => bgColor || 'transparent'};
+ box-shadow: ${({ bordered }) => (bordered ? th('dropShadow') : 'none')};
+ display: flex;
+ justify-content: ${({ centered }) =>
+ centered ? 'center' : 'space-between;'};
+`
+
+const ConfirmationText = styled.span`
+ font-size: ${th('fontSizeBaseSmall')};
+`
const Brand = styled.div`
padding: 10px 20px;
cursor: pointer;
@@ -126,21 +173,3 @@ const ToggleOverlay = styled.div`
opacity: 0;
`
// #endregion
-
-export default compose(
- withRouter,
- withTheme,
- connect(state => ({
- currentUser: get(state, 'currentUser.user'),
- })),
- withState('expanded', 'setExpanded', false),
- withHandlers({
- toggleMenu: ({ setExpanded }) => () => {
- setExpanded(v => !v)
- },
- goTo: ({ setExpanded, history }) => path => () => {
- setExpanded(v => false)
- history.push(path)
- },
- }),
-)(AppBar)
diff --git a/packages/components-faraday/src/components/Dashboard/Dashboard.js b/packages/components-faraday/src/components/Dashboard/Dashboard.js
index 9a368a487..e40141b33 100644
--- a/packages/components-faraday/src/components/Dashboard/Dashboard.js
+++ b/packages/components-faraday/src/components/Dashboard/Dashboard.js
@@ -7,6 +7,7 @@ import { DashboardItems, DashboardFilters } from './'
const Dashboard = ({
dashboard,
+ currentUser,
filterItems,
filterValues,
deleteProject,
@@ -16,7 +17,7 @@ const Dashboard = ({
getDefaultFilterValue,
createDraftSubmission,
}) => (
- <Root>
+ <Root className="dashboard">
<Header>
<Heading>Manuscripts</Heading>
<HeaderButtons>
@@ -50,6 +51,7 @@ const Root = styled.div`
flex-direction: column;
margin: auto;
max-width: 60em;
+ overflow: auto;
`
const Header = styled.div`
diff --git a/packages/components-faraday/src/components/Dashboard/DashboardPage.js b/packages/components-faraday/src/components/Dashboard/DashboardPage.js
index 999e87de3..7dc3702ac 100644
--- a/packages/components-faraday/src/components/Dashboard/DashboardPage.js
+++ b/packages/components-faraday/src/components/Dashboard/DashboardPage.js
@@ -37,6 +37,7 @@ export default compose(
reviewer => reviewer && reviewer.user === currentUser.id,
),
),
+
all: sortedCollections,
}
const userPermissions = getUserPermissions(state)
diff --git a/packages/xpub-faraday/app/FaradayApp.js b/packages/xpub-faraday/app/FaradayApp.js
index 8938b7556..ae333761c 100644
--- a/packages/xpub-faraday/app/FaradayApp.js
+++ b/packages/xpub-faraday/app/FaradayApp.js
@@ -7,13 +7,13 @@ import { withJournal } from 'xpub-journal'
import { AppBar } from 'pubsweet-components-faraday/src/components'
const App = ({ children, currentUser, journal, logoutUser }) => (
- <Root>
+ <Root className="faraday-root">
<AppBar
brand={journal.metadata.name}
onLogoutClick={logoutUser}
user={currentUser}
/>
- <MainContainer>{children}</MainContainer>
+ <MainContainer className="faraday-main">{children}</MainContainer>
</Root>
)
@@ -35,7 +35,7 @@ const Root = styled.div`
`
const MainContainer = styled.div`
- padding: 90px 10px 40px;
- min-height: 100vh;
background-color: ${props => props.theme.backgroundColor || '#fff'};
+ padding: 110px 10px 0 10px;
+ height: 100vh;
`
--
GitLab