web2.0-frontend/src/pages/FrontPage.tsx

import React from "react";
import { Helmet } from "react-helmet";
import { Event, getEvents } from "@models/Event";
import { Post, getFeed } from "@models/Feed";
import { StaticContext } from "@server/StaticContext";
import FrontPageView from "@views/FrontPage/FrontPageView";

interface FrontPageProps {
  staticContext: StaticContext;
}

interface FrontPageState {
  events: Event[];
  feed: Post[];
}

class FrontPage extends React.Component<FrontPageProps, FrontPageState> {
  constructor(props: FrontPageProps) {
    super(props);
    const { staticContext } = props;

    if (staticContext) {
      /* The static context is an object that manages promises when
         rendering on the server. If staticContext exists, that means
         we have to store all promises in it. Otherwise, operate
         normally. See server/index.ts. */
      if (staticContext.resolutions.getEvents) {
        const events = staticContext.resolutions.getEvents as Event[];
        const feed = staticContext.resolutions.getFeed as Post[];
        this.state = {
          events,
          feed,
        };
      } else {
        this.state = {
          events: [],
          feed: [],
        };
        const promiseEvents = this.fetchEvents();
        const promiseFeed = this.fetchFeed();
        staticContext.promises.getEvents = promiseEvents;
        staticContext.promises.getFeed = promiseFeed;
      }
    } else {
      this.state = {
        events: [],
        feed: [],
      };
      this.fetchEvents();
      this.fetchFeed();
    }
  }

  fetchEvents = () => {
    const getEventsPromise = getEvents({
      onlyNonPast: true,
      limit: 4,
    });
    getEventsPromise.then(events => {
      this.setState({
        events,
      });
    });
    return getEventsPromise;
  }

  fetchFeed = () => {
    const getFeedPromise = getFeed();
    getFeedPromise.then(feed => {
      this.setState({
        feed,
      });
    });
    return getFeedPromise;
  }

  render() {
    const { events, feed } = this.state;
    return (
      <>
        <Helmet />
        <FrontPageView events={events} feed={feed} />
      </>
    )
  }
}

export default FrontPage;