add datetime component, show date of publishes, store block history in redux

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

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 },
-        });
-    });
-
-  }
-}

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({

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);

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 <span>{date && date.toLocaleString()}</span>;
+  }
+}
+
+export default DateTime;

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";

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);

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 => {
     <table className="table-standard">
       <tbody>
         <tr>
-          <td>{__("Published on")}</td><td>{publishedDate}</td>
+          <td>{__("Published on")}</td><td><DateTime block={height} /></td>
         </tr>
         <tr>
           <td>{__("Content-Type")}</td><td>{mediaType}</td>
@@ -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 {
               />
             </div>
           </div>
-          {metadata
+          {metadata && claim
             ? <div className="card__content">
-                <FormatItem metadata={metadata} contentType={contentType} publishedDate={publishedDate} />
+                <FormatItem
+                  metadata={metadata}
+                  contentType={contentType}
+                  claim={claim}
+                />
               </div>
             : ""}
           <div className="card__content">

ui/js/reducers/claims.js

@@ -1,5 +1,4 @@
 import * as types from "constants/action_types";
-import lbryuri from "lbryuri";
 
 const reducers = {};
 const defaultState = {};

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);

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
-);

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
+  );
+};