Continue page/view splitting
This commit is contained in:
Aarni Halinen
@@ -1,10 +1,8 @@
|
||||
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 { Event } from "@models/Event";
|
||||
import { Post } from "@models/Feed";
|
||||
|
||||
import PageSection from "@components/PageSection";
|
||||
|
||||
@@ -17,185 +15,117 @@ import SponsorReel from "@components/SponsorReel";
|
||||
import HeroAsideItem from "@components/Hero/HeroAsideItem/HeroAsideItem";
|
||||
import TextAnchor from "@components/TextAnchor";
|
||||
|
||||
interface FrontPageProps {
|
||||
staticContext: StaticContext;
|
||||
}
|
||||
|
||||
interface FrontPageState {
|
||||
interface FrontPageViewProps {
|
||||
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>
|
||||
const FrontPageView: React.FC<FrontPageViewProps> = ({ events, feed }) => (
|
||||
<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 ›</h6>
|
||||
</Button>
|
||||
<Button type={ButtonType.Hero} onClick={() => { }}>
|
||||
<h6>Vastapainoa opiskelulle ›</h6>
|
||||
</Button>
|
||||
</div>
|
||||
</HeroMainSection>
|
||||
<HeroAsideSection textColor="light-blue" backgroundColor="dark-blue">
|
||||
<HeroAsideItem
|
||||
title="Vasta-aloittanut opiskelija"
|
||||
linkHref="/kilta/fuksi"
|
||||
linkText="Fuksit"
|
||||
>
|
||||
</p>
|
||||
<div className="hero-button-container">
|
||||
<Button type={ButtonType.Hero} onClick={() => { }}>
|
||||
<h6>Killan tehtävät ›</h6>
|
||||
</Button>
|
||||
<Button type={ButtonType.Hero} onClick={() => { }}>
|
||||
<h6>Vastapainoa opiskelulle ›</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"
|
||||
>
|
||||
</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ö"
|
||||
>
|
||||
</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ää ›</h6>
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
))}
|
||||
<div className="card" key="links">
|
||||
<PageLink to="/events/" desc="löydät tapahtumakalenterista ›">
|
||||
</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ää ›</h6>
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
))}
|
||||
<div className="card" key="links">
|
||||
<PageLink to="/events/" desc="löydät tapahtumakalenterista ›">
|
||||
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 ›</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ää ›</h6>
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
))}
|
||||
<div className="card" key="links">
|
||||
<PageLink to="/feed/" desc="ja hallituksen kuulumiset ›">
|
||||
Lue tuoreimmat uutiset
|
||||
</PageLink>
|
||||
<PageLink to="https://sik.kuvat.fi" desc="kuvagalleriassa ›">
|
||||
Kuvia tapahtumista
|
||||
</PageLink>
|
||||
</div>
|
||||
</PageSection>
|
||||
<PageSection center backgroundColor="white1">
|
||||
<SponsorReel />
|
||||
</PageSection>
|
||||
</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 ›</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ää ›</h6>
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
))}
|
||||
<div className="card" key="links">
|
||||
<PageLink to="/feed/" desc="ja hallituksen kuulumiset ›">
|
||||
Lue tuoreimmat uutiset
|
||||
</PageLink>
|
||||
<PageLink to="https://sik.kuvat.fi" desc="kuvagalleriassa ›">
|
||||
Kuvia tapahtumista
|
||||
</PageLink>
|
||||
</div>
|
||||
</PageSection>
|
||||
<PageSection center backgroundColor="white1">
|
||||
<SponsorReel />
|
||||
</PageSection>
|
||||
</div>
|
||||
)
|
||||
|
||||
export default props => <FrontPage appStore={appStore} {...props} />;
|
||||
export default FrontPageView;
|
||||
|
||||
Reference in New Issue
Block a user