From 9f26ac76a1dc53b1119718a987fee0ee51d3ae7f Mon Sep 17 00:00:00 2001 From: Chico Date: Thu, 14 Feb 2019 00:05:15 +0000 Subject: [PATCH] Show new Rate screen on heart button press List of changes: - Add new Rate screen - Add new Footer component - Update BottomNav and IconButton to allow for onPress functions - Update BottomNav and IconButton stories with onPress functions - Update Home component to navigate to the Rate screen when the heart icon button is pressed in the bottom nav - Update StoriesTest snapshot to reflect BottomNav and IconButton changes - Update HomeTest and its snapshot to reflect Home component changes - Add RateTest and its snapshot --- App/Components/BottomNav/index.js | 14 +- App/Components/Buttons/Button/index.js | 2 +- App/Components/Buttons/IconButton/index.js | 11 +- App/Components/Buttons/NavButton/index.js | 2 +- App/Components/Footer/Styles.js | 5 + App/Components/Footer/index.js | 15 ++ App/Components/Stories/BottomNav.story.js | 5 +- App/Components/Stories/IconButton.story.js | 9 +- App/Components/index.js | 2 + App/Containers/index.js | 7 + App/Modules/Home/Screens/Components/index.js | 16 +- App/Modules/Home/Screens/Containers/index.js | 13 ++ App/Modules/Home/Screens/index.js | 6 - App/Modules/Home/index.js | 2 +- App/Modules/Rate/Screens/Components/index.js | 25 +++ App/Modules/Rate/Screens/Containers/index.js | 34 ++++ App/Modules/Rate/index.js | 6 + App/Modules/index.js | 7 + App/Navigation/Screens/index.js | 11 +- .../__snapshots__/StoriesTest.js.snap | 167 +++++++++++++----- Tests/Modules/Home/Screens/HomeTest.js | 6 +- .../Screens/__snapshots__/HomeTest.js.snap | 6 +- Tests/Modules/Rate/Screens/RateTest.js | 19 ++ .../Screens/__snapshots__/RateTest.js.snap | 16 ++ 24 files changed, 332 insertions(+), 74 deletions(-) create mode 100644 App/Components/Footer/Styles.js create mode 100644 App/Components/Footer/index.js create mode 100644 App/Containers/index.js delete mode 100644 App/Modules/Home/Screens/index.js create mode 100644 App/Modules/Rate/Screens/Components/index.js create mode 100644 App/Modules/Rate/Screens/Containers/index.js create mode 100644 App/Modules/Rate/index.js create mode 100644 App/Modules/index.js create mode 100644 Tests/Modules/Rate/Screens/RateTest.js create mode 100644 Tests/Modules/Rate/Screens/__snapshots__/RateTest.js.snap diff --git a/App/Components/BottomNav/index.js b/App/Components/BottomNav/index.js index 43e55ee..3f0afbb 100644 --- a/App/Components/BottomNav/index.js +++ b/App/Components/BottomNav/index.js @@ -1,5 +1,6 @@ import React, { Component } from 'react' import { View } from 'react-native' +import PropTypes from 'prop-types' import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome' import MaterialIcon from 'react-native-vector-icons/MaterialCommunityIcons' @@ -10,26 +11,33 @@ import { Colors } from 'App/Themes' import s from './Styles' export default class BottomNav extends Component { + static propTypes = { + onRatePress: PropTypes.func.isRequired, + onHomePress: PropTypes.func.isRequired, + onSettingsPress: PropTypes.func.isRequired + } + render () { + const {onRatePress, onHomePress, onSettingsPress} = this.props return ( - + - + - + + @@ -42,7 +45,7 @@ export default class IconButton extends Component { - + ) } } diff --git a/App/Components/Buttons/NavButton/index.js b/App/Components/Buttons/NavButton/index.js index 9acaf9b..fac7409 100644 --- a/App/Components/Buttons/NavButton/index.js +++ b/App/Components/Buttons/NavButton/index.js @@ -2,7 +2,7 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import { Platform, View, Button, Text } from 'react-native' -import { TouchableOpacity } from 'App/Components/Touchable' +import { TouchableOpacity } from 'App/Components' import s from './Styles' diff --git a/App/Components/Footer/Styles.js b/App/Components/Footer/Styles.js new file mode 100644 index 0000000..14d1f85 --- /dev/null +++ b/App/Components/Footer/Styles.js @@ -0,0 +1,5 @@ +import { StyleSheet } from 'react-native' + +import { Styles } from 'App/Themes' + +export default StyleSheet.create({...Styles}) diff --git a/App/Components/Footer/index.js b/App/Components/Footer/index.js new file mode 100644 index 0000000..087b997 --- /dev/null +++ b/App/Components/Footer/index.js @@ -0,0 +1,15 @@ +import React, { Component } from 'react' +import { View } from 'react-native' + +import s from './Styles' + +export default class Footer extends Component { + render () { + const {containerStyle = undefined} = this.props + return ( + + {this.props.children} + + ) + } +} diff --git a/App/Components/Stories/BottomNav.story.js b/App/Components/Stories/BottomNav.story.js index 3e6b119..812f29f 100644 --- a/App/Components/Stories/BottomNav.story.js +++ b/App/Components/Stories/BottomNav.story.js @@ -7,5 +7,8 @@ import BottomNav from '../BottomNav' storiesOf('BottomNav', module) .addDecorator(FullScreenDecorator) .add('Default', () => ( - + {}} + onHomePress={() => {}} + onSettingsPress={() => {}} /> )) diff --git a/App/Components/Stories/IconButton.story.js b/App/Components/Stories/IconButton.story.js index 25dd3c9..b8dcd4a 100644 --- a/App/Components/Stories/IconButton.story.js +++ b/App/Components/Stories/IconButton.story.js @@ -12,7 +12,9 @@ import { IconButton } from '../Buttons' storiesOf('IconButton', module) .addDecorator(CenterDecorator) .add('Heart', () => ( - + {}}> )) .add('Large Home', () => ( - + {}}> - + ) } diff --git a/App/Modules/Home/Screens/Containers/index.js b/App/Modules/Home/Screens/Containers/index.js index 96b104c..65f9598 100644 --- a/App/Modules/Home/Screens/Containers/index.js +++ b/App/Modules/Home/Screens/Containers/index.js @@ -10,6 +10,16 @@ export class HomeContainer extends Component { }) } + onRatePress = () => { + this.props.navigation.navigate('RateScreen') + } + + onHomePress = () => {} + + onSettingsPress = () => { + // TODO + } + render () { return ( ) } diff --git a/App/Modules/Home/Screens/index.js b/App/Modules/Home/Screens/index.js deleted file mode 100644 index 967126c..0000000 --- a/App/Modules/Home/Screens/index.js +++ /dev/null @@ -1,6 +0,0 @@ - -import Home from './Containers' - -export { - Home -} diff --git a/App/Modules/Home/index.js b/App/Modules/Home/index.js index 6e4d937..27ce45e 100644 --- a/App/Modules/Home/index.js +++ b/App/Modules/Home/index.js @@ -1,5 +1,5 @@ -import { Home } from './Screens' +import Home from './Screens/Containers' export { Home diff --git a/App/Modules/Rate/Screens/Components/index.js b/App/Modules/Rate/Screens/Components/index.js new file mode 100644 index 0000000..4bfcc53 --- /dev/null +++ b/App/Modules/Rate/Screens/Components/index.js @@ -0,0 +1,25 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' + +import { Container, Footer, Card } from 'App/Components' + +export default class Screen extends Component { + static propTypes = { + onRatePress: PropTypes.func.isRequired + } + + render () { + const { onRatePress } = this.props + return ( + +
+ +
+ + ) + } +} diff --git a/App/Modules/Rate/Screens/Containers/index.js b/App/Modules/Rate/Screens/Containers/index.js new file mode 100644 index 0000000..f330c6a --- /dev/null +++ b/App/Modules/Rate/Screens/Containers/index.js @@ -0,0 +1,34 @@ +import React, { Component } from 'react' +import { connect } from 'react-redux' + +import Screen from '../Components' + +export class RateContainer extends Component { + onRatePress = () => { + // TODO + } + + render () { + return ( + { + this.screen = ref + }} + {...this.props} + onRatePress={this.onRatePress} + /> + ) + } +} + +const mapStateToProps = (state) => { + return { + } +} + +const mapDispatchToProps = (dispatch) => { + return { + } +} + +export default connect(mapStateToProps, mapDispatchToProps)(RateContainer) diff --git a/App/Modules/Rate/index.js b/App/Modules/Rate/index.js new file mode 100644 index 0000000..f32052f --- /dev/null +++ b/App/Modules/Rate/index.js @@ -0,0 +1,6 @@ + +import Rate from './Screens/Containers' + +export { + Rate +} diff --git a/App/Modules/index.js b/App/Modules/index.js new file mode 100644 index 0000000..482cf04 --- /dev/null +++ b/App/Modules/index.js @@ -0,0 +1,7 @@ +import { Home } from './Home' +import { Rate } from './Rate' + +export { + Home, + Rate +} diff --git a/App/Navigation/Screens/index.js b/App/Navigation/Screens/index.js index 50c0e23..1905157 100644 --- a/App/Navigation/Screens/index.js +++ b/App/Navigation/Screens/index.js @@ -1,6 +1,5 @@ -import Start from 'App/Containers/StartContainer' -import Web from 'App/Containers/WebContainer' -import { Home } from 'App/Modules/Home' +import { Start, Web } from 'App/Containers' +import { Home, Rate } from 'App/Modules' const Screens = { StartScreen: { @@ -17,6 +16,12 @@ const Screens = { navigationOptions: ({navigation}) => ({ title: 'Code & Robots' }) + }, + RateScreen: { + screen: Rate, + navigationOptions: ({navigation}) => ({ + title: 'Spread the word' + }) } } diff --git a/Tests/Components/__snapshots__/StoriesTest.js.snap b/Tests/Components/__snapshots__/StoriesTest.js.snap index 0f537d1..d3390c6 100644 --- a/Tests/Components/__snapshots__/StoriesTest.js.snap +++ b/Tests/Components/__snapshots__/StoriesTest.js.snap @@ -46,19 +46,32 @@ exports[`Storyshots BottomNav Default 1`] = ` } > { beforeEach(() => { wrapper = shallow( - {}} />) + {}} + onRatePress={() => {}} + onHomePress={() => {}} + onSettingsPress={() => {}} />) }) it('Component renders correctly', () => { diff --git a/Tests/Modules/Home/Screens/__snapshots__/HomeTest.js.snap b/Tests/Modules/Home/Screens/__snapshots__/HomeTest.js.snap index 41c641b..cd87706 100644 --- a/Tests/Modules/Home/Screens/__snapshots__/HomeTest.js.snap +++ b/Tests/Modules/Home/Screens/__snapshots__/HomeTest.js.snap @@ -15,6 +15,10 @@ exports[`Home Component renders correctly 1`] = ` The good news is you can follow along as this Beta version of the app develops over the coming weeks." title="HELLO" /> - + `; diff --git a/Tests/Modules/Rate/Screens/RateTest.js b/Tests/Modules/Rate/Screens/RateTest.js new file mode 100644 index 0000000..fddfc81 --- /dev/null +++ b/Tests/Modules/Rate/Screens/RateTest.js @@ -0,0 +1,19 @@ +import React from 'react' + +import { shallow } from 'enzyme' +import toJson from 'enzyme-to-json' + +import Rate from 'App/Modules/Rate/Screens/Components' + +describe('Rate', () => { + let wrapper + + beforeEach(() => { + wrapper = shallow( + {}} />) + }) + + it('Component renders correctly', () => { + expect(toJson(wrapper)).toMatchSnapshot() + }) +}) diff --git a/Tests/Modules/Rate/Screens/__snapshots__/RateTest.js.snap b/Tests/Modules/Rate/Screens/__snapshots__/RateTest.js.snap new file mode 100644 index 0000000..fc1e642 --- /dev/null +++ b/Tests/Modules/Rate/Screens/__snapshots__/RateTest.js.snap @@ -0,0 +1,16 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Rate Component renders correctly 1`] = ` + + + +`;