From c1eab0452beb511852920700e6f4cb579389c50a Mon Sep 17 00:00:00 2001
From: ojakoo <ilari.ojakorpi@gmail.com>
Date: Fri, 8 Jan 2021 22:44:07 +0200
Subject: [PATCH 1/3] Feature contacts

---
 src/assets/json/board.json                  | 159 ++++++++++++++++++++
 src/assets/json/hvtmk.json                  |  30 ++++
 src/components/CommitteeContainer.tsx       |  36 ++---
 src/components/ContactCard.tsx              |  50 +++---
 src/models/Contacts.ts                      |  53 -------
 src/pages/yhteystiedot.tsx                  |  90 ++---------
 src/views/ContactsPage/ContactsPageView.tsx | 100 ++++++------
 tsconfig.json                               |   3 +-
 8 files changed, 296 insertions(+), 225 deletions(-)
 create mode 100644 src/assets/json/board.json
 create mode 100644 src/assets/json/hvtmk.json
 delete mode 100644 src/models/Contacts.ts

diff --git a/src/assets/json/board.json b/src/assets/json/board.json
new file mode 100644
index 0000000..45e764a
--- /dev/null
+++ b/src/assets/json/board.json
@@ -0,0 +1,159 @@
+{
+    "name_fi": "Hallitus",
+    "name_en": "Board",
+    "roles": [
+      {
+        "name_fi": "Puheenjohtaja",
+        "name_en": "Chairman",
+        "representatives": [
+          {
+            "name": "Johannes Ora"
+          }
+        ]
+      },
+      {
+        "name_fi": "Sihteeri",
+        "name_en": "Secretary",
+        "representatives": [
+          {
+            "name": "Salla Lyytikäinen",
+            "phone_number": null,
+            "email": null,
+            "image": null
+          }
+        ] 
+      },
+      {
+        "name_fi": "Rahastonhoitaja",
+        "name_en": "",
+        "representatives": [
+          {
+            "name": "Santeri Huhtala",
+            "phone_number": null,
+            "email": null,
+            "image": null
+          }
+        ] 
+      },
+      {
+        "name_fi": "Fuksitoimikunnan Puheenjohtaja",
+        "name_en": "",
+        "representatives": [
+          {
+            "name": "Toni Ojala",
+            "phone_number": null,
+            "email": null,
+            "image": null
+          }
+        ] 
+      },
+      {
+        "name_fi": "Fuksitoimikunnan puheenjohtajan adjutantti",
+        "name_en": "",
+        "representatives": [
+          {
+            "name": "Toni Lyttinen",
+            "phone_number": null,
+            "email": null,
+            "image": null
+          }
+        ] 
+      },
+      {
+        "name_fi": "Hovimestari",
+        "name_en": "",
+        "representatives": [
+          {
+            "name": "Eveliina Ahonen",
+            "phone_number": null,
+            "email": null,
+            "image": null
+          }
+        ] 
+      },
+      {
+        "name_fi": "Hovineuvos",
+        "name_en": "",
+        "representatives": [
+          {
+            "name": "Melissa Dönmez",
+            "phone_number": null,
+            "email": null,
+            "image": null
+          }
+        ] 
+      },
+      {
+        "name_fi": "ISOvastaava",
+        "name_en": "",
+        "representatives": [
+          {
+            "name": "Heidi Mäkitalo",
+            "phone_number": null,
+            "email": null,
+            "image": null
+          }
+        ] 
+      },
+      {
+        "name_fi": "Hyvinvointimestari",
+        "name_en": "",
+        "representatives": [
+          {
+            "name": "Sauli Norja",
+            "phone_number": null,
+            "email": null,
+            "image": null
+          }
+        ] 
+      },
+      {
+        "name_fi": "Opintomestari",
+        "name_en": "",
+        "representatives": [
+          {
+            "name": "Simo Hakanummi",
+            "phone_number": null,
+            "email": null,
+            "image": null
+          }
+        ] 
+      },
+      {
+        "name_fi": "Teknologiamestari",
+        "name_en": "",
+        "representatives": [
+          {
+            "name": "Oskari Ponkala",
+            "phone_number": null,
+            "email": null,
+            "image": null
+          }
+        ] 
+      },
+      {
+        "name_fi": "Ulkomestari",
+        "name_en": "",
+        "representatives": [
+          {
+            "name": "Oliver Hiekkamies",
+            "phone_number": null,
+            "email": null,
+            "image": null
+          }
+        ] 
+      },
+      {
+        "name_fi": "Yrityssuhdemestari",
+        "name_en": "",
+        "representatives": [
+          {
+            "name": "Otto Julkunen",
+            "phone_number": null,
+            "email": null,
+            "image": null
+          }
+        ] 
+      }
+    ]
+  }
\ No newline at end of file
diff --git a/src/assets/json/hvtmk.json b/src/assets/json/hvtmk.json
new file mode 100644
index 0000000..fc0302c
--- /dev/null
+++ b/src/assets/json/hvtmk.json
@@ -0,0 +1,30 @@
+{
+    "name_fi": "Hyvinvointitoimikunta",
+    "name_en": "Wellbeing comittee",
+    "roles": [
+      {
+        "name_fi": "Puheenjohtaja",
+        "name_en": "Chairman",
+        "representatives": [
+          {
+            "name": "Oskari Ponkala",
+            "phone_number": null,
+            "email": null,
+            "image": null
+          }
+        ]
+      },
+      {
+        "name_fi": "Web-kisälli",
+        "name_en": "Web-journeyman",
+        "representatives": [
+          {
+            "name": "Ilari Ojakorpi",
+            "phone_number": null,
+            "email": null,
+            "image": null
+          }
+        ]
+      }
+    ]
+  }
\ No newline at end of file
diff --git a/src/components/CommitteeContainer.tsx b/src/components/CommitteeContainer.tsx
index c0dbc07..9ff09c2 100644
--- a/src/components/CommitteeContainer.tsx
+++ b/src/components/CommitteeContainer.tsx
@@ -1,18 +1,17 @@
 import React from "react";
 import styled from "styled-components";
