{"componentChunkName":"component---src-templates-post-js","path":"/create-booking-forms-part-two","result":{"data":{"markdownRemark":{"html":"

Here we will make two components: One to get the details of the customer and another to get all the customers travelling together.

\n

In the booking directory create a file called CustomerDetails.js and add the following:

\n
import React from \"react\"\nimport { useMutation } from \"@apollo/react-hooks\"\nimport { UPDATE_FORM_DATA } from \"../../graphql/Mutations\"\nimport HeadingOne from \"../../components/typography/HeadingOne\"\nimport BodyOne from \"../../components/typography/BodyOne\"\nimport RedBlockButton from \"../../components/buttons/RedBlockButton\"\nimport RedOutlineButton from \"../../components/buttons/RedOutlineButton\"\nimport Input from \"../../components/inputs/Input\"\nimport { Form } from \"antd\"\nconst CustomerDetails = props => {\n  console.log(props)\n\n  const [mutate] = useMutation(UPDATE_FORM_DATA)\n\n  return (\n    <>\n      <Form\n        onValuesChange={(changedValues, allValues) => {\n          mutate({\n            variables: {\n              email: allValues.email,\n              date: allValues.date,\n            },\n          })\n        }}\n      >\n        <div className=\"flex flex-col p-20 \">\n          <HeadingOne>Booking for Listing Name</HeadingOne>\n          <div className=\"mt-5\">\n            <BodyOne>Booking date</BodyOne>\n            <Form.Item name=\"date\">\n              <Input placeholder=\"date\" type=\"date\" />\n            </Form.Item>\n          </div>\n\n          <div className=\"mt-5\">\n            <BodyOne> Email address </BodyOne>\n            <Form.Item name=\"email\">\n              <Input placeholder=\"doku@corrisant.io\" type=\"email\" />\n            </Form.Item>\n          </div>\n          <div className=\"flex lg:flex-row mt-5 s:flex-col\">\n            <RedBlockButton\n              text=\"Proceed\"\n              className=\"mr-5 s:mb-5 lg:mb-0\"\n              onClick={() => props.setActiveTab(\"2\")}\n            />\n\n            <RedOutlineButton text=\"Cancel\" />\n          </div>\n        </div>\n      </Form>\n    </>\n  )\n}\n\nexport default CustomerDetails
\n

🌈 Here we have a Form from Ant Design that has a onValuesChange event that will get all the values of the form and send it to our local resolvers for updating the cache.

\n

🌈 We then have a button that will allow the user to go to the next tab with the setActiveTab function we've sent down via props

\n

In the same directory create a file called Customers.js and add the following:

\n
import React, { useState } from \"react\"\nimport { UPDATE_FORM_DATA } from \"../../graphql/Mutations\"\nimport { GET_FORM_DATA } from \"../../graphql/Queries\"\nimport { useMutation, useQuery } from \"@apollo/react-hooks\"\nimport BodyOne from \"../../components/typography/BodyOne\"\nimport Input from \"../../components/inputs/Input\"\nimport RedBlockButton from \"../../components/buttons/RedBlockButton\"\nimport RedOutlineButton from \"../../components/buttons/RedOutlineButton\"\nimport RemoveButton from \"../../components/buttons/RemoveButton\"\nimport BlueBlockButton from \"../../components/buttons/BlueBlockButton\"\n\nconst Customers = props => {\n  const [customers, setCustomers] = useState([])\n  const { data } = useQuery(GET_FORM_DATA)\n  const [mutate] = useMutation(UPDATE_FORM_DATA)\n\n  const addCustomer = () => {\n    const o = [...customers]\n    o.push({\n      name: null,\n      physioScore: null,\n      surname: null,\n      passportNumber: null,\n      country: null,\n    })\n\n    setCustomers(o)\n  }\n\n  const updateCustomer = ({ index, field, value }) => {\n    const o = [...customers]\n    o[index][field] = value\n    mutate({\n      variables: {\n        email: data.formData.email,\n        date: data.formData.date,\n        customer: o,\n      },\n    })\n\n    setCustomers(o)\n  }\n\n  const removeCustomer = index => {\n    const o = [...customers]\n    o.splice(index, 1)\n    setCustomers(o)\n  }\n\n  const inputs = customers.map((c, index) => {\n    return (\n      <>\n        <div className=\"flex lg:flex-row s:flex-col mt-10\" key={index}>\n          <hr />\n          <div className=\"flex flex-col mr-5\">\n            <BodyOne>Customer name </BodyOne>\n\n            <Input\n              placeholder=\"Bob\"\n              type=\"name\"\n              onChange={e =>\n                updateCustomer({\n                  index,\n                  field: \"name\",\n                  value: e.currentTarget.value,\n                })\n              }\n            />\n\n            <BodyOne> Customer country </BodyOne>\n\n            <Input\n              placeholder=\"Iran\"\n              type=\"text\"\n              onChange={e =>\n                updateCustomer({\n                  index,\n                  field: \"country\",\n                  value: e.currentTarget.value,\n                })\n              }\n            />\n\n            <BodyOne> Physio score </BodyOne>\n\n            <Input\n              placeholder=\"4\"\n              type=\"text\"\n              onChange={e =>\n                updateCustomer({\n                  index,\n                  field: \"physioScore\",\n                  value: e.currentTarget.value,\n                })\n              }\n            />\n          </div>\n          <div className=\"flex flex-col\">\n            <BodyOne> Customer surname </BodyOne>\n\n            <Input\n              placeholder=\"Iger\"\n              type=\"text\"\n              onChange={e =>\n                updateCustomer({\n                  index,\n                  field: \"surname\",\n                  value: e.currentTarget.value,\n                })\n              }\n            />\n\n            <label> </label>\n            <input />\n            <BodyOne> Passport number </BodyOne>\n\n            <Input\n              placeholder=\"GFC3453453\"\n              type=\"text\"\n              onChange={e =>\n                updateCustomer({\n                  index,\n                  field: \"passportNumber\",\n                  value: e.currentTarget.value,\n                })\n              }\n            />\n\n            <RemoveButton onClick={() => removeCustomer(index)} />\n          </div>\n        </div>\n      </>\n    )\n  })\n  return (\n    <div className=\"flex flex-col\">\n      {inputs}\n      <div className=\"flex flex-col\">\n        <div className=\"mt-5 \">\n          <BlueBlockButton onClick={() => addCustomer()}>\n            Add a customer\n          </BlueBlockButton>\n        </div>\n        <div className=\"flex lg:flex-row mt-5 s:flex-col\">\n          <RedBlockButton\n            className=\"mr-5 s:mb-5  lg:mb-0\"\n            onClick={() => props.setActiveTab(\"3\")}\n          >\n            Proceed\n          </RedBlockButton>\n          <RedOutlineButton onClick={() => props.setActiveTab(\"1\")}>\n            Back\n          </RedOutlineButton>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport default Customers
\n

🌈 Basically we have a component that will create an array of customers for us to add to the state.

\n

🌈 first off we declare customers via a hook, we have a query to get data from the cache and have the mutation to update the cache data.

\n

🌈 Our addCustomer function will allow us to make a deep clone of the customers currently in the state, then push a new customer to the array and update the state.

\n

🌈 Our updateCustomer function will allow us to add the customer to the state of the cache.

\n

🌈 removeCustomer will allow us to remove the customer from the state.

\n

🌈 The inputs function renders customers over some JSX to produce a form that will allow the user to add data. There are onChange events that will allow the customer object to get updated.

\n

🌈 The remove button removes the selected customer form the Array.

\n

🌈 Our final return block displays the inputs function and renders buttons that allow the user to move between forms.

","frontmatter":{"date":"July 29, 2020","path":"/create-booking-forms-part-two","title":"Create Booking Forms Pt.2","postnumber":48}}},"pageContext":{"previous":{"node":{"frontmatter":{"path":"/create-booking-forms-part-three","postnumber":49}}},"next":{"node":{"frontmatter":{"path":"/create-booking-forms-part-one","postnumber":47}}}}},"staticQueryHashes":["3207677222","3649515864","63159454"]}