src/store/data-explorer/data-explorer-reducer.ts

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import {
   6     DataColumn,
   7     resetSortDirection,
   8     SortDirection,
   9     toggleSortDirection,
  10 } from 'components/data-table/data-column';
  11 import {
  12     DataExplorerAction,
  13     dataExplorerActions,
  14     DataTableRequestState,
  15 } from './data-explorer-action';
  16 import {
  17     DataColumns,
  18     DataTableFetchMode,
  19 } from 'components/data-table/data-table';
  20 import { DataTableFilters } from 'components/data-table-filters/data-table-filters-tree';
  21
  22 export interface DataExplorer {
  23     fetchMode: DataTableFetchMode;
  24     columns: DataColumns<any, any>;
  25     items: any[];
  26     itemsAvailable: number;
  27     page: number;
  28     rowsPerPage: number;
  29     rowsPerPageOptions: number[];
  30     searchValue: string;
  31     working?: boolean;
  32     requestState: DataTableRequestState;
  33 }
  34
  35 export const initialDataExplorer: DataExplorer = {
  36     fetchMode: DataTableFetchMode.PAGINATED,
  37     columns: [],
  38     items: [],
  39     itemsAvailable: 0,
  40     page: 0,
  41     rowsPerPage: 50,
  42     rowsPerPageOptions: [10, 20, 50, 100, 200, 500],
  43     searchValue: '',
  44     requestState: DataTableRequestState.IDLE,
  45 };
  46
  47 export type DataExplorerState = Record<string, DataExplorer>;
  48
  49 export const dataExplorerReducer = (
  50     state: DataExplorerState = {},
  51     action: DataExplorerAction
  52 ) => {
  53     return dataExplorerActions.match(action, {
  54         CLEAR: ({ id }) =>
  55             update(state, id, (explorer) => ({
  56                 ...explorer,
  57                 page: 0,
  58                 itemsAvailable: 0,
  59                 items: [],
  60             })),
  61
  62         RESET_PAGINATION: ({ id }) =>
  63             update(state, id, (explorer) => ({ ...explorer, page: 0 })),
  64
  65         SET_FETCH_MODE: ({ id, fetchMode }) =>
  66             update(state, id, (explorer) => ({ ...explorer, fetchMode })),
  67
  68         SET_COLUMNS: ({ id, columns }) => update(state, id, setColumns(columns)),
  69
  70         SET_FILTERS: ({ id, columnName, filters }) =>
  71             update(state, id, mapColumns(setFilters(columnName, filters))),
  72
  73         SET_ITEMS: ({ id, items, itemsAvailable, page, rowsPerPage }) => (
  74             update(state, id, (explorer) => {
  75                 // Reject updates to pages other than current,
  76                 //  DataExplorer middleware should retry
  77                 if (explorer.page === page) {
  78                     return {
  79                         ...explorer,
  80                         items,
  81                         itemsAvailable,
  82                         page: page || 0,
  83                         rowsPerPage,
  84                     }
  85                 } else {
  86                     return explorer;
  87                 }
  88             })
  89         ),
  90
  91         APPEND_ITEMS: ({ id, items, itemsAvailable, page, rowsPerPage }) =>
  92             update(state, id, (explorer) => ({
  93                 ...explorer,
  94                 items: state[id].items.concat(items),
  95                 itemsAvailable: state[id].itemsAvailable + itemsAvailable,
  96                 page,
  97                 rowsPerPage,
  98             })),
  99
 100         SET_PAGE: ({ id, page }) =>
 101             update(state, id, (explorer) => ({ ...explorer, page })),
 102
 103         SET_ROWS_PER_PAGE: ({ id, rowsPerPage }) =>
 104             update(state, id, (explorer) => ({ ...explorer, rowsPerPage })),
 105
 106         SET_EXPLORER_SEARCH_VALUE: ({ id, searchValue }) =>
 107             update(state, id, (explorer) => ({ ...explorer, searchValue })),
 108
 109         RESET_EXPLORER_SEARCH_VALUE: ({ id }) =>
 110             update(state, id, (explorer) => ({ ...explorer, searchValue: '' })),
 111
 112         SET_REQUEST_STATE: ({ id, requestState }) =>
 113             update(state, id, (explorer) => ({ ...explorer, requestState })),
 114
 115         TOGGLE_SORT: ({ id, columnName }) =>
 116             update(state, id, mapColumns(toggleSort(columnName))),
 117
 118         TOGGLE_COLUMN: ({ id, columnName }) =>
 119             update(state, id, mapColumns(toggleColumn(columnName))),
 120
 121         default: () => state,
 122     });
 123 };
 124 export const getDataExplorer = (state: DataExplorerState, id: string) => {
 125     const returnValue = state[id] || initialDataExplorer;
 126     return returnValue;
 127 };
 128
 129 export const getSortColumn = <R>(dataExplorer: DataExplorer): DataColumn<any, R> | undefined =>
 130     dataExplorer.columns.find(
 131         (c: DataColumn<any, R>) => !!c.sort && c.sort.direction !== SortDirection.NONE
 132     );
 133
 134 const update = (
 135     state: DataExplorerState,
 136     id: string,
 137     updateFn: (dataExplorer: DataExplorer) => DataExplorer
 138 ) => ({ ...state, [id]: updateFn(getDataExplorer(state, id)) });
 139
 140 const canUpdateColumns = (
 141     prevColumns: DataColumns<any, any>,
 142     nextColumns: DataColumns<any, any>
 143 ) => {
 144     if (prevColumns.length !== nextColumns.length) {
 145         return true;
 146     }
 147     for (let i = 0; i < nextColumns.length; i++) {
 148         const pc = prevColumns[i];
 149         const nc = nextColumns[i];
 150         if (pc.key !== nc.key || pc.name !== nc.name) {
 151             return true;
 152         }
 153     }
 154     return false;
 155 };
 156
 157 const setColumns =
 158     (columns: DataColumns<any, any>) => (dataExplorer: DataExplorer) => ({
 159         ...dataExplorer,
 160         columns: canUpdateColumns(dataExplorer.columns, columns)
 161             ? columns
 162             : dataExplorer.columns,
 163     });
 164
 165 const mapColumns =
 166     (mapFn: (column: DataColumn<any, any>) => DataColumn<any, any>) =>
 167         (dataExplorer: DataExplorer) => ({
 168             ...dataExplorer,
 169             columns: dataExplorer.columns.map(mapFn),
 170         });
 171
 172 const toggleSort = (columnName: string) => (column: DataColumn<any, any>) =>
 173     column.name === columnName
 174         ? toggleSortDirection(column)
 175         : resetSortDirection(column);
 176
 177 const toggleColumn = (columnName: string) => (column: DataColumn<any, any>) =>
 178     column.name === columnName
 179         ? { ...column, selected: !column.selected }
 180         : column;
 181
 182 const setFilters =
 183     (columnName: string, filters: DataTableFilters) =>
 184         (column: DataColumn<any, any>) =>
 185             column.name === columnName ? { ...column, filters } : column;