diff --git a/CHANGELOG.md b/CHANGELOG.md index 1b27c1767..ef1c62d21 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,7 +8,8 @@ Web UI version numbers should always match the corresponding version of LBRY App ## [Unreleased] ### Added - * + * File pages now show the time of a publish. + * Added a new component for rendering dates and times. This component can render the date and time of a block height, as well. * ### Changed diff --git a/ui/js/actions/file_info.js b/ui/js/actions/file_info.js index f4677a365..7d9d102c6 100644 --- a/ui/js/actions/file_info.js +++ b/ui/js/actions/file_info.js @@ -155,17 +155,3 @@ export function doFetchFileInfosAndPublishedClaims() { if (!isFetchingFileInfo) dispatch(doFileList()); }; } - -export function doFetchPublishedDate(height) { - return function(dispatch, getState) { - - lbry.block_show({ height }).then(block => { - const relativeTime = new Date(block.time * 1000).toLocaleString(); - dispatch({ - type: types.FETCH_DATE, - data: { time: relativeTime }, - }); - }); - - } -} diff --git a/ui/js/actions/wallet.js b/ui/js/actions/wallet.js index e97675d18..dd48c71fa 100644 --- a/ui/js/actions/wallet.js +++ b/ui/js/actions/wallet.js @@ -33,6 +33,17 @@ export function doFetchTransactions() { }; } +export function doFetchBlock(height) { + return function(dispatch, getState) { + lbry.block_show({ height }).then(block => { + dispatch({ + type: types.FETCH_BLOCK_SUCCESS, + data: { block }, + }); + }); + }; +} + export function doGetNewAddress() { return function(dispatch, getState) { dispatch({ diff --git a/ui/js/component/dateTime/index.js b/ui/js/component/dateTime/index.js new file mode 100644 index 000000000..81ef4b165 --- /dev/null +++ b/ui/js/component/dateTime/index.js @@ -0,0 +1,17 @@ +import React from "react"; +import { connect } from "react-redux"; +import { makeSelectBlockDate } from "selectors/wallet"; +import { doFetchBlock } from "actions/wallet"; +import DateTime from "./view"; + +const select = (state, props) => ({ + date: !props.date && props.block + ? makeSelectBlockDate(props.block)(state) + : props.date, +}); + +const perform = dispatch => ({ + fetchBlock: height => dispatch(doFetchBlock(height)), +}); + +export default connect(select, perform)(DateTime); diff --git a/ui/js/component/dateTime/view.jsx b/ui/js/component/dateTime/view.jsx new file mode 100644 index 000000000..72d47c130 --- /dev/null +++ b/ui/js/component/dateTime/view.jsx @@ -0,0 +1,26 @@ +import React from "react"; + +class DateTime extends React.PureComponent { + componentWillMount() { + this.refreshDate(this.props); + } + + componentWillReceiveProps(props) { + this.refreshDate(props); + } + + refreshDate(props) { + const { block, date, fetchBlock } = props; + if (block && date === undefined) { + fetchBlock(block); + } + } + + render() { + const { date } = this.props; + + return {date && date.toLocaleString()}; + } +} + +export default DateTime; diff --git a/ui/js/constants/action_types.js b/ui/js/constants/action_types.js index bfa047b14..099d4c563 100644 --- a/ui/js/constants/action_types.js +++ b/ui/js/constants/action_types.js @@ -39,6 +39,7 @@ export const SET_DRAFT_TRANSACTION_ADDRESS = "SET_DRAFT_TRANSACTION_ADDRESS"; export const SEND_TRANSACTION_STARTED = "SEND_TRANSACTION_STARTED"; export const SEND_TRANSACTION_COMPLETED = "SEND_TRANSACTION_COMPLETED"; export const SEND_TRANSACTION_FAILED = "SEND_TRANSACTION_FAILED"; +export const FETCH_BLOCK_SUCCESS = "FETCH_BLOCK_SUCCESS"; // Content export const FETCH_FEATURED_CONTENT_STARTED = "FETCH_FEATURED_CONTENT_STARTED"; @@ -83,7 +84,6 @@ export const CREATE_CHANNEL_COMPLETED = "CREATE_CHANNEL_COMPLETED"; export const PUBLISH_STARTED = "PUBLISH_STARTED"; export const PUBLISH_COMPLETED = "PUBLISH_COMPLETED"; export const PUBLISH_FAILED = "PUBLISH_FAILED"; -export const FETCH_DATE = "FETCH_DATE"; // Search export const SEARCH_STARTED = "SEARCH_STARTED"; diff --git a/ui/js/page/file/index.js b/ui/js/page/file/index.js index add434581..19cdde31f 100644 --- a/ui/js/page/file/index.js +++ b/ui/js/page/file/index.js @@ -1,8 +1,8 @@ import React from "react"; import { connect } from "react-redux"; import { doNavigate } from "actions/navigation"; -import { doFetchFileInfo, doFetchPublishedDate } from "actions/file_info"; -import { makeSelectFileInfoForUri, selectPublishedDate } from "selectors/file_info"; +import { doFetchFileInfo } from "actions/file_info"; +import { makeSelectFileInfoForUri } from "selectors/file_info"; import { selectRewardContentClaimIds } from "selectors/content"; import { doFetchCostInfoForUri } from "actions/cost_info"; import { @@ -29,7 +29,6 @@ const makeSelect = () => { obscureNsfw: !selectShowNsfw(state), fileInfo: selectFileInfo(state, props), rewardedContentClaimIds: selectRewardContentClaimIds(state, props), - publishedDate: selectPublishedDate(state, props), }); return select; @@ -39,7 +38,6 @@ const perform = dispatch => ({ navigate: (path, params) => dispatch(doNavigate(path, params)), fetchFileInfo: uri => dispatch(doFetchFileInfo(uri)), fetchCostInfo: uri => dispatch(doFetchCostInfoForUri(uri)), - fetchPublishedDate: height => dispatch(doFetchPublishedDate(height)), }); export default connect(makeSelect, perform)(FilePage); diff --git a/ui/js/page/file/view.jsx b/ui/js/page/file/view.jsx index 8d32abd2e..eb920a779 100644 --- a/ui/js/page/file/view.jsx +++ b/ui/js/page/file/view.jsx @@ -9,9 +9,15 @@ import FileActions from "component/fileActions"; import Link from "component/link"; import UriIndicator from "component/uriIndicator"; import IconFeatured from "component/iconFeatured"; +import DateTime from "component/dateTime"; const FormatItem = props => { - const { publishedDate, contentType, metadata: { language, license } } = props; + const { + publishedDate, + contentType, + claim: { height }, + metadata: { language, license }, + } = props; const mediaType = lbry.getMediaType(contentType); @@ -19,7 +25,7 @@ const FormatItem = props => { - + @@ -39,7 +45,6 @@ class FilePage extends React.PureComponent { componentDidMount() { this.fetchFileInfo(this.props); this.fetchCostInfo(this.props); - this.fetchPublishedDate(this.props); } componentWillReceiveProps(nextProps) { @@ -58,11 +63,6 @@ class FilePage extends React.PureComponent { } } - fetchPublishedDate(props) { - const { claim } = props; - if(claim) props.fetchPublishedDate(claim.height) - } - render() { const { claim, @@ -71,7 +71,6 @@ class FilePage extends React.PureComponent { contentType, uri, rewardedContentClaimIds, - publishedDate, } = this.props; if (!claim || !metadata) { @@ -147,9 +146,13 @@ class FilePage extends React.PureComponent { /> - {metadata + {metadata && claim ?
- +
: ""}
diff --git a/ui/js/reducers/claims.js b/ui/js/reducers/claims.js index a8d86e929..f47f50a02 100644 --- a/ui/js/reducers/claims.js +++ b/ui/js/reducers/claims.js @@ -1,5 +1,4 @@ import * as types from "constants/action_types"; -import lbryuri from "lbryuri"; const reducers = {}; const defaultState = {}; diff --git a/ui/js/reducers/wallet.js b/ui/js/reducers/wallet.js index 829677d39..d410aae8e 100644 --- a/ui/js/reducers/wallet.js +++ b/ui/js/reducers/wallet.js @@ -9,6 +9,7 @@ const buildDraftTransaction = () => ({ const defaultState = { balance: 0, + blocks: {}, transactions: [], fetchingTransactions: false, receiveAddress: address, @@ -124,6 +125,15 @@ reducers[types.SEND_TRANSACTION_FAILED] = function(state, action) { }); }; +reducers[types.FETCH_BLOCK_SUCCESS] = (state, action) => { + const { block, block: { height } } = action.data, + blocks = Object.assign({}, state.blocks); + + blocks[height] = block; + + return Object.assign({}, state, { blocks }); +}; + export default function reducer(state = defaultState, action) { const handler = reducers[action.type]; if (handler) return handler(state, action); diff --git a/ui/js/selectors/file_info.js b/ui/js/selectors/file_info.js index 06e515228..1b3dc7982 100644 --- a/ui/js/selectors/file_info.js +++ b/ui/js/selectors/file_info.js @@ -170,8 +170,3 @@ export const selectTotalDownloadProgress = createSelector( else return -1; } ); - -export const selectPublishedDate = createSelector( - _selectState, - state => state.publishedDate || null -); diff --git a/ui/js/selectors/wallet.js b/ui/js/selectors/wallet.js index 84ca37f8e..bf8fcb61b 100644 --- a/ui/js/selectors/wallet.js +++ b/ui/js/selectors/wallet.js @@ -81,3 +81,13 @@ export const selectDraftTransactionAddress = createSelector( selectDraftTransaction, draft => draft.address ); + +export const selectBlocks = createSelector(_selectState, state => state.blocks); + +export const makeSelectBlockDate = block => { + return createSelector( + selectBlocks, + blocks => + blocks && blocks[block] ? new Date(blocks[block].time * 1000) : undefined + ); +};
{__("Published on")}{publishedDate}{__("Published on")}
{__("Content-Type")}{mediaType}