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

In this three part section we will create the booking booking forms as well us hook up our local resolvers to the forms.

\n

First up create a booking folder in the pages directory, and create an index.js with the following:

\n
import React, { useState } from \"react\"\nimport Tabs from \"../../components/navs/Tabs\"\nimport CustomerDetails from \"./CustomerDetails\"\nimport Customers from \"./Customers\"\nimport Checkout from \"./Checkout\"\nimport ConfirmationTab from \"./ConfirmationTab\"\nconst BookingIndex = props => {\n  const [activeTab, setActiveTab] = useState(\"1\")\n\n  return (\n    <>\n      <Tabs activeKey={activeTab}>\n        <Tabs.TabPane key=\"1\" className=\"flex justify-center\">\n          <CustomerDetails setActiveTab={setActiveTab} />\n        </Tabs.TabPane>\n        <Tabs.TabPane key=\"2\" className=\"flex justify-center\">\n          <Customers setActiveTab={setActiveTab} />\n        </Tabs.TabPane>\n        <Tabs.TabPane key=\"3\" className=\"flex justify-center\">\n          <Checkout setActiveTab={setActiveTab} />\n        </Tabs.TabPane>\n        <Tabs.TabPane key=\"4\" className=\"flex justify-center\">\n          <ConfirmationTab setActiveTab={setActiveTab} />\n        </Tabs.TabPane>\n      </Tabs>\n    </>\n  )\n}\n\nexport default BookingIndex
\n

🌊 Here we have a component with tabs that are hidden to allow the user to navigate between different forms.

\n

🌊 Don't worry about some of the other components we will create them. We have an activeTab variable that tells the component which tab should be active, we then pass down the setActiveTab hook down to each component so that we can change the active tabs when the user is in any component.

\n

Next go into the navs directory and create a file called Tabs.js:

\n
import styled from \"styled-components\"\nimport { Tabs } from \"antd\"\nconst TabStyles = styled(Tabs)`\n  .ant-tabs-bar.ant-tabs-top-bar {\n    display: none;\n  }\n`\n\nexport default TabStyles
\n

🌊 Here we are basically overriting the styles from Ant Design for the Tabs so that we can hide the Tab bar with Styled Components

\n

Next up lets add the route of the Booking index file:

\n
import React from \"react\"\nimport { Router } from \"@reach/router\"\nimport Home from \"./pages/index\"\nimport ViewListing from \"./pages/ViewListing\"\nimport BookingIndex from \"./pages/booking\"\nconst Routes = ({ props }) => {\n  return (\n    <Router>\n      <Home path=\"/\" props={props} />\n      <ViewListing path=\"/listing/:id\" props={props} />\n      <BookingIndex path=\"/booking/:id\" props={props} />\n    </Router>\n  )\n}\n\nexport default Routes
\n

Make sure your routes.js component now looks like the above.

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