ActualPage Events and Feed without filters

src/components/Button/Button.scss

@@ -31,6 +31,25 @@
     border: none;
   }
 
+  &.bordered {
+    font-size: 12px;
+    font-weight: 800;
+    color: color(blue1);
+    border: 1px solid color(blue1);
+  }
+
+  &.filter {
+    text-transform: none;
+    color: color(grey1);
+    font-weight: 300;
+    border: 2px solid color(grey1);
+
+    &.selected {
+      background-color: color(grey1);
+      color: color(white1);
+    }
+  }
+
   &:hover {
     cursor: pointer;
   }

src/components/Button/Button.tsx

@@ -1,27 +1,23 @@
 import React from "react";
+import classNames from "classnames";
 import "./Button.scss";
 
-export enum ButtonType {
-  Hero,
-  Filled,
-}
-
-const buttonClassNames = new Map<ButtonType, string>([
-  [ButtonType.Hero, "hero"],
-  [ButtonType.Filled, "filled"],
-]);
-
-export interface ButtonProps {
+interface ButtonProps {
   onClick: () => void;
-  type: ButtonType;
+  type: "hero" | "filled" | "filter" | "bordered";
+  selected?: boolean;
 }
 
 export default class Button extends React.Component<ButtonProps, undefined> {
   render() {
-    const { type } = this.props;
-    const className = `button ${buttonClassNames.get(type)}`;
+    const { type, selected } = this.props;
+    const classes = classNames(
+      "button",
+      type,
+      { "selected": selected }
+    )
     return (
-      <button type="button" onClick={this.props.onClick} className={className}>
+      <button type="button" onClick={this.props.onClick} className={classes}>
         {this.props.children}
       </button>
     );

src/components/Button/index.ts

@@ -1,3 +1,2 @@
-import Button, { ButtonType } from "./Button";
-export default Button;
-export { ButtonType };
+import Button from "./Button";
+export default Button;

src/components/MainSection/MainSection.scss

@@ -6,15 +6,15 @@
   flex-flow: column;
   padding: 0 3rem;
 
-  h3 {
+  & > h3 {
     margin: auto;
   }
 
-  h6 {
+  & > h6 {
     color: color(orange1);
   }
 
-  p {
+  & > p {
     margin-block-start: 0.5rem;
     margin-block-end: 1rem;
   }

src/pages/ActualPage.tsx

@@ -1,15 +1,89 @@
 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";
 
-const ActualPage = () => (
-  <>
-    <Helmet>
-      <link rel="canonical" href="https://sik.ayy.fi/kilta/toiminta" />
-    </Helmet>
-    <ActualPageView />
-  </>
-)
+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;

src/views/ActualPage/ActualPage.scss

@@ -8,6 +8,7 @@
     flex-flow: row nowrap;
 
     & > img {
+      max-width: calc(100% / 3);
       flex: 1 0;
       object-fit: cover;
     }

src/views/ActualPage/ActualPageView.tsx

@@ -8,130 +8,136 @@ import AsideSection from "@components/AsideSection";
 import MainSection from "@components/MainSection/index";
 import Ribbon from "@components/Ribbon/index";
 import TextAnchor from "@components/TextAnchor/index";
-import Button, { ButtonType } from "@components/Button/index";
+import Button from "@components/Button/index";
 import Accordion from "@components/Accordion";
 import HeroSecondarySection, { HeroSecondarySectionItem } from "@components/Hero/HeroSecondarySection/HeroSecondarySection";
+import { Event } from "@models/Event";
+import { Post } from "@models/Feed";
+import EventCalendar from "./EventCalendar";
+import News from "./News";
 
-export interface ActualPageProps {}
-export interface ActualPageState {}
-
-class ActualPage extends React.Component<ActualPageProps, ActualPageState> {
-  render() {
-    return (
-      <div className="actual-page">
-        <PageSection backgroundColor="dark-blue" fullSize className="lander-hero">
-          <HeroMainSection>
-            <h1>Yritystapahtumia ja vastapainoa opiskelulle</h1>
-            <p>
-              Teekkarielämä ei ole pelkkää saunomista, juhlimista ja muita huvituksia—tai no, on se sitäkin.
-            </p>
-            <div className="hero-button-container-row">
-              <Button type={ButtonType.Hero} onClick={() => { }}>
-                <h6>Tapahtumat&nbsp;›</h6>
-              </Button>
-              <Button type={ButtonType.Hero} onClick={() => { }}>
-                <h6>Uutiset&nbsp;›</h6>
-              </Button>
-            </div>
-            <HeroSecondarySection title="Kiltahuone sijaitsee Tuas-talossa (Maarintie 8)">
-              <HeroSecondarySectionItem note="Ma">
-                <span>Killan hallitus päivystää kiltahuoneella <strong>maanantaisin klo 12.15–13.15.</strong> Tuolloin voit ostaa kiltatuotteita, kuten esim. haalarimerkkejä tai laulukirjoja.</span>
-              </HeroSecondarySectionItem>
-              <HeroSecondarySectionItem note="To">
-                <span>Kiltapäiväkerho Kiltis kokoontuu <strong>torstaisin klo XX.XX kiltahuoneella.</strong> Lorem ipsum dolor sit amet. Lämpimästi tervetuloa kaikki SIKkiläiset ja SIK-mieliset!</span>
-              </HeroSecondarySectionItem>
-            </HeroSecondarySection>
-          </HeroMainSection>
-          <HeroAsideSection textColor="dark-blue" backgroundColor="light-turquoise">
-            <p>
-            Kilta järjestää jäsenilleen jos jonkinlaista projektia ja toimintaa, muun muassa:
-            </p>
-            <HeroAsideItem
-              title="keksimistä ja rakentelua"
-              linkHref="#elepaja"
-              linkText="Elektroniikkapaja">
-            </HeroAsideItem>
-            <HeroAsideItem
-              title="Tiimipelejä ja liikuntaa"
-              linkHref="#urheilu"
-              linkText="Urheilu">
-            </HeroAsideItem>
-            <HeroAsideItem
-              title="Konsertteja ja teatterivierailuja"
-              linkHref="#kulttuuri"
-              linkText="Kulttuuri">
-            </HeroAsideItem>
-            <HeroAsideItem
-              title="Verkostoitumista"
-              linkHref="#yritysyhteistyö"
-              linkText="Yritysyhteistyö">
-            </HeroAsideItem>
-            <HeroAsideItem
-              title="Uusia suhteita ulkopaikkakuntalaisten kanssa"
-              linkHref="#ulkosuhteet"
-              linkText="Ulkoiset suhteet">
-            </HeroAsideItem>
-          </HeroAsideSection>
-        </PageSection>
-        <PageSection backgroundColor="white1" textColor="black1">
-          <MainSection>
-            <h3>Tapahtumat</h3>
-          </MainSection>
-        </PageSection>
-        <PageSection backgroundColor="white1" textColor="black1">
-          <MainSection>
-            <h3>Uutiset</h3>
-          </MainSection>
-        </PageSection>
-        <PageSection backgroundColor="light-turquoise" textColor="dark-blue">
-          <Ribbon>
-            <h3>Kuvia tapahtumista.</h3>
-            <TextAnchor textColor="dark-blue" hoverColor="blue1" size="small-ribbon" to="https://sosso.fi">
-              <h6>Kuvagalleria&nbsp;›</h6>
-            </TextAnchor>
-          </Ribbon>
-        </PageSection>
-        <div className="actual-page-images">
-          <img src="https://placehold.it/400x400" />
-          <img src="https://placehold.it/400x400" />
-          <img src="https://placehold.it/400x400" />
-        </div>
-        <PageSection backgroundColor="blue1">
-          <Ribbon>
-            <h3>Sinustako kilta-aktiivi?</h3>
-            <TextAnchor textColor="white1" hoverColor="dark-blue" size="small-ribbon" to="https://sosso.fi">
-              <h6>Tule mukaan kiltatoimintaan&nbsp;›</h6>
-            </TextAnchor>
-          </Ribbon>
-        </PageSection>
-        <PageSection backgroundColor="white1" textColor="black1">
-          <AsideSection />
-          <MainSection>
-            <h3>Yritystapahtumia ja vastapainoa opiskelulle</h3>
-            <p>
-            Toimintaa ylläpitää ja järjestää jaokset ja toimikunnat.
-            </p>
-            <Accordion title="Rakenna kaikkea elektroniikkaan liittyvää">
-            Jotain elepajasta
-            </Accordion>
-            <Accordion title="Urheilua ja lajikokeiluja">
-            Jotain elepajasta
-            </Accordion>
-            <Accordion title="Kulttuuria kulinarismista teatteriin">
-            Jotain elepajasta
-            </Accordion>
-            <Accordion title="Yhteistyö yritysten kanssa">
-            Jotain elepajasta
-            </Accordion>
-            <Accordion title="Kansainvälisty ja luo suhteita">
-            Jotain elepajasta
-            </Accordion>
-          </MainSection>
-          <AsideSection />
-        </PageSection>
-      </div>
-    );
-  }
+interface ActualPageViewProps {
+  events: Event[];
+  feed: Post[];
 }
 
-export default ActualPage;
+const ActualPageView: React.FC<ActualPageViewProps> = ({events, feed}) => {
+  return (
+    <div className="actual-page">
+      <PageSection backgroundColor="dark-blue" fullSize className="lander-hero">
+        <HeroMainSection>
+          <h1>Yritystapahtumia ja vastapainoa opiskelulle</h1>
+          <p>
+              Teekkarielämä ei ole pelkkää saunomista, juhlimista ja muita huvituksia—tai no, on se sitäkin.
+          </p>
+          <div className="hero-button-container-row">
+            <Button type="hero" onClick={() => { }}>
+              <h6>Tapahtumat&nbsp;›</h6>
+            </Button>
+            <Button type="hero" onClick={() => { }}>
+              <h6>Uutiset&nbsp;›</h6>
+            </Button>
+          </div>
+          <HeroSecondarySection title="Kiltahuone sijaitsee Tuas-talossa (Maarintie 8)">
+            <HeroSecondarySectionItem note="Ma">
+              <span>Killan hallitus päivystää kiltahuoneella <strong>maanantaisin klo 12.15–13.15.</strong> Tuolloin voit ostaa kiltatuotteita, kuten esim. haalarimerkkejä tai laulukirjoja.</span>
+            </HeroSecondarySectionItem>
+            <HeroSecondarySectionItem note="To">
+              <span>Kiltapäiväkerho Kiltis kokoontuu <strong>torstaisin klo XX.XX kiltahuoneella.</strong> Lorem ipsum dolor sit amet. Lämpimästi tervetuloa kaikki SIKkiläiset ja SIK-mieliset!</span>
+            </HeroSecondarySectionItem>
+          </HeroSecondarySection>
+        </HeroMainSection>
+        <HeroAsideSection textColor="dark-blue" backgroundColor="light-turquoise">
+          <p>
+              Kilta järjestää jäsenilleen jos jonkinlaista projektia ja toimintaa, muun muassa:
+          </p>
+          <HeroAsideItem
+            title="keksimistä ja rakentelua"
+            linkHref="#elepaja"
+            linkText="Elektroniikkapaja">
+          </HeroAsideItem>
+          <HeroAsideItem
+            title="Tiimipelejä ja liikuntaa"
+            linkHref="#urheilu"
+            linkText="Urheilu">
+          </HeroAsideItem>
+          <HeroAsideItem
+            title="Konsertteja ja teatterivierailuja"
+            linkHref="#kulttuuri"
+            linkText="Kulttuuri">
+          </HeroAsideItem>
+          <HeroAsideItem
+            title="Verkostoitumista"
+            linkHref="#yritysyhteistyö"
+            linkText="Yritysyhteistyö">
+          </HeroAsideItem>
+          <HeroAsideItem
+            title="Uusia suhteita ulkopaikkakuntalaisten kanssa"
+            linkHref="#ulkosuhteet"
+            linkText="Ulkoiset suhteet">
+          </HeroAsideItem>
+        </HeroAsideSection>
+      </PageSection>
+      <PageSection backgroundColor="white1" textColor="black1">
+        <MainSection>
+          <h3>Tapahtumat</h3>
+          <EventCalendar events={events} />
+        </MainSection>
+      </PageSection>
+      <PageSection backgroundColor="white1" textColor="black1">
+        <MainSection>
+          <h3>Uutiset</h3>
+          <News feed={feed} />
+        </MainSection>
+      </PageSection>
+      <PageSection backgroundColor="light-turquoise" textColor="dark-blue">
+        <Ribbon>
+          <h3>Kuvia tapahtumista.</h3>
+          <TextAnchor textColor="dark-blue" hoverColor="blue1" size="small-ribbon" to="https://sosso.fi">
+            <h6>Kuvagalleria&nbsp;›</h6>
+          </TextAnchor>
+        </Ribbon>
+      </PageSection>
+      <div className="actual-page-images">
+        <img src="https://placehold.it/400x400" />
+        <img src="https://placehold.it/400x400" />
+        <img src="https://placehold.it/400x400" />
+      </div>
+      <PageSection backgroundColor="blue1">
+        <Ribbon>
+          <h3>Sinustako kilta-aktiivi?</h3>
+          <TextAnchor textColor="white1" hoverColor="dark-blue" size="small-ribbon" to="https://sosso.fi">
+            <h6>Tule mukaan kiltatoimintaan&nbsp;›</h6>
+          </TextAnchor>
+        </Ribbon>
+      </PageSection>
+      <PageSection backgroundColor="white1" textColor="black1">
+        <AsideSection />
+        <MainSection>
+          <h3>Yritystapahtumia ja vastapainoa opiskelulle</h3>
+          <p>
+            Toimintaa ylläpitää ja järjestää jaokset ja toimikunnat.
+          </p>
+          <Accordion title="Rakenna kaikkea elektroniikkaan liittyvää">
+            Jotain elepajasta
+          </Accordion>
+          <Accordion title="Urheilua ja lajikokeiluja">
+            Jotain elepajasta
+          </Accordion>
+          <Accordion title="Kulttuuria kulinarismista teatteriin">
+            Jotain elepajasta
+          </Accordion>
+          <Accordion title="Yhteistyö yritysten kanssa">
+            Jotain elepajasta
+          </Accordion>
+          <Accordion title="Kansainvälisty ja luo suhteita">
+            Jotain elepajasta
+          </Accordion>
+        </MainSection>
+        <AsideSection />
+      </PageSection>
+    </div>
+  );
+}
+
+export default ActualPageView;

src/views/ActualPage/EventCalendar.tsx

@@ -0,0 +1,58 @@
+import React, { useState } from "react";
+import { Event } from "@models/Event";
+import Card from "@components/Card";
+import Button from "@components/Button";
+import PageSection from "@components/PageSection";
+
+import FilterContainer from "./FilterContainer";
+
+interface EventCalendarProps {
+  events: Event[];
+}
+
+const EventCalendar: React.FC<EventCalendarProps> = ({events}) => {
+  const [filterSelected, setFilter] = useState(0);
+  const [numberShown, setNumberShown] = useState(8);
+  const filteredEvents = events.slice(0, numberShown);
+  return (
+    <>
+      {/* <FilterContainer>
+        <Button type="filter" onClick={() => { setFilter(0) }} selected={filterSelected === 0}>
+          Näytä kaikki
+        </Button>
+        <Button type="filter" onClick={() => { setFilter(1) }} selected={filterSelected === 1}>
+          Järjestä aihettain&nbsp;›
+        </Button>
+        <Button type="filter" onClick={() => { setFilter(2) }} selected={filterSelected === 2}>
+          Valitse aika&nbsp;›
+        </Button>
+      </FilterContainer> */}
+      <PageSection backgroundColor="white1" textColor="black1" cardSection>
+        {filteredEvents.map(e => (
+          <Card
+            key={e.id}
+            title={e.title_fi}
+            start_time={e.start_time}
+            text={e.description_fi}
+            link={`/events/${e.id}`}
+            button={
+              <Button type="filled" onClick={() => { }}>
+                <h6>Lue lisää&nbsp;›</h6>
+              </Button>
+            }
+          >
+          </Card>
+        ))}
+      </PageSection>
+      { numberShown < events.length  && (
+        <FilterContainer>
+          <Button type="bordered" onClick={() => { setNumberShown(numberShown + 8) }}>
+            Lataa lisää
+          </Button>
+        </FilterContainer>
+      )}
+    </>
+  )
+}
+
+export default EventCalendar;

src/views/ActualPage/FilterContainer.tsx

@@ -0,0 +1,9 @@
+import styled from "styled-components";
+
+const FilterContainer = styled.div`
+  display: flex;
+  margin: auto;
+  justify-content: center;
+`;
+
+export default FilterContainer;

src/views/ActualPage/News.tsx

@@ -0,0 +1,58 @@
+import React, { useState } from "react";
+import { Post } from "@models/Feed";
+import Card from "@components/Card";
+import Button from "@components/Button";
+import PageSection from "@components/PageSection";
+
+import FilterContainer from "./FilterContainer";
+
+interface NewsProps {
+  feed: Post[];
+}
+
+const News: React.FC<NewsProps> = ({feed}) => {
+  const [filterSelected, setFilter] = useState(0);
+  const [numberShown, setNumberShown] = useState(8);
+  const filteredFeed = feed.slice(0, numberShown);
+  return (
+    <>
+      {/* <FilterContainer>
+        <Button type="filter" onClick={() => { setFilter(0) }} selected={filterSelected === 0}>
+          Näytä kaikki
+        </Button>
+        <Button type="filter" onClick={() => { setFilter(1) }} selected={filterSelected === 1}>
+          Järjestä aihettain&nbsp;›
+        </Button>
+        <Button type="filter" onClick={() => { setFilter(2) }} selected={filterSelected === 2}>
+          Valitse aika&nbsp;›
+        </Button>
+      </FilterContainer> */}
+      <PageSection backgroundColor="white1" textColor="black1" cardSection>
+        {filteredFeed.map(post => (
+          <Card
+            key={post.id}
+            title={post.title_fi}
+            start_time={post.publish_time}
+            text={post.description_fi}
+            link={`/feed/${post.id}`}
+            button={
+              <Button type="filled" onClick={() => { }}>
+                <h6>Lue lisää&nbsp;›</h6>
+              </Button>
+            }
+          >
+          </Card>
+        ))}
+      </PageSection>
+      { numberShown < feed.length  && (
+        <FilterContainer>
+          <Button type="bordered" onClick={() => { setNumberShown(numberShown + 8) }}>
+            Lataa lisää
+          </Button>
+        </FilterContainer>
+      )}
+    </>
+  )
+}
+
+export default News;

src/views/EventPage/EventPageView.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import "./EventPage.scss";
 import { Event } from "@models/Event";
-import Button, { ButtonType } from "@components/Button";
+import Button from "@components/Button";
 import Anchor from "@components/Anchor";
 import PageSection from "@components/PageSection";
 import MainSection from "@components/MainSection";
@@ -34,7 +34,7 @@ class EventPageView extends React.Component<EventPageViewProps> {
             <div className="event-signup-buttons">
               {event.signupForm.map(sf => (
                 <Anchor key={sf.id} to={`/signup/${sf.id}`}>
-                  <Button type={ButtonType.Filled} onClick={() => {}}>
+                  <Button type="filled" onClick={() => {}}>
                     {sf.title}
                   </Button>
                 </Anchor>

src/views/FrontPage/FrontPageView.tsx

@@ -9,7 +9,7 @@ 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 Button from "@components/Button";
 import Ribbon from "@components/Ribbon";
 import SponsorReel from "@components/SponsorReel";
 import HeroAsideItem from "@components/Hero/HeroAsideItem/HeroAsideItem";
@@ -31,10 +31,10 @@ const FrontPageView: React.FC<FrontPageViewProps> = ({ events, feed }) => (
               vauhdilla sähköistyvän maailmamme kehityksessä.
         </p>
         <div className="hero-button-container">
-          <Button type={ButtonType.Hero} onClick={() => { }}>
+          <Button type="hero" onClick={() => { }}>
             <h6>Killan tehtävät&nbsp;›</h6>
           </Button>
-          <Button type={ButtonType.Hero} onClick={() => { }}>
+          <Button type="hero" onClick={() => { }}>
             <h6>Vastapainoa opiskelulle&nbsp;›</h6>
           </Button>
         </div>
@@ -74,7 +74,7 @@ const FrontPageView: React.FC<FrontPageViewProps> = ({ events, feed }) => (
           link={`/events/${event.id}`}
           image={event.tags[0].icon}
           button={
-            <Button type={ButtonType.Filled} onClick={() => { }}>
+            <Button type="filled" onClick={() => { }}>
               <h6>Lue lisää&nbsp;›</h6>
             </Button>
           }
@@ -107,7 +107,7 @@ const FrontPageView: React.FC<FrontPageViewProps> = ({ events, feed }) => (
           text={inst.description_fi}
           link={`/feed/${inst.id}`}
           button={
-            <Button type={ButtonType.Filled} onClick={() => { }}>
+            <Button type="filled" onClick={() => { }}>
               <h6>Lue lisää&nbsp;›</h6>
             </Button>
           }