web2.0-frontend/src/views/FrontPage/FrontPageView.tsx

import React from "react";
import "./FrontPage.scss";
import appStore from "@stores/AppStore";
import Card from "@components/Card";
import { Event, getEvents } from "@models/Event";
import { Post, getFeed } from "@models/Feed";
import { StaticContext } from "@server/StaticContext";

import PageSection from "@components/PageSection";

import PageLink from "@components/PageLink/PageLink";
import HeroMainSection from "@components/Hero/HeroMainSection/HeroMainSection";
import HeroAsideSection from "@components/Hero/HeroAsideSection/HeroAsideSection";
import Button, { ButtonType } from "@components/Button";
import Ribbon from "@components/Ribbon";
import SponsorReel from "@components/SponsorReel";
import HeroAsideItem from "@components/Hero/HeroAsideItem/HeroAsideItem";
import TextAnchor from "@components/TextAnchor";

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 (
      <div className="front-page">
        <PageSection backgroundColor="dark-blue" fullSize className="lander-hero">
          <HeroMainSection>
            <h1>Aalto-yliopiston Sähköinsinöörikilta</h1>
            <p>
              on elektroniikan ja sähkötekniikan opiskelijoiden järjestö. Kilta
              kasaa yhteen yli 600 alansa huippua, jotka ovat avainasemassa
              vauhdilla sähköistyvän maailmamme kehityksessä.
            </p>
            <div className="hero-button-container">
              <Button type={ButtonType.Hero} onClick={() => { }}>
                <h6>Killan tehtävät&nbsp;›</h6>
              </Button>
              <Button type={ButtonType.Hero} onClick={() => { }}>
                <h6>Vastapainoa opiskelulle&nbsp;›</h6>
              </Button>
            </div>
          </HeroMainSection>
          <HeroAsideSection textColor="light-blue" backgroundColor="dark-blue">
            <HeroAsideItem
              title="Vasta-aloittanut opiskelija"
              linkHref="/kilta/fuksi"
              linkText="Fuksit"
            >
              Fuksikasvatusta, ISO-toimintaa, lorem ipsum dolor sit ja amet.
            </HeroAsideItem>
            <HeroAsideItem
              title="Harkitsetko uraa alalla?"
              linkHref="/opinnot_ja_ura"
              linkText="Opinnot ja ura"
            >
              Oletko abi, vaihtamassa uraa tai valmistumassa?
            </HeroAsideItem>
            <HeroAsideItem
              title="Yhteistyö yritysten kanssa"
              linkHref="/yritysyhteistyo"
              linkText="Yritysyhteistyö"
            >
              Avoimet työpaikat ja excursiot. Infoa yritysten edustajille ja
              sponsseille.
            </HeroAsideItem>
          </HeroAsideSection>
        </PageSection>
        <PageSection backgroundColor="white1" cardSection>
          {events.map(event => (
            <Card
              key={event.id}
              title={event.title_fi}
              start_time={event.start_time}
              text={event.description_fi}
              link={`/events/${event.id}`}
              image={event.tags[0].icon}
              button={
                <Button type={ButtonType.Filled} onClick={() => { }}>
                  <h6>Lue lisää&nbsp;›</h6>
                </Button>
              }
            />
          ))}
          <div className="card" key="links">
            <PageLink to="/events/" desc="löydät tapahtumakalenterista&nbsp;›">
              Kaikki tapahtumat
            </PageLink>
          </div>
        </PageSection>
        <PageSection backgroundColor="orange1">
          <Ribbon>
            <h3>Sössöä vuodesta 1969.</h3>
            <TextAnchor textColor="white1" hoverColor="blue1" size="small-ribbon" to="https://sosso.fi">
              <h4>Lue opiskelijalehden viimeisin numero&nbsp;›</h4>
            </TextAnchor>
          </Ribbon>
        </PageSection>
        <PageSection
          backgroundColor="white1"
          bottomBorder
          cardSection
        >
          {feed.map(inst => (
            <Card
              key={inst.id}
              title={inst.title_fi}
              start_time={inst.publish_time}
              text={inst.description_fi}
              link={`/feed/${inst.id}`}
              button={
                <Button type={ButtonType.Filled} onClick={() => { }}>
                  <h6>Lue lisää&nbsp;›</h6>
                </Button>
              }
            />
          ))}
          <div className="card" key="links">
            <PageLink to="/feed/" desc="ja hallituksen kuulumiset&nbsp;›">
              Lue tuoreimmat uutiset
            </PageLink>
            <PageLink to="https://sik.kuvat.fi" desc="kuvagalleriassa&nbsp;›">
              Kuvia tapahtumista
            </PageLink>
          </div>
        </PageSection>
        <PageSection center backgroundColor="white1">
          <SponsorReel />
        </PageSection>
      </div>
    );
  }
}

export default props => <FrontPage appStore={appStore} {...props} />;