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                 ...explorer,
  76                 items,
  77                 itemsAvailable,
  78                 page: page || 0,
  79                 rowsPerPage,
  80             })),
  81
  82         APPEND_ITEMS: ({ id, items, itemsAvailable, page, rowsPerPage }) =>
  83             update(state, id, (explorer) => ({
  84                 ...explorer,
  85                 items: state[id].items.concat(items),
  86                 itemsAvailable: state[id].itemsAvailable + itemsAvailable,
  87                 page,
  88                 rowsPerPage,
  89             })),
  90
  91         SET_PAGE: ({ id, page }) =>
  92             update(state, id, (explorer) => ({ ...explorer, page })),
  93
  94         SET_ROWS_PER_PAGE: ({ id, rowsPerPage }) =>
  95             update(state, id, (explorer) => ({ ...explorer, rowsPerPage })),
  96
  97         SET_EXPLORER_SEARCH_VALUE: ({ id, searchValue }) =>
  98             update(state, id, (explorer) => ({ ...explorer, searchValue })),
  99
 100         RESET_EXPLORER_SEARCH_VALUE: ({ id }) =>
 101             update(state, id, (explorer) => ({ ...explorer, searchValue: '' })),
 102
 103         SET_REQUEST_STATE: ({ id, requestState }) =>
 104             update(state, id, (explorer) => ({ ...explorer, requestState })),
 105
 106         TOGGLE_SORT: ({ id, columnName }) =>
 107             update(state, id, mapColumns(toggleSort(columnName))),
 108
 109         TOGGLE_COLUMN: ({ id, columnName }) =>
 110             update(state, id, mapColumns(toggleColumn(columnName))),
 111
 112         default: () => state,
 113     });
 114 };
 115 export const getDataExplorer = (state: DataExplorerState, id: string) => {
 116     const returnValue = state[id] || initialDataExplorer;
 117     return returnValue;
 118 };
 119
 120 export const getSortColumn = <R>(dataExplorer: DataExplorer): DataColumn<any, R> | undefined =>
 121     dataExplorer.columns.find(
 122         (c: DataColumn<any, R>) => !!c.sort && c.sort.direction !== SortDirection.NONE
 123     );
 124
 125 const update = (
 126     state: DataExplorerState,
 127     id: string,
 128     updateFn: (dataExplorer: DataExplorer) => DataExplorer
 129 ) => ({ ...state, [id]: updateFn(getDataExplorer(state, id)) });
 130
 131 const canUpdateColumns = (
 132     prevColumns: DataColumns<any, any>,
 133     nextColumns: DataColumns<any, any>
 134 ) => {
 135     if (prevColumns.length !== nextColumns.length) {
 136         return true;
 137     }
 138     for (let i = 0; i < nextColumns.length; i++) {
 139         const pc = prevColumns[i];
 140         const nc = nextColumns[i];
 141         if (pc.key !== nc.key || pc.name !== nc.name) {
 142             return true;
 143         }
 144     }
 145     return false;
 146 };
 147
 148 const setColumns =
 149     (columns: DataColumns<any, any>) => (dataExplorer: DataExplorer) => ({
 150         ...dataExplorer,
 151         columns: canUpdateColumns(dataExplorer.columns, columns)
 152             ? columns
 153             : dataExplorer.columns,
 154     });
 155
 156 const mapColumns =
 157     (mapFn: (column: DataColumn<any, any>) => DataColumn<any, any>) =>
 158         (dataExplorer: DataExplorer) => ({
 159             ...dataExplorer,
 160             columns: dataExplorer.columns.map(mapFn),
 161         });
 162
 163 const toggleSort = (columnName: string) => (column: DataColumn<any, any>) =>
 164     column.name === columnName
 165         ? toggleSortDirection(column)
 166         : resetSortDirection(column);
 167
 168 const toggleColumn = (columnName: string) => (column: DataColumn<any, any>) =>
 169     column.name === columnName
 170         ? { ...column, selected: !column.selected }
 171         : column;
 172
 173 const setFilters =
 174     (columnName: string, filters: DataTableFilters) =>
 175         (column: DataColumn<any, any>) =>
 176             column.name === columnName ? { ...column, filters } : column;