From 5b38ed263a3efd88a215c0911dc969303001645c Mon Sep 17 00:00:00 2001 From: Daniel Kos Date: Wed, 1 Aug 2018 08:54:56 +0200 Subject: [PATCH] Move columns definition out of middleware scope Feature #13887 Arvados-DCO-1.1-Signed-off-by: Daniel Kos --- .../data-explorer-middleware-service.ts | 2 - .../data-explorer/data-explorer-middleware.ts | 14 +++-- .../favorite-panel-middleware-service.ts | 6 +-- .../project-panel-middleware-service.ts | 6 +-- .../data-explorer/data-explorer.tsx | 51 ++++++++++--------- src/views/favorite-panel/favorite-panel.tsx | 1 + src/views/project-panel/project-panel.tsx | 1 + 7 files changed, 38 insertions(+), 43 deletions(-) diff --git a/src/store/data-explorer/data-explorer-middleware-service.ts b/src/store/data-explorer/data-explorer-middleware-service.ts index e47824c1..14be4ea7 100644 --- a/src/store/data-explorer/data-explorer-middleware-service.ts +++ b/src/store/data-explorer/data-explorer-middleware-service.ts @@ -3,7 +3,6 @@ // SPDX-License-Identifier: AGPL-3.0 import { Dispatch, MiddlewareAPI } from "redux"; -import { DataColumns } from "../../components/data-table/data-table"; import { RootState } from "../store"; export abstract class DataExplorerMiddlewareService { @@ -17,6 +16,5 @@ export abstract class DataExplorerMiddlewareService { return this.id; } - abstract getColumns(): DataColumns; abstract requestItems(api: MiddlewareAPI): void; } diff --git a/src/store/data-explorer/data-explorer-middleware.ts b/src/store/data-explorer/data-explorer-middleware.ts index c4ea4e53..146867c3 100644 --- a/src/store/data-explorer/data-explorer-middleware.ts +++ b/src/store/data-explorer/data-explorer-middleware.ts @@ -8,17 +8,15 @@ import { dataExplorerActions, bindDataExplorerActions } from "./data-explorer-ac import { DataExplorerMiddlewareService } from "./data-explorer-middleware-service"; export const dataExplorerMiddleware = (service: DataExplorerMiddlewareService): Middleware => api => next => { + const handleAction = (handler: (data: T) => void) => + (data: T) => { + if (data.id === service.getId()) { + handler(data); + } + }; const actions = bindDataExplorerActions(service.getId()); - next(actions.SET_COLUMNS({ columns: service.getColumns() })); return action => { - const handleAction = (handler: (data: T) => void) => - (data: T) => { - next(action); - if (data.id === service.getId()) { - handler(data); - } - }; dataExplorerActions.match(action, { SET_PAGE: handleAction(() => { api.dispatch(actions.REQUEST_ITEMS()); diff --git a/src/store/favorite-panel/favorite-panel-middleware-service.ts b/src/store/favorite-panel/favorite-panel-middleware-service.ts index 7df86d9b..8908fff7 100644 --- a/src/store/favorite-panel/favorite-panel-middleware-service.ts +++ b/src/store/favorite-panel/favorite-panel-middleware-service.ts @@ -3,7 +3,7 @@ // SPDX-License-Identifier: AGPL-3.0 import { DataExplorerMiddlewareService } from "../data-explorer/data-explorer-middleware-service"; -import { columns, FavoritePanelFilter, FavoritePanelColumnNames } from "../../views/favorite-panel/favorite-panel"; +import { FavoritePanelFilter, FavoritePanelColumnNames } from "../../views/favorite-panel/favorite-panel"; import { RootState } from "../store"; import { DataColumns } from "../../components/data-table/data-table"; import { FavoritePanelItem, resourceToDataItem } from "../../views/favorite-panel/favorite-panel-item"; @@ -21,10 +21,6 @@ export class FavoritePanelMiddlewareService extends DataExplorerMiddlewareServic super(id); } - getColumns() { - return columns; - } - requestItems(api: MiddlewareAPI) { const dataExplorer = api.getState().dataExplorer[this.getId()]; const columns = dataExplorer.columns as DataColumns; diff --git a/src/store/project-panel/project-panel-middleware-service.ts b/src/store/project-panel/project-panel-middleware-service.ts index 626b9263..761ec188 100644 --- a/src/store/project-panel/project-panel-middleware-service.ts +++ b/src/store/project-panel/project-panel-middleware-service.ts @@ -3,7 +3,7 @@ // SPDX-License-Identifier: AGPL-3.0 import { DataExplorerMiddlewareService } from "../data-explorer/data-explorer-middleware-service"; -import { columns, ProjectPanelColumnNames, ProjectPanelFilter } from "../../views/project-panel/project-panel"; +import { ProjectPanelColumnNames, ProjectPanelFilter } from "../../views/project-panel/project-panel"; import { RootState } from "../store"; import { DataColumns } from "../../components/data-table/data-table"; import { groupsService } from "../../services/services"; @@ -22,10 +22,6 @@ export class ProjectPanelMiddlewareService extends DataExplorerMiddlewareService super(id); } - getColumns() { - return columns; - } - requestItems(api: MiddlewareAPI) { const state = api.getState(); const dataExplorer = state.dataExplorer[this.getId()]; diff --git a/src/views-components/data-explorer/data-explorer.tsx b/src/views-components/data-explorer/data-explorer.tsx index 2645504c..6449bf8d 100644 --- a/src/views-components/data-explorer/data-explorer.tsx +++ b/src/views-components/data-explorer/data-explorer.tsx @@ -10,9 +10,11 @@ import { Dispatch } from "redux"; import { dataExplorerActions } from "../../store/data-explorer/data-explorer-action"; import { DataColumn } from "../../components/data-table/data-column"; import { DataTableFilterItem } from "../../components/data-table-filters/data-table-filters"; +import { DataColumns } from "../../components/data-table/data-table"; interface Props { id: string; + columns: DataColumns; onRowClick: (item: any) => void; onContextMenu: (event: React.MouseEvent, item: any) => void; onRowDoubleClick: (item: any) => void; @@ -22,37 +24,40 @@ interface Props { const mapStateToProps = (state: RootState, { id }: Props) => getDataExplorer(state.dataExplorer, id); -const mapDispatchToProps = (dispatch: Dispatch, { id, onRowClick, onRowDoubleClick, onContextMenu }: Props) => ({ - onSearch: (searchValue: string) => { - dispatch(dataExplorerActions.SET_SEARCH_VALUE({ id, searchValue })); - }, +const mapDispatchToProps = (dispatch: Dispatch, { id, columns, onRowClick, onRowDoubleClick, onContextMenu }: Props) => { + dispatch(dataExplorerActions.SET_COLUMNS({ id, columns })); + return { + onSearch: (searchValue: string) => { + dispatch(dataExplorerActions.SET_SEARCH_VALUE({ id, searchValue })); + }, - onColumnToggle: (column: DataColumn) => { - dispatch(dataExplorerActions.TOGGLE_COLUMN({ id, columnName: column.name })); - }, + onColumnToggle: (column: DataColumn) => { + dispatch(dataExplorerActions.TOGGLE_COLUMN({ id, columnName: column.name })); + }, - onSortToggle: (column: DataColumn) => { - dispatch(dataExplorerActions.TOGGLE_SORT({ id, columnName: column.name })); - }, + onSortToggle: (column: DataColumn) => { + dispatch(dataExplorerActions.TOGGLE_SORT({ id, columnName: column.name })); + }, - onFiltersChange: (filters: DataTableFilterItem[], column: DataColumn) => { - dispatch(dataExplorerActions.SET_FILTERS({ id, columnName: column.name, filters })); - }, + onFiltersChange: (filters: DataTableFilterItem[], column: DataColumn) => { + dispatch(dataExplorerActions.SET_FILTERS({ id, columnName: column.name, filters })); + }, - onChangePage: (page: number) => { - dispatch(dataExplorerActions.SET_PAGE({ id, page })); - }, + onChangePage: (page: number) => { + dispatch(dataExplorerActions.SET_PAGE({ id, page })); + }, - onChangeRowsPerPage: (rowsPerPage: number) => { - dispatch(dataExplorerActions.SET_ROWS_PER_PAGE({ id, rowsPerPage })); - }, + onChangeRowsPerPage: (rowsPerPage: number) => { + dispatch(dataExplorerActions.SET_ROWS_PER_PAGE({ id, rowsPerPage })); + }, - onRowClick, + onRowClick, - onRowDoubleClick, + onRowDoubleClick, - onContextMenu, -}); + onContextMenu, + }; +}; export const DataExplorer = connect(mapStateToProps, mapDispatchToProps)(DataExplorerComponent); diff --git a/src/views/favorite-panel/favorite-panel.tsx b/src/views/favorite-panel/favorite-panel.tsx index 92d8c392..f99afecb 100644 --- a/src/views/favorite-panel/favorite-panel.tsx +++ b/src/views/favorite-panel/favorite-panel.tsx @@ -146,6 +146,7 @@ export const FavoritePanel = withStyles(styles)( render() { return