-import { Occupation } from "@models/Contacts";
 import ContactCard from "./ContactCard";
+import { Committee } from "@views/ContactsPage/ContactsPageView"
 import { colors } from "@theme/colors";
 
 interface CommitteeContainerProps {
-  name_fi: string;
-  name_en: string;
-  contacts: Occupation[];
+  committee: Committee;
 }
 
 const Container = styled.div`
   display: flex;
   flex-direction: column;
+  align-items: center;
   justify-content: flex-start;
   color: ${colors.darkBlue};
 
@@ -28,29 +27,26 @@ const Container = styled.div`
   & > div {
     display: flex;
     flex-flow: row wrap;
-    justify-content: flex-start;
+    justify-content: center;
   }
 `;
 
-const CommitteeContainer: React.FC<CommitteeContainerProps> = ({ name_fi, name_en, contacts }) => (
+const CommitteeContainer: React.FC<CommitteeContainerProps> = ({ committee }) => (
   <Container>
     <p>
-      {name_fi}
-    </p>
-    <p>
-      {name_en}
+      {committee.name_fi||committee.name_en}
     </p>
     <div>
-      {contacts.map(occupation => (
-        occupation.officials.map(official => (
+      {committee.roles.map(role => (
+        role.representatives.map(representative => (
           <ContactCard
-            key={official.first_name}
-            first_name={official.first_name}
-            last_name={official.last_name}
-            phone={official.phone_number}
-            email={official.email}
-            image={official.image}
-            role={occupation.role}
+            key={representative.name}
+            name={representative.name}
+            phone={representative.phone_number}
+            email={representative.email}
+            image={representative.image}
+            role_fi={role.name_fi}
+            role_en={role.name_en}
           />
         ))
       ))}
@@ -58,4 +54,4 @@ const CommitteeContainer: React.FC<CommitteeContainerProps> = ({ name_fi, name_e
   </Container>
 );
 
-export default CommitteeContainer;
+export default CommitteeContainer;
\ No newline at end of file
diff --git a/src/components/ContactCard.tsx b/src/components/ContactCard.tsx
index d4c8c14..8a86ed8 100644
--- a/src/components/ContactCard.tsx
+++ b/src/components/ContactCard.tsx
@@ -1,24 +1,26 @@
 import React from "react";
 import styled from "styled-components";
 import blank_profile from "@assets/img/blank_profile.png";
-import { Role } from "@models/Contacts";
 import { colors } from "@theme/colors";
 
 const Card = styled.article`
   display: flex;
+  align-items: flex-start;
   flex-flow: row nowrap;
+  padding: 0.5rem;
   color: ${colors.darkBlue};
-  margin: 1rem;
+  width: 15rem;
+  min-width: 300px;
 `;
 
 const ImageContainer = styled.div`
-  padding: 1rem;
+  padding: 0.5rem;
   display: flex;
   flex-shrink: 0;
   justify-content: center;
   align-items: center;
