Skip to content

Commit cea7a2f

Browse files
lorensrlorensr
committed
Add a second endpoint: SpaceX API
1 parent 881daea commit cea7a2f

File tree

2 files changed

+159
-52
lines changed

2 files changed

+159
-52
lines changed

‎src/components/Profile.js

Lines changed: 149 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,143 @@
1-
import React from 'react'
1+
import React, { Component } from 'react'
22
import PropTypes from 'prop-types'
3+
import { Query } from 'react-apollo'
4+
import gql from 'graphql-tag'
35

46
import { withUser } from '../lib/withUser'
57
import { login, logout } from '../lib/auth'
8+
import { apolloSpace } from '../lib/apollo'
69

7-
const Profile = ({ user, loggingIn }) => {
8-
if (loggingIn) {
9-
return (
10-
<main className="Profile">
11-
<div className="Spinner" />
12-
</main>
13-
)
14-
} else if (!user) {
15-
return (
16-
<main className="Profile">
17-
<button onClick={login} className="Profile-login">
18-
Sign in
19-
</button>
20-
</main>
21-
)
22-
} else {
23-
return (
24-
<main className="Profile">
25-
<div className="Profile-header-wrapper">
26-
<header className="Profile-header">
27-
<h1>{user.name}</h1>
28-
</header>
29-
</div>
30-
<div className="Profile-content">
31-
<dl>
32-
<dt>Email</dt>
33-
<dd>
34-
<code>{user.email}</code>
35-
</dd>
36-
37-
<dt>Membership level</dt>
38-
<dd>
39-
<code>{user.hasPurchased || 'GUEST'}</code>
40-
</dd>
41-
42-
<dt>OAuth Github account</dt>
43-
<dd>
44-
<a
45-
href="https://github.com/settings/applications"
46-
target="_blank"
47-
rel="noopener noreferrer"
48-
>
49-
<code>{user.username}</code>
50-
</a>
51-
</dd>
52-
</dl>
10+
class Profile extends Component {
11+
state = {
12+
showLaunch: false
13+
}
14+
15+
toggleLaunchVisibility = () => {
16+
this.setState({ showLaunch: !this.state.showLaunch })
17+
}
18+
19+
render() {
20+
const { user, loggingIn } = this.props
5321

54-
<button className="Profile-logout" onClick={logout}>
55-
Sign out
22+
if (loggingIn) {
23+
return (
24+
<main className="Profile">
25+
<div className="Spinner" />
26+
</main>
27+
)
28+
} else if (!user) {
29+
return (
30+
<main className="Profile">
31+
<button onClick={login} className="Profile-login">
32+
Sign in
5633
</button>
57-
</div>
58-
</main>
59-
)
34+
</main>
35+
)
36+
} else {
37+
return (
38+
<main className="Profile">
39+
<div className="Profile-header-wrapper">
40+
<header className="Profile-header">
41+
<h1>{user.name}</h1>
42+
</header>
43+
</div>
44+
<div className="Profile-content">
45+
<dl>
46+
<dt>Email</dt>
47+
<dd>
48+
<code>{user.email}</code>
49+
</dd>
50+
51+
<dt>Membership level</dt>
52+
<dd>
53+
<code>{user.hasPurchased || 'GUEST'}</code>
54+
</dd>
55+
56+
<dt>OAuth Github account</dt>
57+
<dd>
58+
<a
59+
href="https://github.com/settings/applications"
60+
target="_blank"
61+
rel="noopener noreferrer"
62+
>
63+
<code>{user.username}</code>
64+
</a>
65+
</dd>
66+
</dl>
67+
68+
<button className="Profile-logout" onClick={logout}>
69+
Sign out
70+
</button>
71+
</div>
72+
73+
<div className="Profile-footer">
74+
<button
75+
className="Profile-toggle-launch"
76+
onClick={this.toggleLaunchVisibility}
77+
>
78+
<span role="img" aria-label="rocket">
79+
🚀
80+
</span>
81+
</button>
82+
83+
{this.state.showLaunch && (
84+
<Query
85+
query={LAUNCH_QUERY}
86+
fetchPolicy="cache-and-network"
87+
client={apolloSpace}
88+
onCompleted={() =>
89+
window.scrollTo({ top: 1000, left: 0, behavior: 'smooth' })
90+
}
91+
>
92+
{({
93+
data: {
94+
launchNext: {
95+
details,
96+
launch_date_utc,
97+
launch_site,
98+
mission_name,
99+
rocket
100+
} = {}
101+
}
102+
}) =>
103+
details ? (
104+
<div>
105+
The next SpaceX launch will be:
106+
<dl>
107+
<dt>Date</dt>
108+
<dd>
109+
<code>{new Date(launch_date_utc).toString()}</code>
110+
</dd>
111+
112+
<dt>Mission</dt>
113+
<dd>
114+
<code>{mission_name}</code>
115+
</dd>
116+
117+
<dt>Rocket</dt>
118+
<dd>
119+
<code>{rocket.rocket_name}</code>
120+
</dd>
121+
122+
<dt>Launch site</dt>
123+
<dd>
124+
<code>{launch_site.site_name}</code>
125+
</dd>
126+
127+
<dt>Details</dt>
128+
<dd className="-non-code">{details}</dd>
129+
</dl>
130+
</div>
131+
) : (
132+
<div className="Spinner" />
133+
)
134+
}
135+
</Query>
136+
)}
137+
</div>
138+
</main>
139+
)
140+
}
60141
}
61142
}
62143

@@ -69,4 +150,20 @@ Profile.propTypes = {
69150
loggingIn: PropTypes.bool.isRequired
70151
}
71152

153+
const LAUNCH_QUERY = gql`
154+
query LaunchQuery {
155+
launchNext {
156+
details
157+
launch_date_utc
158+
launch_site {
159+
site_name
160+
}
161+
mission_name
162+
rocket {
163+
rocket_name
164+
}
165+
}
166+
}
167+
`
168+
72169
export default withUser(Profile)

‎src/lib/apollo.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -93,3 +93,13 @@ const restLink = new RestLink({
9393
const link = ApolloLink.from([errorLink, stateLink, restLink, networkLink])
9494

9595
export const apollo = new ApolloClient({ link, cache })
96+
97+
export const apolloSpace = new ApolloClient({
98+
link: ApolloLink.from([
99+
errorLink,
100+
createHttpLink({
101+
uri: 'https://api.spacex.land/graphql'
102+
})
103+
]),
104+
cache: new InMemoryCache()
105+
})

0 commit comments

Comments
 (0)