Install playwright

This reverts commit cfc7dd11f5.

.gitignore

@@ -44,3 +44,6 @@ public/sitemap-0.xml
 
 # Sentry
 .sentryclirc
+/test-results/
+/playwright-report/
+/playwright/.cache/

.gitlab-ci.yml

@@ -86,9 +86,8 @@ publish:dev:
   only:
     - master
   script:
-    - docker info
-    - docker login -u gitlab-ci-token -p $CI_JOB_TOKEN $CI_REGISTRY
     - docker build . -t "$IMAGE_NAME":latest --build-arg SENTRY_AUTH_TOKEN="$SENTRY_AUTH_TOKEN" --build-arg NEXT_PUBLIC_DEPLOY_ENV=development --build-arg NEXT_PUBLIC_API_URL=https://api.dev.sahkoinsinoorikilta.fi/api --build-arg NEXT_PUBLIC_SITE_URL=https://dev.sahkoinsinoorikilta.fi
+    - docker login -u gitlab-ci-token -p $CI_JOB_TOKEN $CI_REGISTRY
     - docker push "$IMAGE_NAME":latest
 
 publish:prod:
@@ -99,9 +98,8 @@ publish:prod:
   only:
     - production
   script:
-    - docker info
-    - docker login -u gitlab-ci-token -p $CI_JOB_TOKEN $CI_REGISTRY
     - docker build . -t "$IMAGE_NAME":prod --build-arg SENTRY_AUTH_TOKEN="$SENTRY_AUTH_TOKEN"
+    - docker login -u gitlab-ci-token -p $CI_JOB_TOKEN $CI_REGISTRY
     - docker push "$IMAGE_NAME":prod
 
 deploy:dev:
@@ -120,11 +118,9 @@ deploy:dev:
     - echo "$DEV_TLSCACERT" > ~/.docker/ca.pem
     - echo "$DEV_TLSCERT" > ~/.docker/cert.pem
     - echo "$DEV_TLSKEY" > ~/.docker/key.pem
-    - docker login -u gitlab-ci-token -p "$CI_BUILD_TOKEN" "$CI_REGISTRY"
+    - docker login -u gitlab-ci-token -p $CI_JOB_TOKEN $CI_REGISTRY
   script:
     - docker stack deploy --with-registry-auth -c stack-compose-dev.yml "$SERVICE_NAME"
-  after_script:
-    - docker logout "$CI_REGISTRY"
 
 deploy:prod:
   stage: deploy
@@ -142,8 +138,6 @@ deploy:prod:
     - echo "$TLSCACERT" > ~/.docker/ca.pem
     - echo "$TLSCERT" > ~/.docker/cert.pem
     - echo "$TLSKEY" > ~/.docker/key.pem
-    - docker login -u gitlab-ci-token -p "$CI_BUILD_TOKEN" "$CI_REGISTRY"
+    - docker login -u gitlab-ci-token -p $CI_JOB_TOKEN $CI_REGISTRY
   script:
     - docker stack deploy --with-registry-auth -c stack-compose.yml "$SERVICE_NAME"
-  after_script:
-    - docker logout "$CI_REGISTRY"

README.md