-  max-height: 100px;
-  max-width: 100px;
+  height: 6rem;
+  width: 6rem;
 
   & > img {
     width: 100%;
@@ -30,41 +32,43 @@ const ImageContainer = styled.div`
 const Info = styled.div`
   display: flex;
   flex-direction: column;
-  padding: 0.5rem;
-  justify-content: flex-start;
-  font-size: 1rem;
-  font-weight: 300;
+  align-items: flex-start;
+  padding: 0.25rem;
+  font-size: 0.9rem;
   color: ${colors.darkBlue};
 `;
 
+const Name = styled.text`
+  font-size: 1.2rem;
+  font-weight: 600;
+`
+
 interface ContactCardProps {
-  first_name: string;
-  last_name: string;
-  phone: number;
+  name: string;
+  phone: string;
   email: string;
   image: string;
-  role: Role;
+  role_fi: string;
+  role_en: string;
 }
 
-const ContactCard: React.FC<ContactCardProps> = ({ first_name, last_name, phone, email, image, role }) => {
-  const fullName = `${first_name} ${last_name}`;
+const ContactCard: React.FC<ContactCardProps> = ({ name, phone, email, image, role_fi, role_en }) => {
   return(
     <Card>
       <ImageContainer>
         <img
           src={image || blank_profile}
-          alt={fullName}
+          alt={name}
         />
       </ImageContainer>
       <Info>
-        <p>{fullName}</p>
-        <p>{phone}</p>
-        <p>{email}</p>
-        <p>{role.name_fi}</p>
-        <p>{role.name_en}</p>
+        <Name>{name}</Name>
+        <text>{role_fi || role_en}</text>
+        {phone ? <text>{phone}</text> : null}
+        {email ? <text>{email}</text> : null}
       </Info>
-    </Card>
+    </Card> 
   )
 }
 
-export default ContactCard;
+export default ContactCard;
\ No newline at end of file
diff --git a/src/models/Contacts.ts b/src/models/Contacts.ts
deleted file mode 100644
index 93d1840..0000000
--- a/src/models/Contacts.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import axios from "axios";
-
-const url = `${process.env.API_URL}/contacts`;
-const committeeUrl = `${process.env.API_URL}/committees`;
-
-export interface Committee {
-  name_fi: string;
-  name_en: string;
-}
-
-export interface Role {
-  name_fi: string;
-  name_en: string;
-  description_fi: string;
-  description_en: string;
-  committee: Committee;
-  is_board: boolean;
-}
-
-export interface Contact {
-  first_name: string;
-  last_name: string;
-  phone_number: number;
-  email: string;
-  image: string;
-}
-
-export interface Occupation {
-  role: Role;
-  start_date: string;
-  end_date: string;
-  officials: Contact[];
-}
-
-export async function getContacts(year: number = new Date().getFullYear()): Promise<Occupation[]> {
-  try {
-    const resp = await axios.get(`${url}?year=${year}`);
-    return resp.data["results"];
-  } catch (err) {
-    console.error(err);
-    throw err;
-  }
-}
-
-export async function getCommittees(): Promise<Committee[]> {
-  try {
-    const resp = await axios.get(`${committeeUrl}`);
-    return resp.data["results"];
-  } catch (err) {
-    console.error(err);
-    throw err;
-  }
-}
diff --git a/src/pages/yhteystiedot.tsx b/src/pages/yhteystiedot.tsx
index 50f7ee5..4d0bb59 100644
--- a/src/pages/yhteystiedot.tsx
+++ b/src/pages/yhteystiedot.tsx
@@ -1,86 +1,14 @@
 import React from "react";
 import { Helmet } from "react-helmet";
-import { StaticContext } from "@server/StaticContext";
-import { getContacts, Occupation, Committee, getCommittees } from "@models/Contacts";
 import ContactsPageView from "@views/ContactsPage/ContactsPageView";
 
-interface ContactsPageProps {
-  staticContext: StaticContext;
-}
+const ContactsPage: React.FC = () => (
+  <>
+    <Helmet>
+      <link rel="canonical" href="https://sik.ayy.fi/INSERT_PATH_HERE!" />
+    </Helmet>
+    <ContactsPageView />
+  </>
+);
 
-interface ContactsPageState {
-  contacts: Occupation[];
-  committees: Committee[];
-}
-
-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 Occupation[];
-        const committees = staticContext.resolutions.getCommittees as Committee[];
-        this.state = {
-          contacts,
-          committees,
-        };
-      } else {
-        this.state = {
-          contacts: [],
-          committees: [],
-        };
-        const promiseContacts = this.fetchContacts();
-        const promiseCommittees = this.fetchCommittees();
-        staticContext.promises.getContacts = promiseContacts;
-        staticContext.promises.getCommittees = promiseCommittees;
-      }
-    } else {
-      this.state = {
-        contacts: [],
-        committees: [],
-      };
-      this.fetchContacts();
-      this.fetchCommittees();
-    }
-  }
-
-  fetchContacts = () => {
-    const getContactsPromise = getContacts();
-    getContactsPromise.then(contacts => {
-      this.setState({
-        contacts,
-      });
-    });
-    return getContactsPromise;
-  }
-
-  fetchCommittees = () => {
-    const getCommitteesPromise = getCommittees();
-    getCommitteesPromise.then(committees => {
-      this.setState({
-        committees,
-      });
-    });
-    return getCommitteesPromise;
-  }
-
-  render() {
-    const { contacts, committees } = this.state;
-    return (
-      <>
-        <Helmet>
-          <link rel="canonical" href="https://sik.ayy.fi/INSERT_PATH_HERE!" />
-        </Helmet>
-        <ContactsPageView contacts={contacts} committees={committees} />
-      </>
-    );
-  }
-}
-
-export default ContactsPage;
+export default ContactsPage;
\ No newline at end of file
diff --git a/src/views/ContactsPage/ContactsPageView.tsx b/src/views/ContactsPage/ContactsPageView.tsx
index 14b35da..fbbb019 100644
--- a/src/views/ContactsPage/ContactsPageView.tsx
+++ b/src/views/ContactsPage/ContactsPageView.tsx
@@ -1,15 +1,11 @@
 import React from "react";
 import styled from "styled-components";
-import { Occupation, Committee } from "@models/Contacts";
 import CommitteeContainer from "@components/CommitteeContainer";
 import { Divider, TextSection } from "@components/index";
 import { colors } from "@theme/colors";
 import { Link } from "@components/index";
-
-interface ContactsPageViewProps {
-  contacts: Occupation[];
-  committees: Committee[];
-}
+import BoardJson from "@assets/json/board.json";
+import HvtmkJson from "@assets/json/hvtmk.json";
 
 const BlueLink = styled(Link)`
   color: ${colors.blue1};
@@ -19,46 +15,56 @@ const BlueLink = styled(Link)`
   }
 `;
 
-
-class ContactsPageView extends React.Component<ContactsPageViewProps> {
-  render() {
-    const { contacts, committees } = this.props;
-    const board = contacts.filter(x => x.role.is_board);
-    return (
-      <>
-        <TextSection>
-          <p>
-            Asiaa olisi, mutta kehen ottaa yhteyttä?<br />
-            Tämä sivu yrittää valottaa sen oikean ihmisen puhelinnumeroa ja sähköpostiosoitetta.
-          </p>
-        </TextSection>
-
-        <TextSection>
-          <div>
-            <CommitteeContainer name_fi="Hallitus" name_en="Board" contacts={board} />
-            <p>
-              {"Hallitukseen saa yhteyden lähettämällä sähköpostia "}
-              <BlueLink to="mailto:sik-hallitus@list.ayy.fi">
-                sik-hallitus@list.ayy.fi
-              </BlueLink>
-            </p>
-          </div>
-        </TextSection>
-        <Divider />
-        {committees.map((committee, index) => {
-          // const order = committee.name_fi === "Toimikunnattomat" ? 1 : 0;
-          return (
-            <>
-              <TextSection key={index}>
-                <CommitteeContainer name_fi={committee.name_fi} name_en={committee.name_en} contacts={contacts.filter(x => x.role.committee.name_fi === committee.name_fi)} />
-              </TextSection>
-              <Divider />
-            </>
-          )
-        })}
-      </>
-    );
-  }
+export interface Committee {
+  name_fi: string;
+  name_en: string;
+  roles: Array<Role>;
 }
 
-export default ContactsPageView;
+export interface Role {
+  name_fi: string;
+  name_en: string;
+  representatives: Array<Representative>
+}
+
+export interface Representative {
+  name: string;
+  phone_number?: string;
+  email?: string;
+  image?: string;
+}
+
+const ContactsPageView: React.FC = () => (
+  <>
+    <TextSection>
+      <p>
+        Asiaa olisi, mutta kehen ottaa yhteyttä?<br />
+        Tämä sivu yrittää valottaa sen oikean ihmisen puhelinnumeroa ja sähköpostiosoitetta.
+      </p>
+    </TextSection>
+
+    <TextSection>
+      <div>
+        <CommitteeContainer committee={BoardJson} />
+        <p>
+          {"Hallitukseen saa yhteyden lähettämällä sähköpostia "}
+          <BlueLink to="mailto:sik-hallitus@list.ayy.fi">
+            sik-hallitus@list.ayy.fi
+          </BlueLink>
+        </p>
+      </div>
+    </TextSection>
+
+    <Divider />
+
+    <TextSection >
+      <div>
+        <CommitteeContainer committee={HvtmkJson} />
+      </div>
+    </TextSection>
+    <Divider />
+
+  </>
+)
+
+export default ContactsPageView;
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index f70ad2a..1012a57 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -3,6 +3,7 @@
     "outDir": "./dist/",
     "sourceMap": true,
     "noImplicitAny": false,
+    "resolveJsonModule": true,
     "esModuleInterop": true,
     "experimentalDecorators": true,
     // "emitDecoratorMetadata": true,
@@ -60,4 +61,4 @@
     "./src/**/*",
     "./types/**/*"
   ],
-}
+}
\ No newline at end of file

