Google Calendar API call to connect with Fullcalendar

calendar.js

import React, { useRef, useEffect, useState, useContext } from "react";
import Calendar from "@fullcalendar/react"; // must go before plugins
import dayGridPlugin from "@fullcalendar/daygrid";
import "../styles/Calendar.module.scss";
import { Container } from "react-bootstrap";
import { getEvents } from "../components/API/fetch";
import EventModal from "../components/Events/EventModal";
import AppContext from "../components/AppContext";
import Layout from "../components/Layout";

function Eventcalendar({ data }) {
  const calendar = useRef(null);
  const [events, setEvents] = useState([]);
  const [eventDetails, setEventDetails] = useState({
    title: "",
    description: "",
    start: new Date(),
    end: new Date(),
    private: false,
  });
  const [show, setShow] = useState(false);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  const [heroColor, setHeroColor] = useState();
  const [calendarText, setCalendarText] = useState();

  useEffect(() => {
    if (typeof data !== "undefined") {
      setCalendarText(data.getPageDocument.data.blocks[3]);
      setContext(data.getPageDocument.data.blocks);
    }

    if (typeof bio !== "undefined") {
      const parseMarkdown = async () => {
        setContent(await markdownToHtml(bio));
      };
      parseMarkdown();
    }
  }, [data]);

  useEffect(() => {
    getEvents((events) => {
      // console.log(events)
      events.map((event) => {
        if (event.description && event.description.includes("<a")) {
          console.log(event.description);
          console.log(event.description.match(/<a>(.*?)<\/a>/g));
        }
        if (
          event.title.includes("Private") ||
          event.title.includes("private")
        ) {
          event.private = true;
        }
      });
      setEvents(events);
    });
  }, []);

  // console.log(events)
  return (
    <Layout>
      <Container className="eventcalendar">
        <div className="eventcalendar__calendar">
          <Calendar
            ref={calendar}
            plugins={[dayGridPlugin]}
            initialView="dayGridMonth"
            events={events}
            contentHeight={600}
            headerToolbar={{
              left: "title",
              center: "",
              right: "prev,next",
            }}
            eventSourceSuccess={function (content, xhr) {
              // console.log(content);
            }}
            eventSourceFailure={function (err) {
              // console.log(err);
            }}
            eventDidMount={function (info) {
              // console.log(info);
            }}
            eventClick={function (info) {
              setEventDetails({
                ...info.event,
                title: info.event.title,
                description: info.event.extendedProps.description,
                start: info.event.start,
                end: info.event.end,
                private: info.event.extendedProps.private,
              });
              setShow(true);
            }}
            noEventsContent={function (info) {
              info.text =
                "There are no events to display for this time period. To book an event, use the contact form below!";
              console.log(info);
            }}
          />
        </div>
        <EventModal show={show} handleClose={handleClose} data={eventDetails} />
      </Container>
    </Layout>
  );
}

export default Eventcalendar;

fetch.js

import request from "superagent";

let GOOGLE_CALENDAR_URL = process.env.NEXT_PUBLIC_GOOGLE_CALENDAR_URL;

    export function getEvents(callback) {
      console.log(`Starting to fetch events`)
      request.get(GOOGLE_CALENDAR_URL).end((err, resp) => {
        if (!err) {
          const events = [];
          JSON.parse(resp.text).items.map((event) => {
            // console.log(event)
            return events.push({
              start: new Date(event.start.dateTime.toString()),
              end: new Date(event.end.dateTime.toString()),
              title: event.summary,
              description: event.description,
              private: false,
            });
          });
          callback(events);
        }
      });
}