Skip to content

Commit 51df13b

Browse files
albertodev7albertodev7
committed
Navbar auth
1 parent 8c4bd4d commit 51df13b

File tree

9 files changed

+222
-77
lines changed

9 files changed

+222
-77
lines changed

‎client/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
"apollo-cache-inmemory": "^1.3.5",
77
"apollo-client": "^2.4.2",
88
"apollo-link-context": "^1.0.9",
9+
"apollo-link-error": "^1.1.1",
910
"apollo-link-http": "^1.5.5",
1011
"formik": "^1.3.1",
1112
"graphql": "^14.0.2",

‎client/src/Components/Navbar/Components/Login/index.tsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,12 @@ interface FieldProps {
1111

1212
interface Props {
1313
changePage: () => void
14+
push: (path: string) => void
1415
}
1516

1617
export class Login extends React.Component<Props, {}> {
1718
public render() {
18-
const { changePage } = this.props
19+
const { changePage, push } = this.props
1920

2021
return (
2122
<LoginMutation>
@@ -26,10 +27,11 @@ export class Login extends React.Component<Props, {}> {
2627
const response = await login({
2728
variables: { ...values }
2829
})
29-
const { token } = response.data.login
30+
const { token, ok } = response.data.login
3031

31-
if (token) {
32+
if (token && ok) {
3233
localStorage.setItem('token', token)
34+
push('/listings')
3335
}
3436
}}
3537
>

‎client/src/Components/Navbar/Components/Register/index.tsx

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,11 +22,17 @@ export class Register extends React.Component<Props, {}> {
2222
{({ register }) => (
2323
<Formik<FieldProps>
2424
initialValues={{ email: '', password: '' }}
25-
onSubmit={async (values: FieldProps) =>
26-
await register({
25+
onSubmit={async (values: FieldProps) => {
26+
const response = await register({
2727
variables: { ...values }
2828
})
29-
}
29+
30+
const { ok } = response.data.register
31+
32+
if (ok) {
33+
changePage()
34+
}
35+
}}
3036
>
3137
{({ submitForm }) => (
3238
<RegisterUI

‎client/src/Components/Navbar/Navbar.tsx

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
import * as React from 'react'
2+
3+
import { Modal } from 'src/Components/Modal'
4+
import { Input } from 'src/Components/Input'
5+
import { Login } from './Components/Login'
6+
import { Register } from './Components/Register'
7+
import { Container, NavLink, Row, Svg, Center } from './style'
8+
9+
interface Props {
10+
isHomePage: boolean
11+
isOpen: boolean
12+
page: string
13+
me: any
14+
open: (page: string) => void
15+
close: () => void
16+
changePage: () => void
17+
push: (path: string) => void
18+
logout: () => void
19+
}
20+
21+
export const NavbarUI: React.SFC<Props> = ({
22+
isHomePage,
23+
isOpen,
24+
page,
25+
me,
26+
open,
27+
close,
28+
changePage,
29+
push,
30+
logout
31+
}) =>
32+
(console.log(me) as any) || (
33+
<Container>
34+
<Row>
35+
<Center>
36+
<Svg
37+
viewBox="0 0 1000 1000"
38+
role="presentation"
39+
aria-hidden="true"
40+
focusable="false"
41+
invertColors={isHomePage}
42+
onClick={() => push('/')}
43+
>
44+
<path d="m499.3 736.7c-51-64-81-120.1-91-168.1-10-39-6-70 11-93 18-27 45-40 80-40s62 13 80 40c17 23 21 54 11 93-11 49-41 105-91 168.1zm362.2 43c-7 47-39 86-83 105-85 37-169.1-22-241.1-102 119.1-149.1 141.1-265.1 90-340.2-30-43-73-64-128.1-64-111 0-172.1 94-148.1 203.1 14 59 51 126.1 110 201.1-37 41-72 70-103 88-24 13-47 21-69 23-101 15-180.1-83-144.1-184.1 5-13 15-37 32-74l1-2c55-120.1 122.1-256.1 199.1-407.2l2-5 22-42c17-31 24-45 51-62 13-8 29-12 47-12 36 0 64 21 76 38 6 9 13 21 22 36l21 41 3 6c77 151.1 144.1 287.1 199.1 407.2l1 1 20 46 12 29c9.2 23.1 11.2 46.1 8.2 70.1zm46-90.1c-7-22-19-48-34-79v-1c-71-151.1-137.1-287.1-200.1-409.2l-4-6c-45-92-77-147.1-170.1-147.1-92 0-131.1 64-171.1 147.1l-3 6c-63 122.1-129.1 258.1-200.1 409.2v2l-21 46c-8 19-12 29-13 32-51 140.1 54 263.1 181.1 263.1 1 0 5 0 10-1h14c66-8 134.1-50 203.1-125.1 69 75 137.1 117.1 203.1 125.1h14c5 1 9 1 10 1 127.1.1 232.1-123 181.1-263.1z" />
45+
</Svg>
46+
</Center>
47+
48+
{!isHomePage && (
49+
<Input
50+
noMargin
51+
onChange={() => null}
52+
placeholder="Polska, Warszawa"
53+
/>
54+
)}
55+
</Row>
56+
57+
<Row>
58+
{me && me.id ? (
59+
<>
60+
<NavLink
61+
invertColors={isHomePage}
62+
onClick={() => push('/createListing')}
63+
>
64+
Zostan gospodarzem
65+
</NavLink>
66+
<NavLink
67+
invertColors={isHomePage}
68+
onClick={() => push('/listings')}
69+
>
70+
Listings
71+
</NavLink>
72+
<NavLink invertColors={isHomePage} onClick={logout}>
73+
Wyloguj się
74+
</NavLink>
75+
</>
76+
) : (
77+
<>
78+
<NavLink
79+
invertColors={isHomePage}
80+
onClick={() => push('/createListing')}
81+
>
82+
Zostan gospodarzem
83+
</NavLink>
84+
<NavLink
85+
invertColors={isHomePage}
86+
onClick={() => push('/listings')}
87+
>
88+
Listings
89+
</NavLink>
90+
<NavLink
91+
invertColors={isHomePage}
92+
onClick={() => open('login')}
93+
>
94+
Login
95+
</NavLink>
96+
<NavLink
97+
invertColors={isHomePage}
98+
onClick={() => open('register')}
99+
>
100+
Register
101+
</NavLink>
102+
</>
103+
)}
104+
</Row>
105+
106+
{isOpen && (
107+
<Modal handleClose={close}>
108+
{page === 'login' ? (
109+
<Login changePage={changePage} push={push} />
110+
) : (
111+
<Register changePage={changePage} />
112+
)}
113+
</Modal>
114+
)}
115+
</Container>
116+
)

‎client/src/Components/Navbar/index.tsx

Lines changed: 36 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,21 @@
11
import * as React from 'react'
22
import { withRouter, RouteComponentProps } from 'react-router'
3+
import { compose, withApollo } from 'react-apollo'
4+
import { ApolloClient } from 'apollo-client'
35

4-
import { Modal } from 'src/Components/Modal'
5-
import { Input } from 'src/Components/Input'
6-
import { Login } from './Components/Login'
7-
import { Register } from './Components/Register'
8-
import { Container, NavLink, Row, Svg, Center } from './style'
6+
import { NavbarUI } from './Navbar'
7+
import { MeQuery } from 'src/Graphql/Me'
98

109
interface State {
1110
isOpen: boolean
1211
page: string
1312
}
1413

15-
class C extends React.Component<RouteComponentProps<{}>, State> {
14+
interface Props {
15+
client: ApolloClient<any>
16+
}
17+
18+
class C extends React.Component<RouteComponentProps<{}> & Props, State> {
1619
public readonly state = {
1720
isOpen: false,
1821
page: ''
@@ -28,7 +31,13 @@ class C extends React.Component<RouteComponentProps<{}>, State> {
2831
page: page === 'login' ? 'register' : 'login'
2932
}))
3033

31-
public render() {
34+
private logout = () => {
35+
this.props.client.resetStore()
36+
localStorage.removeItem('token')
37+
this.forceUpdate()
38+
}
39+
40+
private getProps = () => {
3241
const { isOpen, page } = this.state
3342
const {
3443
location: { pathname },
@@ -37,70 +46,28 @@ class C extends React.Component<RouteComponentProps<{}>, State> {
3746

3847
const isHomePage = pathname === '/'
3948

40-
return (
41-
<Container>
42-
<Row>
43-
<Center>
44-
<Svg
45-
viewBox="0 0 1000 1000"
46-
role="presentation"
47-
aria-hidden="true"
48-
focusable="false"
49-
invertColors={isHomePage}
50-
onClick={() => push('/')}
51-
>
52-
<path d="m499.3 736.7c-51-64-81-120.1-91-168.1-10-39-6-70 11-93 18-27 45-40 80-40s62 13 80 40c17 23 21 54 11 93-11 49-41 105-91 168.1zm362.2 43c-7 47-39 86-83 105-85 37-169.1-22-241.1-102 119.1-149.1 141.1-265.1 90-340.2-30-43-73-64-128.1-64-111 0-172.1 94-148.1 203.1 14 59 51 126.1 110 201.1-37 41-72 70-103 88-24 13-47 21-69 23-101 15-180.1-83-144.1-184.1 5-13 15-37 32-74l1-2c55-120.1 122.1-256.1 199.1-407.2l2-5 22-42c17-31 24-45 51-62 13-8 29-12 47-12 36 0 64 21 76 38 6 9 13 21 22 36l21 41 3 6c77 151.1 144.1 287.1 199.1 407.2l1 1 20 46 12 29c9.2 23.1 11.2 46.1 8.2 70.1zm46-90.1c-7-22-19-48-34-79v-1c-71-151.1-137.1-287.1-200.1-409.2l-4-6c-45-92-77-147.1-170.1-147.1-92 0-131.1 64-171.1 147.1l-3 6c-63 122.1-129.1 258.1-200.1 409.2v2l-21 46c-8 19-12 29-13 32-51 140.1 54 263.1 181.1 263.1 1 0 5 0 10-1h14c66-8 134.1-50 203.1-125.1 69 75 137.1 117.1 203.1 125.1h14c5 1 9 1 10 1 127.1.1 232.1-123 181.1-263.1z" />
53-
</Svg>
54-
</Center>
55-
56-
{!isHomePage && (
57-
<Input
58-
noMargin
59-
onChange={() => null}
60-
placeholder="Polska, Warszawa"
61-
/>
62-
)}
63-
</Row>
64-
65-
<Row>
66-
<NavLink
67-
invertColors={isHomePage}
68-
onClick={() => push('/createListing')}
69-
>
70-
Zostan gospodarzem
71-
</NavLink>
72-
<NavLink
73-
invertColors={isHomePage}
74-
onClick={() => push('/listings')}
75-
>
76-
Listings
77-
</NavLink>
78-
<NavLink
79-
invertColors={isHomePage}
80-
onClick={() => this.open('login')}
81-
>
82-
Login
83-
</NavLink>
84-
<NavLink
85-
invertColors={isHomePage}
86-
onClick={() => this.open('register')}
87-
>
88-
Register
89-
</NavLink>
90-
</Row>
49+
return {
50+
isHomePage,
51+
isOpen,
52+
page,
53+
push,
54+
open: this.open,
55+
close: this.close,
56+
changePage: this.changePage,
57+
logout: this.logout
58+
}
59+
}
9160

92-
{isOpen && (
93-
<Modal handleClose={this.close}>
94-
{page === 'login' ? (
95-
<Login changePage={this.changePage} />
96-
) : (
97-
<Register changePage={this.changePage} />
98-
)}
99-
</Modal>
100-
)}
101-
</Container>
61+
public render() {
62+
return (
63+
<MeQuery>
64+
{({ me }) => <NavbarUI {...this.getProps()} me={me} />}
65+
</MeQuery>
10266
)
10367
}
10468
}
10569

106-
export const Navbar = withRouter(C)
70+
export const Navbar = compose(
71+
withRouter,
72+
withApollo
73+
)(C)

‎client/src/Graphql/Me/index.tsx

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import * as React from 'react'
2+
import gql from 'graphql-tag'
3+
import { Query } from 'react-apollo'
4+
5+
const meQuery = gql`
6+
{
7+
me {
8+
id
9+
email
10+
}
11+
}
12+
`
13+
14+
interface WithMe {
15+
me: any
16+
loading: boolean
17+
}
18+
19+
interface Props {
20+
children: (data: WithMe) => React.ReactNode
21+
}
22+
23+
export class MeQuery extends React.PureComponent<Props> {
24+
public render() {
25+
return (
26+
<Query query={meQuery}>
27+
{({ data, loading }) => {
28+
let me = null
29+
30+
if (data && data.me) {
31+
me = data.me
32+
}
33+
34+
return this.props.children({
35+
me,
36+
loading
37+
})
38+
}}
39+
</Query>
40+
)
41+
}
42+
}

‎client/src/Routes/AuthRoute.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,10 @@ export class C extends React.PureComponent<ChildProps<Props, MeQuery>> {
1717
public renderRoute = (routeProps: RouteComponentProps) => {
1818
const { data, component } = this.props
1919

20+
if (data) {
21+
console.log(data.error)
22+
}
23+
2024
if (!data || data.loading) {
2125
return null
2226
}

‎client/src/apollo.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ import { createHttpLink } from 'apollo-link-http'
44
import { setContext } from 'apollo-link-context'
55

66
const httpLink = createHttpLink({
7-
// uri: 'https://airbnb-clone-mm.herokuapp.com'
8-
uri: 'http://localhost:4000/graphql'
7+
uri: 'https://airbnb-clone-mm.herokuapp.com'
8+
// uri: 'http://localhost:4000/graphql'
99
})
1010

1111
const authLink = setContext((_, { headers }) => {

‎client/yarn.lock

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -330,6 +330,13 @@ apollo-link-dedup@^1.0.0:
330330
dependencies:
331331
apollo-link "^1.2.3"
332332

333+
apollo-link-error@^1.1.1:
334+
version "1.1.1"
335+
resolved "https://registry.yarnpkg.com/apollo-link-error/-/apollo-link-error-1.1.1.tgz#69d7124d4dc11ce60f505c940f05d4f1aa0945fb"
336+
integrity sha512-/yPcaQWcBdB94vpJ4FsiCJt1dAGGRm+6Tsj3wKwP+72taBH+UsGRQQZk7U/1cpZwl1yqhHZn+ZNhVOebpPcIlA==
337+
dependencies:
338+
apollo-link "^1.2.3"
339+
333340
apollo-link-http-common@^0.2.5:
334341
version "0.2.5"
335342
resolved "https://registry.yarnpkg.com/apollo-link-http-common/-/apollo-link-http-common-0.2.5.tgz#d094beb7971523203359bf830bfbfa7b4e7c30ed"

0 commit comments

Comments
 (0)