From 0cc0950c72ab4d8b00f842f39a5dadf80b7c3b42 Mon Sep 17 00:00:00 2001
From: ojakoo <ilari.ojakorpi@gmail.com>
Date: Sat, 9 Jan 2021 17:18:13 +0200
Subject: [PATCH 2/3] Added committee jsons

---
 src/assets/json/hvtmk.json                  | 77 ++++++++++++------
 src/assets/json/mtmk.json                   | 89 +++++++++++++++++++++
 src/assets/json/optmk.json                  | 31 +++++++
 src/assets/json/otmk.json                   | 63 +++++++++++++++
 src/assets/json/ptmk.json                   | 29 +++++++
 src/assets/json/sstmk.json                  | 70 ++++++++++++++++
 src/assets/json/ttmk.json                   | 35 ++++++++
 src/assets/json/utmk.json                   | 43 ++++++++++
 src/assets/json/ytmk.json                   | 33 ++++++++
 src/components/CommitteeContainer.tsx       |  4 +-
 src/components/ContactCard.tsx              | 40 ++++-----
 src/views/ContactsPage/ContactsPageView.tsx | 73 +++++++++++++++++
 12 files changed, 541 insertions(+), 46 deletions(-)
 create mode 100644 src/assets/json/mtmk.json
 create mode 100644 src/assets/json/optmk.json
 create mode 100644 src/assets/json/otmk.json
 create mode 100644 src/assets/json/ptmk.json
 create mode 100644 src/assets/json/sstmk.json
 create mode 100644 src/assets/json/ttmk.json
 create mode 100644 src/assets/json/utmk.json
 create mode 100644 src/assets/json/ytmk.json

