Implement Reusable Components within Rewards #30
Conversation
| {' '} | ||
| {`${1000 - | ||
| (parseInt(user.points) % 1000)} points to your next reward`} | ||
| </Text> | ||
| </Body> | ||
| </View> | ||
|
|
||
| <View style={styles.tabBarInfoContainer}> |
There was a problem hiding this comment.
Unrelated to this PR task but this is all deprecated leftover from old versions of these designs. We can take all of this out.
There was a problem hiding this comment.
Migrate styles into a separate stylesheet
components/rewards/PointsHistory.js
Outdated
| {/* Points history */} | ||
| <View> | ||
| <ScrollView style={{ marginTop: 50 }}> | ||
| <Text style={{ textAlign: 'center' }}> Recent Transactions</Text> | ||
| <Caption style={{ textAlign: 'center' }}> |
There was a problem hiding this comment.
This should be an Overline, left-aligned.
There was a problem hiding this comment.
In our effort to reduce in-line styling, you could create a container to align things to the left! Especially since all other captions (according to the Figma) should be left-aligned as well. This could done as another ticket too
components/rewards/PointsHistory.js
Outdated
| @@ -1,5 +1,6 @@ | |||
| import React from 'react'; | |||
| import { Button, ScrollView, StyleSheet, Text, View } from 'react-native'; | |||
| import { Body, Title, Caption } from '../BaseComponents'; | |||
There was a problem hiding this comment.
Only import whichever components are actually used, so remove Body and Title.
components/rewards/PointsHistory.js
Outdated
| @@ -48,7 +53,10 @@ function PointsHistory({ transactions, user, updates, navigation }) { | |||
| storeName={transaction.storeName} | |||
| /> | |||
| ))} | |||
| <Text style={{ textAlign: 'center' }}> Complete History </Text> | |||
| <Caption style={{ textAlign: 'center' }}> | |||
There was a problem hiding this comment.
This does not exist in the designs so we can take this out.
|
Apart from the parts that should be corrected to align with the Figma (see @wangannie's requests), what you did is generally what was outlined in your sprint task. Nice job! |
| {' '} | ||
| Complete History{' '} | ||
| </Caption> | ||
| <Overline>Recent TraNsAcTiOnS</Overline> |
What's new in this PR
Implementing reusable components in RewardsScreen, RewardsHome, and PointsHistory
Relevant Links
Related PRs
Using components from Thu's PR, https://github.com/calblueprint/dccentralkitchen/pull/28/files, to make Rewards cleaner.
How to review
The order in which to review files and what to expect when testing locally
Next steps
Lots of components could not be replaced because they only existed in rewards.js, so a possible next step would be to bring those over to BaseComponents.
Tests Performed, Edge Cases
Tested on Expo, things looked alright.
CC: @anniero98 @tommypoa