calblueprint · wangannie · Mar 9, 2020 · Feb 27, 2020 · Mar 4, 2020 · wangannie
diff --git a/components/rewards/PointsHistory.js b/components/rewards/PointsHistory.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Button, ScrollView, StyleSheet, Text, View } from 'react-native';
+import { Overline } from '../BaseComponents';
 import Transaction from './Transaction';
 /**
  * @prop
@@ -14,8 +15,8 @@ const styles = StyleSheet.create({
 
 function PointsHistory({ transactions, user, updates, navigation }) {
   // Only display if transactions have mounted
+  // TODO @kennethlien fix spacing at line 44
   if (transactions) {
-    const recent = transactions.splice(0, 3);
     return (
       <View>
         {/* Prompt to upload receipt */}
@@ -36,19 +37,11 @@ function PointsHistory({ transactions, user, updates, navigation }) {
         ) : (
           <Text />
         )}
+        {/* end receipt prompt */}
         {/* Points history */}
         <View>
           <ScrollView style={{ marginTop: 50 }}>
-            <Text style={{ textAlign: 'center' }}> Recent Transactions</Text>
-            {recent.map(transaction => (
-              <Transaction
-                key={transaction.id}
-                date={transaction.date}
-                points={transaction.points}
-                storeName={transaction.storeName}
-              />
-            ))}
-            <Text style={{ textAlign: 'center' }}> Complete History </Text>
+            <Overline>Recent TraNsAcTiOnS</Overline>
             {transactions.map(transaction => (
               <Transaction
                 key={transaction.id}

diff --git a/components/rewards/ProgressBar.js b/components/rewards/ProgressBar.js
@@ -0,0 +1,59 @@
+import React from 'react';
+
+class ProgressBarExample extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      percentage: 0
+    };
+
+    this.nextStep = this.nextStep.bind(this);
+  }
+
+  nextStep() {
+    if (this.state.percentage === 100) return;
+    this.setState(prevState => ({ percentage: prevState.percentage + 20 }));
+  }
+
+  render() {
+    return (
+      <div>
+        <h2> A React Progress Bar </h2>
+        <ProgressBar percentage={this.state.percentage} />
+
+        <div style={{ marginTop: '20px' }}>
+          <button onClick={this.nextStep}>Next Step</button>
+        </div>
+
+        <div
+          style={{ marginTop: '10px', color: 'blue', marginBottom: '15px' }}
+          onClick={() => this.setState({ percentage: 0 })}>
+          Reset
+        </div>
+      </div>
+    );
+  }
+}
+
+export const ProgressBar = props => {
+  return (
+    <div className="progress-bar">
+      <Filler percentage={props.percentage} />
+    </div>
+  );
+};
+
+const Filler = props => {
+  return <div className="filler" style={{ width: `${props.percentage}%` }} />;
+};
+
+// Other React Stuff
+
+// Check out my free youtube video on how to build a thumbnail gallery in react
+// https://www.youtube.com/watch?v=GZ4d3HEn9zg
+
+// https://medium.com/@ItsMeDannyZ/build-an-image-slider-with-react-es6-264368de68e4
+
+// Follow me on Github!
+// https://github.com/DZuz14
diff --git a/components/rewards/RewardsHome.js b/components/rewards/RewardsHome.js
@@ -1,25 +1,31 @@
 import React from 'react';