diff --git a/src/assets/json/hvtmk.json b/src/assets/json/hvtmk.json
index fc0302c..421f9bd 100644
--- a/src/assets/json/hvtmk.json
+++ b/src/assets/json/hvtmk.json
@@ -1,30 +1,55 @@
 {
     "name_fi": "Hyvinvointitoimikunta",
-    "name_en": "Wellbeing comittee",
+    "name_en": "",
     "roles": [
-      {
-        "name_fi": "Puheenjohtaja",
-        "name_en": "Chairman",
-        "representatives": [
-          {
-            "name": "Oskari Ponkala",
-            "phone_number": null,
-            "email": null,
-            "image": null
-          }
-        ]
-      },
-      {
-        "name_fi": "Web-kisälli",
-        "name_en": "Web-journeyman",
-        "representatives": [
-          {
-            "name": "Ilari Ojakorpi",
-            "phone_number": null,
-            "email": null,
-            "image": null
-          }
-        ]
-      }
+        {
+            "name_fi": "Hyvinvointimestari",
+            "name_en": "",
+            "representatives": [
+                { "name": "Sauli Norja" }
+            ]
+        },
+        {
+            "name_fi": "Kulttuurivastaava",
+            "name_en": "",
+            "representatives": [
+                { "name": "Juha Anttila" },
+                { "name": "Aino Suomi" },
+                { "name": "Nestori Ylönjoki" }
+            ]
+        },
+        {
+            "name_fi": "Liikuntavastaava",
+            "name_en": "",
+            "representatives": [
+                { "name": "Elmeri Pälikkö" },
+                { "name": "Joel Wickström" }
+            ]
+        },
+        {
+            "name_fi": "Kiltahuonevastaava",
+            "name_en": "",
+            "representatives": [
+                { "name": "Ilari Ojakorpi" }
+            ]
+        },
+        {
+            "name_fi": "Kiltapäiväkerhovastaava",
+            "name_en": "",
+            "representatives": [
+                { "name": "Samuel Laine" },
+                { "name": "Aleksanteri Vesala" }
+            ]
+        },
+        {
+            "name_fi": "Retkivastaava",
+            "name_en": "",
+            "representatives": [
+                { "name": "Jarno Mustonen" },
+                { "name": "Suvi Karanta" },
+                { "name": "Jesse Räisänen" },
+                { "name": "Mikko Suhonen" }
+            ]
+        }
     ]
-  }
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/src/assets/json/mtmk.json b/src/assets/json/mtmk.json
new file mode 100644
index 0000000..6261ca0
--- /dev/null
+++ b/src/assets/json/mtmk.json
@@ -0,0 +1,89 @@
+{
+    "name_fi": "Mediatoimikunta",
+    "name_en": "",
+    "roles": [
+        {
+            "name_fi": "Puheenjohtaja",
+            "name_en": "",
+            "representatives": [
+                {
+                    "name": "Salla Lyytikäinen",
+                    "phone_number": null,
+                    "email": null,
+                    "image": null
+                }
+            ]
+        },
+        {
+            "name_fi": "Päätoimittaja",
+            "name_en": "",
+            "representatives": [
+                { "name": "Sasu Salasti" }
+            ]
+        },
+        {
+            "name_fi": "Toimittaja",
+            "name_en": "",
+            "representatives": [
+                { "name": "Tuukka Syrjänen" },
+                { "name": "Ilmari Kasvi" },
+                { "name": "Elias Hirvonen" },
+                { "name": "Miika Koskela" },
+                { "name": "Taneli Myllykangas" },
+                { "name": "Emmaleena Ahonen" },
+                { "name": "Ville-Pekka Laakkonen" },
+                { "name": "Sofia Öhman" },
+                { "name": "Nestori Yrjönkoski" },
+                { "name": "Jami Hyytiäinen" },
+                { "name": "Aleksanteri Vesala" }
+            ]
+        },
+        {
+            "name_fi": "Toimittaja & Valokuvaaja",
+            "name_en": "",
+            "representatives": [
+                { "name": "Kiia-Einola" }
+            ]
+        },
+        {
+            "name_fi": "Taittaja",
+            "name_en": "",
+            "representatives": [
+                { "name": "Aino Suomi" },
+                { "name": "Olli Komulainen" },
+                { "name": "Emilia Kortelainen" }
+            ]
+        },
+        {
+            "name_fi": "Taittaja & Valokuvaaja",
+            "name_en": "",
+            "representatives": [
+                { "name": "Jonna Tammikivi" }
+            ]
+        },
+        {
+            "name_fi": "Valokuvaaja",
+            "name_en": "",
+            "representatives": [
+                { "name": "Suvi Karanta" },
+                { "name": "Mikko Haaparanta" },
+                { "name": "Johannes Viirimäki" }
+            ]
+        },
+        {
+            "name_fi": "Valokuvaaja & Graafikko",
+            "name_en": "",
+            "representatives": [
+                { "name": "Kalle Petäjäaho" },
+                { "name": "Maria Pöllä" }
+            ]
+        },
+        {
+            "name_fi": "Videokuvaaja",
+            "name_en": "",
+            "representatives": [
+                { "name": "Aaro Rasilainen" }
+            ]
+        }
+    ]
+}
\ No newline at end of file
diff --git a/src/assets/json/optmk.json b/src/assets/json/optmk.json
new file mode 100644
index 0000000..91fdb26
--- /dev/null
+++ b/src/assets/json/optmk.json
@@ -0,0 +1,31 @@
+{
+    "name_fi": "Opintotoimikunta",
+    "name_en": "",
+    "roles": [
+        {
+            "name_fi": "Opintomestari",
+            "name_en": "",
+            "representatives": [
+                { "name": "Simo Hakanummi" }
+            ]
+        },
+        {
+            "name_fi": "Opintovastaava",
+            "name_en": "",
+            "representatives": [
+                { "name": "Miina-Maija Simonen" },
+                { "name": "Tomi Valkonen" },
+                { "name": "Leo Lahti" },
+                { "name": "Ville-Pekka Laakkonen" },
+                { "name": "Samu Nyman" } 
+            ]
+        },
+        {
+            "name_fi": "Abimarkkinointi Vastaava",
+            "name_en": "",
+            "representatives": [
+                { "name": "Ilkka Huttu" }
+            ]
+        }
+    ]
+}
\ No newline at end of file
diff --git a/src/assets/json/otmk.json b/src/assets/json/otmk.json
new file mode 100644
index 0000000..99495f7
--- /dev/null
+++ b/src/assets/json/otmk.json
@@ -0,0 +1,63 @@
+{
+    "name_fi": "Ohjelmatoimikunta",
+    "name_en": "",
+    "roles": [
+        {
+            "name_fi": "Hovimestari",
+            "name_en": "",
+            "representatives": [
+                { "name": "Eveliina Ahonen" }
+            ]
+        },
+        {
+            "name_fi": "Hovineuvos",
+            "name_en": "",
+            "representatives": [
+                { "name": "Melissa Dönmez" }
+            ]
+        },
+        {
+            "name_fi": "Emäntä",
+            "name_en": "",
+            "representatives": [
+                { "name": "Oona Karjalainen" },
+                { "name": "Emilia Kortemäki" },
+                { "name": "Venla Vastamäki" }
+            ]
+        },
+        {
+            "name_fi": "Isäntä",
+            "name_en": "",
+            "representatives": [
+                { "name": "Henry Jaakkola" },
+                { "name": "Sakke Kangas" },
+                { "name": "Otto Torkkeli" },
+                { "name": "Tommi Oinen" },
+                { "name": "Eero Ketonen" }
+            ]
+        },
+        {
+            "name_fi": "Lukkari",
+            "name_en": "",
+            "representatives": [
+                { "name": "Tuomo Leino" },
+                { "name": "Hami Hyytinen" },
+                { "name": "Tuomas Pajunpää" },
+                { "name": "Samuel Laine" },
+                { "name": "Toni Miilunpalo" }
+            ]
+        },
+        {
+            "name_fi": "Lukkarikisällit",
+            "name_en": "",
+            "representatives": [
+                { "name": "Jesse Räisänen" },
+                { "name": "Eino Laakso" },
+                { "name": "Sakari Harjunpää" },
+                { "name": "Niilo Ojala" },
+                { "name": "Ilkka Huttu" },
+                { "name": "Akseli Järvinen" }
+            ]
+        }
+    ]
+}
\ No newline at end of file
diff --git a/src/assets/json/ptmk.json b/src/assets/json/ptmk.json
new file mode 100644
index 0000000..7c531c9
--- /dev/null
+++ b/src/assets/json/ptmk.json
@@ -0,0 +1,29 @@
+{
+    "name_fi": "Pajatoimikunta",
+    "name_en": "",
+    "roles": [
+        {
+            "name_fi": "Pajavastaava",
+            "name_en": "",
+            "representatives": [
+                { "name": "Karl Lipping" }
+            ]
+        },
+        {
+            "name_fi": "Pajakisälli",
+            "name_en": "",
+            "representatives": [
+                { "name": "Tommi Sytelä" },
+                { "name": "Eerikki Eskola" },
+                { "name": "Arkadii Kolchin" },
+                { "name": "Samu Nyman" },
+                { "name": "Konsta Langi" },
+                { "name": "Johannes Viirimäki" },
+                { "name": "Justus Ojala" },
+                { "name": "Ville Tujunen" },
+                { "name": "Antti Tarkka" },
+                { "name": "Pyry Vaara" }
+            ]
+        }
+    ]
+}
\ No newline at end of file
diff --git a/src/assets/json/sstmk.json b/src/assets/json/sstmk.json
new file mode 100644
index 0000000..51581a1
--- /dev/null
+++ b/src/assets/json/sstmk.json
@@ -0,0 +1,70 @@
+{
+    "name_fi": "SIK100-toimikunta",
+    "name_en": "",
+    "roles": [
+        {
+            "name_fi": "Puheenjohtaja",
+            "name_en": "",
+            "representatives": [
+                { "name": "Erna Virtanen" }
+            ]
+        },
+        {
+            "name_fi": "Webivastaava",
+            "name_en": "",
+            "representatives": [
+                { "name": "Jaakko Koskela" }
+            ]
+        },
+        {
+            "name_fi": "Markkinointivastaava",
+            "name_en": "",
+            "representatives": [
+                { "name": "Sasu Salasti" }
+            ]
+        },
+        {
+            "name_fi": "Yritysvastaava",
+            "name_en": "",
+            "representatives": [
+                { "name": "Juuli Leppänen" }
+            ]
+        },
+        {
+            "name_fi": "Seminaarivastaava",
+            "name_en": "",
+            "representatives": [
+                { "name": "Sini Huhtinen" }
+            ]
+        },
+        {
+            "name_fi": "Kevätkarnevaalimajuri",
+            "name_en": "",
+            "representatives": [
+                { "name": "Olli Komulainen" }
+            ]
+        },
+        {
+            "name_fi": "PoTa100-pääjuhlatirehtööri",
+            "name_en": "",
+            "representatives": [
+                { "name": "Emmaleena Ahonen" },
+                { "name": "Jonna Tammikivi" }
+            ]
+        },
+        {
+            "name_fi": "PoTa100-jatkokuvernööri",
+            "name_en": "",
+            "representatives": [
+                { "name": "Mikael Liimatainen" }
+            ]
+        },
+        {
+            "name_fi": "PoTa100-sillistirehtööri",
+            "name_en": "",
+            "representatives": [
+                { "name": "Tuomo Leino" }
+            ]
+        }
+    ]
+}
\ No newline at end of file
diff --git a/src/assets/json/ttmk.json b/src/assets/json/ttmk.json
new file mode 100644
index 0000000..c87b0f0
--- /dev/null
+++ b/src/assets/json/ttmk.json
@@ -0,0 +1,35 @@
+{
+    "name_fi": "Teknologiatoimikunta",
+    "name_en": "",
+    "roles": [
+        {
+            "name_fi": "Teknologiamestari",
+            "name_en": "",
+            "representatives": [
+                { "name": "Oskari Ponkala" }
+            ]
+        },
+        {
+            "name_fi": "Tekniikkavastaava",
+            "name_en": "",
+            "representatives": [
+                { "name": "Antti Mäki" }
+            ]
+        },
+        {
+            "name_fi": "Web-Kisälli",
+            "name_en": "",
+            "representatives": [
+                { "name": "Ilari Ojakorpi" },
+                { "name": "Leo Lahti" },
+                { "name": "Jyri Korhonen" },
+                { "name": "Tuukka Syrjänen" },
+                { "name": "Emmaleena Ahonen" },
+                { "name": "Mikko Suhonen" },
+                { "name": "Jaakko Koskela" },
+                { "name": "Justus Ojala" }
+            ]
+        }
+    ]
+}
+        
\ No newline at end of file
diff --git a/src/assets/json/utmk.json b/src/assets/json/utmk.json
new file mode 100644
index 0000000..1051174
--- /dev/null
+++ b/src/assets/json/utmk.json
@@ -0,0 +1,43 @@
+{
+    "name_fi": "Ulkotoimikunta",
+    "name_en": "",
+    "roles": [
+        {
+            "name_fi": "Ulkomestari",
+            "name_en": "",
+            "representatives": [
+                { "name": "Oliver Hiekkamies" }
+            ]
+        },
+        {
+            "name_fi": "Kv-ISOvastaava",
+            "name_en": "",
+            "representatives": [
+                { "name": "Elias Hirvonen" }
+            ]
+        },
+        {
+            "name_fi": "International Helper",
+            "name_en": "",
+            "representatives": [
+                { "name": "Ville-Pekka Laakkonen" }
+            ]
+        },
+        {
+            "name_fi": "Ulkosuhdevastaava",
+            "name_en": "",
+            "representatives": [
+                { "name": "Leo Muller" },
+                { "name": "Eino Tyrvänen" },
+                { "name": "Pekka Aho" }
+            ]
+        },
+        {
+            "name_fi": "Ulkowanhus",
+            "name_en": "",
+            "representatives": [
+                { "name": "Jyri Korhonen" }
+            ]
+        }
+    ]
+}
\ No newline at end of file
diff --git a/src/assets/json/ytmk.json b/src/assets/json/ytmk.json
new file mode 100644
index 0000000..e173861
--- /dev/null
+++ b/src/assets/json/ytmk.json
@@ -0,0 +1,33 @@
+{
+    "name_fi": "Yrityssuhdetoimikunta",
+    "name_en": "",
+    "roles": [
+        {
+            "name_fi": "Yrityssuhdemestari",
+            "name_en": "",
+            "representatives": [
+                { "name": "Otto Julkunen" }
+            ]
+        },
+        {
+            "name_fi": "Excursiopäävastaava",
+            "name_en": "",
+            "representatives": [
+                { "name": "Henry Gustafsson" }
+            ]
+        },
+        {
+            "name_fi": "Yrityssuhdevastaava",
+            "name_en": "",
+            "representatives": [
+                { "name": "Ilkka Huttu" },
+                { "name": "Arkadii Kolchin" },
+                { "name": "Oskari Luukkonen" },
+                { "name": "Niilo Ojala" },
+                { "name": "Emma Reinikainen" },
+                { "name": "Melina Sundell" },
+                { "name": "Elma Tuohimetsä" }
+            ]
+        }
+    ]
+}
\ No newline at end of file
diff --git a/src/components/CommitteeContainer.tsx b/src/components/CommitteeContainer.tsx
index 9ff09c2..20c6421 100644
--- a/src/components/CommitteeContainer.tsx
+++ b/src/components/CommitteeContainer.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 import ContactCard from "./ContactCard";
+import blank_profile from "@assets/img/blank_profile.png";
 import { Committee } from "@views/ContactsPage/ContactsPageView"
 import { colors } from "@theme/colors";
 
