App.js

import React, { useReducer } from "react";
import "@patternfly/react-core/dist/styles/base.css";
import "@patternfly/react-styles/css/utilities/Spacing/spacing.css";
import {
  Page,
  PageHeader,
  PageSidebar,
  PageSection,
  Wizard
} from "@patternfly/react-core";
import BasicInformation from "./Steps/01_BasicInformation";
import ClusterInformation from "./Steps/03_ClusterInformation";
import PointOfContact from "./Steps/02_PointOfContact";
import LaunchResidency from "./Steps/04_LaunchResidency";
import Logo from "./Components/Logo/Logo";
import initialState from "./initialState";

const reducer = (state, action) => {
  switch (action.type) {
    case "customer_name":
      return { ...state, customer_name: action.payload };
    default:
      throw new Error();
  }
};

const App = () => {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <Page
      header={<PageHeader />}
      sidebar={<PageSidebar isNavOpen theme="dark" nav={<Logo />} />}
      style={{ height: "100vh" }}
    >
      <PageSection>
        <div className="pf-c-content">
          <h2>Residency Data Gathering</h2>
        </div>
      </PageSection>
      <PageSection>
        <Wizard
          isCompactNav
          isInPage
          steps={[
            {
              name: "Basic Information",
              component: <BasicInformation props={state} onChange={dispatch} />,
              hideCancelButton: true
            },
            {
              name: "Point of Contact",
              component: <PointOfContact />,
              hideCancelButton: true
            },
            {
              name: "Openshift Cluster",
              component: <ClusterInformation />,
              hideCancelButton: true,
              nextButtonText: "Launch Residency"
            },
            {
              name: "Launch Residency",
              component: <LaunchResidency />,
              isFinishedStep: true
            }
          ]}
        />
      </PageSection>
    </Page>
  );
};

export default App;

BasicInformation.jsx

import React from "react";
import { CalendarAltIcon } from "@patternfly/react-icons";
import {
  Form,
  FormGroup,
  InputGroup,
  InputGroupText,
  TextInput
} from "@patternfly/react-core";
const BasicInformation = ({ props }) => {
  return (
    <Form isHorizontal>
      <FormGroup
        label="Customer Name"
        fieldId="customer-name"
        helperText="The client this residency is for"
        isRequired
      >
        <TextInput
          type="text"
          id="customer_name"
          name="customer_name"
          value={props.customer_name}
          onChange={e => props.onChange({ type: "customer_name", payload: e })}
        />
      </FormGroup>
      <FormGroup
        label="Project Name"
        fieldId="project-name"
        helperText="The solution being worked on during the residency"
        isRequired
      >
        <TextInput
          type="text"
          id="project_name"
          name="project_name"
          value={props.project_name}
        />
      </FormGroup>
      <FormGroup
        label="Location"
        fieldId="residency-location"
        helperText="Where this residency will be held"
        isRequired
      >
        <TextInput
          type="text"
          id="location"
          name="location"
          value={props.location}
        />
      </FormGroup>
      <FormGroup
        label="Residency Dates"
        fieldId="residency-dates"
        helperText="The the start and end dates of this residency"
        isRequired
      >
        <InputGroup label="Residency Duration">
          <InputGroupText component="label" htmlFor="residency-duration">
            <CalendarAltIcon />
          </InputGroupText>
          <TextInput
            name="start_date"
            id="start_date"
            type="date"
            aria-label="Residency start date"
            value={props.start_date}
          />
          <TextInput
            name="end_date"
            id="end_date"
            type="date"
            aria-label="Residency end date"
            value={props.end_date}
          />
        </InputGroup>
      </FormGroup>
    </Form>
  );
};

export default BasicInformation;