From 41cbcba0eed9213b0c39a94988ae80c25a2e7161 Mon Sep 17 00:00:00 2001 From: Aarni Halinen Date: Mon, 13 Jul 2020 16:23:36 +0300 Subject: [PATCH] ActualPage Events and Feed without filters --- src/components/Button/Button.scss | 19 ++ src/components/Button/Button.tsx | 26 +- src/components/Button/index.ts | 5 +- src/components/MainSection/MainSection.scss | 6 +- src/pages/ActualPage.tsx | 90 ++++++- src/views/ActualPage/ActualPage.scss | 1 + src/views/ActualPage/ActualPageView.tsx | 250 ++++++++++---------- src/views/ActualPage/EventCalendar.tsx | 58 +++++ src/views/ActualPage/FilterContainer.tsx | 9 + src/views/ActualPage/News.tsx | 58 +++++ src/views/EventPage/EventPageView.tsx | 4 +- src/views/FrontPage/FrontPageView.tsx | 10 +- 12 files changed, 378 insertions(+), 158 deletions(-) create mode 100644 src/views/ActualPage/EventCalendar.tsx create mode 100644 src/views/ActualPage/FilterContainer.tsx create mode 100644 src/views/ActualPage/News.tsx diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss index 6d61063..9126a17 100644 --- a/src/components/Button/Button.scss +++ b/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; } diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index 003974c..06bd26b 100644 --- a/src/components/Button/Button.tsx +++ b/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.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 { render() { - const { type } = this.props; - const className = `button ${buttonClassNames.get(type)}`; + const { type, selected } = this.props; + const classes = classNames( + "button", + type, + { "selected": selected } + ) return ( - ); diff --git a/src/components/Button/index.ts b/src/components/Button/index.ts index ac9ab65..846ff85 100644 --- a/src/components/Button/index.ts +++ b/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; \ No newline at end of file diff --git a/src/components/MainSection/MainSection.scss b/src/components/MainSection/MainSection.scss index cda7f5d..ed09469 100644 --- a/src/components/MainSection/MainSection.scss +++ b/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; } diff --git a/src/pages/ActualPage.tsx b/src/pages/ActualPage.tsx index 1062427..009a287 100644 --- a/src/pages/ActualPage.tsx +++ b/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 = () => ( - <> - - - - - -) +interface ActualPageProps { + staticContext: StaticContext; +} +interface ActualPageState { + events: Event[]; + feed: Post[]; +} + + +class ActualPage extends React.Component { + 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 ( + <> + + + + + + ) + } +} export default ActualPage; diff --git a/src/views/ActualPage/ActualPage.scss b/src/views/ActualPage/ActualPage.scss index c45ad94..582d405 100644 --- a/src/views/ActualPage/ActualPage.scss +++ b/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; } diff --git a/src/views/ActualPage/ActualPageView.tsx b/src/views/ActualPage/ActualPageView.tsx index 6d0b360..a44f3b2 100644 --- a/src/views/ActualPage/ActualPageView.tsx +++ b/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 { - render() { - return ( -
- - -

Yritystapahtumia ja vastapainoa opiskelulle

-

- Teekkarielämä ei ole pelkkää saunomista, juhlimista ja muita huvituksia—tai no, on se sitäkin. -

-
- - -
- - - Killan hallitus päivystää kiltahuoneella maanantaisin klo 12.15–13.15. Tuolloin voit ostaa kiltatuotteita, kuten esim. haalarimerkkejä tai laulukirjoja. - - - Kiltapäiväkerho Kiltis kokoontuu torstaisin klo XX.XX kiltahuoneella. Lorem ipsum dolor sit amet. Lämpimästi tervetuloa kaikki SIKkiläiset ja SIK-mieliset! - - - - -

- Kilta järjestää jäsenilleen jos jonkinlaista projektia ja toimintaa, muun muassa: -

- - - - - - - - - - - - - - -

Tapahtumat

- - - - -

Uutiset

- - - - -

Kuvia tapahtumista.

- -
Kuvagalleria ›
- - - -
- - - -
- - -

Sinustako kilta-aktiivi?

- -
Tule mukaan kiltatoimintaan ›
- - - - - - -

Yritystapahtumia ja vastapainoa opiskelulle

-

- Toimintaa ylläpitää ja järjestää jaokset ja toimikunnat. -

- - Jotain elepajasta - - - Jotain elepajasta - - - Jotain elepajasta - - - Jotain elepajasta - - - Jotain elepajasta - - - - -
- ); - } +interface ActualPageViewProps { + events: Event[]; + feed: Post[]; } -export default ActualPage; +const ActualPageView: React.FC = ({events, feed}) => { + return ( +
+ + +

Yritystapahtumia ja vastapainoa opiskelulle

+

+ Teekkarielämä ei ole pelkkää saunomista, juhlimista ja muita huvituksia—tai no, on se sitäkin. +

+
+ + +
+ + + Killan hallitus päivystää kiltahuoneella maanantaisin klo 12.15–13.15. Tuolloin voit ostaa kiltatuotteita, kuten esim. haalarimerkkejä tai laulukirjoja. + + + Kiltapäiväkerho Kiltis kokoontuu torstaisin klo XX.XX kiltahuoneella. Lorem ipsum dolor sit amet. Lämpimästi tervetuloa kaikki SIKkiläiset ja SIK-mieliset! + + + + +

+ Kilta järjestää jäsenilleen jos jonkinlaista projektia ja toimintaa, muun muassa: +

+ + + + + + + + + + + + + + +

Tapahtumat

+ + + + + +

Uutiset

+ + + + + +

Kuvia tapahtumista.

+ +
Kuvagalleria ›
+ + + +
+ + + +
+ + +

Sinustako kilta-aktiivi?

+ +
Tule mukaan kiltatoimintaan ›
+ + + + + + +

Yritystapahtumia ja vastapainoa opiskelulle

+

+ Toimintaa ylläpitää ja järjestää jaokset ja toimikunnat. +

+ + Jotain elepajasta + + + Jotain elepajasta + + + Jotain elepajasta + + + Jotain elepajasta + + + Jotain elepajasta + + + + +
+ ); +} + +export default ActualPageView; diff --git a/src/views/ActualPage/EventCalendar.tsx b/src/views/ActualPage/EventCalendar.tsx new file mode 100644 index 0000000..436c437 --- /dev/null +++ b/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 = ({events}) => { + const [filterSelected, setFilter] = useState(0); + const [numberShown, setNumberShown] = useState(8); + const filteredEvents = events.slice(0, numberShown); + return ( + <> + {/* + + + + */} + + {filteredEvents.map(e => ( + { }}> +
Lue lisää ›
+ + } + > + + ))} + + { numberShown < events.length && ( + + + + )} + + ) +} + +export default EventCalendar; \ No newline at end of file diff --git a/src/views/ActualPage/FilterContainer.tsx b/src/views/ActualPage/FilterContainer.tsx new file mode 100644 index 0000000..2fe9f83 --- /dev/null +++ b/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; \ No newline at end of file diff --git a/src/views/ActualPage/News.tsx b/src/views/ActualPage/News.tsx new file mode 100644 index 0000000..550eae1 --- /dev/null +++ b/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 = ({feed}) => { + const [filterSelected, setFilter] = useState(0); + const [numberShown, setNumberShown] = useState(8); + const filteredFeed = feed.slice(0, numberShown); + return ( + <> + {/* + + + + */} + + {filteredFeed.map(post => ( + { }}> +
Lue lisää ›
+ + } + > + + ))} + + { numberShown < feed.length && ( + + + + )} + + ) +} + +export default News; \ No newline at end of file diff --git a/src/views/EventPage/EventPageView.tsx b/src/views/EventPage/EventPageView.tsx index 3fab051..69f2629 100644 --- a/src/views/EventPage/EventPageView.tsx +++ b/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 {
{event.signupForm.map(sf => ( - diff --git a/src/views/FrontPage/FrontPageView.tsx b/src/views/FrontPage/FrontPageView.tsx index 665221a..c81769f 100644 --- a/src/views/FrontPage/FrontPageView.tsx +++ b/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 = ({ events, feed }) => ( vauhdilla sähköistyvän maailmamme kehityksessä.

- -
@@ -74,7 +74,7 @@ const FrontPageView: React.FC = ({ events, feed }) => ( link={`/events/${event.id}`} image={event.tags[0].icon} button={ - } @@ -107,7 +107,7 @@ const FrontPageView: React.FC = ({ events, feed }) => ( text={inst.description_fi} link={`/feed/${inst.id}`} button={ - }