@@ -44,7 +45,8 @@ const CommitteeContainer: React.FC<CommitteeContainerProps> = ({ committee }) =>
             name={representative.name}
             phone={representative.phone_number}
             email={representative.email}
-            image={representative.image}
+            //conditional image for dev
+            image={ !(committee.name_en === "Board") ? representative.image : blank_profile}
             role_fi={role.name_fi}
             role_en={role.name_en}
           />
diff --git a/src/components/ContactCard.tsx b/src/components/ContactCard.tsx
index 8a86ed8..89b3978 100644
--- a/src/components/ContactCard.tsx
+++ b/src/components/ContactCard.tsx
@@ -1,6 +1,5 @@
 import React from "react";
 import styled from "styled-components";
-import blank_profile from "@assets/img/blank_profile.png";
 import { colors } from "@theme/colors";
 
 const Card = styled.article`
@@ -9,8 +8,7 @@ const Card = styled.article`
   flex-flow: row nowrap;
   padding: 0.5rem;
   color: ${colors.darkBlue};
-  width: 15rem;
-  min-width: 300px;
+  width: 18rem;
 `;
 
 const ImageContainer = styled.div`
@@ -34,14 +32,16 @@ const Info = styled.div`
   flex-direction: column;
   align-items: flex-start;
   padding: 0.25rem;
-  font-size: 0.9rem;
   color: ${colors.darkBlue};
-`;
 
