-
Notifications
You must be signed in to change notification settings - Fork 1
/
Main.tsx
115 lines (107 loc) · 2.82 KB
/
Main.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
import React, { Component } from "react";
import { View, Image, Text, TouchableOpacity, StyleSheet } from "react-native";
import Login from "./Login";
// import Commit from "./Commit";
import Track from "./Track";
import MakeCommitment from "./MakeCommitment";
import Complete from "./Complete";
import Wallet from "./Wallet";
import Welcome from "./Welcome";
import { Dimensions } from "react-native";
import { LinearGradient } from "expo-linear-gradient";
export default class Main extends Component<
{ account: any; stravaOAuth: any; code: string },
{ step: Number; account: any }
> {
constructor(props) {
super(props);
this.state = {
step: 1,
account: undefined,
};
}
componentWillReceiveProps(newProps) {
if (newProps.code !== this.props.code) {
this.setState({ step: 4 });
}
}
onClick = (step: Number) => {
this.setState({ step: step });
};
renderSwitch = () => {
switch (this.state.step) {
case 1:
return (
<Welcome
next={this.onClick}
code={this.props.code}
></Welcome>
);
case 2:
return (
<Login
next={this.onClick}
stravaOAuth={this.props.stravaOAuth}
code={this.props.code}
></Login>
);
case 4:
return (
<LinearGradient
colors={["#D45353", "#D45353", "white"]}
style={styles.linearGradient}
>
<Wallet next={this.onClick} account={this.props.account}></Wallet>
</LinearGradient>
);
// case 5:
// return (
// <LinearGradient
// colors={["#D45353", "#D45353", "white"]}
// style={styles.linearGradient}
// >
// <Commit next={this.onClick}></Commit>
// </LinearGradient>
// );
case 5:
return (
<LinearGradient
colors={["#D45353", "#D45353", "white"]}
style={styles.linearGradient}
>
<MakeCommitment
next={this.onClick}
account={this.props.account}
code={this.props.code}
></MakeCommitment>
</LinearGradient>
);
case 6:
return (
<Track
next={this.onClick}
account={this.props.account}
code={this.props.code}
></Track>
);
case 7:
return (
<Complete next={this.onClick} account={this.props.account}></Complete>
);
}
};
render() {
return <View style={{ flex: 1 }}>{this.renderSwitch()}</View>;
}
}
const { width, height } = Dimensions.get("window");
const styles = StyleSheet.create({
linearGradient: {
flex: 1,
alignItems: "center",
justifyContent: "center",
width,
height,
borderRadius: 5,
},
});