date formatting

Author: dewanshDT

client/modules/IDE/components/CollectionList/CollectionListRow.jsx

@@ -12,6 +12,9 @@ import dates from '../../../../utils/formatDate';
 
 import DownFilledTriangleIcon from '../../../../images/down-filled-triangle.svg';
 
+const formatDateCell = (date, mobile = false) =>
+  dates.format(date, { showTime: !mobile });
+
 class CollectionListRowBase extends React.Component {
   static projectInCollection(project, collection) {
     return (
@@ -228,14 +231,8 @@ class CollectionListRowBase extends React.Component {
             {this.renderCollectionName()}
           </span>
         </th>
-        <td>
-          {mobile && 'Created: '}
-          {dates.format(collection.createdAt)}
-        </td>
-        <td>
-          {mobile && 'Updated: '}
-          {dates.format(collection.updatedAt)}
-        </td>
+        <td>{formatDateCell(collection.createdAt, mobile)}</td>
+        <td>{formatDateCell(collection.updatedAt, mobile)}</td>
         <td>
           {mobile && '# sketches: '}
           {(collection.items || []).length}

client/modules/IDE/components/SketchList.jsx

@@ -311,14 +311,8 @@ class SketchListRowBase extends React.Component {
           onClick={this.handleRowClick}
         >
           <th scope="row">{name}</th>
-          <td>
-            {mobile && 'Created: '}
-            {formatDateCell(sketch.createdAt, mobile)}
-          </td>
-          <td>
-            {mobile && 'Updated: '}
-            {formatDateCell(sketch.updatedAt, mobile)}
-          </td>
+          <td>{formatDateCell(sketch.createdAt, mobile)}</td>
+          <td>{formatDateCell(sketch.updatedAt, mobile)}</td>
           {this.renderDropdown()}
         </tr>
       </React.Fragment>

client/modules/User/pages/DashboardView.jsx

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { connect } from 'react-redux';
+import MediaQuery from 'react-responsive';
 import { withTranslation } from 'react-i18next';
 
 import browserHistory from '../../../browserHistory';
@@ -111,15 +112,19 @@ class DashboardView extends React.Component {
     }
   }
 
-  renderContent(tabKey, username) {
+  renderContent(tabKey, username, mobile) {
     switch (tabKey) {
       case TabKey.assets:
-        return <AssetList key={username} username={username} />;
+        return <AssetList key={username} mobile={mobile} username={username} />;
       case TabKey.collections:
-        return <CollectionList key={username} username={username} />;
+        return (
+          <CollectionList key={username} mobile={mobile} username={username} />
+        );
       case TabKey.sketches:
       default:
-        return <SketchList key={username} username={username} />;
+        return (
+          <SketchList key={username} mobile={mobile} username={username} />
+        );
     }
   }
 
@@ -151,7 +156,9 @@ class DashboardView extends React.Component {
           </div>
 
           <div className="dashboard-content">
-            {this.renderContent(currentTab, username)}
+            <MediaQuery maxWidth={770}>
+              {(mobile) => this.renderContent(currentTab, username, mobile)}
+            </MediaQuery>
           </div>
         </main>
         {this.state.collectionCreateVisible && (