Select Day

So, the next page in your flow is where the user will select which day they want to book. This is the core of what we are getting at with this little app.

You might be tempted to reach for a calendar component library. However, in my opinion, the problem is rather trivial—enough that I think you might just as well solve it yourself. What I will reach for is a date/time library. The Temporal proposal looks very promising and will probably mean that we might not need a library at all in the future. But it's not standard just yet, so we'll use the date-fns library. Install it in the frontend: npm i date-fns

Start with creating the page in a new file: /services/frontend/src/ChooseDatePage.tsx:

xxxxxxxxxx

import { addMonths, format, startOfMonth } from 'date-fns';

import { FC, useContext, useState } from 'react';

​

import { PrimaryButton, SecondaryButton } from './shared-components/buttons';

import bookingFlowContext from './bookingFlowContext';

​

const OneMonth: FC<{ month: Date }> = ({ month }) => (

  <h1>{format(month, 'MMMM yyyy')}</h1>

);

​

const ChooseDatePage: FC = () => {

  const { onGoBack, onProceed } = useContext(bookingFlowContext);

  const [thisMonth] = useState(startOfMonth(new Date()));

  const nextMonth = addMonths(thisMonth, 1);

​

  return (

    <div>

      <div className="text-2xl font-bold">Please select a day</div>

      <div className="mt-4 flex flex-col space-y-4">

        <div className="flex flex-col justify-between space-y-2 sm:flex-row sm:space-x-4 sm:space-y-0">

          <OneMonth month={thisMonth} />

          <OneMonth month={nextMonth} />

        </div>

​

        <div className="mt-4 flex flex-row justify-between">

          <SecondaryButton onClick={onGoBack}>Go Back</SecondaryButton>

          <PrimaryButton onClick={onProceed}>Proceed</PrimaryButton>

        </div>

      </div>

    </div>

  );

};

​

export default ChooseDatePage;

Update your NewBooking.tsx file to import the component instead of the placeholder ChooseDatePage component.

With this, you have the outline for the date selection page. There are two placeholders for months (current and next), put into a responsive container. It should look like this:

You have a state variable called thisMonth which is set to the first day of the current month, using a function provided by date-fns. You also calculate what the next month is using another helper function.