@@ -5,14 +5,25 @@ This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next
 * **[React](https://facebook.github.io/react/)** (17.x)
 * **[Typescript](https://www.typescriptlang.org/)** (4.x)
 * **[Next.js](https://nextjs.org/)** (12.x)
-* [Testcafe](https://devexpress.github.io/testcafe/) - E2E Testing framework
+* **[Testcafe](https://devexpress.github.io/testcafe/)** - E2E Testing framework
 
 ## Installation
 
-1. Clone/download repo
-2. Install node v16 ([`nvm`](https://github.com/nvm-sh/nvm))
-3. `cp .env.local.example .env.local`
-4. `npm install`
+
+Install node v16 with **[Node Version Manager](https://github.com/nvm-sh/nvm#installing-and-updating)**.
+
+Set up your SSH key authentication in GitLab Profile Settings. Then clone the repository and checkout the master branch:
+```bash
+git clone git@gitlab.com:sahkoinsinoorikilta/vtmk/web2.0-frontend.git
+cd web2.0-frontend
+git checkout master
+```
+
+Create local env file for development and install dependencies:
+```bash
+cp .env.local.example .env.local
+npm install
+```
 
 ## Getting Started
 

next.config.js

@@ -16,7 +16,6 @@ const sentryWebpackPluginOptions = {
 };
 
 module.exports = withBundleAnalyzer(withSentryConfig({
-  target: "server",
   images: {
     domains: [
       "api.sahkoinsinoorikilta.fi",
@@ -24,4 +23,7 @@ module.exports = withBundleAnalyzer(withSentryConfig({
       "api.dev.sahkoinsinoorikilta.fi",
     ],
   },
+  sentry: {
+    hideSourceMaps: true, // Hide source maps, see: https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/#configure-source-maps
+  },
 }, sentryWebpackPluginOptions));

package.json

@@ -28,18 +28,19 @@
     "start-prod": "next start --port ${SERVER_PORT:=80}",
     "serve": "next start --port 3000",
     "test:unit": "jest --coverage",
-    "test": "npm run testcafe",
+    "test": "playwright test",
     "testcafe": "testcafe --config-file testcafe.json",
     "build-analyze": "ANALYZE=true npm run build",
     "prepare": "husky install"
   },
   "devDependencies": {
+    "@playwright/test": "^1.38.1",
     "@types/jest": "^27.4.1",
     "@types/js-cookie": "^3.0.1",
     "@types/node": "^16.11.36",
-    "@types/react": "^17.0.19",
-    "@types/react-csv": "^1.1.2",
-    "@types/react-dom": "^17.0.9",
+    "@types/react": "^18.0.15",
+    "@types/react-csv": "^1.1.3",
+    "@types/react-dom": "^18.0.6",
     "@types/shortid": "^0.0.29",
     "@types/styled-components": "^5.1.25",
     "@typescript-eslint/eslint-plugin": "^5.18.0",
@@ -48,11 +49,11 @@
     "eslint": "^8.13.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^17.0.0",
-    "eslint-config-next": "^12.1.4",
+    "eslint-config-next": "^13.1.6",
     "eslint-plugin-import": "^2.26.0",
     "husky": "^7.0.4",
     "jest": "^27.5.1",
-    "next-sitemap": "^2.5.19",
+    "next-sitemap": "^3.1.11",
     "npm-run-all": "^4.1.5",
     "postcss-jsx": "^0.36.4",
     "postcss-syntax": "^0.36.2",
@@ -64,31 +65,37 @@
     "typescript": "^4.6.3"
   },
   "dependencies": {
-    "@next/bundle-analyzer": "^12.1.4",
-    "@rjsf/core": "^4.1.1",
-    "@sentry/nextjs": "^6.19.6",
+    "@next/bundle-analyzer": "^12.2.3",
+    "@rjsf/core": "^4.2.0",
+    "@sentry/nextjs": "^7.34.0",
     "axios": "^0.26.1",
     "date-fns": "^2.28.0",
     "fast-deep-equal": "^3.1.3",
     "js-cookie": "^3.0.1",
     "lodash": "^4.17.21",
-    "next": "^12.1.4",
+    "next": "^13.1.6",
     "normalize.css": "^8.0.1",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
     "react-csv": "^2.2.2",
     "react-dnd": "15.0.2",
     "react-dnd-html5-backend": "15.0.2",
     "react-dnd-touch-backend": "15.0.2",
-    "react-dom": "^17.0.2",
-    "react-is": "^17.0.2",
-    "react-markdown": "^8.0.2",
+    "react-dom": "^18.2.0",
+    "react-is": "^18.2.0",
+    "react-markdown": "^8.0.3",
     "react-mde": "^11.5.0",
-    "react-toastify": "^8.2.0",
+    "react-toastify": "^9.0.7",
     "rehype-raw": "^6.1.1",
     "rehype-sanitize": "^5.0.1",
     "sharp": "^0.30.3",
     "shortid": "^2.2.16",
     "styled-components": "^5.3.5",
     "swr": "^1.2.2"
+  },
+  "overrides": {
+    "react-mde": {
+      "react": "$react",
+      "react-dom": "$react-dom"
+    }
   }
 }

playwright.config.ts

@@ -0,0 +1,104 @@
+import { defineConfig, devices } from "@playwright/test";
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: "./tests/playwright",
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: "html",
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: "https://dev.sahkoinsinoorikilta.fi",
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: "on-first-retry",
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: "event setup",
+      testMatch: /event-setup\.test\.ts/,
+    },
+    {
+      name: "test teardown",
+      testMatch: /event-teardown\.test\.ts/,
+    },
+    {
+      name: "tests",
+      testIgnore: /admin\//,
+      dependencies: ["event setup"],
+      teardown: "test teardown",
+      use: { ...devices["Desktop Chrome"] },
+    },
+    {
+      name: "admin setup",
+      testMatch: /admin\/setup\.test\.ts/,
+    },
+    {
+      name: "admin tests",
+      testDir: "/tests/playwright/admin",
+      testIgnore: /admin\/setup\.test\.ts/,
+      dependencies: ["admin setup"],
+      use: { ...devices["Desktop Chrome"] },
+    },
+
+    // {
+    //   name: "chromium",
+    //   use: { ...devices["Desktop Chrome"] },
+    // },
+
+    // {
+    //   name: "firefox",
+    //   use: { ...devices["Desktop Firefox"] },
+    // },
+
+    // {
+    //   name: "webkit",
+    //   use: { ...devices["Desktop Safari"] },
+    // },
+
+    // /* Test against mobile viewports. */
+    // {
+    //   name: "Mobile Chrome",
+    //   use: { ...devices["Pixel 5"] },
+    // },
+    // {
+    //   name: "Mobile Safari",
+    //   use: { ...devices["iPhone 12"] },
+    // },
+
+    // /* Test against branded browsers. */
+    // {
+    //   name: "Microsoft Edge",
+    //   use: { ...devices["Desktop Edge"], channel: "msedge" },
+    // },
+    // {
+    //   name: "Google Chrome",
+    //   use: { ...devices["Desktop Chrome"], channel: "chrome" },
+    // },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  // webServer: {
+  //   command: 'npm run start',
+  //   url: 'http://127.0.0.1:3000',
+  //   reuseExistingServer: !process.env.CI,
+  // },
+});

src/components/Accordion/Accordion.tsx

@@ -49,6 +49,7 @@ const Panel = styled.div<{ $visible?: boolean }>`
 
 interface AccordionProps {
   title: string;
+  children: React.ReactNode;
 }
 
 const Accordion: React.FC<AccordionProps> = ({ title, children }) => {

src/components/AddIcon.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import Image from "next/image";
+import Image from "next/legacy/image";
 
 const Icon = "/img/add-icon.png";
 

src/components/Button.tsx

@@ -6,6 +6,7 @@ interface ButtonProps {
   onClick: () => void;
   buttonStyle: "hero" | "filled" | "filter" | "bordered";
   selected?: boolean;
+  children: React.ReactNode;
 }
 
 const StyledButton = styled.button<{ $selected?: boolean }>`

src/components/Card.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import Image from "next/image";
+import Image from "next/legacy/image";
 import styled from "styled-components";
 import colors from "@theme/colors";
 import Link from "@components/Link";

src/components/ContactCard.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import Image from "next/image";
+import Image from "next/legacy/image";
 import styled from "styled-components";
 import colors from "@theme/colors";
 
@@ -18,8 +18,8 @@ const Row = styled.div`
 
 const ImageContainer = styled.div`
   position: relative;
-  height: 125px;
-  width: 125px;
+  height: 8rem;
+  width: 8rem;
   flex-shrink: 0;
 
   img {
@@ -35,13 +35,19 @@ const Info = styled.div`
   margin-left: -20px;
   min-width: 150px;
   padding: 2rem;
+  padding-top: 10px;
   color: ${colors.darkBlue};
 
   & > p {
-    font-size: 1.0rem;
+    font-size: 1rem;
     margin: 0;
   }
 
+  & > a {
+    font-weight: 400;
+    font-size: 0.9rem;
+  }
+
   & > h3 {
     font-size: 1.2rem;
     font-weight: 500;
@@ -76,7 +82,7 @@ const ContactCard: React.FC<ContactCardProps> = ({
         <h3>{name}</h3>
         <p>{role_fi || role_en}</p>
         {phone ? <p>{phone}</p> : null}
-        {email ? <p>{email}</p> : null}
+        {email ? <a href={`mailto:${email}`}>{email}</a> : null}
       </Info>
     </Row>
   </Card>

src/components/CrossFadeImages.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import Image, { ImageProps } from "next/image";
+import Image, { ImageProps } from "next/legacy/image";
 import styled, { keyframes, Keyframes } from "styled-components";
 
 interface CrossFadeImagesProps {

src/components/DropDownBox.tsx

@@ -6,6 +6,7 @@ interface DropDownBoxProps {
   onMouseEnter: () => void;
   onMouseLeave: () => void;
   visible: boolean;
+  children: React.ReactNode;
 }
 
 const Box = styled.div`

src/components/Feed/Events.tsx

@@ -28,6 +28,9 @@ const Events: React.FC<EventsProps> = ({ events, lang }) => {
   const pageLinkText = t("Kaikki tapahtumat");
   const pageLinkDesc = `${t("löydät tapahtumakalenterista")}\xa0›`;
 
+  const googleCalendarText = t("Lisää killan");
+  const googleCalendarDesc = `${t("Google-kalenteri")}\xa0›`;
+
   const locale = isFi ? "fi-FI" : "en-GB";
 
   const filteredEvents = events.map((e) => ({
@@ -62,6 +65,9 @@ const Events: React.FC<EventsProps> = ({ events, lang }) => {
         <PageLink to="/kilta/toiminta#tapahtumat" desc={pageLinkDesc}>
           {pageLinkText}
         </PageLink>
+        <PageLink to="https://calendar.google.com/calendar/u/0?cid=Y19mYjhhNWUwMjVjMjhkMTg5YTkzMWYyN2U5N2M4ODBmMGFhNTdmN2M1NDFlYzVhNjdlZDM4NzliYTVhNDEwNWI1QGdyb3VwLmNhbGVuZGFyLmdvb2dsZS5jb20" desc={googleCalendarDesc}>
+          {googleCalendarText}
+        </PageLink>
       </aside>
 
     </CardSection>

src/components/HeaderLogo.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import Image from "next/image";
+import Image from "next/legacy/image";
 import styled from "styled-components";
 import { Link } from "@components/index";
 

src/components/Hero/Hero.tsx

@@ -23,7 +23,11 @@ const Container = styled.div`
   }
 `;
 
-const Hero: React.FC = ({ children }) => (
+type HeroProps = {
+  children: React.ReactNode;
+};
+
+const Hero: React.FC<HeroProps> = ({ children }) => (
   <Container>
     {children}
   </Container>

src/components/Hero/HeroAside.tsx

@@ -35,6 +35,7 @@ type Colors = "darkBlue" | "lightTurquoise";
 
 interface HeroAsideProps {
   bgColor: Colors;
+  children: React.ReactNode;
 }
 
 // TODO: Color combos

src/components/Hero/HeroPrimarySection.tsx

@@ -6,6 +6,7 @@ import breakpoints from "@theme/breakpoints";
 interface HeroPrimarySectionProps {
   header: string;
   text?: string;
+  children?: React.ReactNode;
 }
 
 const Section = styled.section`

src/components/Hero/HeroSecondarySection.tsx

@@ -22,6 +22,7 @@ const Item = styled.div`
 
 interface HeroSecondarySectionItemProps {
   note?: string;
+  children: React.ReactNode;
 }
 
 export const HeroSecondarySectionItem: React.FC<HeroSecondarySectionItemProps> = ({ note, children }) => (
@@ -52,6 +53,7 @@ const Items = styled.div`
 
 interface HeroSecondarySectionProps {
   heading: string;
+  children: React.ReactNode;
 }
 
 const HeroSecondarySection: React.FC<HeroSecondarySectionProps> = ({ heading, children }) => (

src/components/InfoBox.tsx

@@ -6,7 +6,11 @@ const Box = styled.div`
   text-align: center;
 `;
 
-const InfoBox: React.FC = ({ children }) => (
+type InfoBoxProps = {
+  children?: React.ReactNode
+};
+
+const InfoBox: React.FC<InfoBoxProps> = ({ children }) => (
   <Box>
     {children}
   </Box>

src/components/Link.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import NextJSLink, { LinkProps } from "next/link";
 
 interface Props extends Omit<LinkProps, "href" | "as"> {
+  children?: React.ReactNode;
   to: string;
   template?: string;
   target?: string;
@@ -15,18 +16,27 @@ const Link: React.FC<Props> = ({
 }) => {
   if (template) {
     return (
-      <NextJSLink href={template} passHref={passHref} as={to} {...props}>
-        {/* eslint-disable-next-line jsx-a11y/anchor-has-content */}
-        <a onClick={onClick} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} {...props} />
-      </NextJSLink>
+      <NextJSLink
+        href={template}
+        passHref={passHref}
+        as={to}
+        {...props}
+        onClick={onClick}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+      />
     );
   }
   if (to.startsWith("/") || to.startsWith("#")) {
     return (
-      <NextJSLink href={to} passHref={passHref} {...props}>
-        {/* eslint-disable-next-line jsx-a11y/anchor-has-content */}
-        <a onClick={onClick} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} {...props} />
-      </NextJSLink>
+      <NextJSLink
+        href={to}
+        passHref={passHref}
+        {...props}
+        onClick={onClick}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+      />
     );
   }
 

src/components/NavbarChildLink.tsx

@@ -6,6 +6,7 @@ import { Link } from "@components/index";
 
 interface NavbarChildLinkProps {
   to: string;
+  children: React.ReactNode;
 }
 
 const StyledLink = styled(Link)`

src/components/NavbarDropdownLink.tsx

@@ -38,6 +38,7 @@ interface NavbarDropdownLinkProps {
   to: string;
   text: string;
   exploded?: boolean; // if exploded, show items directly underneath without a dropdown menu
+  children?: React.ReactNode;
 }
 
 const NavbarDropdownLink: React.FC<NavbarDropdownLinkProps> = ({

src/components/PageLink.tsx

@@ -6,6 +6,7 @@ import Link from "@components/Link";
 interface PageLinkProps {
   to: string;
   desc: string;
+  children: React.ReactNode;
 }
 
 const StyledPageLink = styled.div`

src/components/Select.tsx

@@ -0,0 +1,12 @@
+import styled from "styled-components";
+
+const StyledSelect = styled.select`
+  padding: 0.25rem;
+  margin: 0.5rem;
+`;
+
+const SelectWrapper = styled.div`
+  padding: 0.5rem;
+`;
+
+export { StyledSelect, SelectWrapper };

src/i18n/index.tsx

@@ -1,5 +1,5 @@
 import React, {
-  createContext, useContext, useReducer,
+  createContext, useContext, useMemo, useReducer,
 } from "react";
 import fi from "./locales/fi/common.json";
 import en from "./locales/en/common.json";
@@ -67,8 +67,7 @@ const Reducer = (state: Store, action: Lang) => {
 };
 
 const LocaleContext = createContext(initialState);
-
-const LocaleStore: React.FC = ({ children }) => {
+const LocaleStore: React.FC<{ children?: React.ReactNode }> = ({ children }) => {
   const [state, dispatch] = useReducer(Reducer, initialState);
   const changeLanguage = (action: Lang) => {
     dispatch(action);
@@ -78,8 +77,11 @@ const LocaleStore: React.FC = ({ children }) => {
       // Just ignore if fails to store value in user's browser
     }
   };
+
+  const localeValue = useMemo(() => ({ ...state, changeLanguage }), [state]);
+
   return (
-    <LocaleContext.Provider value={{ ...state, changeLanguage }}>
+    <LocaleContext.Provider value={localeValue}>
       {children}
     </LocaleContext.Provider>
   );

src/i18n/locales/en/common.json

@@ -15,6 +15,8 @@
   "ja hallitukset kuulumiset": "and what the board has been up to",
   "Kuvia tapahtumista": "Photos from events",
   "kuvagalleriassa": "in the photo gallery",
+  "Lisää killan": "Add guild's",
+  "Google-kalenteri": "Google-calendar",
 
   "Hakemaasi sivua":
   "Page",
@@ -48,9 +50,12 @@
   "Se aukeaa":
   "Signup opens at",
 
-  "Ilmoittauminen sulkeutuu":
+  "Ilmoittautuminen sulkeutuu":
   "Signup closes at",
 
+  "Ilmoittautuminen onnistui!":
+  "Signup successful!",
+
   "Ilmoittauminen on umpeutunut!":
   "Signup has been closed!",
 

src/pages/_document.tsx

@@ -1,12 +1,12 @@
 import React from "react";
 import Document, {
-  Html, Head, Main, NextScript, DocumentContext, DocumentInitialProps,
+  Html, Head, Main, NextScript, DocumentContext,
 } from "next/document";
 import { ServerStyleSheet } from "styled-components";
 import Favicons from "@components/Favicons";
 
-export default class MyDocument extends Document<{ styleTags: unknown }> {
-  static getInitialProps = async (ctx: DocumentContext): Promise<DocumentInitialProps> => {
+export default class MyDocument extends Document {
+  static async getInitialProps(ctx: DocumentContext) {
     const sheet = new ServerStyleSheet();
     const originalRenderPage = ctx.renderPage;
     try {
@@ -16,20 +16,15 @@ export default class MyDocument extends Document<{ styleTags: unknown }> {
       const initialProps = await Document.getInitialProps(ctx);
       return {
         ...initialProps,
-        styles: (
-          <>
-            {initialProps.styles}
-            {sheet.getStyleElement()}
-          </>
-        ),
+        styles: [initialProps.styles, sheet.getStyleElement()],
       };
     } finally {
       sheet.seal();
     }
-  };
+  }
 
   render(): JSX.Element {
-    const { styleTags } = this.props;
+    const { styles } = this.props;
     return (
       <Html lang="fi">
         <Head>
@@ -37,7 +32,7 @@ export default class MyDocument extends Document<{ styleTags: unknown }> {
           <Favicons />
         </Head>
         <body>
-          {styleTags}
+          {styles}
           <Main />
           <NextScript />
         </body>

src/pages/admin/events/index.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import { NextPage } from "next";
 import useSWR from "swr";
 import { formatRelative } from "date-fns";
@@ -10,6 +10,7 @@ import AddLink from "@components/AddLink";
 import Event from "@models/Event";
 import EventApi from "@api/eventApi";
 import { fetcher, APIPath, API } from "@api/backend";
+import { StyledSelect, SelectWrapper } from "@components/Select";
 
 const URL = "/admin/events";
 
@@ -37,42 +38,100 @@ const Renderer: React.FC = () => {
   const api: API = { path: APIPath.EVENTS, authenticated: true };
   const { data: events, error } = useSWR<Event[]>(api, fetcher);
 
+  const [sort, setSort] = useState<string>("start_time");
+  const [order, setOrder] = useState<string>("descending");
+  const [filter, setFilter] = useState<string>("all");
+
+  const eventSort = (a, b) => {
+    let result = 0;
+    if (order === "descending") {
+      if (["start_time", "end_time"].includes(sort)) {
+        result = new Date(b[sort]).getTime() - new Date(a[sort]).getTime();
+      } else if (sort === "id") {
+        result = b[sort] - a[sort];
+      }
+    } else if (order === "ascending") {
+      if (["start_time", "end_time"].includes(sort)) {
+        result = new Date(a[sort]).getTime() - new Date(b[sort]).getTime();
+      } else if (sort === "id") {
+        result = a[sort] - b[sort];
+      }
+    }
+    return result;
+  };
+
+  const dateFilter = (a) => {
+    let result = true;
+
+    if (filter === "upcoming") {
+      result = new Date(a.end_time).getTime() > Date.now();
+    } else if (filter === "past") {
+      result = new Date(a.end_time).getTime() < Date.now();
+    }
+    return result;
+  };
+
+  useEffect(() => {
+  }, [sort, order, filter, events]);
+
   if (error) {
     console.error(error);
     return (
       <div>
-        Failed loading events
+        Failed loading events.
       </div>
     );
   }
+
   if (!events?.length) {
     return <div>No events.</div>;
   }
 
   return (
-    <table>
-      <thead>
-        <tr>
-          <th>Title</th>
-          <th>Start time</th>
-          <th>End time</th>
-        </tr>
-      </thead>
-      <tbody>
-        {events.map((event) => (
-          <tr key={event.id}>
-            <td><Link to={`${URL}/${event.id}`}>{event.title_fi}</Link></td>
-            <td>{formatRelative(new Date(event.start_time), new Date())}</td>
-            <td>{formatRelative(new Date(event.end_time), new Date())}</td>
-            <td>
-              <StyledButton $colorOverride="red" buttonStyle="filled" onClick={() => confirmDelete(event)}>
-                Delete
-              </StyledButton>
-            </td>
+    <div>
+      <SelectWrapper>
+        Sort by:
+        <StyledSelect name="" onChange={(e) => setSort(e.target.value)}>
+          <option value="start_time">Start time</option>
+          <option value="end_time">End time</option>
+          <option value="id">Creation order</option>
+        </StyledSelect>
+        Order:
+        <StyledSelect name="" onChange={(e) => setOrder(e.target.value)}>
+          <option value="descending">Descending</option>
+          <option value="ascending">Ascending</option>
+        </StyledSelect>
+        Filter:
+        <StyledSelect name="" onChange={(e) => setFilter(e.target.value)}>
+          <option value="all">All</option>
+          <option value="upcoming">Upcoming</option>
+          <option value="past">Past</option>
+        </StyledSelect>
+      </SelectWrapper>
+      <table>
+        <thead>
+          <tr>
+            <th>Title</th>
+            <th>Start time</th>
+            <th>End time</th>
           </tr>
-        ))}
-      </tbody>
-    </table>
+        </thead>
+        <tbody>
+          {events.sort(eventSort).filter(dateFilter).map((event) => (
+            <tr key={event.id}>
+              <td><Link to={`${URL}/${event.id}`}>{event.title_fi}</Link></td>
+              <td>{formatRelative(new Date(event.start_time), new Date())}</td>
+              <td>{formatRelative(new Date(event.end_time), new Date())}</td>
+              <td>
+                <StyledButton $colorOverride="red" buttonStyle="filled" onClick={() => confirmDelete(event)}>
+                  Delete
+                </StyledButton>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
   );
 };
 

src/pages/admin/feed/index.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import { NextPage } from "next";
 import useSWR from "swr";
 import { formatRelative } from "date-fns";
@@ -10,6 +10,7 @@ import AddLink from "@components/AddLink";
 import Post from "@models/Feed";
 import PostApi from "@api/feedApi";
 import { fetcher, APIPath, API } from "@api/backend";
+import { SelectWrapper, StyledSelect } from "@components/Select";
 
 const URL = "/admin/feed";
 
@@ -37,6 +38,21 @@ const Renderer: React.FC = () => {
   const api: API = { path: APIPath.FEED, authenticated: true };
   const { data: feed, error } = useSWR<Post[]>(api, fetcher);
 
+  const [order, setOrder] = useState<string>("descending");
+
+  const feedSort = (a, b) => {
+    let result = 0;
+    if (order === "descending") {
+      result = new Date(b.publish_time).getTime() - new Date(a.publish_time).getTime();
+    } else if (order === "ascending") {
+      result = new Date(a.publish_time).getTime() - new Date(b.publish_time).getTime();
+    }
+    return result;
+  };
+
+  useEffect(() => {
+  }, [order, feed]);
+
   if (error) {
     console.error(error);
     return (
@@ -52,29 +68,38 @@ const Renderer: React.FC = () => {
   }
 
   return (
-    <table>
-      <thead>
-        <tr>
-          <th>Title</th>
-          <th>Description</th>
-          <th>Publish time</th>
-        </tr>
-      </thead>
-      <tbody>
-        {feed.map((post) => (
-          <tr key={post.id}>
-            <td><Link to={`${URL}/${post.id}`}>{post.title_fi}</Link></td>
-            <td>{post.description_fi}</td>
-            <td>{formatRelative(new Date(post.publish_time), new Date())}</td>
-            <td>
-              <StyledButton $colorOverride="red" buttonStyle="filled" onClick={() => confirmDelete(post)}>
-                Delete
-              </StyledButton>
-            </td>
+    <div>
+      <SelectWrapper>
+        Order:
+        <StyledSelect name="" onChange={(e) => setOrder(e.target.value)}>
+          <option value="descending">Descending</option>
+          <option value="ascending">Ascending</option>
+        </StyledSelect>
+      </SelectWrapper>
+      <table>
+        <thead>
+          <tr>
+            <th>Title</th>
+            <th>Description</th>
+            <th>Publish time</th>
           </tr>
-        ))}
-      </tbody>
-    </table>
+        </thead>
+        <tbody>
+          {feed.sort(feedSort).map((post) => (
+            <tr key={post.id}>
+              <td><Link to={`${URL}/${post.id}`}>{post.title_fi}</Link></td>
+              <td>{post.description_fi}</td>
+              <td>{formatRelative(new Date(post.publish_time), new Date())}</td>
+              <td>
+                <StyledButton $colorOverride="red" buttonStyle="filled" onClick={() => confirmDelete(post)}>
+                  Delete
+                </StyledButton>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
   );
 };
 

src/pages/admin/signups/index.tsx

@@ -1,5 +1,6 @@
-import React, { useEffect, useState } from "react";
+import React, { useState, useEffect } from "react";
 import { NextPage } from "next";
+import useSWR from "swr";
 import { formatRelative } from "date-fns";
 import { toast } from "react-toastify";
 import styled from "styled-components";
@@ -8,6 +9,8 @@ import { Button, Link } from "@components/index";
 import AddLink from "@components/AddLink";
 import { SignupForm } from "@models/Signup";
 import SignupApi from "@api/signupApi";
+import { fetcher, APIPath, API } from "@api/backend";
+import { SelectWrapper, StyledSelect } from "@components/Select";
 
 const URL = "/admin/signups";
 
@@ -31,57 +34,117 @@ const confirmDelete = async (signup: SignupForm) => {
   }
 };
 
-const renderData = (signupForms: SignupForm[]) => {
-  if (!signupForms || signupForms.length === 0) {
+const Renderer: React.FC = () => {
+  const api: API = { path: APIPath.SIGNUP_FORMS, authenticated: true };
+  const { data: signupForms, error } = useSWR<SignupForm[]>(api, fetcher);
+
+  const [sort, setSort] = useState<string>("start_time");
+  const [order, setOrder] = useState<string>("descending");
+  const [filter, setFilter] = useState<string>("all");
+
+  const signupFormSort = (a, b) => {
+    let result = 0;
+    if (order === "descending") {
+      if (["start_time", "end_time"].includes(sort)) {
+        result = new Date(b[sort]).getTime() - new Date(a[sort]).getTime();
+      } else if (sort === "id") {
+        result = b[sort] - a[sort];
+      }
+    } else if (order === "ascending") {
+      if (["start_time", "end_time"].includes(sort)) {
+        result = new Date(a[sort]).getTime() - new Date(b[sort]).getTime();
+      } else if (sort === "id") {
+        result = a[sort] - b[sort];
+      }
+    }
+    return result;
+  };
+
+  const dateFilter = (a) => {
+    let result = true;
+
+    if (filter === "upcoming") {
+      result = new Date(a.end_time).getTime() > Date.now();
+    } else if (filter === "past") {
+      result = new Date(a.end_time).getTime() < Date.now();
+    }
+    return result;
+  };
+
+  useEffect(() => {
+  }, [sort, order, filter, signupForms]);
+
+  if (error) {
+    console.error(error);
+    return (
+      <div>
+        Failed loading events.
+      </div>
+    );
+  }
+
+  if (!signupForms?.length) {
     return <div>No signup forms.</div>;
   }
 
   return (
-    <table>
-      <thead>
-        <tr>
-          <th>Title</th>
-          <th>Start time</th>
-          <th>End time</th>
-          <th>Sign-ups</th>
-          <th>Send email</th>
-        </tr>
-      </thead>
-      <tbody>
-        {signupForms.map((signupForm) => (
-          <tr key={signupForm.id}>
-            <td><Link to={`${URL}/${signupForm.id}`}>{signupForm.title_fi}</Link></td>
-            <td>{formatRelative(new Date(signupForm.start_time), new Date())}</td>
-            <td>{formatRelative(new Date(signupForm.end_time), new Date())}</td>
-            <td><Link to={`${URL}/${signupForm.id}/list`}>View</Link></td>
-            <td><Link to={`${URL}/${signupForm.id}/email`}>Send</Link></td>
-            <td>
-              <StyledButton $colorOverride="red" buttonStyle="filled" onClick={() => confirmDelete(signupForm)}>
-                Delete
-              </StyledButton>
-            </td>
+    <div>
+      <SelectWrapper>
+        Sort by:
+        <StyledSelect name="" onChange={(e) => setSort(e.target.value)}>
+          <option value="start_time">Start time</option>
+          <option value="end_time">End time</option>
+          <option value="id">Creation order</option>
+        </StyledSelect>
+        Order:
+        <StyledSelect name="" onChange={(e) => setOrder(e.target.value)}>
+          <option value="descending">Descending</option>
+          <option value="ascending">Ascending</option>
+        </StyledSelect>
+        Filter:
+        <StyledSelect name="" onChange={(e) => setFilter(e.target.value)}>
+          <option value="all">All</option>
+          <option value="upcoming">Upcoming</option>
+          <option value="past">Past</option>
+        </StyledSelect>
+      </SelectWrapper>
+      <table>
+        <thead>
+          <tr>
+            <th>Title</th>
+            <th>Start time</th>
+            <th>End time</th>
+            <th>Sign-ups</th>
+            <th>Send email</th>
           </tr>
-        ))}
-      </tbody>
-    </table>
+        </thead>
+        <tbody>
+          {signupForms.sort(signupFormSort).filter(dateFilter).map((signupForm) => (
+            <tr key={signupForm.id}>
+              <td><Link to={`${URL}/${signupForm.id}`}>{signupForm.title_fi}</Link></td>
+              <td>{formatRelative(new Date(signupForm.start_time), new Date())}</td>
+              <td>{formatRelative(new Date(signupForm.end_time), new Date())}</td>
+              <td><Link to={`${URL}/${signupForm.id}/list`}>View</Link></td>
+              <td><Link to={`${URL}/${signupForm.id}/email`}>Send</Link></td>
+              <td>
+                <StyledButton $colorOverride="red" buttonStyle="filled" onClick={() => confirmDelete(signupForm)}>
+                  Delete
+                </StyledButton>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
   );
 };
 
-const AdminSignupPage: NextPage = () => {
-  const [forms, setForms] = useState<SignupForm[]>(null);
-
-  useEffect(() => {
-    SignupApi.getForms(true)
-      .then((res) => setForms(res));
-  }, []);
-
-  return (
-    <AdminListCommon>
-      <h1>Sign-up forms</h1>
-      <AddLink text="Create signup form" to={`${URL}/create`} data-e2e="create-signup" />
-      {renderData(forms)}
-    </AdminListCommon>
-  );
-};
+const AdminSignupPage: NextPage = () => (
+  <AdminListCommon>
+    <h1>Sign-up forms</h1>
+    <AddLink text="Create signup form" to={`${URL}/create`} data-e2e="create-signup" />
+    <Renderer />
+  </AdminListCommon>
+);
 
 export default AdminSignupPage;

src/pages/signup/[id].tsx

@@ -1,11 +1,11 @@
-import React from "react";
+import React, { useState } from "react";
 import { NextPage, GetStaticProps, GetStaticPaths } from "next";
 import Head from "next/head";
 import { useRouter } from "next/router";
 import { ISubmitEvent } from "@rjsf/core";
 import { toast } from "react-toastify";
 import axios from "axios";
-import useSWR, { mutate } from "swr";
+import useSWR from "swr";
 import { Signup, SignupForm } from "@models/Signup";
 import SignupApi from "@api/signupApi";
 import SignUpPageView from "@views/SignUpPage/SignUpPageView";
@@ -25,6 +25,8 @@ const SignUpPage: NextPage<InitialProps> = ({ initialForm }) => {
   const id = String(initialForm?.id ?? "");
   const URL = `${FORM_URL}${id}/`;
   const { data: signupForm, error } = useSWR<SignupForm>(URL, (url) => axios.get(url).then((res) => res.data), { fallbackData: initialForm });
+  const [isSending, setIsSending] = useState(false);
+  const [formSent, setFormSent] = useState(false);
 
   if (error) {
     console.error(error);
@@ -42,18 +44,26 @@ const SignUpPage: NextPage<InitialProps> = ({ initialForm }) => {
   }
 
   const onSubmit = async ({ formData }: ISubmitEvent<string>) => {
+    setIsSending(true);
+
     const payload: Signup = {
       signupForm_id: signupForm.id,
       answer: formData,
     };
 
+    if (isSending === true) {
+      toast.error("Sign-up form already submitted! No need to spam send. 😟");
+      return;
+    }
+
     try {
       await SignupApi.createSignup(payload);
       toast.success("Sign-up submitted successfully 😎");
-      mutate(URL);
+      setFormSent(true);
     } catch (err) {
       console.error(err);
       toast.error("Uh oh! Sign-up failed! 😟");
+      setIsSending(false);
     }
   };
 
@@ -68,6 +78,7 @@ const SignUpPage: NextPage<InitialProps> = ({ initialForm }) => {
           formData={{}}
           onChange={noop}
           onSubmit={onSubmit}
+          formSent={formSent}
         />
       </PageWrapper>
     </>

src/views/ActualPage/ActualPageView.tsx

@@ -111,13 +111,13 @@ const ActualPageView: React.FC<ActualPageViewProps> = ({ events, feed }) => (
         <div>
           <h6 id="elepaja">Rakenna kaikkea elektroniikkaan liittyvää</h6>
           <p>
-            Elepaja on sähköinsinöörikillan ylläpitämä elektroniikkapaja, jossa opiskelijat pääsevät soveltamaan koulussa oppimiaan taitojaan käytännön projekteissa.
+            SIK-PAJA on sähköinsinöörikillan ylläpitämä elektroniikkapaja, jossa opiskelijat pääsevät soveltamaan koulussa oppimiaan taitojaan käytännön projekteissa.
             Opiskelijat ovat aikojen saatossa rakentaneet pajalla mitä monimuotoisempia projekteja kuten ensimmäisiä ledivilkkujaan, teslakäämejä, robotteja ja radiolähettimiä.
             Jos elektroniikan rakentelu kiinnostaa tai tarvitset jonkun projektin kanssa apua niin tule ihmeessä käymään elepajalla.
-            Pajan varustukseen kuluu perustyökalut, piirilevyn syövytysvälineet, kolvit, komponentit, pylväsporakone sekä laaja valikoima mittauslaitteita.
-            Ota siis kola ja tule nauttimaan elepajan mukavasta ilmapiiristä Elepajan uusissa tiloissa kanditaattikeskuksessa ruokala alvarin alla.
+            Pajan varustukseen kuluu perustyökalut, kolvit, komponentit sekä laaja valikoima mittauslaitteita.
+            Tule tutustumaan toimintaamme Kandidaattikeskuksessa ruokala Alvarin alapuolella sijaitseviin tiloihimme.
             {" "}
-            <Link to="https://elepaja.fi/tg">Tästä</Link> pääset liittymään elepajan Telegram-ryhmään.
+            <Link to="https://t.me/sikpaja">Tästä</Link> pääset liittymään pajan Telegram-ryhmään.
           </p>
           <h6 id="urheilu">Urheilua ja lajikokeiluja</h6>
           <p>

src/views/ContactsPage/ContactsPageView.tsx

@@ -5,35 +5,35 @@ import colors from "@theme/colors";
 import ContactCard from "@components/ContactCard";
 
 import BoardJson from "./board.json";
-import HvtmkJson from "./hvtmk.json";
-import MtmkJson from "./mtmk.json";
-import NtmkJson from "./ntmk.json";
-import OptmkJson from "./optmk.json";
-import OtmkJson from "./otmk.json";
-import EPtmkJson from "./eptmk.json";
-import SstmkJson from "./sstmk.json";
-import ShntmkJson from "./shntmk.json";
-import ShtmkJson from "./shtmk.json";
-import TtmkJson from "./ttmk.json";
-import UtmkJson from "./utmk.json";
-import YtmkJson from "./ytmk.json";
-import Others from "./others.json";
+// import HvtmkJson from "./hvtmk.json";
+// import MtmkJson from "./mtmk.json";
+// import NtmkJson from "./ntmk.json";
+// import OptmkJson from "./optmk.json";
+// import OtmkJson from "./otmk.json";
+// import EPtmkJson from "./eptmk.json";
+// import SstmkJson from "./sstmk.json";
+// import ShntmkJson from "./shntmk.json";
+// import ShtmkJson from "./shtmk.json";
+// import TtmkJson from "./ttmk.json";
+// import UtmkJson from "./utmk.json";
+// import YtmkJson from "./ytmk.json";
+// import Others from "./others.json";
 
 const orderedCommittees = [
   BoardJson,
-  HvtmkJson,
-  MtmkJson,
-  NtmkJson,
-  OptmkJson,
-  OtmkJson,
-  EPtmkJson,
-  SstmkJson,
-  ShntmkJson,
-  ShtmkJson,
-  TtmkJson,
-  UtmkJson,
-  YtmkJson,
-  Others,
+  // HvtmkJson,
+  // MtmkJson,
+  // NtmkJson,
+  // OptmkJson,
+  // OtmkJson,
+  // EPtmkJson,
+  // SstmkJson,
+  // ShntmkJson,
+  // ShtmkJson,
+  // TtmkJson,
+  // UtmkJson,
+  // YtmkJson,
+  // Others,
 ];
 
 const blankProfile = "/img/blank_profile.png";
@@ -91,7 +91,6 @@ const Container = styled.div`
 `;
 
 const ContactContainer = styled.div`
-  margin-top: -13rem;
   overflow-x: hidden;
   @media (max-width: 950px) {
     margin-top: 0;
@@ -110,6 +109,7 @@ const TitleContainer = styled.div`
 
 const CommitteeContainer: React.FC<{
   committee: Committee;
+  children: React.ReactNode;
 }> = ({ committee, children }) => (
   <Container>
     <TitleContainer>
@@ -172,7 +172,6 @@ const ContactsPageView: React.FC = () => (
       </aside>
     </TextSection>
     <ContactContainer>
-
       {orderedCommittees.map((json) => (
         <React.Fragment key={json.slug}>
           {(json.slug !== "board") && (
@@ -187,17 +186,16 @@ const ContactsPageView: React.FC = () => (
                     <BlueLink to="mailto:hallitus@sahkoinsinoorikilta.fi">
                       hallitus@sahkoinsinoorikilta.fi
                     </BlueLink>
-                    {". Hallituksen yksittäisiin jäseniin saat yhteyden etunimi.sukunimi@sahkoinsinoorikilta.fi osoitteista."}
+                    . Hallituksen yksittäisiin jäseniin saat yhteyden etunimi.sukunimi@sahkoinsinoorikilta.fi osoitteista.
                   </p>
                   <p>
                     {"Hallitukselle voi myös lähettää palautetta täyttämällä "}
                     <BlueLink to="https://docs.google.com/forms/d/e/1FAIpQLSeD8Hm66uvwr7Xa2WGgOCfI2RS1NrZsmISf2QBKUcJf_stv8g/viewform?usp=sf_link">
                       palautelomakkeen
                     </BlueLink>
-                    {", lomakkeen vastauksia käydään läpi hallituksen kokouksissa."}
+                    , lomakkeen vastauksia käydään läpi hallituksen kokouksissa.
                   </p>
                 </div>
-                
               )}
             </CommitteeContainer>
           </TextSection>
@@ -207,5 +205,4 @@ const ContactsPageView: React.FC = () => (
   </>
 );
 
-
 export default ContactsPageView;

src/views/ContactsPage/board.json

@@ -8,10 +8,10 @@
       "name_en": "Chairman of the Board",
       "representatives": [
         {
-          "name": "Mikko Suhonen",
+          "name": "Otto Julkunen",
           "phone_number": null,
-          "email": null,
-          "image": "https://static.sahkoinsinoorikilta.fi/img/board/mikko.jpg"
+          "email": "otto.julkunen@sahkoinsinoorikilta.fi",
+          "image": "https://static.sahkoinsinoorikilta.fi/img/board/ottom.jpg"
         }
       ]
     },
@@ -20,10 +20,10 @@
       "name_en": "Secretary",
       "representatives": [
         {
-          "name": "Emilia Kortelainen",
+          "name": "Karoliina Talvikangas",
           "phone_number": null,
-          "email": null,
-          "image": "https://static.sahkoinsinoorikilta.fi/img/board/emilia.jpg"
+          "email": "karoliina.talvikangas@sahkoinsinoorikilta.fi",
+          "image": "https://static.sahkoinsinoorikilta.fi/img/board/karoliina.jpg"
         }
       ]
     },
@@ -32,10 +32,10 @@
       "name_en": "Treasurer",
       "representatives": [
         {
-          "name": "Esko Väänänen",
+          "name": "Ville Lairila",
           "phone_number": null,
-          "email": null,
-          "image": "https://static.sahkoinsinoorikilta.fi/img/board/esko.jpg"
+          "email": "ville.lairila@sahkoinsinoorikilta.fi",
+          "image": "https://static.sahkoinsinoorikilta.fi/img/board/ville.jpg"
         }
       ]
     },
@@ -44,10 +44,10 @@
       "name_en": "",
       "representatives": [
         {
-          "name": "Melisa Dönmez",
+          "name": "Aaron Löfgren",
           "phone_number": null,
-          "email": null,
-          "image": "https://static.sahkoinsinoorikilta.fi/img/board/melisa.jpg"
+          "email": "aaron.lofgren@sahkoinsinoorikilta.fi",
+          "image": "https://static.sahkoinsinoorikilta.fi/img/board/aaron.jpg"
         }
       ]
     },
@@ -56,10 +56,10 @@
       "name_en": "",
       "representatives": [
         {
-          "name": "Eveliina Ahonen",
+          "name": "Kasper Skog",
           "phone_number": null,
-          "email": null,
-          "image": "https://static.sahkoinsinoorikilta.fi/img/board/eveliina.jpg"
+          "email": "kasper.skog@sahkoinsinoorikilta.fi",
+          "image": "https://static.sahkoinsinoorikilta.fi/img/board/kasper.jpg"
         }
       ]
     },
@@ -68,10 +68,10 @@
       "name_en": "",
       "representatives": [
         {
-          "name": "Sakke Kangas",
+          "name": "Roni Vallius",
           "phone_number": null,
-          "email": null,
-          "image": "https://static.sahkoinsinoorikilta.fi/img/board/sakke.jpg"
+          "email": "roni.vallius@sahkoinsinoorikilta.fi",
+          "image": "https://static.sahkoinsinoorikilta.fi/img/board/roni.jpg"
         }
       ]
     },
@@ -80,22 +80,10 @@
       "name_en": "",
       "representatives": [
         {
-          "name": "Eero Ketonen",
+          "name": "Elina Huttunen",
           "phone_number": null,
-          "email": null,
-          "image": "https://static.sahkoinsinoorikilta.fi/img/board/eero.jpg"
-        }
-      ]
-    },
-    {
-      "name_fi": "ISOvastaava",
-      "name_en": "",
-      "representatives": [
-        {
-          "name": "Salla Lyytikäinen",
-          "phone_number": null,
-          "email": null,
-          "image": "https://static.sahkoinsinoorikilta.fi/img/board/salla.jpg"
+          "email": "elina.huttunen@sahkoinsinoorikilta.fi",
+          "image": "https://static.sahkoinsinoorikilta.fi/img/board/elina.jpg"
         }
       ]
     },
@@ -104,10 +92,10 @@
       "name_en": "",
       "representatives": [
         {
-          "name": "Sofia Öhman",
+          "name": "Julia Pykälä-aho",
           "phone_number": null,
-          "email": null,
-          "image": "https://static.sahkoinsinoorikilta.fi/img/board/sofia.jpg"
+          "email": "julia.pykalaaho@sahkoinsinoorikilta.fi",
+          "image": "https://static.sahkoinsinoorikilta.fi/img/board/julia.jpg"
         }
       ]
     },
@@ -116,22 +104,22 @@
       "name_en": "",
       "representatives": [
         {
-          "name": "Iikka Huttu",
+          "name": "Juulia Härkönen",
           "phone_number": null,
-          "email": null,
-          "image": "https://static.sahkoinsinoorikilta.fi/img/board/iikka.jpg"
+          "email": "juulia.harkonen@sahkoinsinoorikilta.fi",
+          "image": "https://static.sahkoinsinoorikilta.fi/img/board/juulia.jpg"
         }
       ]
     },
     {
-      "name_fi": "Teknologiamestari",
+      "name_fi": "Pajamestari",
       "name_en": "",
       "representatives": [
         {
-          "name": "Ilari Ojakorpi",
+          "name": "Tommi Sytelä",
           "phone_number": null,
-          "email": null,
-          "image": "https://static.sahkoinsinoorikilta.fi/img/board/ilari.jpg"
+          "email": "tommi.sytela@sahkoinsinoorikilta.fi",
+          "image": "https://static.sahkoinsinoorikilta.fi/img/board/tommi.jpg"
         }
       ]
     },
@@ -140,10 +128,10 @@
       "name_en": "",
       "representatives": [
         {
-          "name": "Heidi Mäkitalo",
+          "name": "Pyry Vaara",
           "phone_number": null,
-          "email": null,
-          "image": "https://static.sahkoinsinoorikilta.fi/img/board/heidi.jpg"
+          "email": "pyry.vaara@sahkoinsinoorikilta.fi",
+          "image": "https://static.sahkoinsinoorikilta.fi/img/board/pyry.jpg"
         }
       ]
     },
@@ -152,10 +140,22 @@
       "name_en": "",
       "representatives": [
         {
-          "name": "Tommi Oinonen",
+          "name": "Nette Levijoki",
           "phone_number": null,
-          "email": null,
-          "image": "https://static.sahkoinsinoorikilta.fi/img/board/tommmi.jpg"
+          "email": "nette.levijoki@sahkoinsinoorikilta.fi",
+          "image": "https://static.sahkoinsinoorikilta.fi/img/board/nette.jpg"
+        }
+      ]
+    },
+    {
+      "name_fi": "Excursiomestari",
+      "name_en": "",
+      "representatives": [
+        {
+          "name": "Visa Kurvi",
+          "phone_number": null,
+          "email": "visa.kurvi@sahkoinsinoorikilta.fi",
+          "image": "https://static.sahkoinsinoorikilta.fi/img/board/visa.jpg"
         }
       ]
     }

src/views/CorporatePage/CorporatePageView.tsx

@@ -6,8 +6,10 @@ import JobAd from "@models/JobAd";
 import CorporatePageHero from "./CorporatePageHero";
 import JobAdList from "./JobAdList";
 
+import BoardJson from "../ContactsPage/board.json";
+
 const EXCURSION_RULES = "https://static.sahkoinsinoorikilta.fi/saannot/excursiosaannot.pdf";
-const CORPORATE_MASTER_MAIL = "tommi.oinonen@sahkoinsinoorikilta.fi";
+const CORPORATE_MASTER_INFO = BoardJson.roles.filter((role) => role.name_fi === "Yrityssuhdemestari")[0].representatives[0];
 
 interface CorporatePageViewProps {
   jobAds: JobAd[];
@@ -63,11 +65,9 @@ const CorporatePageView: React.FC<CorporatePageViewProps> = ({ jobAds }) => (
 
         <h6>Potentiaalin Tasaus</h6>
         <p>
-          Kiltamme viettää perinteikkäitä vuosijuhliaan helmikuun kolmantena lauantaina.
+          Kiltamme viettää perinteikästä vuosijuhlaansa helmikuun kolmantena lauantaina.
           Potentiaalin Tasaus on kiltamme juhlavin ja rakkain tapahtuma.
-          Yrityksillä on mahdollisuus osallistua vuosijuhliin niin pienellä kuin suurellakin panoksella.
-          Killan 100-vuotisjuhla PoTa100 lähestyy myös kovaa vauhtia.
-          Jos yrityksesi on kiinnostunut 100-vuotisjuhlasta, kannattaa ohjautua osoitteeseen <Link to="https://sik100.fi">sik100.fi</Link>.
+          Yrityksillä on mahdollisuus osallistua vuosijuhliin niin pienellä kuin suurellakin panoksella!
         </p>
 
         <h6>Killan nettisivut ja työpaikkamainokset</h6>
@@ -92,15 +92,15 @@ const CorporatePageView: React.FC<CorporatePageViewProps> = ({ jobAds }) => (
     <TextSection>
       <h3>Olethan yhteydessä!</h3>
       <div>
-        <p>Yllämainituista mahdollisuuksista, sekä muista ideoista kiinnostuneena, voit olla yhteydessä Yrityssuhdemestariimme Tommiin.</p>
+        <p>Yllämainituista mahdollisuuksista, sekä muista ideoista kiinnostuneena, voit olla yhteydessä Yrityssuhdemestariimme.</p>
         <h6>Yrityssuhdemestari</h6>
-        <p>Tommi Oinonen <br />044 299 3439<br /> <a href={`mailto:${CORPORATE_MASTER_MAIL}`}>{CORPORATE_MASTER_MAIL}</a></p>
+        <p>{CORPORATE_MASTER_INFO.name} <br /> <a href={`mailto:${CORPORATE_MASTER_INFO.email}`}>{CORPORATE_MASTER_INFO.email}</a></p>
       </div>
     </TextSection>
 
     <CTASection
       bgColor="orange1"
-      link="https://sosso.fi/wp-content/uploads/2022/01/sossomediakortti22.pdf"
+      link="https://sosso.fi/wp-content/uploads/2023/01/sossomediakortti23.pdf"
       linkText="Killan lehden mediakortin löydät täältä&nbsp;›"
     >
       Mainos Sössöön?
@@ -110,7 +110,7 @@ const CorporatePageView: React.FC<CorporatePageViewProps> = ({ jobAds }) => (
       <h3 id="tyopaikat">Työpaikkailmoitukset</h3>
       <div>
         <JobAdList jobAds={jobAds} />
-        <p>Voit saada yrityksesi työpaikkailmoituksen listalle lähettämällä sen osoitteeseen <a href={`mailto:${CORPORATE_MASTER_MAIL}`}>{CORPORATE_MASTER_MAIL}</a></p>
+        <p>Voit saada yrityksesi työpaikkailmoituksen listalle lähettämällä sen osoitteeseen <a href={`mailto:${CORPORATE_MASTER_INFO.email}`}>{CORPORATE_MASTER_INFO.email}</a></p>
       </div>
 
     </TextSection>

src/views/EventPage/EventPageView.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import Image from "next/image";
+import Image from "next/legacy/image";
 import styled from "styled-components";
 import rehypeRaw from "rehype-raw";
 import rehypeSanitize from "rehype-sanitize";

src/views/FeedPage/FeedPageView.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import Image from "next/image";
+import Image from "next/legacy/image";
 import styled from "styled-components";
 import rehypeRaw from "rehype-raw";
 import rehypeSanitize from "rehype-sanitize";

src/views/FreshmenPage/FreshmenPageHero.tsx

@@ -13,24 +13,24 @@ const FreshmenPageHero: React.FC = () => (
     <HeroAside bgColor="lightTurquoise">
       <HeroAsideItem
         header="Lue killan fuksiopas"
-        link="https://static.sahkoinsinoorikilta.fi/FTMK/Fuksiopas2022.pdf"
+        link="https://static.sahkoinsinoorikilta.fi/FTMK/Fuksiopas2023.pdf"
         linkText="lue fuksiopas täältä!"
       />
 
       <HeroAsideItem
         header="Seuraa killan tiedotusta"
-        link="https://t.me/+ubTeGSYKTvg3NmVk"
-        linkText="Liity killan Telegram-ryhmiin"
+        link="https://t.me/+AB-JMbAxM2c0MDc0"
+        linkText="Liity killan Telegram-ryhmään!"
       />
       <HeroAsideItem
         header="Kaikki kunnossa opiskelua varten?"
-        link="https://into.aalto.fi/pages/viewpage.action?pageId=1183171"
+        link="https://www.aalto.fi/fi/ohjelmat/sahkotekniikan-kandidaattiohjelma/opintojen-aloittaminen"
         linkText="Lue korkeakoulun tietopaketti"
       />
       <HeroAsideItem
-        header="ISO-ryhmät ja ISO-henkilöt?"
+        header="Fuksiryhmät ja ISOt?"
         link="#isot"
-        linkText="Tsekkaa ISO-henkilöiden tiedot"
+        linkText="Tietoa fuksiryhmistä"
       />
     </HeroAside>
   </Hero>

src/views/FreshmenPage/FreshmenPageView.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import Image from "next/image";
+import Image from "next/legacy/image";
 import styled from "styled-components";
 import {
   CTASection, TextSection, InfoBox, PageLink, Link,
@@ -7,8 +7,8 @@ import {
 import FreshmenPageHero from "./FreshmenPageHero";
 
 const FUKSI_POINTS_LINK = "https://static.sahkoinsinoorikilta.fi/FTMK/Fuksipisteohje.pdf";
-const TG_GROUP_CHAT_LINK = "https://t.me/+1PqQHRVMjiAxMTU0";
-const TG_NOTIFICATIONS_LINK = "https://t.me/+Ln8TvQ-_id9kZTU0";
+const TG_GROUP_CHAT_LINK = "https://t.me/+6rAKYPVaCmg4ZTlk";
+const TG_NOTIFICATIONS_LINK = "https://t.me/+57BnXcTlsuU0YWQ0";
 const EMAIL_LINK = "ftmk@sahkoinsinoorikilta.fi";
 const EMAIL_LINK_MAILTO = `mailto:${EMAIL_LINK}`;
 
@@ -58,7 +58,7 @@ const FreshmenPageView: React.FC = () => (
 
         <ImageContainer>
           <Image
-            src="https://static.sahkoinsinoorikilta.fi/uus_webi/fuksikipparit-2022.jpg"
+            src="https://static.sahkoinsinoorikilta.fi/uus_webi/fuksikipparit-2023.jpg"
             alt="Kipparit"
             layout="responsive"
             width={100}
@@ -69,7 +69,7 @@ const FreshmenPageView: React.FC = () => (
 
         <h6>Fuksikapteenit</h6>
         <p>
-          Me olemme fuksikapteenisi <strong>Melisa</strong> ja <strong>Eveliina</strong> ja tulemme olemaan tukenasi sekä valvomassa suorituksiasi fuksivuoden seikkailuissa kohti teekkarilakkia, jonka voit ansaita mahdollisesti järjestettävänä Wappuna ensi keväällä.
+          Me olemme fuksikapteenisi <strong>Aaron</strong> ja <strong>Kasper</strong> ja tulemme olemaan tukenasi sekä valvomassa suorituksiasi fuksivuoden seikkailuissa kohti teekkarilakkia, jonka voit ansaita mahdollisesti järjestettävänä Wappuna ensi keväällä.
           Jos sinulla on mitään kysymyksiä, ota ihmeessä meihin yhteyttä esimerkiksi <Link to={TG_GROUP_CHAT_LINK} target="_blank">Telegramissa</Link> tai <a href={EMAIL_LINK_MAILTO}>sähköpostitse</a>.
         </p>
 
@@ -79,14 +79,14 @@ const FreshmenPageView: React.FC = () => (
           Ajan myötä palapelin palat muodostavat sinun näköisesi kuvan ja pääset itse vaikuttamaan siihen, miltä lopputulos näyttää.
         </p>
         <p>
-          Orientaatioviikko järjestetään 29.08.2022-02.09.2022, mutta jo ennen sitä sinulla on mahdollisuus tulla tutustumaan meihin, muihin fuksiehin ja ISOihin rennon Varaslähtöön. Varaslähtö fuksivuoteen järjestetään 20.8.2022. Siitä lisää Telegram-ryhmissä!
+          Orientaatioviikko järjestetään 28.8.-1.9.2023, mutta jo ennen sitä sinulla on mahdollisuus tulla tutustumaan meihin, muihin fuksiehin ja ISOihin rennon Varaslähtöön. Varaslähtö fuksivuoteen järjestetään 19.8.2023. Siitä lisää Telegram-ryhmissä!
         </p>
 
-        <h6>Melisa Dönmez</h6>
-        <p>044 239 2385 <br />melisa.donmez (ät) sahkoinsinoorikilta.fi <br />@melisadonmez</p>
+        <h6>Aaron Löfgren</h6>
+        <p>040 484 5418<br />aaron.lofgren (ät) sahkoinsinoorikilta.fi <br />@aaronlofgren</p>
 
-        <h6>Eveliina Ahonen</h6>
-        <p>050 911 8818 <br />eveliina.ahonen (ät) sahkoinsinoorikilta.fi <br />@ahoonen</p>
+        <h6>Kasper Skog</h6>
+        <p>040 667 5266<br />kasper.skog (ät) sahkoinsinoorikilta.fi <br />@Skooogi</p>
       </div>
       <aside>
         <div>
@@ -103,14 +103,14 @@ const FreshmenPageView: React.FC = () => (
         <div>
           <InfoBox>
             <h6>Killan Fuksiopas</h6>
-            <Link to="https://static.sahkoinsinoorikilta.fi/FTMK/Fuksiopas2022.pdf" target="_blank">
+            <Link to="https://static.sahkoinsinoorikilta.fi/FTMK/Fuksiopas2023.pdf" target="_blank">
               <FopasImage
-                src="https://static.sahkoinsinoorikilta.fi/FTMK/Fuksiopas2022-kansi.jpg"
+                src="https://static.sahkoinsinoorikilta.fi/FTMK/Fuksiopas2023-kansi.png"
               />
             </Link>
 
             <p>
-              Ennen opintojen alkua on hyvä tutustua killan fuksioppaaseen. Sitä pääset selailemaan <Link to="https://static.sahkoinsinoorikilta.fi/FTMK/Fuksiopas2022.pdf" target="_blank"> tästä.</Link>
+              Ennen opintojen alkua on hyvä tutustua killan fuksioppaaseen. Sitä pääset selailemaan <Link to="https://static.sahkoinsinoorikilta.fi/FTMK/Fuksiopas2023.pdf" target="_blank"> tästä.</Link>
             </p>
             <br />
             <h6>Telegram?</h6>
@@ -123,12 +123,12 @@ const FreshmenPageView: React.FC = () => (
               SIK:n fukseilla on oma Telegram-ryhmä, jonne pääset liitymään tästä:
             </p>
             <QRImages
-              src="https://static.sahkoinsinoorikilta.fi/FTMK/sik-fuksit-2022.jpg"
+              src="https://static.sahkoinsinoorikilta.fi/FTMK/sik-fuksit-2023.jpg"
             />
             <p>tai <Link to={TG_GROUP_CHAT_LINK} target="_blank">tästä</Link></p>
             <p>Liity myös samalla SIK-fuksien tiedotuskanavalle tästä:</p>
             <QRImages
-              src="https://static.sahkoinsinoorikilta.fi/FTMK/sik-fuksit-2022-tiedotus.jpg"
+              src="https://static.sahkoinsinoorikilta.fi/FTMK/sik-fuksit-2023-tiedotus.jpg"
             />
             <p>tai <Link to={TG_NOTIFICATIONS_LINK} target="_blank">tästä</Link></p>
           </InfoBox>
@@ -144,13 +144,13 @@ const FreshmenPageView: React.FC = () => (
     </CTASection>
 
     <TextSection>
-      <h3 id="isot">Isoryhmät</h3>
+      <h3 id="isot">Fuksiryhmät ja ISO-toiminta</h3>
       <div>
         <p>
-        SIK:n fuksit nauttivat hurmaavien ISOhenkilöidensä opastuksesta ja hellästä huolenpidosta omissa fuksiryhmissään.
+          SIK:n fuksit nauttivat hurmaavien ISOjen opastuksesta ja hellästä huolenpidosta omissa fuksiryhmissään.
         </p>
         <p>
-        ISOt ovat hiukan vanhempia opiskelijoita ja kiltalaisia, joiden tehtävänä on olla tukenasi fuksivuoden ajan. Ensimmäisenä päivänä teidät jaetaan noin kymmenen hengen fuksiryhmiin ja jokaiseen ryhmään kuuluu kolmesta viiteen ISOa, joista yksi toimii opintoISOna. ISOilta voit kysyä mitä vain opiskeluun ja opiskelijaelämään liittyen. Vaikka he eivät tietäisi vastausta, he luultavimmin osaavat auttaa sinua vastausten löytämisessä.
+          ISOt ovat hiukan vanhempia opiskelijoita ja kiltalaisia, joiden tehtävänä on olla tukenasi fuksivuoden ajan. Ensimmäisenä päivänä teidät jaetaan noin kymmenen hengen fuksiryhmiin ja jokaiseen ryhmään kuuluu kolmesta viiteen ISOa, joista yksi toimii opintoISOna. ISOilta voit kysyä mitä vain opiskeluun ja opiskelijaelämään liittyen. Vaikka he eivät tietäisi vastausta, he luultavimmin osaavat auttaa sinua vastausten löytämisessä.
         </p>
         <p>
           Kuten sanottu ISOt tukevat sinua koko fuksivuoden ajan, mutta eniten tulet näkemään heitä Orientaatioviikolla, jolloin he kulkevat fuksiryhmäsi kanssa ympäri Otaniemeä ja avaavat ovia teekkariuden saloihin. He auttavat sinua myös löytämään opintojen aloittamiseen tarvittavat asiat ja tukevat esimerkiksi lukujärjestyksen tekemisessä ja kirjastokortin, sekä matkakortin ja opiskelijakortin hankkimisessa.

src/views/FrontPage/FrontPageView.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import Image from "next/image";
+import Image from "next/legacy/image";
 import styled from "styled-components";
 import {
   Divider,
@@ -24,6 +24,7 @@ const Fingrid = "https://static.sahkoinsinoorikilta.fi/img/corporate_logos/fingr
 const Okmetic = "https://static.sahkoinsinoorikilta.fi/img/corporate_logos/okmetic.jpg";
 const Nokia = "https://static.sahkoinsinoorikilta.fi/img/corporate_logos/nokia.jpg";
 const Granlund = "https://static.sahkoinsinoorikilta.fi/img/corporate_logos/granlund.jpg";
+const GE = "https://static.sahkoinsinoorikilta.fi/img/corporate_logos/GE.png";
 
 interface FrontPageViewProps {
   events: Event[];
@@ -87,16 +88,16 @@ const FrontPageView: React.FC<FrontPageViewProps> = ({ events, feed }) => (
         <h6>Yhteistyössä:</h6>
         <SponsorReel>
           <div>
-            <Link to="https://new.abb.com/fi/uralle">
+            <Link to="https://new.abb.com/fi/">
               <Image src={ABB} alt="ABB" layout="responsive" width={200} height={100} objectFit="contain" />
             </Link>
-            <Link to="https://www.caruna.fi/tietoa-meista/tyonhakijalle/tyonantajalupaus">
+            <Link to="https://caruna.fi/">
               <Image src={Caruna} alt="Caruna" layout="responsive" width={200} height={100} objectFit="contain" />
             </Link>
-            <Link to="https://www.nokia.com/fi_fi/">
+            <Link to="https://www.nokia.com/">
               <Image src={Nokia} alt="Nokia" layout="responsive" width={200} height={100} objectFit="contain" />
             </Link>
-            <Link to="https://www.ensto.com/fi">
+            <Link to="https://www.ensto.com/fi/">
               <Image src={Ensto} alt="Ensto" layout="responsive" width={200} height={100} objectFit="contain" />
             </Link>
             <Link to="https://www.esett.com/">
@@ -111,6 +112,9 @@ const FrontPageView: React.FC<FrontPageViewProps> = ({ events, feed }) => (
             <Link to="https://www.granlund.fi/">
               <Image src={Granlund} alt="Granlund" layout="responsive" width={200} height={100} objectFit="contain" />
             </Link>
+            <Link to="https://www.gehealthcare.fi/">
+              <Image src={GE} alt="GE" layout="responsive" width={200} height={100} objectFit="contain" />
+            </Link>
           </div>
           <Link to="/yritysyhteistyo">Haluatko kuulla lisää yhteistyöstä kanssamme?</Link>
         </SponsorReel>

src/views/HonoraryPage/HonoraryPageView.tsx

@@ -22,6 +22,7 @@ const HonoraryPageView: React.FC = () => (
           <li>Tapani Jokinen 1996–</li>
           <li>Kaj G. Lindén 1999–</li>
           <li>Jorma Kyyrä 2011–</li>
+          <li>Seppo Saastamoinen 2022-</li>
         </ul>
         <h2>Oltermannit</h2>
         <p>Oltermanni on yhdyshenkilö killan ja opettajakunnan välillä. Valtuusto valitsee oltermannin kolmeksi vuodeksi kerrallaan.</p>
@@ -82,6 +83,8 @@ const HonoraryPageView: React.FC = () => (
           <li>2019 Ville Kapanen</li>
           <li>2020 Anni Parkkila, Aliisa Pietilä</li>
           <li>2021 Essi Jukkala</li>
+          <li>2022 Erna Virtanen, Tuukka Syrjänen</li>
+          <li>2023 Emmaleena Ahonen</li>
         </ul>
         <h2>Standaari</h2>
         <p>Standaari voidaan hallituksen päätöksellä lahjoittaa killan toimintaan myönteisesti vaikuttaneille tahoille. Standaarit on numeroitu lahjoittamisjärjestyksessä.</p>
@@ -100,6 +103,7 @@ const HonoraryPageView: React.FC = () => (
           <li>2013 Martti Valtonen</li>
           <li>2016 ABB Oy</li>
           <li>2021 Elektroteknologsektionens Kalle Anka-Kommitté</li>
+          <li>2023 Tekniikan akateemiset TEK, Automaatio- ja systeemitekniikan kilta ry</li>
         </ul>
         <h2>Kultaiset ansiomerkit</h2>
         <p>
@@ -195,6 +199,20 @@ const HonoraryPageView: React.FC = () => (
           <li>2021 Tuukka Syrjänen</li>
           <li>2021 Timi Tiira</li>
         </ul>
+        <ul>
+          <li>2022 Elias Hirvonen</li>
+          <li>2022 Emmaleena Ahonen</li>
+          <li>2022 Jonna Tammikivi</li>
+          <li>2022 Leo Kivikunnas</li>
+          <li>2022 Sini Huhtinen</li>
+          <li>2022 Ukko Kasvi</li>
+        </ul>
+        <ul>
+          <li>2023 Sasu Saalasti</li>
+          <li>2023 Ville Kaakinen</li>
+          <li>2023 Mikael Liimatainen</li>
+          <li>2023 Jami Hyytiäinen</li>
+        </ul>
         <h2>Hopeiset ansiomerkit</h2>
         <p>Killan hallitus voi myöntää hopeitosen ansiomerkin killan jäsenelle tai perustellusta syystä myös muulle henkilölle tunnustuksena erityisestä kiinnostuksesta kiltaa kohtaan sekä ansioituneesta toiminnasta killan hyväksi.</p>
         <ul>
@@ -544,6 +562,22 @@ const HonoraryPageView: React.FC = () => (
           <li>2021 Sofia Öhman</li>
           <li>2021 Suvi Karanta</li>
         </ul>
+        <ul>
+          <li>2022 Aaro Niskanen</li>
+          <li>2022 Aaro Rasilainen</li>
+          <li>2022 Aino Suomi</li>
+          <li>2022 Eino Tyrvänen</li>
+          <li>2022 Henry Gustafsson</li>
+          <li>2022 Johannes Ora</li>
+          <li>2022 Niilo Ojala</li>
+          <li>2022 Oliver Hiekkamies</li>
+          <li>2022 Oskari Ponkala</li>
+          <li>2022 Otto Julkunen</li>
+          <li>2022 Pyry Vaara</li>
+          <li>2022 Toni Lyttinen</li>
+          <li>2022 Tuomas Pajunpää</li>
+          <li>2022 Ville-Pekka Laakkonen</li>
+        </ul>
       </div>
     </TextSection>
   </>

src/views/InEnglishPage/InEnglishPageView.tsx

@@ -128,7 +128,7 @@ const InEnglishPageView: React.FC<InEnglishPageViewProps> = ({ events, feed }) =
           <p>Balance your studies and get connected</p>
           <div>
             <h6>Build everything related to electronics</h6>
-            <p>Elepaja is an electronics workshop run by the guild, where students get to apply skills they have learned at school in practical projects. Over time, students have built diverse projects in the workshop, such as their first LED flashlights, tesla windings, robots and radio transmitters. If you are interested in building electronics or you need help with a project, then come visit the workshop located at Otakaari 1 h023b. The workshop is equipped with basic tools such as circuit boards, etching tools, soldering tools, various components, column drill and a wide range of measuring equipment. You can join <Link to="https://elepaja.fi/tg">elepaja&apos;s Telegram group here</Link>.</p>
+            <p>SIK-PAJA is an electronics workshop run by the guild, where students get to apply skills they have learned at school in practical projects. Over time, students have built diverse projects in the workshop, such as their first LED overall badges, tesla windings, robots and radio transmitters. If you are interested in building electronics or you need help with a project, then come visit the workshop located at Otakaari 1 h023b. The workshop is equipped with basic tools such as circuit boards, etching tools, soldering tools, various components and a wide range of measuring equipment. You can join <Link to="https://t.me/sikpaja">sikpaja&apos;s Telegram group here</Link>.</p>
             <h6>Sports events</h6>
             <p>The committee of Well Being runs many things in our guild. One of these is providing sports events to the guild members. In cooperation with other guilds, we regularly organize opportunities to play floorball and other sports. Sports tryouts are available throughout the year and are organized in co-operation with various sports organizations in Otaniemi. Keep your eyes open in the <Link to="#events">events</Link> section and join the <Link to="https://t.me/joinchat/DJRXxkKd0SMj0e9pBPXF1A/"> sports Telegram group.</Link></p>
             <h6>Culture from culinarism to theater</h6>
@@ -186,6 +186,8 @@ const InEnglishPageView: React.FC<InEnglishPageViewProps> = ({ events, feed }) =
         <h3 id="freshmen">For exchange student</h3>
         <div>
           <div>
+            <h6>Telegram group 2023-2024</h6>
+            <p>For starters, we recommend you join the <Link to="https://t.me/+ewiOhvuTXAcwODRk">Telegram-channel</Link> made for new exchange and master&apos;s students.</p>
             <h6>Freshman points</h6>
             <p>What is student life like in Finland? What are the unique cool things to experience? To find out we recommend collecting the fuksi points (freshman points) to your fuksi point card. It&apos;s fun! The point card gives you a guideline to experiencing the student life and allows you to get a diploma with the privilege to wear the teekkari cap. Note that internationals are also fuksis on their first year in Aalto even though they are not really freshmen. Even Finns who change to a different study program get to be a fuksi again.</p>
             <h6>Overalls</h6>

src/views/SignUpPage/SignUpPageView.tsx

@@ -23,6 +23,7 @@ interface SignUpPageViewProps {
   formData: any;
   onChange: (e: IChangeEvent<unknown>, es?: ErrorSchema) => unknown;
   onSubmit: (e: ISubmitEvent<unknown>) => unknown;
+  formSent?: boolean;
 }
 
 const StyledSection = styled(TextSection)`
@@ -59,6 +60,7 @@ const SignUpPageView: React.FC<SignUpPageViewProps> = ({
   formData,
   onChange,
   onSubmit,
+  formSent = false,
 }) => {
   const { i18n, t } = useTranslation();
   const startDate = new Date(signUpForm?.start_time);
@@ -112,7 +114,7 @@ const SignUpPageView: React.FC<SignUpPageViewProps> = ({
     const questions = signUpForm.questions.map((q) => signupFormQuestionToQuestion(q, i18n.language));
     form = (
       <>
-        <p>{`${t("Ilmoittauminen sulkeutuu")} ${endDateStr}`}.</p>
+        <p>{`${t("Ilmoittautuminen sulkeutuu")} ${endDateStr}`}.</p>
         <FormWrapper
           schema={buildFormSchema(questions, formTitle) as unknown}
           uiSchema={buildUISchema(questions)}
@@ -136,7 +138,7 @@ const SignUpPageView: React.FC<SignUpPageViewProps> = ({
         </h1>
 
         <div>
-          {form}
+          { formSent ? <p>{`${t("Ilmoittautuminen onnistui!")}`}</p> : form }
         </div>
         {signups}
       </StyledSection>

src/views/StudiesPage/StudiesPageView.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import Image from "next/image";
+import Image from "next/legacy/image";
 import {
   CTASection, TextSection, PageLink, Link,
 } from "@components/index";

src/views/admin/AdminListCommon.tsx

@@ -21,7 +21,11 @@ const Main = styled.div`
   }
 `;
 
-const AdminListCommon: React.FC = ({ children }) => (
+type AdminListCommonProps = {
+  children: React.ReactNode;
+};
+
+const AdminListCommon: React.FC<AdminListCommonProps> = ({ children }) => (
   <AdminPageWrapper requiresAuthentication>
     <Main>
       {children}

src/views/common/AdminPageWrapper.tsx

@@ -58,6 +58,7 @@ const useShouldRedirect = (enabled = true) => {
 
 type PageProps = {
   requiresAuthentication: boolean;
+  children: React.ReactNode;
 };
 
 const AdminPageWrapper: React.FC<PageProps> = ({ requiresAuthentication, children }) => {

src/views/common/PageWrapper.tsx

@@ -2,7 +2,11 @@ import React from "react";
 import Header from "@components/Header";
 import Footer from "@components/Footer/Footer";
 
-const PageWrapper: React.FC = ({ children }) => (
+type PageWrapperProps = {
+  children: React.ReactNode;
+};
+
+const PageWrapper: React.FC<PageWrapperProps> = ({ children }) => (
   <>
     <Header />
     {children}

tests/playwright/event-setup.test.ts

@@ -0,0 +1,11 @@
+import { test as setup } from "@playwright/test";
+import { generateAccessToken, generateTestEvent, generateTestForm } from "../utils";
+
+setup("create events", async () => {
+  const token = await generateAccessToken();
+  const form = await generateTestForm(token);
+  const event = await generateTestEvent([form.id], token);
+
+  process.env.FORM_ID = form.id;
+  process.env.EVENT_ID = event.id;
+});

tests/playwright/event-teardown.test.ts

@@ -0,0 +1,10 @@
+import { test as teardown } from "@playwright/test";
+import { deleteEvent, deleteForm, generateAccessToken } from "../utils";
+
+teardown("delete events", async () => {
+  const token = await generateAccessToken();
+  const { FORM_ID: formId, EVENT_ID: eventId } = process.env;
+
+  await deleteEvent(eventId, token);
+  await deleteForm(formId, token);
+});

tests/playwright/pages.test.ts

@@ -0,0 +1,24 @@
+import { test, expect } from "@playwright/test";
+// import fs from "fs";
+
+// const sitemap = fs.readFileSync("../../public/sitemap-0.xml");
+
+// const pages = sitemap.;
+
+// test("favicon exists", async ({ page }) => {
+//   await page.goto("/");
+// });
+
+// Page
+// const pagePath = "/";
+
+test("landing page renders correctly", async ({ page }) => {
+  await page.goto("/");
+  await expect(page).toHaveTitle("Aalto-yliopiston Sähköinsinöörikilta ry");
+  await expect(page).toHaveScreenshot("index-page.png");
+});
+
+test("404 page renders correctly", async ({ page }) => {
+  await page.goto("/404");
+  await expect(page).toHaveScreenshot("404 page.png");
+});

tests/playwright/signup.test.ts

@@ -0,0 +1,19 @@
+import {
+  test, expect,
+} from "@playwright/test";
+
+const NAME = "Testi Testeri";
+const EMAIL = "e2e@sahkoinsinoorikilta.fi";
+
+test("signup to event", async ({ page }) => {
+  await page.goto("/");
+  await page.locator("[id=\"\\#events\"]").getByRole("button", { name: "Lue lisää ›" }).first().click();
+  await page.locator("button").filter({ hasText: "Finland flag" }).click();
+  await page.getByRole("button", { name: "Test" }).click();
+  await page.getByLabel("Nimi*").fill(NAME);
+  await page.getByLabel("S-Posti*").fill(EMAIL);
+  await page.locator("label").filter({ hasText: "Testaaja" }).locator("span").click();
+  await page.getByRole("button", { name: "Submit" }).click();
+  // await expect(page.getByText("Sign-up submitted successfully 😎")).toBeVisible();
+  await expect(page.getByRole("list")).toHaveText(NAME);
+});

tests/testcafe/404.test.ts

@@ -1,5 +1,5 @@
 import { Selector } from "testcafe";
-import { getSiteRoot } from "./utils";
+import { getSiteRoot } from "../utils";
 
 fixture`404 page renders and functions correctly`.page(`${getSiteRoot()}/404`);
 

tests/testcafe/admin/create-event.test.ts

@@ -1,7 +1,7 @@
 import { Selector } from "testcafe";
 import {
-  getSiteRoot, getPageUrl, generateTestForm, deleteEvent, deleteForm, doLogin, generateAccessToken, getPostRequestLogger,
-} from "../utils";
+  getSiteRoot, getPageUrl, generateTestForm, deleteEvent, deleteForm, doLogin, generateAccessToken, getPostRequestLogger, waitForLogger,
+} from "../../utils";
 
 const LOGGER = getPostRequestLogger("events/");
 
@@ -78,6 +78,8 @@ test("Logged in user can create event", async (t) => {
   await t.click(submit);
 
   const parsed = JSON.parse(LOGGER.requests[0].response.body as string);
+
+  await waitForLogger(LOGGER);
   // eslint-disable-next-line no-param-reassign
   t.fixtureCtx.eventId = parsed.id;
 

tests/testcafe/admin/create-signup.test.ts

@@ -1,7 +1,7 @@
 import { Selector } from "testcafe";
 import {
-  getSiteRoot, getPageUrl, deleteForm, doLogin, generateAccessToken, getPostRequestLogger,
-} from "../utils";
+  getSiteRoot, getPageUrl, deleteForm, doLogin, generateAccessToken, getPostRequestLogger, waitForLogger
+} from "../../utils";
 
 const LOGGER = getPostRequestLogger("signupForm/");
 
@@ -97,6 +97,8 @@ test("Logged in user can create signup", async (t) => {
   await t.click(submit);
 
   const parsed = JSON.parse(LOGGER.requests[0].response.body as string);
+
+  await waitForLogger(LOGGER);
   // eslint-disable-next-line no-param-reassign
   t.fixtureCtx.formId = parsed.id;
 

tests/testcafe/admin/login.test.ts

@@ -1,5 +1,5 @@
 import { Selector, ClientFunction } from "testcafe";
-import { getSiteRoot, doLogin } from "../utils";
+import { getSiteRoot, doLogin } from "../../utils";
 
 fixture`Admin login page functions correctly`.page(`${getSiteRoot()}/admin/login`);
 

tests/testcafe/index.test.ts

@@ -1,5 +1,5 @@
 import { Selector } from "testcafe";
-import { getSiteRoot } from "./utils";
+import { getSiteRoot } from "../utils";
 
 fixture`Front page renders and functions correctly`.page(`${getSiteRoot()}`);
 

tests/testcafe/signupToEvent.test.ts

@@ -1,7 +1,7 @@
 import { Selector } from "testcafe";
 import {
   getSiteRoot, getPageUrl, generateTestEvent, generateTestForm, deleteEvent, deleteForm, generateAccessToken,
-} from "./utils";
+} from "../utils";
 
 fixture`Event signup`.page(getSiteRoot())
   .before(async (ctx) => {

tests/utils.ts

@@ -156,4 +156,15 @@ export const generateTestEvent = async (formIds = [], jwt_access: string) => (
   }, jwt_access)
 );
 
-export const sleep = async (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+export const sleep = async (ms: number) => new Promise((resolve) => { setTimeout(resolve, ms); });
+
+export const waitForLogger = async (logger: RequestLogger) => {
+  let i = 0;
+  while (i < 50) {
+    await sleep(100); // eslint-disable-line no-await-in-loop
+    if (logger.requests.length > 0) {
+      return;
+    }
+    i += 1;
+  }
+};

tsconfig.json

@@ -58,11 +58,12 @@
   "include": [
     "./src/**/*",
     "./types/**/*",
-    "./tests/testcafe/**/*",
-    "next-sitemap.js",
-    "next.config.js",
-    "jest.config.js",
+    "./tests/**/*",
     ".eslintrc.js",
+    "jest.config.js",
+    "next-sitemap.config.js",
+    "next.config.js",
+    "playwright.config.ts",
     "sentry.client.config.js",
     "sentry.server.config.js"
   ],