Created contactpage

src/components/ContactCard/ContactCard.scss

@@ -0,0 +1,92 @@
+@import "../../assets/scss/globals";
+
+.contact-card {
+  background-color: $white;
+  color: $dark-blue;
+  white-space: wrap;
+  margin: 1rem 1rem;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: flex-start;
+  width: calc(25% - 2rem);
+
+  @media screen and (min-width: 1000px) and (max-width: 1200px - 1px) {
+    width: calc(50% - 2rem);
+    margin-bottom: 2rem;
+  }
+
+  @media screen and (max-width: 1000px - 1px) {
+    width: 100%;
+    margin-bottom: 3rem;
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  &__title {
+    padding: 0.5rem;
+    margin-bottom: 0.5rem;
+    display: flex;
+    justify-content: center;
+    font-size: 1.5rem;
+    text-align: center;
+    font-weight: 300;
+    color: $black;
+  }
+
+  &__image {
+    width: 100%;
+    height: 300px;
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center center;
+    margin-bottom: 1rem;
+
+    @media screen and (min-width: 1200px) {
+      height: 15vw;
+    }
+
+    @media screen and (max-width: 1200px - 1px) {
+      height: 35vh;
+    }
+  }
+
+  &__button {
+    display: flex;
+    justify-content: center;
+
+    button {
+      height: 100%;
+    }
+  }
+
+  &__text {
+    display: flex;
+    justify-content: center;
+    text-align: center;
+    text-overflow: ellipsis;
+    font-size: 16px;
+    margin: 0 0 0.5rem;
+    font-weight: 200;
+    line-height: 22px;
+    color: $black;
+
+    @media screen and (max-width: 1200px - 1px) {
+      margin: 0.5rem 0;
+      font-size: 16px;
+    }
+  }
+
+  &__datetime {
+    color: $orange1;
+    display: flex;
+    justify-content: center;
+    text-align: center;
+    font-size: 0.9rem;
+    font-weight: bold;
+
+    @media screen and (max-width: 1200px - 1px) {
+      margin: 0.5rem 0;
+      font-size: 16px;
+    }
+  }
+}

src/components/ContactCard/ContactCard.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import "./ContactCard.scss";
+
+export interface ContactCardProps {
+  first_name: String;
+  last_name: String;
+  phone: Number;
+  email: String;
+}
+export interface ContactCardState {}
+
+class ContactCard extends React.Component<ContactCardProps, ContactCardState> {
+  render() {
+    const { first_name, last_name, phone, email } = this.props;
+    return (
+      <div className="contact-card">
+        <div className="contact-card__firstname">{first_name}</div>
+        <div className="contact-card__lastname">{last_name}</div>
+        <div className="contact-card__phone">{phone}</div>
+        <div className="contact-card__email">{email}</div>
+      </div>
+    );
+  }
+}
+
+export default ContactCard;

src/components/ContactCard/index.ts

@@ -0,0 +1,2 @@
+import ContactCard from "./ContactCard";
+export default ContactCard;

src/models/Contacts.ts

@@ -0,0 +1,22 @@
+import axios from "axios";
+
+const url = `${process.env.API_URL}/contacts`;
+
+export interface Contact {
+  id: number;
+  first_name: string;
+  last_name: string;
+  phone_number: number;
+  email: string;
+  role: string;
+}
+
+export async function getContacts(): Promise<Contact[]> {
+  try {
+    const resp = await axios.get(url);
+    return resp.data["results"];
+  } catch (err) {
+    console.error(err);
+    throw err;
+  }
+}

src/pages/ContactsPage/ContactsPage.scss

@@ -0,0 +1,7 @@
+@import "../../assets/scss/globals";
+
+.contacts-page {
+  display: flex;
+  flex-flow: column wrap;
+  justify-content: flex-start;
+}

src/pages/ContactsPage/ContactsPage.tsx

@@ -0,0 +1,92 @@
+import * as React from "react";
+import Helmet from "react-helmet";
+import "./ContactsPage.scss";
+
+import { StaticContext } from "../../server/StaticContext";
+import PageLink from "../../components/PageLink/PageLink";
+import Card from "../../components/Card";
+import { BackgroundColor as PageSectionColor }  from "../../components/PageSection/PageSection";
+import PageSection from "../../components/PageSection";
+import HeroMainSection from "../../components/HeroMainSection";
+import ContactCard from "../../components/ContactCard";
+import { Contact, getContacts } from "../../models/Contacts";
+
+interface ContactsPageProps {
+  staticContext: StaticContext;
+}
+
+interface ContactsPageState {
+  contacts: Contact[];
+}
+
+class ContactsPage extends React.Component<ContactsPageProps, ContactsPageState> {
+  constructor(props: ContactsPageProps) {
+    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.getContacts) {
+        const contacts = staticContext.resolutions.getContacts as Contact[];
+        this.state = {
+          contacts,
+        };
+      } else {
+        this.state = {
+          contacts: [],
+        };
+        const promiseContacts = this.fetchContacts();
+        staticContext.promises.getContacts = promiseContacts;
+      }
+    } else {
+      this.state = {
+        contacts: [],
+      };
+      this.fetchContacts();
+    }
+  }
+
+  fetchContacts = () => {
+    const getContactsPromise = getContacts();
+    getContactsPromise.then(contacts => {
+      this.setState({
+        contacts,
+      });
+    });
+    return getContactsPromise;
+  }
+
+  render() {
+    const { contacts } = this.state;
+    return (
+      <div className="contacts-page">
+        <Helmet>
+          <link rel="canonical" href="https://sik.ayy.fi/INSERT_PATH_HERE!" />
+        </Helmet>
+        Contacts Page
+        <HeroMainSection>
+            <h1>Aalto-yliopiston Sähköinsinöörikilta</h1>
+            <p>
+              lorem ipsum dolor est
+            </p>
+        </HeroMainSection>
+        <PageSection backgroundColor={PageSectionColor.White}>
+        {contacts.map(contact => (
+          <ContactCard
+            key = {contact.id}
+            first_name = {contact.first_name}
+            last_name = {contact.last_name}
+            phone = {contact.phone_number}
+            email = {contact.email}
+            />
+        ))}
+        </PageSection>
+      </div>
+    );
+  }
+}
+
+export default ContactsPage;

src/pages/ContactsPage/index.ts

@@ -0,0 +1,2 @@
+import ContactsPage from "./ContactsPage";
+export default ContactsPage;

src/routes.tsx

@@ -16,6 +16,7 @@ import AdminLoginPage from "./pages/AdminLoginPage";
 import { getTokenCookie } from "./auth";
 import AdminLogoutPage from "./pages/AdminLogoutPage";
 import EventCreatePage from "./pages/EventCreatePage";
+import ContactsPage from "./pages/ContactsPage";
 
 const renderPage = (Page) => (props): JSX.Element => {
   return <CommonPage page={Page} {...props} />;
@@ -32,6 +33,7 @@ const renderAdminPage = (Page) => (props): JSX.Element => {
 const commonRoutes = [
   { path: "/", page: FrontPage },
   { path: "/kilta", page: GuildPage },
+  { path: "/yhteystiedot", page: ContactsPage}
 ];
 
 const adminLoginRoutes = [