Refactor wizard component

Author: albertodev7

client/src/Components/Wizard/index.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react'
+
+interface WizardChildrenProps {
+    nextStep: () => void
+    prevStep: () => void
+    step: number
+}
+
+interface Props {
+    children: (values: WizardChildrenProps) => React.ReactNode
+}
+
+interface State {
+    step: number
+}
+
+export class Wizard extends React.Component<Props, State> {
+    public readonly state = {
+        step: 0
+    }
+
+    public nextStep = () => this.setState(({ step }) => ({ step: step + 1 }))
+
+    public prevStep = () => {
+        if (this.state.step === 0) {
+            return
+        }
+
+        this.setState(({ step }) => ({ step: step - 1 }))
+    }
+    public render() {
+        const { step } = this.state
+
+        return this.props.children({
+            nextStep: this.nextStep,
+            prevStep: this.prevStep,
+            step
+        })
+    }
+}

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

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import { Formik, Form } from 'formik'
 
+import { Wizard } from 'src/Components/Wizard'
 import { Stepper } from 'src/Components/Stepper'
 import { Button } from 'src/Components/Button'
 import { BasicInfoForm } from '../BasicInfoForm'
@@ -22,81 +23,63 @@ interface FieldValues {
     lng: number
 }
 
-interface State {
-    step: number
-}
-
 // tslint:disable-next-line:jsx-key
 const pages = [<BasicInfoForm />, <RoomInfoForm />, <LocationForm />]
 
-export class CreateListingForm extends React.Component<{}, State> {
-    public readonly state = {
-        step: 0
-    }
-
-    private nextStep = () => this.setState(({ step }) => ({ step: step + 1 }))
-
-    private prevStep = () => {
-        if (this.state.step === 0) {
-            return
-        }
-
-        this.setState(({ step }) => ({ step: step - 1 }))
-    }
-
-    public render() {
-        const { step } = this.state
-
-        return (
-            <Formik<FieldValues>
-                initialValues={{
-                    name: '',
-                    category: '',
-                    picture: '',
-                    description: '',
-                    price: 0,
-                    guests: 0,
-                    beds: 0,
-                    amenities: '',
-                    lat: 0,
-                    lng: 0
-                }}
-                onSubmit={(values: FieldValues) => {
-                    console.log(values)
-                }}
-            >
-                {({ submitForm }) => (
-                    <Form>
-                        <Stepper
-                            currentStep={step + 1}
-                            maxSteps={pages.length}
-                        />
-                        <Container>
-                            <Wrapper>
-                                {pages[step]}
-                                <Buttons>
-                                    <Button
-                                        disabled={step === 0}
-                                        onClick={this.prevStep}
-                                    >
-                                        Wstecz
-                                    </Button>
-
-                                    {step === pages.length - 1 ? (
-                                        <Button onClick={submitForm}>
-                                            Submit
-                                        </Button>
-                                    ) : (
-                                        <Button onClick={() => this.nextStep()}>
-                                            Dalej
+export const CreateListingForm: React.SFC = () => (
+    <Formik<FieldValues>
+        initialValues={{
+            name: '',
+            category: '',
+            picture: '',
+            description: '',
+            price: 0,
+            guests: 0,
+            beds: 0,
+            amenities: '',
+            lat: 0,
+            lng: 0
+        }}
+        onSubmit={(values: FieldValues) => {
+            console.log(values)
+        }}
+    >
+        {({ submitForm }) => (
+            <Form>
+                <Wizard>
+                    {({ nextStep, prevStep, step }) => (
+                        <>
+                            <Stepper
+                                currentStep={step + 1}
+                                maxSteps={pages.length}
+                            />
+                            <Container>
+                                <Wrapper>
+                                    {pages[step]}
+                                    <Buttons>
+                                        <Button
+                                            disabled={step === 0}
+                                            onClick={prevStep}
+                                        >
+                                            Wstecz
                                         </Button>
-                                    )}
-                                </Buttons>
-                            </Wrapper>
-                        </Container>
-                    </Form>
-                )}
-            </Formik>
-        )
-    }
-}
+
+                                        {step === pages.length - 1 ? (
+                                            <Button onClick={submitForm}>
+                                                Submit
+                                            </Button>
+                                        ) : (
+                                            <Button onClick={nextStep}>
+                                                Dalej
+                                            </Button>
+                                        )}
+                                    </Buttons>
+                                </Wrapper>
+                            </Container>
+                        </>
+                    )}
+                </Wizard>
+            </Form>
+        )}
+    </Formik>
+)