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

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

interface ActualPageProps {
  staticContext: StaticContext;
}

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


class ActualPage extends React.Component<ActualPageProps, ActualPageState> {
  constructor(props: ActualPageProps) {
    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,
    });
    getEventsPromise.then(events => {
      this.setState({
        events,
      });
    });
    return getEventsPromise;
  }

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

  render() {
    return (
      <>
        <Helmet>
          <link rel="canonical" href="https://sik.ayy.fi/kilta/toiminta" />
        </Helmet>
        <ActualPageView events={this.state.events} feed={this.state.feed} />
      </>
    )
  }
}

export default ActualPage;