From 9cc72105485037ea08263ef0db53741c9566f82b Mon Sep 17 00:00:00 2001
From: Alexandru Munteanu <alexandru.munteanu@thinslices.com>
Date: Thu, 1 Feb 2018 15:59:01 +0200
Subject: [PATCH] Fix lint
---
.../src/components/Dashboard/Dashboard.js | 46 ++++++++++++++++-
.../components/Dashboard/Dashboard.local.scss | 13 +++++
.../components/Dashboard/DashboardFilters.js | 49 ++++++++++++++++---
.../src/components/Dashboard/redux/filters.js | 37 +++++++++++++-
4 files changed, 136 insertions(+), 9 deletions(-)
diff --git a/packages/components-faraday/src/components/Dashboard/Dashboard.js b/packages/components-faraday/src/components/Dashboard/Dashboard.js
index ed359ff49..03de9a484 100644
--- a/packages/components-faraday/src/components/Dashboard/Dashboard.js
+++ b/packages/components-faraday/src/components/Dashboard/Dashboard.js
@@ -1,6 +1,8 @@
import React from 'react'
import { get } from 'lodash'
import { Button } from '@pubsweet/ui'
+import { connect } from 'react-redux'
+import { compose, withHandlers } from 'recompose'
import classes from './Dashboard.local.scss'
import DashboardItems from './DashboardItems'
@@ -13,6 +15,8 @@ const Dashboard = ({
dashboard,
deleteProject,
listView,
+ filters,
+ getItems,
}) => (
<div className={classes.root}>
<div className={classes.header}>
@@ -24,10 +28,48 @@ const Dashboard = ({
<DashboardFilters changeView={changeViewMode} listView={listView} />
<DashboardItems
deleteProject={deleteProject}
- list={get(currentUser, 'admin') ? dashboard.all : dashboard.owner}
+ list={getItems()}
listView={listView}
/>
</div>
)
-export default Dashboard
+export default compose(
+ connect(state => ({
+ filters: state.filters.filter,
+ sortOrder: state.filters.sortValue,
+ })),
+ withHandlers({
+ getItems: ({ filters, sortOrder, currentUser, dashboard }) => () => {
+ const userItems = get(currentUser, 'admin')
+ ? dashboard.all
+ : dashboard.owner
+ const statusItems =
+ filters.status === 'all'
+ ? userItems
+ : userItems.filter(item => {
+ const itemStatus = get(item, 'status')
+ if (!itemStatus && filters.status === 'draft') {
+ return true
+ }
+ return itemStatus === filters.status
+ })
+ const ownerItems =
+ filters.owner === 'all'
+ ? statusItems
+ : statusItems.filter(item => {
+ const itemOwnerIds = item.owners.map(o => o.id)
+ if (filters.owner === 'me') {
+ return itemOwnerIds.includes(currentUser.id)
+ } else if (filters.owner === 'other') {
+ return !itemOwnerIds.includes(currentUser.id)
+ }
+ return false
+ })
+ return ownerItems.sort((a, b) => {
+ if (sortOrder === 'newest') return a.created - b.created < 0
+ return a.created - b.created > 0
+ })
+ },
+ }),
+)(Dashboard)
diff --git a/packages/components-faraday/src/components/Dashboard/Dashboard.local.scss b/packages/components-faraday/src/components/Dashboard/Dashboard.local.scss
index bc62ceb69..c4b717e21 100644
--- a/packages/components-faraday/src/components/Dashboard/Dashboard.local.scss
+++ b/packages/components-faraday/src/components/Dashboard/Dashboard.local.scss
@@ -15,11 +15,24 @@
}
.filters {
+ align-items: flex-end;
+ display: flex;
+
> span {
border: 1px solid gray;
margin: 0 0.5em;
padding: 0 5px;
}
+
+ .filter-group {
+ align-items: flex-start;
+ display: flex;
+ flex-direction: column;
+
+ > span {
+ margin-left: 10px;
+ }
+ }
}
.disabled {
diff --git a/packages/components-faraday/src/components/Dashboard/DashboardFilters.js b/packages/components-faraday/src/components/Dashboard/DashboardFilters.js
index 124ca5583..45ceb6508 100644
--- a/packages/components-faraday/src/components/Dashboard/DashboardFilters.js
+++ b/packages/components-faraday/src/components/Dashboard/DashboardFilters.js
@@ -1,7 +1,27 @@
import React from 'react'
-import { Icon } from '@pubsweet/ui'
+import { connect } from 'react-redux'
+import { Icon, Menu } from '@pubsweet/ui'
+import { compose, withHandlers } from 'recompose'
import classes from './Dashboard.local.scss'
+import { changeFilter, changeSort } from './redux/filters'
+
+const statusFilterOptions = [
+ { label: 'All', value: 'all' },
+ { label: 'Submitted', value: 'submitted' },
+ { label: 'Draft', value: 'draft' },
+]
+
+const ownerFilterOptions = [
+ { label: 'Everyone', value: 'all' },
+ { label: 'My work', value: 'me' },
+ { label: `Other's work`, value: 'other' },
+]
+
+const sortOptions = [
+ { label: 'Newest first', value: 'newest' },
+ { label: 'Oldest first', value: 'oldest' },
+]
const DashboardFilters = ({
view,
@@ -9,14 +29,24 @@ const DashboardFilters = ({
createdAt,
changeView,
listView,
+ changeFilter,
+ changeSort,
}) => (
<div className={classes.filtersContainer}>
<div className={classes.filters}>
Filter view:
- <span> My work </span>
- <span> Type </span>
- <span> Status </span>
- <span> Newest on top </span>
+ <div className={classes['filter-group']}>
+ <span>Owner</span>
+ <Menu onChange={changeFilter('owner')} options={ownerFilterOptions} />
+ </div>
+ <div className={classes['filter-group']}>
+ <span>Status</span>
+ <Menu onChange={changeFilter('status')} options={statusFilterOptions} />
+ </div>
+ <div className={classes['filter-group']}>
+ <span>Sort</span>
+ <Menu onChange={changeSort} options={sortOptions} />
+ </div>
</div>
<div className={classes.viewMode} onClick={changeView}>
<div className={classes.icon}>
@@ -27,4 +57,11 @@ const DashboardFilters = ({
</div>
)
-export default DashboardFilters
+export default compose(
+ connect(null, { changeFilter, changeSort }),
+ withHandlers({
+ changeFilter: ({ changeFilter }) => filterKey => value => {
+ changeFilter(filterKey, value)
+ },
+ }),
+)(DashboardFilters)
diff --git a/packages/components-faraday/src/components/Dashboard/redux/filters.js b/packages/components-faraday/src/components/Dashboard/redux/filters.js
index 4bf55715d..e50016723 100644
--- a/packages/components-faraday/src/components/Dashboard/redux/filters.js
+++ b/packages/components-faraday/src/components/Dashboard/redux/filters.js
@@ -1,5 +1,40 @@
-export default (state = {}, action) => {
+const initialState = {
+ filter: {
+ status: 'all',
+ owner: 'all',
+ },
+ sortValue: 'newest',
+}
+
+const CHANGE_FILTER = 'filters/CHANGE_FILTER'
+const CHANGE_SORT = 'filters/CHANGE_SORT'
+
+export const changeFilter = (filterKey, value) => ({
+ type: CHANGE_FILTER,
+ filterKey,
+ value,
+})
+
+export const changeSort = value => ({
+ type: CHANGE_SORT,
+ value,
+})
+
+export default (state = initialState, action) => {
switch (action.type) {
+ case CHANGE_FILTER:
+ return {
+ ...state,
+ filter: {
+ ...state.filter,
+ [action.filterKey]: action.value,
+ },
+ }
+ case CHANGE_SORT:
+ return {
+ ...state,
+ sortValue: action.value,
+ }
default:
return state
}
--
GitLab