Skip to content

Commit 10040fb

Browse files
albertodev7albertodev7
committed
Create listing mutation
1 parent 8fd708c commit 10040fb

File tree

5 files changed

+129
-55
lines changed

5 files changed

+129
-55
lines changed

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

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import * as React from 'react'
2+
import { Mutation } from 'react-apollo'
3+
import gql from 'graphql-tag'
4+
5+
const createListingMutation = gql`
6+
mutation CreateListing(
7+
$name: String!
8+
$category: String!
9+
$description: String!
10+
$price: Int!
11+
$beds: Int!
12+
$guests: Int!
13+
$lat: Int!
14+
$lng: Int!
15+
$amenities: [String!]
16+
) {
17+
createListing(
18+
input: {
19+
name: $name
20+
category: $category
21+
description: $description
22+
price: $price
23+
beds: $beds
24+
guests: $guests
25+
lat: $lat
26+
lng: $lng
27+
amenities: $amenities
28+
}
29+
) {
30+
id
31+
name
32+
category
33+
description
34+
price
35+
beds
36+
guests
37+
lat
38+
lng
39+
amenities
40+
}
41+
}
42+
`
43+
44+
interface WithCreateListing {
45+
createListing: any
46+
}
47+
48+
interface Props {
49+
children: (data: WithCreateListing) => React.ReactNode
50+
}
51+
52+
export class CreateListingMutation extends React.PureComponent<Props> {
53+
public render() {
54+
return (
55+
<Mutation mutation={createListingMutation}>
56+
{mutate => this.props.children({ createListing: mutate })}
57+
</Mutation>
58+
)
59+
}
60+
}

‎client/src/Pages/CreateListing/Components/CreateListingForm/index.tsx

Lines changed: 62 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { RoomInfoForm } from '../RoomInfoForm'
99
import { LocationForm } from '../LocationForm'
1010

1111
import { Container, Wrapper, Buttons } from './style'
12+
import { CreateListingMutation } from '../../../../Graphql/CreateListing'
1213

1314
interface FieldValues {
1415
name: string
@@ -27,59 +28,67 @@ interface FieldValues {
2728
const pages = [<BasicInfoForm />, <RoomInfoForm />, <LocationForm />]
2829

2930
export const CreateListingForm: React.SFC = () => (
30-
<Formik<FieldValues>
31-
initialValues={{
32-
name: '',
33-
category: '',
34-
picture: '',
35-
description: '',
36-
price: 0,
37-
guests: 0,
38-
beds: 0,
39-
amenities: '',
40-
lat: 0,
41-
lng: 0
42-
}}
43-
onSubmit={(values: FieldValues) => {
44-
console.log(values)
45-
}}
46-
>
47-
{({ submitForm }) => (
48-
<Form>
49-
<Wizard>
50-
{({ nextStep, prevStep, step }) => (
51-
<>
52-
<Stepper
53-
currentStep={step + 1}
54-
maxSteps={pages.length}
55-
/>
56-
<Container>
57-
<Wrapper>
58-
{pages[step]}
59-
<Buttons>
60-
<Button
61-
disabled={step === 0}
62-
onClick={prevStep}
63-
>
64-
Wstecz
65-
</Button>
31+
<CreateListingMutation>
32+
{({ createListing }) => (
33+
<Formik<FieldValues>
34+
initialValues={{
35+
name: '',
36+
category: '',
37+
picture: '',
38+
description: '',
39+
price: 0,
40+
guests: 0,
41+
beds: 0,
42+
amenities: '',
43+
lat: 0,
44+
lng: 0
45+
}}
46+
onSubmit={async (values: FieldValues) =>
47+
await createListing({
48+
variables: { ...values, amenities: [values.amenities] }
49+
})
50+
}
51+
>
52+
{({ submitForm }) => (
53+
<Form>
54+
<Wizard>
55+
{({ nextStep, prevStep, step }) => (
56+
<>
57+
<Stepper
58+
currentStep={step + 1}
59+
maxSteps={pages.length}
60+
/>
61+
<Container>
62+
<Wrapper>
63+
{pages[step]}
64+
<Buttons>
65+
<Button
66+
disabled={step === 0}
67+
onClick={prevStep}
68+
>
69+
Wstecz
70+
</Button>
6671

67-
{step === pages.length - 1 ? (
68-
<Button onClick={submitForm}>
69-
Submit
70-
</Button>
71-
) : (
72-
<Button onClick={nextStep}>
73-
Dalej
74-
</Button>
75-
)}
76-
</Buttons>
77-
</Wrapper>
78-
</Container>
79-
</>
80-
)}
81-
</Wizard>
82-
</Form>
72+
{step === pages.length - 1 ? (
73+
<Button
74+
onClick={submitForm}
75+
>
76+
Submit
77+
</Button>
78+
) : (
79+
<Button onClick={nextStep}>
80+
Dalej
81+
</Button>
82+
)}
83+
</Buttons>
84+
</Wrapper>
85+
</Container>
86+
</>
87+
)}
88+
</Wizard>
89+
</Form>
90+
)}
91+
</Formik>
8392
)}
84-
</Formik>
93+
</CreateListingMutation>
8594
)

‎client/src/Pages/CreateListing/Components/LocationForm/index.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,15 @@ export const LocationForm: React.SFC<{}> = () => (
1212
name="lat"
1313
placeholder="Lat"
1414
label="Lat"
15+
type="number"
1516
component={FormikInput}
1617
/>
1718

1819
<Field
1920
name="lng"
2021
placeholder="Lng"
2122
label="Lng"
23+
type="number"
2224
component={FormikInput}
2325
/>
2426
</>

‎client/src/Pages/CreateListing/Components/RoomInfoForm/index.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,20 +12,23 @@ export const RoomInfoForm: React.SFC<{}> = () => (
1212
name="price"
1313
placeholder="Price"
1414
label="Price"
15+
type="number"
1516
component={FormikInput}
1617
/>
1718

1819
<Field
1920
name="guests"
2021
placeholder="Guests"
2122
label="Guests"
23+
type="number"
2224
component={FormikInput}
2325
/>
2426

2527
<Field
2628
name="beds"
2729
placeholder="Beds"
2830
label="Beds"
31+
type="number"
2932
component={FormikInput}
3033
/>
3134

‎client/src/apollo.ts

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

55
export const client = new ApolloClient({
66
link: new HttpLink({
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
cache: new InMemoryCache()
1111
})

0 commit comments

Comments
 (0)