Skip to content

Commit c9687db

Browse files
eaglecheoweaglecheow
committed
Added Event Sign Up mockup, decomposed event pages to seperate files
1 parent 8e189e0 commit c9687db

File tree

6 files changed

+230
-74
lines changed

6 files changed

+230
-74
lines changed

‎App.js

Lines changed: 4 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { StyleSheet, Text, View, Button, Image, TouchableNativeFeedback } from 'react-native';
2+
import { StyleSheet, Text, View, Button, Image, TouchableNativeFeedback, TextInput } from 'react-native';
33
import { createStackNavigator } from 'react-navigation';
44
import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs';
55
import { FontAwesome } from 'react-native-vector-icons';
@@ -10,12 +10,11 @@ import ProfilePage from './pages/ProfilePage';
1010

1111
import { createStore } from 'redux';
1212
import { Provider, connect } from 'react-redux';
13-
import {userInterface} from './redux/reducers/userInterface'
13+
import {userInterface} from './redux/reducers/userInterface';
1414
import Page from './components/Page';
1515
import SettingsPage from './pages/SettingsPage';
16-
import NavigationService from './services/NavigationService'
17-
import { Tile } from 'react-native-elements';
18-
import Modal from 'react-native-modal';
16+
import NavigationService from './services/NavigationService';
17+
import EventPage from './pages/EventPage';
1918

2019

2120
const APP_NAME = 'NottCS';
@@ -54,75 +53,6 @@ class ClubPage extends React.Component {
5453
}
5554
}
5655

