Commit e174b31

mo khan <mo@mokhan.ca>
2016-12-17 18:58:00
use cards instead of listview.
1 parent 1be920d
Changed files (2)
app
app/components/workout.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { View, Text, TouchableHighlight, StyleSheet } from 'react-native';
+import { Card, CardItem, Text } from 'native-base';
 import Exercise from './exercise';
 import moment from 'moment';
 
@@ -7,20 +7,17 @@ export default class Workout extends Component {
   render() {
     //{this.exercisesFrom(this.props.exercises)}
     return (
-      <TouchableHighlight onPress={this.pressRow.bind(this)} underlayColor='rgba(0,0,0,0)'>
-        <View>
-          <View style={styles.row}>
-            <Text style={styles.text}>
-              {this.rowText()}
-            </Text>
-          </View>
-        </View>
-      </TouchableHighlight>
+      <Card>
+        <CardItem>
+          <Text>
+            {this.rowText()}
+          </Text>
+        </CardItem>
+      </Card>
     )
   }
 
   exercisesFrom(exercises) {
-    console.dir(exercises);
     return exercises.map(exercise => <Exercise {...exercise} />)
   }
 
@@ -30,32 +27,4 @@ export default class Workout extends Component {
     console.log(text);
     return text;
   }
-
-  pressRow() {
-    console.log(`PRESSED: ${this.rowText()}`)
-  }
 }
-
-var styles = StyleSheet.create({
-  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'
-  }
-});
app/screens/dashboard-screen.js
@@ -1,5 +1,4 @@
 import React, { Component } from 'react';
-import { View, Text, ListView, StyleSheet } from 'react-native';
 import { Container, Header, Title, Content, Footer, FooterTab, Button, Icon } from 'native-base';
 import ApplicationStorage from '../infrastructure/application-storage';
 import ApplicationComponent from '../components/application-component';
@@ -8,10 +7,9 @@ import Workout from '../components/workout';
 export default class DashboardScreen extends ApplicationComponent {
   constructor(props) {
     super(props)
-    this.ds = new ListView.DataSource({ rowHasChanged: (row, other) => row['title'] != other['title'] });
     this.state = {
-      dataSource: this.mapAll([]),
       eventsOfInterest: ['FETCHED_WORKOUTS'],
+      workouts: [],
     };
   }
 
@@ -22,12 +20,7 @@ export default class DashboardScreen extends ApplicationComponent {
           <Title>Stronglifters {this.props.username}</Title>
         </Header>
         <Content>
-          <ListView
-            contentContainerStyle={styles.list}
-            dataSource={this.state.dataSource}
-            renderRow={(row) => <Workout {...row} />}
-            enableEmptySections={true}
-            />
+          {this.state.workouts.map(workout => <Workout key={workout.id} {...workout} />)}
         </Content>
         <Footer>
           <FooterTab>
@@ -53,7 +46,7 @@ export default class DashboardScreen extends ApplicationComponent {
   notify(event) {
     switch(event.event) {
       case "FETCHED_WORKOUTS":
-        this.setState({ dataSource: this.mapAll(event.workouts) });
+        this.setState({ workouts: event.workouts });
     }
   }
 
@@ -67,15 +60,4 @@ export default class DashboardScreen extends ApplicationComponent {
     storage.delete('username');
     this.props.navigator.pop();
   }
-
-  mapAll(workouts) {
-    return this.ds.cloneWithRows(workouts);
-  }
 }
-var styles = StyleSheet.create({
-  list: {
-    justifyContent: 'center',
-    flexDirection: 'row',
-    flexWrap: 'wrap'
-  },
-});