display published date

Fix #59

ui/js/actions/file_info.js

@@ -155,3 +155,17 @@ 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).toLocaleDateString();
+        dispatch({
+            type: types.FETCH_DATE,
+            data: { time: relativeTime },
+        });
+    });
+
+  }
+}

ui/js/constants/action_types.js

@@ -83,6 +83,7 @@ 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/lbry.js

@@ -482,6 +482,17 @@ lbry.claim_abandon = function(params = {}) {
   });
 };
 
+lbry.block_show = function(params = {}) {
+  return new Promise((resolve, reject) => {
+    apiCall(
+      "block_show",
+      params,
+      block => { resolve(block); },
+      reject
+    );
+  });
+};
+
 lbry._resolveXhrs = {};
 lbry.resolve = function(params = {}) {
   return new Promise((resolve, reject) => {

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 } from "actions/file_info";
-import { makeSelectFileInfoForUri } from "selectors/file_info";
+import { doFetchFileInfo, doFetchPublishedDate } from "actions/file_info";
+import { makeSelectFileInfoForUri, selectPublishedDate } from "selectors/file_info";
 import { selectRewardContentClaimIds } from "selectors/content";
 import { doFetchCostInfoForUri } from "actions/cost_info";
 import {
@@ -29,6 +29,7 @@ const makeSelect = () => {
     obscureNsfw: !selectShowNsfw(state),
     fileInfo: selectFileInfo(state, props),
     rewardedContentClaimIds: selectRewardContentClaimIds(state, props),
+    publishedDate: selectPublishedDate(state, props),
   });
 
   return select;
@@ -38,6 +39,7 @@ 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

@@ -11,13 +11,16 @@ import UriIndicator from "component/uriIndicator";
 import IconFeatured from "component/iconFeatured";
 
 const FormatItem = props => {
-  const { contentType, metadata: { language, license } } = props;
+  const { publishedDate, contentType, metadata: { language, license } } = props;
 
   const mediaType = lbry.getMediaType(contentType);
 
   return (
     <table className="table-standard">
       <tbody>
+        <tr>
+          <td>{__("Published on")}</td><td>{publishedDate}</td>
+        </tr>
         <tr>
           <td>{__("Content-Type")}</td><td>{mediaType}</td>
         </tr>
@@ -36,6 +39,7 @@ class FilePage extends React.PureComponent {
   componentDidMount() {
     this.fetchFileInfo(this.props);
     this.fetchCostInfo(this.props);
+    this.fetchPublishedDate(this.props);
   }
 
   componentWillReceiveProps(nextProps) {
@@ -54,6 +58,11 @@ class FilePage extends React.PureComponent {
     }
   }
 
+  fetchPublishedDate(props) {
+    const { claim } = props;
+    if(claim) props.fetchPublishedDate(claim.height)
+  }
+
   render() {
     const {
       claim,
@@ -62,6 +71,7 @@ class FilePage extends React.PureComponent {
       contentType,
       uri,
       rewardedContentClaimIds,
+      publishedDate,
     } = this.props;
 
     if (!claim || !metadata) {
@@ -139,7 +149,7 @@ class FilePage extends React.PureComponent {
           </div>
           {metadata
             ? <div className="card__content">
-                <FormatItem metadata={metadata} contentType={contentType} />
+                <FormatItem metadata={metadata} contentType={contentType} publishedDate={publishedDate} />
               </div>
             : ""}
           <div className="card__content">

ui/js/reducers/file_info.js

@@ -141,6 +141,15 @@ reducers[types.LOADING_VIDEO_FAILED] = function(state, action) {
   });
 };
 
+reducers[types.FETCH_DATE] = function(state, action) {
+    const { time } = action.data;
+    if(time) {
+        return Object.assign({}, state, {
+            publishedDate: time,
+        });
+    }
+}
+
 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,3 +170,8 @@ export const selectTotalDownloadProgress = createSelector(
     else return -1;
   }
 );
+
+export const selectPublishedDate = createSelector(
+  _selectState,
+  state => state.publishedDate || null
+);