Preparing for deployment

In this section, we will make several improvements to the code, making it cleaner. Additionally, we will improve the functionality of the form.

Cleaning up the code

Since the list of events and the event form source code could eventually be reused in multiple places on the website, we can refactor the code by creating separate components for each.

In the web/src/components folder, create two files: event-list.js and event-form.js. Both files are similar in format.

The basic format of the event list module is as shown in the following code block:

import {Link} from "gatsby";
import React from "react";
const {format} = require('date-fns')
function EventList(props) {
  return (
  ...
  )
}
EventList.defaultProps = {
  title: '',
  eventNodes: [],
}
export default EventList

The basic format of the event form module is as shown:

import React from &quot...