From 529385bc5b70834bb530d3d2e3c7c6d72037d504 Mon Sep 17 00:00:00 2001
From: Akinwale Ariwodola <akinwale@gmail.com>
Date: Wed, 30 Jan 2019 20:31:22 +0100
Subject: [PATCH] display publish date on file page

---
 app/src/component/dateTime/view.js |  5 ++++-
 app/src/page/file/view.js          | 27 ++++++++++++++++++---------
 app/src/styles/filePage.js         | 16 +++++++++++++---
 3 files changed, 35 insertions(+), 13 deletions(-)

diff --git a/app/src/component/dateTime/view.js b/app/src/component/dateTime/view.js
index 0261b81a..47eb5ea1 100644
--- a/app/src/component/dateTime/view.js
+++ b/app/src/component/dateTime/view.js
@@ -32,12 +32,15 @@ class DateTime extends React.PureComponent<Props> {
       return date ? <View style={style}><Text style={textStyle}>{moment(date).from(moment())}</Text></View> : null;
     }
 
+    // TODO: formatOptions not working as expected in RN
+    // date.toLocaleDateString([locale, 'en-US'], formatOptions)}
+
     return (
       <View style={style}>
         <Text style={textStyle}>
           {date &&
             (show === DateTime.SHOW_BOTH || show === DateTime.SHOW_DATE) &&
-            date.toLocaleDateString([locale, 'en-US'], formatOptions)}
+            moment(date).format('MMMM D, YYYY')}
           {show === DateTime.SHOW_BOTH && ' '}
           {date &&
             (show === DateTime.SHOW_BOTH || show === DateTime.SHOW_TIME) &&
diff --git a/app/src/page/file/view.js b/app/src/page/file/view.js
index 59f605a0..ca4d49c9 100644
--- a/app/src/page/file/view.js
+++ b/app/src/page/file/view.js
@@ -20,6 +20,7 @@ import ImageViewer from 'react-native-image-zoom-viewer';
 import Button from 'component/button';
 import Colors from 'styles/colors';
 import ChannelPage from 'page/channel';
+import DateTime from 'component/dateTime';
 import FileDownloadButton from 'component/fileDownloadButton';
 import FileItemMedia from 'component/fileItemMedia';
 import FilePrice from 'component/filePrice';
@@ -567,15 +568,23 @@ class FilePage extends React.PureComponent {
                   <Text style={filePageStyle.title} selectable={true}>{title}</Text>
                   {channelName &&
                     <View style={filePageStyle.channelRow}>
-                      <Link style={filePageStyle.channelName}
-                            selectable={true}
-                            text={channelName}
-                            numberOfLines={1}
-                            ellipsizeMode={"tail"}
-                            onPress={() => {
-                              const channelUri = normalizeURI(channelName);
-                              navigateToUri(navigation, channelUri);
-                            }} />
+                      <View style={filePageStyle.publishInfo}>
+                        <Link style={filePageStyle.channelName}
+                              selectable={true}
+                              text={channelName}
+                              numberOfLines={1}
+                              ellipsizeMode={"tail"}
+                              onPress={() => {
+                                const channelUri = normalizeURI(channelName);
+                                navigateToUri(navigation, channelUri);
+                              }} />
+                        <DateTime
+                          style={filePageStyle.publishDate}
+                          textStyle={filePageStyle.publishDateText}
+                          block={height}
+                          formatOptions={{ day: 'numeric', month: 'long', year: 'numeric' }}
+                          show={DateTime.SHOW_DATE} />
+                      </View>
                       <View style={filePageStyle.subscriptionRow}>
                         <SubscribeButton
                           style={filePageStyle.actionButton}
diff --git a/app/src/styles/filePage.js b/app/src/styles/filePage.js
index 0de275d1..efd6b3d9 100644
--- a/app/src/styles/filePage.js
+++ b/app/src/styles/filePage.js
@@ -68,15 +68,25 @@ const filePageStyle = StyleSheet.create({
   },
   subscriptionRow: {
     flexDirection: 'row',
-    alignSelf: 'flex-end'
+    marginTop: 8
+  },
+  publishInfo: {
+    width: '50%',
+    marginTop: 6,
   },
   channelName: {
     fontFamily: 'Inter-UI-SemiBold',
     fontSize: 20,
-    marginTop: 6,
-    width: '49%',
     color: Colors.LbryGreen
   },
+  publishDateText: {
+    fontFamily: 'Inter-UI-SemiBold',
+    fontSize: 12,
+    color: Colors.DescriptionGrey
+  },
+  publishDate: {
+    marginTop: 4
+  },
   description: {
     color: Colors.DescriptionGrey,
     fontFamily: 'Inter-UI-Regular',