57-
class EventPage extends React.Component {
58-
59-
state={
60-
params: null,
61-
posterModalVisible: false,
62-
signUpModalVisible: false,
63-
}
64-
65-
componentDidMount() {
66-
let params = NavigationService.getParams();
67-
this.setState(Object.assign({}, this.state, {params: params}));
68-
}
69-
70-
render() {
71-
return (
72-
this.state.params
73-
?
74-
<View style={EventPageStyle.container}>
75-
<Tile imageSrc={{uri: this.state.params.event.imageSource}}
76-
title={this.state.params.event.title}
77-
activeOpacity={1}
78-
onPress={() => this.setState({posterModalVisible: true})}/>
79-
<View style={EventPageStyle.textView}>
80-
<Text>{this.state.params.event.description}</Text>
81-
</View>
82-
<Button title="Sign Up!" onPress={() => this.setState({signUpModalVisible: true})}/>
83-
84-
{/* Poster Modal*/}
85-
<Modal isVisible={this.state.posterModalVisible}
86-
onBackButtonPress={() => this.setState({posterModalVisible: false})}
87-
onBackdropPress={() => this.setState({posterModalVisible: false})}
88-
onSwipe={() => this.setState({posterModalVisible: false})}
89-
swipeDirection="down">
90-
<Image source={{uri: this.state.params.event.imageSource}}
91-
style={EventPageStyle.image}/>
92-
</Modal>
93-
94-
{/* Sign up Modal*/}
95-
<Modal isVisible={this.state.signUpModalVisible}>
96-
<View style={{backgroundColor: 'white', padding: 20}}>
97-
<Text>This is sign up page</Text>
98-
<Button title="Sign Up" onPress={() => alert("Signing Up!")}/>
99-
<Button title="Cancel" onPress={() => this.setState({signUpModalVisible: false})}/>
100-
</View>
101-
</Modal>
102-
</View>
103-
:
104-
<View style={EventPageStyle.textView}>
105-
<Text>Please wait while we pull some data...</Text>
106-
</View>
107-
);
108-
}
109-
}
110-
111-
const EventPageStyle = StyleSheet.create({
112-
container: {
113-
flex: 1
114-
},
115-
image: {
116-
117-
height: 300,
118-
resizeMode: 'contain',
119-
},
120-
textView: {
121-
flex: 1,
122-
padding: 15,
123-
}
124-
})
125-
12656
const TabBarIcon = (type) => {
12757

12858
let iconName;

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,9 @@
1010
"react-native": "https://github.com/expo/react-native/archive/sdk-28.0.0.tar.gz",
1111
"react-native-elements": "^0.19.1",
1212
"react-native-modal": "^6.1.0",
13+
"react-native-qrcode-svg": "^5.0.6",
1314
"react-native-super-grid": "^2.4.0",
15+
"react-native-svg": "^6.3.1",
1416
"react-navigation": "^2.4.1",
1517
"react-navigation-material-bottom-tabs": "^0.3.0",
1618
"react-redux": "^5.0.7",

‎pages/EventPage.js

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
import React, { Component } from 'react';
2+
import { View, Text, StyleSheet, Button, Image } from 'react-native';
3+
import PropTypes from 'prop-types';
4+
import NavigationService from '../services/NavigationService'
5+
import { Tile } from 'react-native-elements';
6+
import Modal from 'react-native-modal';
7+
import EventSignUpConfirmationPage from './EventSignUpConfirmationPage'
8+
import EventSignUpPage from './EventSignUpPage'
9+
10+
class EventPage extends React.Component {
11+
12+
state={
13+
params: null,
14+
posterModalVisible: false,
15+
signUpModalVisible: false,
16+
formSubmitted: false,
17+
}
18+
19+
submitForm = () => {
20+
this.setState({formSubmitted: true});
21+
}
22+
23+
closeSignUpModal = () => {
24+
this.setState({signUpModalVisible: false, formSubmitted: false});
25+
}
26+
27+
componentDidMount() {
28+
let params = NavigationService.getParams();
29+
this.setState(Object.assign({}, this.state, {params: params}));
30+
}
31+
32+
render() {
33+
return (
34+
this.state.params
35+
?
36+
<View style={EventPageStyle.container}>
37+
<Tile imageSrc={{uri: this.state.params.event.imageSource}}
38+
title={this.state.params.event.title}
39+
activeOpacity={1}
40+
onPress={() => this.setState({posterModalVisible: true})}/>
41+
<View style={EventPageStyle.textView}>
42+
<Text>{this.state.params.event.description}</Text>
43+
</View>
44+
<Button title="Sign Up!" onPress={() => this.setState({signUpModalVisible: true})}/>
45+
46+
{/* Poster Modal*/}
47+
<Modal isVisible={this.state.posterModalVisible}
48+
onBackButtonPress={() => this.setState({posterModalVisible: false})}
49+
onBackdropPress={() => this.setState({posterModalVisible: false})}
50+
onSwipe={() => this.setState({posterModalVisible: false})}
51+
swipeDirection="down">
52+
<Image source={{uri: this.state.params.event.imageSource}}
53+
style={EventPageStyle.image}/>
54+
</Modal>
55+
56+
{/* Sign up Modal*/}
57+
<Modal isVisible={this.state.signUpModalVisible}>
58+
{
59+
this.state.formSubmitted
60+
?
61+
<EventSignUpConfirmationPage onClose={this.closeSignUpModal}/>
62+
:
63+
<EventSignUpPage onCancel={this.closeSignUpModal}
64+
onSubmit={this.submitForm}/>
65+
}
66+
</Modal>
67+
</View>
68+
:
69+
<View style={EventPageStyle.textView}>
70+
<Text>Please wait while we pull some data...</Text>
71+
</View>
72+
);
73+
}
74+
}
75+
76+
const EventPageStyle = StyleSheet.create({
77+
container: {
78+
flex: 1
79+
},
80+
image: {
81+
82+
height: 300,
83+
resizeMode: 'contain',
84+
},
85+
textView: {
86+
flex: 1,
87+
padding: 15,
88+
}
89+
})
90+
91+
export default EventPage;

‎pages/EventSignUpConfirmationPage.js

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import React, { Component } from 'react';
2+
import { View, Text, StyleSheet, Button } from 'react-native';
3+
import PropTypes from 'prop-types';
4+
import QRCode from 'react-native-qrcode-svg';
5+
6+
const EventSignUpConfirmationPage = ({onClose}) => {
7+
return (
8+
<View style={EventSignUpConfirmationPageStyle.container}>
9+
<Text style={EventSignUpConfirmationPageStyle.text}>Get your QR Code scanned by the club admin to confirm the sign up!</Text>
10+
<View style={EventSignUpConfirmationPageStyle.qrCode}>
11+
<QRCode value="Special sauce for confirmation to work!"
12+
size={200}/>
13+
</View>
14+
<View style={EventSignUpConfirmationPageStyle.button}>
15+
<Button title="Save QR Code" onPress={() => alert('Saving QR Code!')}/>
16+
</View>
17+
<View style={EventSignUpConfirmationPageStyle.button}>
18+
<Button title="Close" onPress={onClose}/>
19+
</View>
20+
</View>
21+
)
22+
}
23+
24+
EventSignUpConfirmationPage.propTypes = {
25+
onClose: PropTypes.func.isRequired
26+
}
27+
28+
const EventSignUpConfirmationPageStyle = StyleSheet.create({
29+
container: {
30+
backgroundColor: 'white',
31+
padding: 20
32+
},
33+
qrCode: {
34+
justifyContent: 'center',
35+
alignItems: 'center',
36+
margin: 10
37+
},
38+
button: {
39+
margin: 5
40+
},
41+
text: {
42+
fontSize: 16
43+
}
44+
})
45+
46+
export default EventSignUpConfirmationPage;

‎pages/EventSignUpPage.js

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import React, { Component } from 'react';
2+
import { View, Text, StyleSheet, TextInput, Button } from 'react-native';
3+
import PropTypes from 'prop-types';
4+
5+
const EventSignUpPage = ({onCancel, onSubmit}) => {
6+
return (
7+
<View style={EventSignUpPageStyle.container}>
8+
<View style={EventSignUpPageStyle.formContainer}>
9+
<Text style={EventSignUpPageStyle.title}>Sign Up</Text>
10+
<TextInput style={EventSignUpPageStyle.textInput} placeholder="Name"/>
11+
<TextInput style={EventSignUpPageStyle.textInput} placeholder="Phone"/>
12+
</View>
13+
<View style={EventSignUpPageStyle.button}>
14+
<Button title="Sign Up" onPress={onSubmit}/>
15+
</View>
16+
<View style={EventSignUpPageStyle.button}>
17+
<Button title="Cancel" onPress={onCancel}/>
18+
</View>
19+
</View>
20+
)
21+
}
22+
23+
EventSignUpPage.propTypes = {
24+
onCancel: PropTypes.func.isRequired,
25+
onSubmit: PropTypes.func.isRequired
26+
}
27+
28+
const EventSignUpPageStyle = StyleSheet.create({
29+
container: {
30+
backgroundColor: 'white',
31+
padding: 20
32+
},
33+
formContainer: {
34+
padding: 10
35+
},
36+
title: {
37+
fontSize: 30
38+
},
39+
textInput: {
40+
padding: 5
41+
},
42+
button: {
43+
margin: 5
44+
}
45+
})
46+
47+
export default EventSignUpPage;

‎yarn.lock

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1594,6 +1594,10 @@ color@^2.0.1:
15941594
color-convert "^1.9.1"
15951595
color-string "^1.5.2"
15961596

1597+
colors@*:
1598+
version "1.3.0"
1599+
resolved "https://registry.yarnpkg.com/colors/-/colors-1.3.0.tgz#5f20c9fef6945cb1134260aab33bfbdc8295e04e"
1600+
15971601
commander@^2.9.0:
15981602
version "2.15.1"
15991603
resolved "https://registry.yarnpkg.com/commander/-/commander-2.15.1.tgz#df46e867d0fc2aec66a34662b406a9ccafff5b0f"
@@ -1802,6 +1806,10 @@ detect-newline@^2.1.0:
18021806
version "2.1.0"
18031807
resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-2.1.0.tgz#f41f1c10be4b00e87b5f13da680759f2c5bfd3e2"
18041808

1809+
dijkstrajs@^1.0.1:
1810+
version "1.0.1"
1811+
resolved "https://registry.yarnpkg.com/dijkstrajs/-/dijkstrajs-1.0.1.tgz#d3cd81221e3ea40742cfcde556d4e99e98ddc71b"
1812+
18051813
dom-walk@^0.1.0:
18061814
version "0.1.1"
18071815
resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.1.tgz#672226dc74c8f799ad35307df936aba11acd6018"
@@ -2581,6 +2589,10 @@ isarray@1.0.0, isarray@~1.0.0:
25812589
version "1.0.0"
25822590
resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
25832591

2592+
isarray@^2.0.1:
2593+
version "2.0.4"
2594+
resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.4.tgz#38e7bcbb0f3ba1b7933c86ba1894ddfc3781bbb7"
2595+
25842596
isexe@^2.0.0:
25852597
version "2.0.0"
25862598
resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
@@ -3562,6 +3574,10 @@ plugin-error@^0.1.2:
35623574
arr-union "^2.0.1"
35633575
extend-shallow "^1.1.2"
35643576

3577+
pngjs@^2.3.1:
3578+
version "2.3.1"
3579+
resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-2.3.1.tgz#11d1e12b9cb64d63e30c143a330f4c1f567da85f"
3580+
35653581
posix-character-classes@^0.1.0:
35663582
version "0.1.1"
35673583
resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
@@ -3614,6 +3630,15 @@ pseudomap@^1.0.2:
36143630
version "1.0.2"
36153631
resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
36163632

3633+
qrcode@^0.9.0:
3634+
version "0.9.0"
3635+
resolved "https://registry.yarnpkg.com/qrcode/-/qrcode-0.9.0.tgz#4bdc1d21ad655c3101b5bb29e2e4c9d6416825fb"
3636+
dependencies:
3637+
colors "*"
3638+
dijkstrajs "^1.0.1"
3639+
isarray "^2.0.1"
3640+
pngjs "^2.3.1"
3641+
36173642
qs@^6.5.0:
36183643
version "6.5.2"
36193644
resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
@@ -3772,6 +3797,13 @@ react-native-paper@2.0.0-alpha.4:
37723797
hoist-non-react-statics "^2.5.0"
37733798
react-lifecycles-compat "^3.0.4"
37743799

3800+
react-native-qrcode-svg@^5.0.6:
3801+
version "5.0.6"
3802+
resolved "https://registry.yarnpkg.com/react-native-qrcode-svg/-/react-native-qrcode-svg-5.0.6.tgz#4e054788d1bf1bafe6a229056cde576644d059db"
3803+
dependencies:
3804+
prop-types "^15.5.10"
3805+
qrcode "^0.9.0"
3806+
37753807
react-native-reanimated@1.0.0-alpha.3:
37763808
version "1.0.0-alpha.3"
37773809
resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-1.0.0-alpha.3.tgz#42983aa41911791cd3186fd3a18a788c3d4c3601"
@@ -3808,6 +3840,14 @@ react-native-svg@6.2.2:
38083840
lodash "^4.16.6"
38093841
pegjs "^0.10.0"
38103842

3843+
react-native-svg@^6.3.1:
3844+
version "6.3.1"
3845+
resolved "https://registry.yarnpkg.com/react-native-svg/-/react-native-svg-6.3.1.tgz#06a573f17c59ce953a56fd62e776fd79d632d765"
3846+
dependencies:
3847+
color "^2.0.1"
3848+
lodash "^4.16.6"
3849+
pegjs "^0.10.0"
3850+
38113851
react-native-swipeout@^2.2.2:
38123852
version "2.3.3"
38133853
resolved "https://registry.yarnpkg.com/react-native-swipeout/-/react-native-swipeout-2.3.3.tgz#3b99db845ef75f0bfa467f1d8de0b7f7946326bd"

0 commit comments

Comments
 (0)