-import { Platform, StyleSheet, Text, View } from 'react-native';
-import { Body } from '../BaseComponents';
+import { View } from 'react-native';
+import { Body, Caption, Title } from '../BaseComponents';
+import { styles } from '../../styled/rewards';
+import { ProgressBar } from '../rewards/ProgressBar';
+
 /**
  * @prop
  * */
 
 function RewardsHome({ transactions, user }) {
   return (
     <View>
+      <ProgressBar percentage="50" />
       <View style={styles.getStartedContainer}>
-        <Text> {`Welcome, ${user.name}`}</Text>
+        <Title> {`Welcome, ${user.name}`}</Title>
         <Body>{user.points} total points </Body>
-        <Text style={styles.getStartedText}>
+        <Body style={styles.getStartedText}>
           {' '}
           {`${1000 -
             (parseInt(user.points) % 1000)} points to your next reward`}
-        </Text>
+        </Body>
       </View>
 
       <View style={styles.tabBarInfoContainer}>
-        <Text style={styles.tabBarInfoText}>Your transaction history:</Text>
+        <Caption style={styles.tabBarInfoText}>
+          Your transaction history:
+        </Caption>
         {transactions.splice(0, 3).map(transaction => {
           return (
             <View key={transaction.id}>
@@ -36,36 +42,4 @@ function RewardsHome({ transactions, user }) {
     </View>
   );
 }
-
-const styles = StyleSheet.create({
-  tabBarInfoContainer: {
-    position: 'absolute',
-    bottom: 150,
-    left: 0,
-    right: 0,
-    ...Platform.select({
-      ios: {
-        shadowColor: 'black',
-        shadowOffset: { width: 0, height: 3 },
-        shadowOpacity: 0.1,
-        shadowRadius: 3
-      },
-      android: {
-        elevation: 20
-      }
-    }),
-    alignItems: 'center',
-    backgroundColor: '#fbfbfb',
-    paddingVertical: 20
-  },
-  navigationFilename: {
-    marginTop: 5
-  },
-  getStartedContainer: {
-    alignItems: 'center',
-    marginHorizontal: 50,
-    paddingVertical: 20
-  }
-});
-
 export default React.memo(RewardsHome);
diff --git a/components/rewards/Transaction.js b/components/rewards/Transaction.js
@@ -4,10 +4,9 @@ import { TouchableOpacity } from 'react-native';
 import {
   Card,
   ContentContainer,
-  IconContainer,
-  MainText,
-  Overline
+  IconContainer
 } from '../../styled/transaction';
+import { Caption, Body } from '../../components/BaseComponents';
 
 /**
  * @prop
@@ -22,10 +21,10 @@ function Transaction(props) {
           <FontAwesome name="check" size={32} color="green" />
         </IconContainer>
         <ContentContainer>
-          <Overline>
+          <Body>
             {date.toLocaleDateString()} @ {storeName}
-          </Overline>
-          <MainText>{points} Points Redeemed</MainText>
+          </Body>
+          <Caption>{points} Points Redeemed</Caption>
         </ContentContainer>
       </Card>
     </TouchableOpacity>

diff --git a/screens/rewards/RewardsScreen.js b/screens/rewards/RewardsScreen.js
@@ -17,6 +17,7 @@ import {
   styles,
   TopTab
 } from '../../styled/rewards';
+import { Body, Caption, Title } from '../../components/BaseComponents';
 
 const routes = [
   { key: 'home', title: 'My Rewards' },
@@ -163,11 +164,12 @@ export default class RewardsScreen extends React.Component {
               <TouchableOpacity
                 onPress={() => this.props.navigation.navigate('Stores')}>
                 {/* TODO: change this to a proper icon */}
-                <Text style={{ color: 'white', fontSize: 25 }}> ⬇ </Text>
+                <Text style={{ color: 'white', fontSize: 25 }}> ▼ </Text>
               </TouchableOpacity>
-              <Text style={{ color: 'white', fontSize: 30 }}>
+
+              <Title style={{ color: 'white', fontSize: 30 }}>
                 Healthy Rewards
-              </Text>
+              </Title>
             </View>
           </TopTab>
           <TabView

diff --git a/styled/rewards.js b/styled/rewards.js
@@ -1,4 +1,4 @@
-import { StyleSheet } from 'react-native';
+import { Platform, StyleSheet } from 'react-native';
 import styled from 'styled-components/native';
 
 export const Container = styled.View`
@@ -59,5 +59,42 @@ export const styles = StyleSheet.create({
   tabBarIndicator: {
     backgroundColor: '#fff',
     height: 2.5
+  },
+  tabBarInfoContainer: {
+    position: 'absolute',
+    bottom: 150,
+    left: 0,
+    right: 0,
+    ...Platform.select({
+      ios: {
+        shadowColor: 'black',
+        shadowOffset: { width: 0, height: 3 },
+        shadowOpacity: 0.1,
+        shadowRadius: 3
+      },
+      android: {
+        elevation: 20
+      }
+    }),
+    alignItems: 'center',
+    backgroundColor: '#fbfbfb',
+    paddingVertical: 20
+  },
+  navigationFilename: {
+    marginTop: 5
+  },
+  getStartedContainer: {
+    alignItems: 'center',
+    marginHorizontal: 50,
+    paddingVertical: 20
+  },
+
+  progressBar: {
+    height: 20,
+    width: '100%',
+    backgroundColor: 'white',
+    borderColor: '#000',
+    borderWidth: 1,
+    borderRadius: 1
   }
 });