AdminUsers.js

import React, { Fragment } from 'react'
import { get } from 'lodash'
import { connect } from 'react-redux'
import styled from 'styled-components'
import { Link } from 'react-router-dom'
import { th } from '@pubsweet/ui-toolkit'
import { actions } from 'pubsweet-client'
import { ConnectPage } from 'xpub-connect'
import { withJournal } from 'xpub-journal'
import { Icon, Button } from '@pubsweet/ui'
import { compose, withHandlers, withProps } from 'recompose'

import {
  Row,
  Text,
  Item,
  Label,
  OpenModal,
  Pagination,
  withFetching,
  withPagination,
} from 'pubsweet-component-faraday-ui'

import { AddUser } from './'
import { updateUserStatus } from './utils'

const NavLink = styled.div`
  align-items: center;
  cursor: auto;
  display: flex;
  justify-content: flex-start;
`

const Users = ({
  page,
  users,
  theme,
  history,
  journal,
  getUsers,
  isFetching,
  getUserRoles,
  itemsPerPage,
  deactivateUser,
  getStatusLabel,
  paginatedItems,
  toggleUserStatus,
  ...rest
}) => (
  <Fragment>
    <Row alignItems="center" justify="space-between" mb={3}>
      <Item alignItems="center">
        <NavLink>
          <Icon secondary size={2}>
            arrow-left
          </Icon>
          <Link to="/admin">Admin Dashboard</Link>
        </NavLink>
        <AddUser form="add-user" getUsers={getUsers} modalKey="addUser" />
      </Item>

      <Pagination {...rest} itemsPerPage={itemsPerPage} page={page} />
    </Row>

    <Row alignItems="center" mb={1} pl={2}>
      <Item flex={2}>
        <Label>Full name</Label>
      </Item>
      <Item flex={4}>
        <Label>Email</Label>
      </Item>
      <Item flex={2}>
        <Label>Affiliation</Label>
      </Item>
      <Item flex={2}>
        <Label>Roles</Label>
      </Item>
      <Item flex={1}>
        <Label>Status</Label>
      </Item>
      <Item />
      <Item />
    </Row>
    {paginatedItems.map(user => (
      <UserRow alignItems="center" key={user.id} pb={1 / 2} pl={2} pt={1 / 2}>
        <Item flex={2}>
          <Text>{`${user.firstName} ${user.lastName}`}</Text>
        </Item>
        <Item flex={4}>
          <Text>{user.email}</Text>
        </Item>
        <Item flex={2}>
          <Text>{user.affiliation}</Text>
        </Item>
        <Item flex={2}>
          <Text customId>{getUserRoles(user)}</Text>
        </Item>
        <Item flex={1} secondary>
          <Text>{getStatusLabel(user)}</Text>
        </Item>
        <HiddenItem justify="center">
          {!user.admin && (
            <AddUser
              edit
              form={`edit-${user.id}`}
              getUsers={getUsers}
              initialValues={user}
              modalKey={`edit-${user.id}`}
            />
          )}
        </HiddenItem>
        <HiddenItem justify="justify" pl={1} pr={1}>
          {!user.admin && (
            <OpenModal
              isFetching={isFetching}
              modalKey={`deactivate-${user.id}`}
              onConfirm={deactivateUser(user)}
              subtitle={`${user.firstName} ${user.lastName}`}
              title="Are you sure to deactivate user?"
            >
              {showModal => (
                <Button onClick={showModal} size="small">
                  DEACTIVATE
                </Button>
              )}
            </OpenModal>
          )}
        </HiddenItem>
      </UserRow>
    ))}
  </Fragment>
)

export default compose(
  ConnectPage(() => [actions.getUsers()]),
  connect(state => ({ items: get(state, 'users.users') }), {
    getUsers: actions.getUsers,
  }),
  withJournal,
  withFetching,
  withPagination,
  withProps(({ journal: { roles = {} } }) => ({
    roles: Object.keys(roles),
  })),
  withHandlers({
    getStatusLabel: () => ({ isConfirmed, isActive = true }) => {
      if (!isActive) {
        return 'INACTIVE'
      }
      return isConfirmed ? 'ACTIVE' : 'INVITED'
    },
    deactivateUser: ({ setFetching, getUsers }) => user => ({
      hideModal,
      setModalError,
    }) => {
      setFetching(true)
      updateUserStatus(user)
        .then(() => {
          setFetching(false)
          getUsers()
          hideModal()
        })
        .catch(() => {
          setFetching(false)
          setModalError('Something went wrong...')
        })
    },
    getUserRoles: ({ journal: { roles = {} } }) => user => {
      const parsedRoles = Object.entries(roles)
        .reduce((acc, role) => (user[role[0]] ? [...acc, role[1]] : acc), [])
        .join(', ')

      return !parsedRoles ? 'Author' : parsedRoles
    },
  }),
)(Users)

// #region styled-components
const HiddenItem = styled(Item)`
  opacity: 0;
`

const UserRow = styled(Row)`
  background-color: ${th('colorBackgroundHue2')};

  &:hover {
    background-color: #eeeeee;

    ${HiddenItem} {
      opacity: 1;
    }
  }
`
// #endregion