-const Name = styled.text`
-  font-size: 1.2rem;
-  font-weight: 600;
-`
+  & > p {
+    font-size: 0.8rem;
+  }
+
+  & > h4 {
+    font-size: 0.83rem;
+  }
+`;
 
 interface ContactCardProps {
   name: string;
@@ -55,17 +55,19 @@ interface ContactCardProps {
 const ContactCard: React.FC<ContactCardProps> = ({ name, phone, email, image, role_fi, role_en }) => {
   return(
     <Card>
-      <ImageContainer>
-        <img
-          src={image || blank_profile}
-          alt={name}
-        />
-      </ImageContainer>
+      {image ? 
+        <ImageContainer>
+          <img
+            src={image}
+            alt={name}
+          />
+        </ImageContainer> : null
+      }
       <Info>
-        <Name>{name}</Name>
-        <text>{role_fi || role_en}</text>
-        {phone ? <text>{phone}</text> : null}
-        {email ? <text>{email}</text> : null}
+        <h4>{name}</h4>
+        <p>{role_fi || role_en}</p>
+        {phone ? <p>{phone}</p> : null}
+        {email ? <p>{email}</p> : null}
       </Info>
     </Card> 
   )
diff --git a/src/views/ContactsPage/ContactsPageView.tsx b/src/views/ContactsPage/ContactsPageView.tsx
index fbbb019..8c2f3af 100644
--- a/src/views/ContactsPage/ContactsPageView.tsx
+++ b/src/views/ContactsPage/ContactsPageView.tsx
@@ -4,8 +4,17 @@ import CommitteeContainer from "@components/CommitteeContainer";
 import { Divider, TextSection } from "@components/index";
 import { colors } from "@theme/colors";
 import { Link } from "@components/index";
+
 import BoardJson from "@assets/json/board.json";
 import HvtmkJson from "@assets/json/hvtmk.json";
+import MtmkJson from "@assets/json/mtmk.json";
+import OptmkJson from "@assets/json/optmk.json";
+import OtmkJson from "@assets/json/otmk.json";
+import PtmkJson from "@assets/json/ptmk.json";
+import SstmkJson from "@assets/json/sstmk.json";
+import TtmkJson from "@assets/json/ttmk.json";
+import UtmkJson from "@assets/json/ttmk.json";
+import YtmkJson from "@assets/json/ytmk.json";
 
 const BlueLink = styled(Link)`
   color: ${colors.blue1};
