Commit 31a5dad

mo khan <mo@mokhan.ca>
2016-12-13 03:47:17
use moment js to render time.
1 parent 3efb081
app/components/workout.js
@@ -1,12 +1,13 @@
 import React, { Component } from 'react';
 import { View, Text, TouchableHighlight, StyleSheet } from 'react-native';
 import Exercise from './exercise';
+import moment from 'moment';
 
 export default class Workout extends Component {
   render() {
     //{this.exercisesFrom(this.props.exercises)}
     return (
-      <TouchableHighlight onPress={() => this.pressRow()} underlayColor='rgba(0,0,0,0)'>
+      <TouchableHighlight onPress={this.pressRow.bind(this)} underlayColor='rgba(0,0,0,0)'>
         <View>
           <View style={styles.row}>
             <Text style={styles.text}>
@@ -24,7 +25,10 @@ export default class Workout extends Component {
   }
 
   rowText() {
-    return `${this.props.routine_name} ${this.props.body_weight.amount} lbs ${this.props.occurred_at}`;
+    const date = moment(this.props.occurred_at).format('MMM Do YY');
+    const text = `${this.props.routine_name} ${this.props.body_weight.amount} lbs ${date}`;
+    console.log(text);
+    return text;
   }
 
   pressRow() {
app/screens/dashboard-screen.js
@@ -18,21 +18,24 @@ export default class DashboardScreen extends ApplicationComponent {
     return (
       <View style={{flex: 1}}>
         <Text>Welcome back {this.props.username}!</Text>
-        <Button onPress={this.loadWorkouts.bind(this)} title="Reload" />
-        <Button onPress={this.onHistory.bind(this)} title="History" />
-        <ListView
-          contentContainerStyle={styles.list}
-          dataSource={this.state.dataSource}
-          renderRow={(row) => <Workout {...row} />}
-          enableEmptySections={true}
-          />
-        <Button onPress={this.onStartWorkout.bind(this)} title="Start Workout" />
-        <Button onPress={this.onLogout.bind(this)} title="Logout" />
+        <View style={{flexDirection: 'row', flexWrap: 'wrap'}}>
+          <Button onPress={this.onHistory.bind(this)} title="History" />
+          <Button onPress={this.onStartWorkout.bind(this)} title="Start Workout" />
+          <Button onPress={this.onLogout.bind(this)} title="Logout" />
+        </View>
+        <View>
+          <ListView
+            contentContainerStyle={styles.list}
+            dataSource={this.state.dataSource}
+            renderRow={(row) => <Workout {...row} />}
+            enableEmptySections={true}
+            />
+        </View>
       </View>
     );
   }
 
-  loadWorkouts() {
+  onHistory() {
     this.publish({event: 'FETCH_WORKOUTS'});
   }
 
@@ -43,10 +46,6 @@ export default class DashboardScreen extends ApplicationComponent {
     }
   }
 
-  onHistory() {
-    console.log("load previous workouts");
-  }
-
   onStartWorkout() {
     console.log("start workout");
   }
@@ -68,25 +67,4 @@ var styles = StyleSheet.create({
     flexDirection: 'row',
     flexWrap: 'wrap'
   },
-  row: {
-    justifyContent: 'center',
-    padding: 5,
-    margin: 10,
-    width: 100,
-    height: 100,
-    backgroundColor: '#F6F6F6',
-    alignItems: 'center',
-    borderWidth: 1,
-    borderRadius: 5,
-    borderColor: '#CCC'
-  },
-  thumb: {
-    width: 64,
-    height: 64
-  },
-  text: {
-    flex: 1,
-    marginTop: 5,
-    fontWeight: 'bold'
-  }
 });
package.json
@@ -7,6 +7,7 @@
     "test": "jest"
   },
   "dependencies": {
+    "moment": "^2.17.1",
     "react": "15.3.2",
     "react-native": "0.37.0",
     "react-native-config": "^0.1.2",
yarn.lock
@@ -3367,7 +3367,7 @@ module-deps@^3.9.1:
     through2 "^1.0.0"
     xtend "^4.0.0"
 
-moment@2.x.x:
+moment@2.x.x, moment@^2.17.1:
   version "2.17.1"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.17.1.tgz#fed9506063f36b10f066c8b59a144d7faebe1d82"