use a deck of cards.

5 files changed, 53 insertions, 24 deletions

diff --git a/app/components/exercise-summary.js b/app/components/exercise-summary.js
index 6e5d612..657428b 100644
--- a/app/components/exercise-summary.js
+++ b/app/components/exercise-summary.js
@@ -1,13 +1,22 @@
 import React, { Component } from 'react';
-import { CardItem, Text } from 'native-base';
+import { View } from 'react-native';
+import { Card, CardItem, Text, Thumbnail, Button, Icon, ListItem } from 'native-base';
 
 export default class ExerciseSummary extends Component {
   render() {
     return (
-      <CardItem>
-        <Text>{this.props.name}</Text>
-        {this.workSets().map((set) => <CardItem key={set.id}><Text note>{this.summaryFor(set)}</Text></CardItem>)}
-      </CardItem>
+      <View>
+        <ListItem itemDivider>
+          <Text>{this.props.name}</Text>
+        </ListItem>
+        {
+          this.workSets().map((set) =>
+            <ListItem key={set.id}>
+              <Text>{this.summaryFor(set)}</Text>
+            </ListItem>
+          )
+        }
+      </View>
     );
   }
 
diff --git a/app/components/letter.js b/app/components/letter.js
new file mode 100644
index 0000000..899c56b
--- /dev/null
+++ b/app/components/letter.js
@@ -0,0 +1,12 @@
+import React, { Component } from 'react';
+import Svg, { Circle, Ellipse, G, LinearGradient, RadialGradient, Line, Path, Polygon, Polyline, Rect, Symbol, Text, Use, Defs, Stop } from 'react-native-svg';
+
+export default class Letter extends Component {
+  render() {
+    return (
+      <Svg height="50" width="50">
+        <Text fill="none" stroke="blue" fontSize="25" fontWeight="bold" x="10" y="10" textAnchor="middle" >{this.props.letter}</Text>
+      </Svg>
+    );
+  }
+}
diff --git a/app/components/workout-summary.js b/app/components/workout-summary.js
index 37345fd..26c39cd 100644
--- a/app/components/workout-summary.js
+++ b/app/components/workout-summary.js
@@ -1,29 +1,31 @@
 import React, { Component } from 'react';
-import { Card, CardItem, Text } from 'native-base';
+import { Image, View } from 'react-native';
+import { H1, Card, CardItem, Text, Thumbnail, Button, Icon, List } from 'native-base';
 import ExerciseSummary from './exercise-summary';
 import moment from 'moment';
+import Letter from './letter';
 
 export default class WorkoutSummary extends Component {
   render() {
+    const date = moment(this.props.occurred_at).format('MMM Do YYYY');
+    const text = `${this.props.body_weight.amount} lbs`;
     return (
-      <Card>
-        <CardItem>
-          <Text>
-            {this.rowHeader()}
-          </Text>
-          {this.exercisesFrom(this.props.exercises)}
+			<Card style={{ flex: 0 }}>
+        <CardItem style={{flex: 1, flexDirection: 'row'}}>
+          <Letter key={this.props.routine_name} letter={this.props.routine_name} />
+          <View style={{flex: 1, flexDirection: 'column'}}>
+            <Text>{date}</Text>
+            <Text note>{text}</Text>
+          </View>
         </CardItem>
-      </Card>
+        <List>
+          {this.exercisesFrom(this.props.exercises)}
+        </List>
+		 </Card>
     )
   }
 
   exercisesFrom(exercises) {
     return exercises.map(exercise => <ExerciseSummary key={exercise.id} {...exercise} />)
   }
-
-  rowHeader() {
-    const date = moment(this.props.occurred_at).format('MMM Do YY');
-    const text = `${this.props.routine_name} ${this.props.body_weight.amount} lbs ${date}`;
-    return text;
-  }
 }
diff --git a/app/screens/dashboard-screen.js b/app/screens/dashboard-screen.js
index f7e36da..2fe599c 100644
--- a/app/screens/dashboard-screen.js
+++ b/app/screens/dashboard-screen.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { Image } from 'react-native';
-import { Container, Header, Title, Content, Footer, FooterTab, Button, Icon, Spinner } from 'native-base';
+import { Container, Header, Title, Content, Footer, FooterTab, Button, Icon, Spinner, DeckSwiper } from 'native-base';
 import ApplicationComponent from '../components/application-component';
 import WorkoutSummary from '../components/workout-summary';
 import * as events from '../services/events';
@@ -20,7 +20,7 @@ export default class DashboardScreen extends ApplicationComponent {
   }
 
   render() {
-    let content = this.state.isLoading ? <Spinner /> : this.state.workouts.map(workout => <WorkoutSummary key={workout.id} {...workout} />);
+    let content = this.state.isLoading ? <Spinner /> : this.renderWorkouts(this.state.workouts);
     let gravatarUri = this.gravatarUri();
     return (
       <Container>
@@ -39,10 +39,10 @@ export default class DashboardScreen extends ApplicationComponent {
               <Icon name='ios-home' />
             </Button>
             <Button transparent onPress={this.onStartWorkout.bind(this)}>
-              <Icon name='ios-camera-outline' />
+              <Icon name='ios-play' />
             </Button>
             <Button transparent onPress={this.onLogout.bind(this)}>
-              <Icon name='ios-compass' />
+              <Icon name='ios-log-out' />
             </Button>
           </FooterTab>
         </Footer>
@@ -50,6 +50,12 @@ export default class DashboardScreen extends ApplicationComponent {
     );
   }
 
+  renderWorkouts(workouts) {
+    return (
+      <DeckSwiper dataSource={workouts} renderItem={workout => <WorkoutSummary key={workout.id} {...workout} />} />
+    );
+  }
+
   onLoadHistory() {
     this.setState({isLoading: true})
     this.publish({event: events.FETCH_WORKOUTS});
diff --git a/app/screens/login-screen.js b/app/screens/login-screen.js
index 450ae4c..bf18af6 100644
--- a/app/screens/login-screen.js
+++ b/app/screens/login-screen.js
@@ -21,7 +21,7 @@ export default class LoginScreen extends ApplicationComponent {
 
   componentDidMount() {
     super.componentDidMount();
-    //this.notify({username: 'mokha', gravatar_id: '96c04b963c1ab66002bf3455900a2680' }); // TODO:: REMOVE
+    this.notify({username: 'mokha', gravatar_id: '96c04b963c1ab66002bf3455900a2680' }); // TODO:: REMOVE
   }
 
   render() {