@@ -62,8 +71,72 @@ const ContactsPageView: React.FC = () => (
         <CommitteeContainer committee={HvtmkJson} />
       </div>
     </TextSection>
+    
     <Divider />
 
+    <TextSection >
+      <div>
+        <CommitteeContainer committee={MtmkJson} />
+      </div>
+    </TextSection>
+    
+    <Divider />
+
+    <TextSection >
+      <div>
+        <CommitteeContainer committee={OptmkJson} />
+      </div>
+    </TextSection>
+    
+    <Divider />
+
+    <TextSection >
+      <div>
+        <CommitteeContainer committee={OtmkJson} />
+      </div>
+    </TextSection>
+
+    <Divider />
+
+    <TextSection >
+      <div>
+        <CommitteeContainer committee={PtmkJson} />
+      </div>
+    </TextSection>
+
+    <Divider />
+
+    <TextSection >
+      <div>
+        <CommitteeContainer committee={SstmkJson} />
+      </div>
+    </TextSection>
+
+    <Divider />
+
+    <TextSection >
+      <div>
+        <CommitteeContainer committee={TtmkJson} />
+      </div>
+    </TextSection>
+
+    <Divider />
+
+    <TextSection >
+      <div>
+        <CommitteeContainer committee={UtmkJson} />
+      </div>
+    </TextSection>
+
+    <Divider />
+
+    <TextSection >
+      <div>
+        <CommitteeContainer committee={YtmkJson} />
+      </div>
+    </TextSection>
+
+    <Divider />
   </>
 )
 

From cda77bca0f40be6aa7425bacd88d540e3a84c693 Mon Sep 17 00:00:00 2001
From: ojakoo <ilari.ojakorpi@gmail.com>
Date: Mon, 11 Jan 2021 11:49:39 +0200
Subject: [PATCH 3/3] minor fixes

---
 src/components/ContactCard.tsx              | 14 ++++++++------
 src/views/ContactsPage/ContactsPageView.tsx |  2 +-
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/components/ContactCard.tsx b/src/components/ContactCard.tsx
index 89b3978..8f7833b 100644
--- a/src/components/ContactCard.tsx
+++ b/src/components/ContactCard.tsx
@@ -8,7 +8,7 @@ const Card = styled.article`
   flex-flow: row nowrap;
   padding: 0.5rem;
   color: ${colors.darkBlue};
-  width: 18rem;
+  width: 19rem;
 `;
 
 const ImageContainer = styled.div`
@@ -17,8 +17,8 @@ const ImageContainer = styled.div`
   flex-shrink: 0;
   justify-content: center;
   align-items: center;
-  height: 6rem;
-  width: 6rem;
+  height: 5rem;
+  width: 5rem;
 
   & > img {
     width: 100%;
@@ -36,10 +36,12 @@ const Info = styled.div`
 
   & > p {
     font-size: 0.8rem;
+    margin: 0;
   }
 
-  & > h4 {
-    font-size: 0.83rem;
+  & > h1 {
+    font-size: 0.9rem;
+    font-weight: 500;
   }
 `;
 
@@ -64,7 +66,7 @@ const ContactCard: React.FC<ContactCardProps> = ({ name, phone, email, image, ro
         </ImageContainer> : null
       }
       <Info>
-        <h4>{name}</h4>
+        <h1>{name}</h1>
         <p>{role_fi || role_en}</p>
         {phone ? <p>{phone}</p> : null}
         {email ? <p>{email}</p> : null}
diff --git a/src/views/ContactsPage/ContactsPageView.tsx b/src/views/ContactsPage/ContactsPageView.tsx
index 8c2f3af..e285789 100644
--- a/src/views/ContactsPage/ContactsPageView.tsx
+++ b/src/views/ContactsPage/ContactsPageView.tsx
@@ -13,7 +13,7 @@ import OtmkJson from "@assets/json/otmk.json";
 import PtmkJson from "@assets/json/ptmk.json";
 import SstmkJson from "@assets/json/sstmk.json";
 import TtmkJson from "@assets/json/ttmk.json";
-import UtmkJson from "@assets/json/ttmk.json";
+import UtmkJson from "@assets/json/utmk.json";
 import YtmkJson from "@assets/json/ytmk.json";
 
 const BlueLink = styled(Link)`