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 = ({ name_fi, name_en, contacts }) => ( +const CommitteeContainer: React.FC = ({ committee }) => (

- {name_fi} -

-

- {name_en} + {committee.name_fi||committee.name_en}

- {contacts.map(occupation => ( - occupation.officials.map(official => ( + {committee.roles.map(role => ( + role.representatives.map(representative => ( )) ))} @@ -58,4 +54,4 @@ const CommitteeContainer: React.FC = ({ name_fi, name_e ); -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 = ({ first_name, last_name, phone, email, image, role }) => { - const fullName = `${first_name} ${last_name}`; +const ContactCard: React.FC = ({ name, phone, email, image, role_fi, role_en }) => { return( {fullName} -

{fullName}

-

{phone}

-

{email}

-

{role.name_fi}

-

{role.name_en}

+ {name} + {role_fi || role_en} + {phone ? {phone} : null} + {email ? {email} : null} - + ) } -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 { - 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 { - 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 = () => ( + <> + + + + + +); -interface ContactsPageState { - contacts: Occupation[]; - committees: Committee[]; -} - -class ContactsPage extends React.Component { - 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 ( - <> - - - - - - ); - } -} - -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 { - render() { - const { contacts, committees } = this.props; - const board = contacts.filter(x => x.role.is_board); - return ( - <> - -

- Asiaa olisi, mutta kehen ottaa yhteyttä?
- Tämä sivu yrittää valottaa sen oikean ihmisen puhelinnumeroa ja sähköpostiosoitetta. -

- - - -
- -

- {"Hallitukseen saa yhteyden lähettämällä sähköpostia "} - - sik-hallitus@list.ayy.fi - -

-
- - - {committees.map((committee, index) => { - // const order = committee.name_fi === "Toimikunnattomat" ? 1 : 0; - return ( - <> - - x.role.committee.name_fi === committee.name_fi)} /> - - - - ) - })} - - ); - } +export interface Committee { + name_fi: string; + name_en: string; + roles: Array; } -export default ContactsPageView; +export interface Role { + name_fi: string; + name_en: string; + representatives: Array +} + +export interface Representative { + name: string; + phone_number?: string; + email?: string; + image?: string; +} + +const ContactsPageView: React.FC = () => ( + <> + +

+ Asiaa olisi, mutta kehen ottaa yhteyttä?
+ Tämä sivu yrittää valottaa sen oikean ihmisen puhelinnumeroa ja sähköpostiosoitetta. +

+ + + +
+ +

+ {"Hallitukseen saa yhteyden lähettämällä sähköpostia "} + + sik-hallitus@list.ayy.fi + +

+
+ + + + + +
+ +
+ + + + +) + +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