diff --git a/frontend/src/App/State/AppState.ts b/frontend/src/App/State/AppState.ts index 3d8f78443..2490f739f 100644 --- a/frontend/src/App/State/AppState.ts +++ b/frontend/src/App/State/AppState.ts @@ -1,5 +1,7 @@ import CommandAppState from './CommandAppState'; +import HistoryAppState from './HistoryAppState'; import IndexerAppState, { + IndexerHistoryAppState, IndexerIndexAppState, IndexerStatusAppState, } from './IndexerAppState'; @@ -42,6 +44,8 @@ export interface CustomFilter { interface AppState { commands: CommandAppState; + history: HistoryAppState; + indexerHistory: IndexerHistoryAppState; indexerIndex: IndexerIndexAppState; indexerStats: IndexerStatsAppState; indexerStatus: IndexerStatusAppState; diff --git a/frontend/src/App/State/HistoryAppState.ts b/frontend/src/App/State/HistoryAppState.ts new file mode 100644 index 000000000..dbce6bd7c --- /dev/null +++ b/frontend/src/App/State/HistoryAppState.ts @@ -0,0 +1,8 @@ +import AppSectionState from 'App/State/AppSectionState'; +import History from 'typings/History'; + +interface HistoryAppState extends AppSectionState { + pageSize: number; +} + +export default HistoryAppState; diff --git a/frontend/src/App/State/IndexerAppState.ts b/frontend/src/App/State/IndexerAppState.ts index c75c8abb0..d070986af 100644 --- a/frontend/src/App/State/IndexerAppState.ts +++ b/frontend/src/App/State/IndexerAppState.ts @@ -1,6 +1,7 @@ import Column from 'Components/Table/Column'; import SortDirection from 'Helpers/Props/SortDirection'; import Indexer, { IndexerStatus } from 'Indexer/Indexer'; +import History from 'typings/History'; import AppSectionState, { AppSectionDeleteState, AppSectionSaveState, @@ -34,4 +35,6 @@ interface IndexerAppState export type IndexerStatusAppState = AppSectionState; +export type IndexerHistoryAppState = AppSectionState; + export default IndexerAppState; diff --git a/frontend/src/Components/Table/Cells/RelativeDateCell.js b/frontend/src/Components/Table/Cells/RelativeDateCell.js index 207b97752..4bf94cf57 100644 --- a/frontend/src/Components/Table/Cells/RelativeDateCell.js +++ b/frontend/src/Components/Table/Cells/RelativeDateCell.js @@ -1,58 +1,66 @@ import PropTypes from 'prop-types'; -import React, { PureComponent } from 'react'; +import React from 'react'; +import { useSelector } from 'react-redux'; +import { createSelector } from 'reselect'; +import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector'; import formatDateTime from 'Utilities/Date/formatDateTime'; import getRelativeDate from 'Utilities/Date/getRelativeDate'; import TableRowCell from './TableRowCell'; import styles from './RelativeDateCell.css'; -class RelativeDateCell extends PureComponent { +function createRelativeDateCellSelector() { + return createSelector(createUISettingsSelector(), (uiSettings) => { + return { + showRelativeDates: uiSettings.showRelativeDates, + shortDateFormat: uiSettings.shortDateFormat, + longDateFormat: uiSettings.longDateFormat, + timeFormat: uiSettings.timeFormat + }; + }); +} +function RelativeDateCell(props) { // // Render - render() { - const { - className, - date, - includeSeconds, - showRelativeDates, - shortDateFormat, - longDateFormat, - timeFormat, - component: Component, - dispatch, - ...otherProps - } = this.props; + const { + className, + date, + includeSeconds, + component: Component, + dispatch, + ...otherProps + } = props; - if (!date) { - return ( - - ); - } + const { showRelativeDates, shortDateFormat, longDateFormat, timeFormat } = + useSelector(createRelativeDateCellSelector()); - return ( - - {getRelativeDate(date, shortDateFormat, showRelativeDates, { timeFormat, includeSeconds, timeForToday: true })} - - ); + if (!date) { + return ; } + + return ( + + {getRelativeDate(date, shortDateFormat, showRelativeDates, { + timeFormat, + includeSeconds, + timeForToday: true + })} + + ); } RelativeDateCell.propTypes = { className: PropTypes.string.isRequired, date: PropTypes.string, includeSeconds: PropTypes.bool.isRequired, - showRelativeDates: PropTypes.bool.isRequired, - shortDateFormat: PropTypes.string.isRequired, - longDateFormat: PropTypes.string.isRequired, - timeFormat: PropTypes.string.isRequired, component: PropTypes.elementType, dispatch: PropTypes.func }; diff --git a/frontend/src/Components/Table/Cells/RelativeDateCellConnector.js b/frontend/src/Components/Table/Cells/RelativeDateCellConnector.js deleted file mode 100644 index 38783e7a5..000000000 --- a/frontend/src/Components/Table/Cells/RelativeDateCellConnector.js +++ /dev/null @@ -1,20 +0,0 @@ -import { connect } from 'react-redux'; -import { createSelector } from 'reselect'; -import createUISettingsSelector from 'Store/Selectors/createUISettingsSelector'; -import RelativeDateCell from './RelativeDateCell'; - -function createMapStateToProps() { - return createSelector( - createUISettingsSelector(), - (uiSettings) => { - return { - showRelativeDates: uiSettings.showRelativeDates, - shortDateFormat: uiSettings.shortDateFormat, - longDateFormat: uiSettings.longDateFormat, - timeFormat: uiSettings.timeFormat - }; - } - ); -} - -export default connect(createMapStateToProps, null)(RelativeDateCell); diff --git a/frontend/src/History/Details/HistoryDetailsModal.css b/frontend/src/History/Details/HistoryDetailsModal.css deleted file mode 100644 index 271d422ff..000000000 --- a/frontend/src/History/Details/HistoryDetailsModal.css +++ /dev/null @@ -1,5 +0,0 @@ -.markAsFailedButton { - composes: button from '~Components/Link/Button.css'; - - margin-right: auto; -} diff --git a/frontend/src/History/Details/HistoryDetailsModal.js b/frontend/src/History/Details/HistoryDetailsModal.js index e6f960c48..fbc3114ad 100644 --- a/frontend/src/History/Details/HistoryDetailsModal.js +++ b/frontend/src/History/Details/HistoryDetailsModal.js @@ -1,16 +1,13 @@ import PropTypes from 'prop-types'; import React from 'react'; import Button from 'Components/Link/Button'; -import SpinnerButton from 'Components/Link/SpinnerButton'; import Modal from 'Components/Modal/Modal'; import ModalBody from 'Components/Modal/ModalBody'; import ModalContent from 'Components/Modal/ModalContent'; import ModalFooter from 'Components/Modal/ModalFooter'; import ModalHeader from 'Components/Modal/ModalHeader'; -import { kinds } from 'Helpers/Props'; import translate from 'Utilities/String/translate'; import HistoryDetails from './HistoryDetails'; -import styles from './HistoryDetailsModal.css'; function getHeaderTitle(eventType) { switch (eventType) { @@ -33,10 +30,8 @@ function HistoryDetailsModal(props) { eventType, indexer, data, - isMarkingAsFailed, shortDateFormat, timeFormat, - onMarkAsFailedPress, onModalClose } = props; @@ -61,18 +56,6 @@ function HistoryDetailsModal(props) { - { - eventType === 'grabbed' && - - Mark as Failed - - } -