From 89de0a887c31b68e960ae549a1af5b6cbd4921d1 Mon Sep 17 00:00:00 2001
From: Alexandru Munteanu <alexandru.munt@gmail.com>
Date: Tue, 24 Apr 2018 10:41:59 +0300
Subject: [PATCH] refactor(admin-route): refactor error handling and styled
components
---
.../src/components/Admin/AddEditUser.js | 37 +++++++------------
.../src/components/Admin/AddUserForm.js | 2 -
.../src/components/Admin/AdminUsers.js | 37 ++++++++++---------
.../src/components/Admin/EditUserForm.js | 6 +--
.../src/components/Admin/Pagination.js | 27 +++++++-------
.../src/components/Admin/utils.js | 13 ++++++-
6 files changed, 60 insertions(+), 62 deletions(-)
diff --git a/packages/components-faraday/src/components/Admin/AddEditUser.js b/packages/components-faraday/src/components/Admin/AddEditUser.js
index 74e235305..f4bed2948 100644
--- a/packages/components-faraday/src/components/Admin/AddEditUser.js
+++ b/packages/components-faraday/src/components/Admin/AddEditUser.js
@@ -1,19 +1,24 @@
import React from 'react'
import { get } from 'lodash'
import { connect } from 'react-redux'
-import { reduxForm, SubmissionError } from 'redux-form'
import styled from 'styled-components'
+import { reduxForm } from 'redux-form'
+import { Button, th } from '@pubsweet/ui'
import { actions } from 'pubsweet-client'
-import { create, update } from 'pubsweet-client/src/helpers/api'
import { withJournal } from 'xpub-journal'
import { ConnectPage } from 'xpub-connect'
import { selectUser } from 'xpub-selectors'
-import { Button } from '@pubsweet/ui'
+import { create, update } from 'pubsweet-client/src/helpers/api'
import { compose, withProps, withHandlers, withState } from 'recompose'
import AddUserForm from './AddUserForm'
import EditUserForm from './EditUserForm'
-import { getRoleOptions, setAdmin, parseUpdateUser } from './utils'
+import {
+ getRoleOptions,
+ setAdmin,
+ parseUpdateUser,
+ handleFormError,
+} from './utils'
const onSubmit = (values, dispatch, { isEdit, history }) => {
if (!isEdit) {
@@ -27,30 +32,14 @@ const onSubmit = (values, dispatch, { isEdit, history }) => {
role: values.role,
})
})
- .catch(error => {
- const err = get(error, 'response')
- if (err) {
- const errorMessage = get(JSON.parse(err), 'error')
- throw new SubmissionError({
- _error: errorMessage || 'Something went wrong',
- })
- }
- })
+ .catch(handleFormError)
}
return update(`/users/${values.id}`, parseUpdateUser(values))
.then(() => {
history.push('/admin/users')
})
- .catch(error => {
- const err = get(error, 'response')
- if (err) {
- const errorMessage = get(JSON.parse(err), 'error')
- throw new SubmissionError({
- _error: errorMessage || 'Something went wrong',
- })
- }
- })
+ .catch(handleFormError)
}
const AddEditUser = ({
@@ -122,8 +111,8 @@ const Root = styled.div`
`
const FormContainer = styled.form`
- border: ${({ theme }) => theme.borderDefault};
- background-color: ${({ theme }) => theme.backgroundColorReverse};
+ border: ${th('borderDefault')};
+ background-color: ${th('backgroundColorReverse')};
margin: 0 auto;
min-width: 300px;
padding: 20px 40px;
diff --git a/packages/components-faraday/src/components/Admin/AddUserForm.js b/packages/components-faraday/src/components/Admin/AddUserForm.js
index a45aeab69..d67060d2f 100644
--- a/packages/components-faraday/src/components/Admin/AddUserForm.js
+++ b/packages/components-faraday/src/components/Admin/AddUserForm.js
@@ -62,7 +62,6 @@ const AddUserForm = ({ roles, journal, error }) => {
export default AddUserForm
// #region styles
-
const Row = styled.div`
display: flex;
flex-direction: row;
@@ -88,5 +87,4 @@ const Label = styled.div`
const ErrorMessage = styled.div`
color: ${th('colorError')};
`
-
// #endregion
diff --git a/packages/components-faraday/src/components/Admin/AdminUsers.js b/packages/components-faraday/src/components/Admin/AdminUsers.js
index f81860a85..ead06f97a 100644
--- a/packages/components-faraday/src/components/Admin/AdminUsers.js
+++ b/packages/components-faraday/src/components/Admin/AdminUsers.js
@@ -1,12 +1,12 @@
import React from 'react'
import { get, isEqual } from 'lodash'
import { connect } from 'react-redux'
-import styled, { withTheme } from 'styled-components'
-import { Icon, Menu, th } from '@pubsweet/ui'
import { actions } from 'pubsweet-client'
import { ConnectPage } from 'xpub-connect'
import { withJournal } from 'xpub-journal'
+import { Icon, Menu, th } from '@pubsweet/ui'
import { withRouter, Link } from 'react-router-dom'
+import styled, { withTheme } from 'styled-components'
import { compose, withState, withHandlers } from 'recompose'
import { Pagination } from './'
@@ -186,14 +186,14 @@ export default compose(
// #region styled-components
const AddButton = styled.button`
align-items: center;
+ background-color: ${th('backgroundColor')};
border: none;
cursor: pointer;
+ color: ${th('colorPrimary')};
display: flex;
font-family: ${th('fontInterface')};
font-size: ${th('fontSizeBaseSmall')};
text-align: left;
- color: ${th('colorPrimary')};
- background-color: ${th('backgroundColor')};
&:active,
&:focus {
@@ -205,18 +205,18 @@ const AddButton = styled.button`
`
const Header = styled.div`
+ align-items: center;
display: flex;
flex-direction: row;
- align-items: center;
`
const BreadCrumbs = styled.div`
& span {
- font-size: ${th('fontSizeBase')};
- text-align: left;
color: ${th('colorPrimary')};
cursor: pointer;
+ font-size: ${th('fontSizeBase')};
margin-left: calc(${th('subGridUnit')}*2);
+ text-align: left;
&:after {
content: '>';
@@ -241,19 +241,19 @@ const SubHeader = styled.div`
padding-bottom: calc(${th('subGridUnit')}*2);
> div:first-child {
- display: flex;
align-items: center;
+ display: flex;
> div {
margin-right: calc(${th('subGridUnit')});
}
}
span {
+ color: ${th('colorPrimary')};
font-family: ${th('fontReading')};
font-size: ${th('fontSizeBaseSmall')};
- text-align: left;
- color: ${th('colorPrimary')};
margin-right: calc(${th('subGridUnit')});
+ text-align: left;
}
`
@@ -263,13 +263,13 @@ const Table = styled.table`
width: 100%;
& thead tr {
- height: 40px;
border-bottom: ${th('borderDefault')};
+ color: ${th('colorPrimary')};
font-family: ${th('fontReading')};
font-size: ${th('fontSizeBaseSmall')};
font-weight: bold;
+ height: 40px;
text-align: left;
- color: ${th('colorPrimary')};
}
`
@@ -290,22 +290,22 @@ const Row = styled.tr`
const Tag = styled.span`
border: solid 1px #667080;
- text-transform: uppercase;
+ color: ${th('colorPrimary')};
font-family: ${th('fontReading')};
font-size: ${th('fontSizeBaseSmall')};
font-weight: bold;
- text-align: left;
- color: ${th('colorPrimary')};
- padding: 2px calc(${th('subGridUnit')}*2);
margin-right: calc(${th('subGridUnit')});
+ padding: 2px calc(${th('subGridUnit')}*2);
+ text-align: left;
+ text-transform: uppercase;
`
const Role = styled.div`
+ color: ${th('colorPrimary')};
font-size: ${th('fontSizeBaseSmall')};
+ line-height: 1.5;
text-align: left;
- color: ${th('colorPrimary')};
text-transform: uppercase;
- line-height: 1.5;
`
const Action = styled(Link)`
@@ -317,4 +317,5 @@ const Input = styled.input`
height: 20px;
width: 20px;
`
+
// #endregion
diff --git a/packages/components-faraday/src/components/Admin/EditUserForm.js b/packages/components-faraday/src/components/Admin/EditUserForm.js
index afbe740a1..20971b7fa 100644
--- a/packages/components-faraday/src/components/Admin/EditUserForm.js
+++ b/packages/components-faraday/src/components/Admin/EditUserForm.js
@@ -104,10 +104,10 @@ export default EditUserForm
// #region styles
const Row = styled.div`
+ background-color: ${th('backgroundColorReverse')};
display: flex;
flex-direction: row;
margin: calc(${th('subGridUnit')}*3) 0;
- background-color: ${th('backgroundColorReverse')};
`
const RowItem = styled.div`
@@ -116,14 +116,14 @@ const RowItem = styled.div`
`
const Title = styled.h4`
- font-size: ${th('fontSizeHeading4')};
color: ${th('colorPrimary')};
+ font-size: ${th('fontSizeHeading4')};
margin: calc(${th('subGridUnit')}*2) 0;
`
const Subtitle = styled.div`
- font-size: ${th('fontSizeBase')};
color: ${th('colorPrimary')};
+ font-size: ${th('fontSizeBase')};
margin: 0;
`
diff --git a/packages/components-faraday/src/components/Admin/Pagination.js b/packages/components-faraday/src/components/Admin/Pagination.js
index 3f9715bf7..a81b3d184 100644
--- a/packages/components-faraday/src/components/Admin/Pagination.js
+++ b/packages/components-faraday/src/components/Admin/Pagination.js
@@ -1,5 +1,5 @@
import React from 'react'
-import { Icon } from '@pubsweet/ui'
+import { Icon, th } from '@pubsweet/ui'
import styled, { withTheme } from 'styled-components'
const Pagination = ({
@@ -39,8 +39,8 @@ const Pagination = ({
export default withTheme(Pagination)
const Root = styled.div`
- display: flex;
align-items: center;
+ display: flex;
`
const Chevrons = styled.div`
@@ -50,16 +50,15 @@ const Chevrons = styled.div`
const IconButton = styled.button`
align-items: center;
+ background-color: ${th('backgroundColor')};
border: none;
+ color: ${th('colorPrimary')};
cursor: ${({ hide }) => (hide ? 'auto' : 'pointer')};
display: flex;
- font-family: ${({ theme }) => theme.fontInterface};
- font-size: ${({ theme }) => theme.fontSizeBaseSmall};
- text-align: left;
- color: ${({ theme }) => theme.colorPrimary};
- background-color: ${({ theme }) => theme.backgroundColor};
+ font-family: ${th('fontInterface')};
+ font-size: ${th('fontSizeBaseSmall')};
opacity: ${({ hide }) => (hide ? 0 : 1)};
- cursor: pointer;
+ text-align: left;
&:active,
&:focus {
@@ -71,18 +70,18 @@ const IconButton = styled.button`
`
const Showing = styled.div`
- display: flex;
align-items: center;
+ display: flex;
span:first-child {
- font-family: ${({ theme }) => theme.fontInterface};
- font-size: ${({ theme }) => theme.fontSizeBaseSmall};
- text-align: left;
- color: ${({ theme }) => theme.colorPrimary};
+ color: ${th('colorPrimary')};
+ font-family: ${th('fontInterface')};
+ font-size: ${th('fontSizeBaseSmall')};
margin-right: 10px;
+ text-align: left;
}
span:last-child {
- border: ${({ theme }) => theme.borderDefault};
+ border: ${th('borderDefault')};
padding: 2px 10px;
}
`
diff --git a/packages/components-faraday/src/components/Admin/utils.js b/packages/components-faraday/src/components/Admin/utils.js
index 5c761760f..9d1204cbb 100644
--- a/packages/components-faraday/src/components/Admin/utils.js
+++ b/packages/components-faraday/src/components/Admin/utils.js
@@ -1,4 +1,5 @@
-import { pick, map, omit } from 'lodash'
+import { SubmissionError } from 'redux-form'
+import { pick, map, omit, get } from 'lodash'
const generatePasswordHash = () =>
Array.from({ length: 4 }, () =>
@@ -43,3 +44,13 @@ export const parseUpdateUser = values => {
return pick(values, valuesToSave)
}
+
+export const handleFormError = error => {
+ const err = get(error, 'response')
+ if (err) {
+ const errorMessage = get(JSON.parse(err), 'error')
+ throw new SubmissionError({
+ _error: errorMessage || 'Something went wrong',
+ })
+ }
+}
--
GitLab