From 4f67ca8da42bf7a000fc801ad1c5e9e2c8a6c015 Mon Sep 17 00:00:00 2001 From: Kenneth Lien Date: Wed, 26 Feb 2020 18:18:23 -0800 Subject: [PATCH 1/2] PR for points history base components --- components/rewards/PointsHistory.js | 12 ++++++++++-- components/rewards/RewardsHome.js | 15 +++++++++------ components/rewards/Transaction.js | 11 +++++------ screens/rewards/RewardsScreen.js | 8 +++++--- 4 files changed, 29 insertions(+), 17 deletions(-) diff --git a/components/rewards/PointsHistory.js b/components/rewards/PointsHistory.js index b74df2ca..2f8d8239 100644 --- 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 { Body, Title, Caption } from '../BaseComponents'; import Transaction from './Transaction'; /** * @prop @@ -36,10 +37,14 @@ function PointsHistory({ transactions, user, updates, navigation }) { ) : ( )} + {/* end receipt prompt */} {/* Points history */} - Recent Transactions + + {' '} + Recent Transactions + {recent.map(transaction => ( ))} - Complete History + + {' '} + Complete History{' '} + {transactions.map(transaction => ( - {`Welcome, ${user.name}`} + {`Welcome, ${user.name}`} {user.points} total points - + {' '} {`${1000 - (parseInt(user.points) % 1000)} points to your next reward`} - + - Your transaction history: + + Your transaction history: + {transactions.splice(0, 3).map(transaction => { return ( diff --git a/components/rewards/Transaction.js b/components/rewards/Transaction.js index e3d46c4e..9e56e493 100644 --- 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) { - + {date.toLocaleDateString()} @ {storeName} - - {points} Points Redeemed + + {points} Points Redeemed diff --git a/screens/rewards/RewardsScreen.js b/screens/rewards/RewardsScreen.js index eea4b687..450383c6 100644 --- 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 { this.props.navigation.navigate('Stores')}> {/* TODO: change this to a proper icon */} - ⬇ + ▼ - + + Healthy Rewards - </Text> + Date: Wed, 4 Mar 2020 10:32:03 -0800 Subject: [PATCH 2/2] adding suggested changes --- components/rewards/PointsHistory.js | 21 ++-------- components/rewards/ProgressBar.js | 59 +++++++++++++++++++++++++++++ components/rewards/RewardsHome.js | 37 ++---------------- styled/rewards.js | 39 ++++++++++++++++++- 4 files changed, 104 insertions(+), 52 deletions(-) create mode 100644 components/rewards/ProgressBar.js diff --git a/components/rewards/PointsHistory.js b/components/rewards/PointsHistory.js index 2f8d8239..7f3ba4c6 100644 --- a/components/rewards/PointsHistory.js +++ b/components/rewards/PointsHistory.js @@ -1,6 +1,6 @@ import React from 'react'; import { Button, ScrollView, StyleSheet, Text, View } from 'react-native'; -import { Body, Title, Caption } from '../BaseComponents'; +import { Overline } from '../BaseComponents'; import Transaction from './Transaction'; /** * @prop @@ -15,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 ( {/* Prompt to upload receipt */} @@ -41,22 +41,7 @@ function PointsHistory({ transactions, user, updates, navigation }) { {/* Points history */} - - {' '} - Recent Transactions - - {recent.map(transaction => ( - - ))} - - {' '} - Complete History{' '} - + Recent TraNsAcTiOnS {transactions.map(transaction => ( ({ percentage: prevState.percentage + 20 })); + } + + render() { + return ( +
+

A React Progress Bar

+ + +
+ +
+ +
this.setState({ percentage: 0 })}> + Reset +
+
+ ); + } +} + +export const ProgressBar = props => { + return ( +
+ +
+ ); +}; + +const Filler = props => { + return
; +}; + +// 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 index 1d1e3afd..3d7b3158 100644 --- a/components/rewards/RewardsHome.js +++ b/components/rewards/RewardsHome.js @@ -1,6 +1,8 @@ import React from 'react'; -import { Platform, StyleSheet, View } from 'react-native'; +import { View } from 'react-native'; import { Body, Caption, Title } from '../BaseComponents'; +import { styles } from '../../styled/rewards'; +import { ProgressBar } from '../rewards/ProgressBar'; /** * @prop @@ -9,6 +11,7 @@ import { Body, Caption, Title } from '../BaseComponents'; function RewardsHome({ transactions, user }) { return ( + {`Welcome, ${user.name}`} {user.points} total points @@ -39,36 +42,4 @@ function RewardsHome({ transactions, user }) { ); } - -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/styled/rewards.js b/styled/rewards.js index bdc2ea1a..692d423f 100644 --- 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 } });