diff --git a/app/components/component-users-manager/src/User.jsx b/app/components/component-users-manager/src/User.jsx
index e97c282edf11a7061d46304afd5bff847850ca10..0d6341ba0017c25159be5b1c12285c708d1cbbae 100644
--- a/app/components/component-users-manager/src/User.jsx
+++ b/app/components/component-users-manager/src/User.jsx
@@ -3,7 +3,10 @@ import gql from 'graphql-tag'
import { useMutation } from '@apollo/react-hooks'
import { Action } from '@pubsweet/ui'
import { UserAvatar } from '../../component-avatar/src'
-import { Row, Cell, LastCell, UserCombo, Primary, Secondary, UserInfo } from './style'
+import { Row, Cell, LastCell } from './style'
+
+import { UserCombo, Primary, Secondary, UserInfo } from '../../shared'
+
import { convertTimestampToDate } from '../../../shared/time-formatting'
const DELETE_USER = gql`
diff --git a/app/components/component-users-manager/src/UsersManager.jsx b/app/components/component-users-manager/src/UsersManager.jsx
index 07baede85822971ceb3f17e200d961368f0ea1c1..83392a18c3d0eee04abc4bd0887dc74a60235678 100644
--- a/app/components/component-users-manager/src/UsersManager.jsx
+++ b/app/components/component-users-manager/src/UsersManager.jsx
@@ -1,12 +1,21 @@
import React, { useState } from 'react'
import gql from 'graphql-tag'
import { useQuery } from '@apollo/react-hooks'
-import { Heading } from '@pubsweet/ui'
+// import { Heading } from '@pubsweet/ui'
import User from './User'
-import { Container, Table, Header, Caret, Carets } from './style'
-import Spinner from '../../shared/Spinner'
-import Pagination from '../../shared/Pagination'
+import {
+ Container,
+ Table,
+ Header,
+ PageHeading,
+ Content,
+ Spinner,
+ Pagination,
+ CaretUp,
+ CaretDown,
+ Carets,
+} from './style'
const GET_USERS = gql`
query Users(
@@ -15,7 +24,12 @@ const GET_USERS = gql`
$offset: Int
$limit: Int
) {
- users(sort: $sort, filter: $filter, offset: $offset, limit: $limit) {
+ paginatedUsers(
+ sort: $sort
+ filter: $filter
+ offset: $offset
+ limit: $limit
+ ) {
totalCount
users {
id
@@ -30,38 +44,6 @@ const GET_USERS = gql`
}
`
-const CaretUp = ({ active }) => (
- <Caret
- aria-hidden="true"
- className=""
- data-icon="caret-up"
- fill="currentColor"
- focusable="false"
- height="1em"
- viewBox="0 0 100 100"
- width="1em"
- active={active}
- >
- <path d="M50 17L100.229 67.25H-0.229473L50 17Z" />
- </Caret>
-)
-
-
-const CaretDown = ({ active }) => (
- <Caret
- active={active}
- aria-hidden="true"
- className=""
- data-icon="caret-down"
- fill="currentColor"
- focusable="false"
- height="1em"
- viewBox="0 0 100 100"
- width="1em"
- >
- <path d="M50 84L-0.229473 33.75L100.229 33.75L50 84Z" />
- </Caret>
-)
const UsersManager = () => {
const SortHeader = ({ thisSortName, children }) => {
@@ -113,32 +95,34 @@ const UsersManager = () => {
if (loading) return <Spinner />
if (error) return `Error! ${error.message}`
- const { users, totalCount } = data.users
+ const { users, totalCount } = data.paginatedUsers
return (
<Container>
- <Heading level={1}>Users</Heading>
- <Table>
- <Header>
- <tr>
- <SortHeader thisSortName="username">Name</SortHeader>
- <SortHeader thisSortName="created">Created</SortHeader>
- <SortHeader thisSortName="admin">Admin</SortHeader>
- <th />
- </tr>
- </Header>
- <tbody>
- {users.map((user, key) => (
- <User key={user.id} number={key + 1} user={user} />
- ))}
- </tbody>
- </Table>
- <Pagination
- limit={limit}
- page={page}
- setPage={setPage}
- totalCount={totalCount}
- />
+ <PageHeading level={1}>Users</PageHeading>
+ <Content>
+ <Table>
+ <Header>
+ <tr>
+ <SortHeader thisSortName="username">Name</SortHeader>
+ <SortHeader thisSortName="created">Created</SortHeader>
+ <SortHeader thisSortName="admin">Admin</SortHeader>
+ <th />
+ </tr>
+ </Header>
+ <tbody>
+ {users.map((user, key) => (
+ <User key={user.id} number={key + 1} user={user} />
+ ))}
+ </tbody>
+ </Table>
+ <Pagination
+ limit={limit}
+ page={page}
+ setPage={setPage}
+ totalCount={totalCount}
+ />
+ </Content>
</Container>
)
}
diff --git a/app/components/component-users-manager/src/style.js b/app/components/component-users-manager/src/style.js
index fa04f19adc599d51ce510f6865e9f305cd042b52..4916f05bde871ca7378b85f7170db7c6d38c62f5 100644
--- a/app/components/component-users-manager/src/style.js
+++ b/app/components/component-users-manager/src/style.js
@@ -1,95 +1,23 @@
-import styled, { css } from 'styled-components'
-import { Action } from '@pubsweet/ui'
-import { th, grid } from '@pubsweet/ui-toolkit'
-
-export const Table = styled.table`
- width: 100%;
- border-radius: ${th('borderRadius')};
- border-collapse: collapse;
- font-size: ${th('fontSizeBaseSmall')};
-
- td {
- width: 33%;
- }
-`
-export const Header = styled.thead`
- text-align: left;
- font-variant: all-small-caps;
- border-bottom: 1px solid ${th('colorFurniture')};
-
- background-color: ${th('colorBackgroundHue')};
-
- th {
- padding: ${grid(1)} ${grid(3)};
- }
-`
-
-export const Container = styled.div`
- padding: ${grid(2)};
-`
-
-export const Row = styled.tr`
- max-height: ${grid(8)};
- border-bottom: 1px solid ${th('colorFurniture')};
-
- &:hover {
- background-color: ${th('colorBackgroundHue')};
- }
-`
-
-export const Cell = styled.td`
- padding-bottom: ${grid(2)};
- padding-top: calc(${grid(2)} - 1px);
- padding-left: ${grid(3)};
- padding-right: ${grid(3)};
- button {
- font-size: ${th('fontSizeBaseSmall')};
- }
-`
-
-export const UserCombo = styled.div`
- display: flex;
- line-height: ${grid(2.5)};
- align-items: center;
-`
-
-export const LastCell = styled(Cell)`
- text-align: right;
-`
-
-export const Primary = styled.div`
- font-weight: 500;
-`
-
-export const Secondary = styled.div`
- color: ${th('colorTextPlaceholder')};
-`
-
-export const UserInfo = styled.div`
- margin-left: ${grid(1)};
-`
-
-export const Caret = styled.svg`
- ${props =>
- props.active
- ? css`
- color: ${th('colorPrimary')};
- `
- : css`
- color: ${th('colorSecondary')};
- `}
-`
-
-export const Carets = styled.span`
- display: inline-flex;
- flex-direction: column;
- align-items: center;
- vertical-align: middle;
- margin-left: ${grid(0.5)};
- svg {
- height: ${grid(1.5)};
- }
- svg:nth-of-type(2) {
- margin-top: ${grid(-0.5)};
- }
-`
+// import styled, { css } from 'styled-components'
+// import { Action } from '@pubsweet/ui'
+// import { th, grid } from '@pubsweet/ui-toolkit'
+
+export {
+ Row,
+ Cell,
+ LastCell,
+ UserCombo,
+ Primary,
+ Secondary,
+ UserInfo,
+ Container,
+ Table,
+ Header,
+ Content,
+ PageHeading,
+ Carets,
+ CaretUp,
+ CaretDown,
+ Spinner,
+ Pagination,
+} from '../../shared'