Install playwright

This reverts commit cfc7dd11f5.

.babelrc

@@ -1,16 +0,0 @@
-{
-  "presets": [
-    "next/babel"
-  ],
-  "plugins": [
-    [
-      "babel-plugin-styled-components",
-      {
-        "ssr": true,
-        "displayName": true,
-        "preprocess": false,
-        "pure": true
-      }
-    ]
-  ]
-}

.env.local.example

@@ -1,2 +1,3 @@
+NEXT_PUBLIC_DEPLOY_ENV=local
 NEXT_PUBLIC_API_URL=https://api.dev.sahkoinsinoorikilta.fi/api
 NEXT_PUBLIC_SITE_URL=https://dev.sahkoinsinoorikilta.fi

.env.prod

@@ -1,2 +0,0 @@
-NEXT_PUBLIC_API_URL=https://api.sahkoinsinoorikilta.fi/api
-NEXT_PUBLIC_SITE_URL=https://sahkoinsinoorikilta.fi

.env.test

@@ -1,2 +1,3 @@
+NEXT_PUBLIC_DEPLOY_ENV=test
 NEXT_PUBLIC_API_URL=https://api.dev.sahkoinsinoorikilta.fi/api
 NEXT_PUBLIC_SITE_URL=https://dev.sahkoinsinoorikilta.fi

.eslintrc.js

@@ -3,7 +3,7 @@ module.exports = {
     "eslint:recommended",
     "airbnb",
     "airbnb-typescript",
-    "airbnb/hooks",
+    // "airbnb/hooks",
     "plugin:import/recommended",
     "plugin:@typescript-eslint/recommended",
     // "plugin:@typescript-eslint/recommended-requiring-type-checking",
@@ -34,11 +34,18 @@ module.exports = {
     ],
     "react/jsx-props-no-spreading": "off",
     "react/jsx-one-expression-per-line": "off",
+    "react/require-default-props": "off",
+    "react/default-props-match-prop-types": "off",
+    "react/function-component-definition": ["error", {
+      namedComponents: "arrow-function",
+      unnamedComponents: "arrow-function",
+    }],
     // Temp
     "react/no-array-index-key": "warn",
     "jsx-a11y/label-has-associated-control": "off",
     "jsx-a11y/click-events-have-key-events": "off",
     "jsx-a11y/no-noninteractive-element-interactions": "off",
     "jsx-a11y/no-static-element-interactions": "off",
+    "@typescript-eslint/default-param-last": "warn",
   },
 };

.gitignore

@@ -40,3 +40,10 @@ yarn-error.log*
 # SEO
 public/robots.txt
 public/sitemap.xml
+public/sitemap-0.xml
+
+# Sentry
+.sentryclirc
+/test-results/
+/playwright-report/
+/playwright/.cache/

.gitlab-ci.yml

@@ -8,7 +8,7 @@ stages:
   - deploy
 
 install:
-  image: node:14
+  image: node:16
   stage: setup
   script:
     - npm ci
@@ -21,34 +21,34 @@ install:
     expire_in: 1 week
 
 audit:
-  image: node:14
+  image: node:16
   needs: ["install"]
   stage: audit
   script:
     - npm audit --audit-level=critical
 
 es:lint:
-  image: node:14
+  image: node:16
   needs: ["install"]
   stage: lint
   script:
     - npm run lint:es
 
 css:lint:
-  image: node:14
+  image: node:16
   needs: ["install"]
   stage: lint
   script:
     - npm run lint:css
 
 # test:unit:
-#     image: node:14
+#     image: node:16
 #     stage: test
 #     script:
 #         - npm run test:unit
 
 build:
-  image: node:14
+  image: node:16
   needs: ["install"]
   stage: build
   script:
@@ -66,7 +66,7 @@ build:
       - .next/cache/
 
 test:e2e:
-  image: circleci/node:14-browsers
+  image: circleci/node:16-browsers
   needs: ["install", "build"]
   stage: test
   script:
@@ -86,9 +86,8 @@ publish:dev:
   only:
     - master
   script:
-    - docker info
+    - 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 build . -t "$IMAGE_NAME":latest --build-arg NEXT_PUBLIC_API_URL=https://api.dev.sahkoinsinoorikilta.fi/api --build-arg NEXT_PUBLIC_SITE_URL=https://dev.sahkoinsinoorikilta.fi
     - docker push "$IMAGE_NAME":latest
 
 publish:prod:
@@ -99,9 +98,8 @@ publish:prod:
   only:
     - production
   script:
-    - docker info
+    - 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 build . -t "$IMAGE_NAME":prod
     - 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"

.nvmrc

@@ -1 +1 @@
-14
+16

.stylelintrc

@@ -1,7 +1,7 @@
 {
   "extends": [
-    "stylelint-config-standard",
+    "stylelint-config-recommended",
     "stylelint-config-styled-components"
   ],
-  "syntax": "css"
+  "customSyntax": "postcss-jsx"
 }

Dockerfile

@@ -1,5 +1,5 @@
 # Install dependencies only when needed
-FROM node:14-alpine AS deps
+FROM node:16-alpine AS deps
 # Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
 RUN apk add --no-cache libc6-compat
 WORKDIR /app
@@ -7,18 +7,21 @@ COPY package.json package-lock.json ./
 RUN npm ci
 
 # Rebuild the source code only when needed
-FROM node:14-alpine AS builder
+FROM node:16-alpine AS builder
 WORKDIR /app
 COPY . .
 COPY --from=deps /app/node_modules ./node_modules
 
 ENV NEXT_TELEMETRY_DISABLED=1
+ENV NEXT_PUBLIC_SENTRY_DSN=https://3ad96a8fb4ee46dab4a913049e2a8b38@o1039142.ingest.sentry.io/6007885
+ARG NEXT_PUBLIC_DEPLOY_ENV=production
 ARG NEXT_PUBLIC_API_URL=https://api.sahkoinsinoorikilta.fi/api
 ARG NEXT_PUBLIC_SITE_URL=https://sahkoinsinoorikilta.fi
+ARG SENTRY_AUTH_TOKEN
 RUN npm run build
 
 # Production image, copy all the files and run next
-FROM node:14-alpine AS runner
+FROM node:16-alpine AS runner
 WORKDIR /app
 
 ENV NODE_ENV production

README.md

@@ -4,14 +4,26 @@ 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/)** (10.x)
-* [Testcafe](https://devexpress.github.io/testcafe/) - E2E Testing framework
+* **[Next.js](https://nextjs.org/)** (12.x)
+* **[Testcafe](https://devexpress.github.io/testcafe/)** - E2E Testing framework
 
 ## Installation
 
-1. Clone/download repo
-2. Install node v14 ([`nvm`](https://github.com/nvm-sh/nvm))
-3. `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
 

jest.config.js

@@ -0,0 +1,20 @@
+module.exports = {
+  roots: ["<rootDir>/src"],
+  testMatch: ["**/*.test.ts"],
+  transform: {
+    "^.+\\.tsx?$": "ts-jest",
+  },
+  preset: "ts-jest",
+  verbose: true,
+
+  moduleNameMapper: {
+    "^@api/(.*)$": "<rootDir>/src/api/$1",
+    "^@components/(.*)$": "<rootDir>/src/components/$1",
+    "^@hooks/(.*)$": "<rootDir>/src/hooks/$1",
+    "^@models/(.*)$": "<rootDir>/src/models/$1",
+    "^@pages/(.*)$": "<rootDir>/src/pages/$1",
+    "^@theme/(.*)$": "<rootDir>/src/theme/$1",
+    "^@views/(.*)$": "<rootDir>/src/views/$1",
+    "^@utils/(.*)$": "<rootDir>/src/utils/$1",
+  },
+};

next-env.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited

next.config.js

@@ -1,9 +1,21 @@
+const { withSentryConfig } = require("@sentry/nextjs");
 const withBundleAnalyzer = require("@next/bundle-analyzer")({
   enabled: process.env.ANALYZE === "true",
 });
 
-module.exports = withBundleAnalyzer({
-  target: "server",
+const sentryWebpackPluginOptions = {
+  // Additional config options for the Sentry Webpack plugin. Keep in mind that
+  // the following options are set automatically, and overriding them is not
+  // recommended:
+  //   release, url, org, project, authToken, configFile, stripPrefix,
+  //   urlPrefix, include, ignore
+
+  silent: true, // Suppresses all logs
+  // For all available options, see:
+  // https://github.com/getsentry/sentry-webpack-plugin#options.
+};
+
+module.exports = withBundleAnalyzer(withSentryConfig({
   images: {
     domains: [
       "api.sahkoinsinoorikilta.fi",
@@ -11,4 +23,7 @@ module.exports = withBundleAnalyzer({
       "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

@@ -27,58 +27,75 @@
     "start": "next dev",
     "start-prod": "next start --port ${SERVER_PORT:=80}",
     "serve": "next start --port 3000",
-    "test": "npm run testcafe",
+    "test:unit": "jest --coverage",
+    "test": "playwright test",
     "testcafe": "testcafe --config-file testcafe.json",
     "build-analyze": "ANALYZE=true npm run build",
     "prepare": "husky install"
   },
   "devDependencies": {
-    "@types/js-cookie": "^2.2.7",
-    "@types/react": "^17.0.19",
-    "@types/react-beautiful-dnd": "^13.1.1",
-    "@types/react-csv": "^1.1.2",
-    "@types/react-dom": "^17.0.9",
+    "@playwright/test": "^1.38.1",
+    "@types/jest": "^27.4.1",
+    "@types/js-cookie": "^3.0.1",
+    "@types/node": "^16.11.36",
+    "@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.12",
-    "@typescript-eslint/eslint-plugin": "^4.29.2",
-    "@typescript-eslint/parser": "^4.29.2",
-    "babel-plugin-styled-components": "^1.13.2",
-    "eslint": "^7.32.0",
-    "eslint-config-airbnb": "^18.2.1",
-    "eslint-config-airbnb-typescript": "^13.0.0",
-    "eslint-config-next": "^11.1.0",
-    "husky": "^7.0.1",
-    "next-sitemap": "^1.6.162",
+    "@types/styled-components": "^5.1.25",
+    "@typescript-eslint/eslint-plugin": "^5.18.0",
+    "@typescript-eslint/parser": "^5.18.0",
+    "babel-plugin-styled-components": "^2.0.7",
+    "eslint": "^8.13.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-airbnb-typescript": "^17.0.0",
+    "eslint-config-next": "^13.1.6",
+    "eslint-plugin-import": "^2.26.0",
+    "husky": "^7.0.4",
+    "jest": "^27.5.1",
+    "next-sitemap": "^3.1.11",
     "npm-run-all": "^4.1.5",
-    "stylelint": "^13.13.1",
-    "stylelint-config-standard": "^22.0.0",
+    "postcss-jsx": "^0.36.4",
+    "postcss-syntax": "^0.36.2",
+    "stylelint": "^14.2.0",
+    "stylelint-config-recommended": "^6.0.0",
     "stylelint-config-styled-components": "^0.1.1",
-    "testcafe": "^1.15.3",
-    "typescript": "^4.3.5"
+    "testcafe": "^1.18.5",
+    "ts-jest": "^27.1.4",
+    "typescript": "^4.6.3"
   },
   "dependencies": {
-    "@next/bundle-analyzer": "^11.1.0",
-    "@rjsf/core": "^3.1.0",
-    "axios": "^0.21.1",
-    "date-fns": "^2.23.0",
+    "@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.0",
+    "js-cookie": "^3.0.1",
     "lodash": "^4.17.21",
-    "next": "^11.1.0",
+    "next": "^13.1.6",
     "normalize.css": "^8.0.1",
-    "react": "^17.0.2",
-    "react-beautiful-dnd": "^13.1.0",
-    "react-csv": "^2.0.3",
-    "react-dom": "^17.0.2",
-    "react-is": "^17.0.2",
-    "react-markdown": "^7.0.0",
+    "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": "^18.2.0",
+    "react-is": "^18.2.0",
+    "react-markdown": "^8.0.3",
     "react-mde": "^11.5.0",
-    "react-toastify": "^7.0.4",
-    "rehype-raw": "^6.0.0",
-    "rehype-sanitize": "^5.0.0",
-    "sharp": "^0.29.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.0",
-    "swr": "^0.5.6"
+    "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,
+  // },
+});

sentry.client.config.js

@@ -0,0 +1,16 @@
+// This file configures the initialization of Sentry on the browser.
+// The config you add here will be used whenever a page is visited.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+import * as Sentry from "@sentry/nextjs";
+
+const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN;
+const ENV = process.env.NEXT_PUBLIC_DEPLOY_ENV;
+
+Sentry.init({
+  dsn: SENTRY_DSN,
+  environment: ENV,
+  // Note: if you want to override the automatic release value, do not set a
+  // `release` value here - use the environment variable `SENTRY_RELEASE`, so
+  // that it will also get attached to your source maps
+});

sentry.properties

@@ -0,0 +1,4 @@
+defaults.url=https://sentry.io/
+defaults.org=sik-kf
+defaults.project=sik-web
+cli.executable=../../.npm/_npx/a8388072043b4cbc/node_modules/@sentry/cli/bin/sentry-cli

sentry.server.config.js

@@ -0,0 +1,16 @@
+// This file configures the initialization of Sentry on the server.
+// The config you add here will be used whenever the server handles a request.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+import * as Sentry from "@sentry/nextjs";
+
+const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN;
+const ENV = process.env.NEXT_PUBLIC_DEPLOY_ENV;
+
+Sentry.init({
+  dsn: SENTRY_DSN,
+  environment: ENV,
+  // Note: if you want to override the automatic release value, do not set a
+  // `release` value here - use the environment variable `SENTRY_RELEASE`, so
+  // that it will also get attached to your source maps
+});

src/api/auth.ts

@@ -0,0 +1,73 @@
+import {
+  deleteTokenCookies, getAccessTokenCookie, getRefreshTokenCookie, setAccessTokenCookie, setRefreshTokenCookie,
+} from "@utils/auth";
+import { APIPath, postBackendAPI } from "./backend";
+
+export type AuthTokenRequest = {
+  username: string;
+  password: string;
+};
+
+export type AuthToken = {
+  access: string;
+  refresh: string;
+};
+
+export type AuthRefreshRequest = {
+  refresh: AuthToken["refresh"]
+};
+
+export type RefreshedAuthToken = {
+  access: string;
+};
+
+async function generateToken(username: string, password: string): Promise<AuthToken> {
+  const resp = await postBackendAPI<AuthTokenRequest, AuthToken>({ path: APIPath.AUTH_TOKEN_GENERATE }, { username, password });
+  return {
+    access: resp.access,
+    refresh: resp.refresh,
+  };
+}
+
+async function refreshToken(): Promise<boolean> {
+  // Get refresh token if exists
+  const refresh = getRefreshTokenCookie();
+  if (!refresh) {
+    deleteTokenCookies();
+    return false;
+  }
+
+  try {
+    // Renew access token
+    const { access } = await postBackendAPI<AuthRefreshRequest, RefreshedAuthToken>({ path: APIPath.AUTH_TOKEN_REFRESH }, { refresh });
+    setAccessTokenCookie(access);
+  } catch (err) {
+    // If we get HTTP500 or something form backend, do not clear cookies
+    return false;
+  }
+  return true;
+}
+
+export const login = async (username: string, password: string): Promise<void> => {
+  const { access, refresh } = await generateToken(username, password);
+  setAccessTokenCookie(access);
+  setRefreshTokenCookie(refresh);
+};
+
+export const authenticate = async (): Promise<boolean> => {
+  // Find access token
+  const token = getAccessTokenCookie();
+  if (!token) {
+    // Unnecessary, but might be good idea to clear old refresh tokens etc.
+    deleteTokenCookies();
+    return false;
+  }
+
+  try {
+    await postBackendAPI({ path: APIPath.AUTH_TOKEN_VERIFY }, { token });
+    return true;
+  } catch (err) {
+    // Handle refresh automatically
+    return refreshToken();
+  }
+};

src/api/backend.ts

@@ -0,0 +1,131 @@
+import axios, { AxiosInstance, AxiosRequestConfig } from "axios";
+import { getAccessTokenCookie } from "@utils/auth";
+
+const axiosInstance: AxiosInstance = axios.create({
+  baseURL: process.env.NEXT_PUBLIC_API_URL,
+});
+
+export enum APIPath {
+  TAGS = "/tags/:id",
+  EVENTS = "/events/:id",
+  FEED = "/feed/:id",
+  JOBADS = "/jobads/:id",
+  SIGNUPS = "/signup/:id",
+  SIGNUPS_EDIT = "/signup/:id/edit",
+  SIGNUP_FORMS = "/signupForm/:id",
+  SIGNUP_FORMS_EMAIL = "/signupForm/:id/sendemail",
+  SIGNUP_FORMS_SIGNUPS = "/signupForm/:id/signups",
+  AUTH_TOKEN_GENERATE = "/token",
+  AUTH_TOKEN_VERIFY = "/token/verify",
+  AUTH_TOKEN_REFRESH = "/token/refresh",
+}
+
+export type API = {
+  path: APIPath;
+  urlParams?: {
+    id?: string | number;
+  };
+  queryParams?: {
+    limit?: number;
+    offset?: number;
+    since?: Date;
+    uuid?: string;
+  };
+  authenticated?: boolean;
+};
+
+type Headers = {
+  Authorization?: string;
+};
+
+const getAuthHeader = (): string => {
+  const jwt = getAccessTokenCookie();
+  return `Bearer ${jwt}`;
+};
+
+const getHeaders = (auth?: boolean): Headers => {
+  if (auth) {
+    return {
+      Authorization: getAuthHeader(),
+    };
+  }
+  return {};
+};
+
+const fillUrlParams = (apiPath: APIPath, params: API["urlParams"] = {}): string => {
+  const path = apiPath
+    .split("/")
+    .map((urlComponent) => {
+      // fill in each placeholder component like ':id' with value from params
+      if (urlComponent.startsWith(":")) {
+        const key = urlComponent.substring(1);
+        const value = params[key] ?? "";
+        return value;
+      }
+      return urlComponent;
+    })
+    .filter(Boolean)
+    .join("/");
+  // code above strips leading and trailing '/' from path
+  return `/${path}/`;
+};
+
+const callBackendAPI = async <RequestType, ResponseType>(
+  path: APIPath,
+  urlParams: API["urlParams"],
+  queryParams: API["queryParams"],
+  method: AxiosRequestConfig["method"],
+  headers: Headers,
+  requestBody: RequestType,
+): Promise<ResponseType> => {
+  const url = fillUrlParams(path, urlParams);
+  const request: AxiosRequestConfig = {
+    url,
+    method,
+    headers,
+    params: queryParams,
+    data: requestBody,
+    responseType: "json",
+  };
+  const response = await axiosInstance.request<ResponseType>(request);
+
+  const arrayResp = (response.data as { results?: ResponseType });
+  if (Array.isArray(arrayResp.results)) {
+    return arrayResp.results;
+  }
+  return response.data;
+};
+
+export const getBackendAPI = async <ResponseType>({
+  path, urlParams, queryParams, authenticated,
+}: API): Promise<ResponseType> => {
+  const headers = getHeaders(authenticated);
+  return callBackendAPI<undefined, ResponseType>(path, urlParams, queryParams, "GET", headers, undefined);
+};
+
+export const postBackendAPI = async <RequestType, ResponseType>({
+  path, urlParams, queryParams, authenticated,
+}: API, body: RequestType): Promise<ResponseType> => {
+  const headers = getHeaders(authenticated);
+  return callBackendAPI<RequestType, ResponseType>(path, urlParams, queryParams, "POST", headers, body);
+};
+
+export const putBackendAPI = async <RequestType, ResponseType>({
+  path, urlParams, queryParams, authenticated,
+}: API, body: RequestType): Promise<ResponseType> => {
+  const headers = getHeaders(authenticated);
+  return callBackendAPI<RequestType, ResponseType>(path, urlParams, queryParams, "PUT", headers, body);
+};
+
+export const deleteBackendAPI = async <ResponseType>({
+  path, urlParams, queryParams, authenticated,
+}: API): Promise<ResponseType> => {
+  const headers = getHeaders(authenticated);
+  return callBackendAPI<undefined, ResponseType>(path, urlParams, queryParams, "DELETE", headers, undefined);
+};
+
+export const fetcher = <ResponseType>({
+  path, urlParams, queryParams, authenticated,
+}: API) => getBackendAPI<ResponseType>({
+    path, urlParams, queryParams, authenticated,
+  });

src/api/eventApi.ts

@@ -1,11 +1,10 @@
 /* eslint-disable no-console */
-import axios from "axios";
 import Event from "@models/Event";
-import { getAuthHeader } from "@utils/auth";
+import {
+  APIPath, deleteBackendAPI, getBackendAPI, postBackendAPI, putBackendAPI,
+} from "./backend";
 
-export const URL = `${process.env.NEXT_PUBLIC_API_URL}/events/`;
-
-export interface Options {
+interface Options {
   limit?: number;
   offset?: number;
   auth?: boolean;
@@ -13,83 +12,66 @@ export interface Options {
 }
 
 class EventApi {
-  static async getEvent(id: number, auth = false): Promise<Event> {
+  static getEvent = async (id: number, auth = false): Promise<Event> => {
     try {
-      const headers = auth ? { Authorization: getAuthHeader() } : null;
-      const resp = await axios.get(`${URL}${id}/`, {
-        headers,
+      return await getBackendAPI<Event>({
+        path: APIPath.EVENTS, urlParams: { id }, authenticated: auth,
       });
-      return resp.data;
     } catch (err) {
       console.error(err);
       throw err;
     }
-  }
+  };
 
-  static async getEvents(options: Options = {}): Promise<Event[]> {
-    const {
-      since, limit, offset, auth,
-    } = options;
+  static getEvents = async ({
+    since, limit, offset, auth,
+  }: Options = {}): Promise<Event[]> => {
     try {
-      const params = {
-        since,
-        limit,
-        offset,
-      };
-      const headers = auth ? { Authorization: getAuthHeader() } : null;
-      const resp = await axios.get(`${URL}`, {
-        headers,
-        params,
-      });
-      return resp.data.results;
-    } catch (err) {
-      console.error(err);
-      throw err;
-    }
-  }
-
-  static async createEvent(data: Event): Promise<Event> {
-    try {
-      const resp = await axios.post(URL, data, {
-        headers: {
-          Authorization: getAuthHeader(),
+      return await getBackendAPI<Event[]>({
+        path: APIPath.EVENTS,
+        queryParams: {
+          since,
+          limit,
+          offset,
         },
+        authenticated: auth,
       });
-      return resp.data;
     } catch (err) {
       console.error(err);
       throw err;
     }
-  }
+  };
 
-  static async updateEvent(data: Event): Promise<Event> {
+  static createEvent = async (data: Event): Promise<Event> => {
     try {
-      const putUrl = `${URL}${data.id}/`;
-      const resp = await axios.put(putUrl, data, {
-        headers: {
-          Authorization: getAuthHeader(),
-        },
-      });
-      return resp.data;
+      return await postBackendAPI<Event, Event>({
+        path: APIPath.EVENTS, authenticated: true,
+      }, data);
     } catch (err) {
       console.error(err);
       throw err;
     }
-  }
+  };
 
-  static async deleteEvent(id: number) {
+  static updateEvent = async (data: Event): Promise<Event> => {
     try {
-      const resp = await axios.delete(`${URL}${id}`, {
-        headers: {
-          Authorization: getAuthHeader(),
-        },
-      });
-      return resp.data;
+      return await putBackendAPI<Event, Event>({
+        path: APIPath.EVENTS, urlParams: { id: data.id }, authenticated: true,
+      }, data);
     } catch (err) {
       console.error(err);
       throw err;
     }
-  }
+  };
+
+  static deleteEvent = async (id: number): Promise<void> => {
+    try {
+      await deleteBackendAPI<{ message: "OK" }>({ path: APIPath.EVENTS, urlParams: { id }, authenticated: true });
+    } catch (err) {
+      console.error(err);
+      throw err;
+    }
+  };
 }
 
 export default EventApi;

src/api/feedApi.ts

@@ -1,89 +1,71 @@
 /* eslint-disable no-console */
-import axios from "axios";
 import Post from "@models/Feed";
-import { getAuthHeader } from "@utils/auth";
+import {
+  APIPath, deleteBackendAPI, getBackendAPI, postBackendAPI, putBackendAPI,
+} from "./backend";
 
-export const URL = `${process.env.NEXT_PUBLIC_API_URL}/feed/`;
-
-export interface Options {
+interface Options {
   limit?: number;
   offset?: number;
   auth?: boolean;
 }
 
 class FeedApi {
-  static async getFeed(options: Options = {}): Promise<Post[]> {
-    const {
-      limit, offset, auth,
-    } = options;
-    const params = {
-      limit,
-      offset,
-    };
-    const headers = auth ? { Authorization: getAuthHeader() } : null;
+  static getPost = async (id: number, auth?: boolean): Promise<Post> => {
     try {
-      const resp = await axios.get(URL, { params, headers });
-      return resp.data.results;
-    } catch (err) {
-      console.error(err);
-      throw err;
-    }
-  }
-
-  static async getPost(id: number, options: Options = {}): Promise<Post> {
-    const { auth } = options;
-    const headers = auth ? { Authorization: getAuthHeader() } : null;
-    try {
-      const resp = await axios.get(`${URL}${id}/`, { headers });
-      return resp.data;
-    } catch (err) {
-      console.error(err);
-      throw err;
-    }
-  }
-
-  static async createPost(data: Post): Promise<Post> {
-    try {
-      const resp = await axios.post(URL, data, {
-        headers: {
-          Authorization: getAuthHeader(),
-        },
+      return await getBackendAPI<Post>({
+        path: APIPath.FEED, urlParams: { id }, authenticated: auth,
       });
-      return resp.data;
     } catch (err) {
       console.error(err);
       throw err;
     }
-  }
+  };
 
-  static async updatePost(data: Post): Promise<Post> {
+  static getFeed = async ({ limit, offset, auth }: Options = {}): Promise<Post[]> => {
     try {
-      const putUrl = `${URL}${data.id}/`;
-      const resp = await axios.put(putUrl, data, {
-        headers: {
-          Authorization: getAuthHeader(),
+      return await getBackendAPI<Post[]>({
+        path: APIPath.FEED,
+        queryParams: {
+          limit,
+          offset,
         },
+        authenticated: auth,
       });
-      return resp.data;
     } catch (err) {
       console.error(err);
       throw err;
     }
-  }
+  };
 
-  static async deletePost(id: number) {
+  static createPost = async (data: Post): Promise<Post> => {
     try {
-      const resp = await axios.delete(`${URL}${id}`, {
-        headers: {
-          Authorization: getAuthHeader(),
-        },
-      });
-      return resp.data;
+      return await postBackendAPI<Post, Post>({ path: APIPath.FEED, authenticated: true }, data);
     } catch (err) {
       console.error(err);
       throw err;
     }
-  }
+  };
+
+  static updatePost = async (data: Post): Promise<Post> => {
+    try {
+      return await putBackendAPI<Post, Post>({
+        path: APIPath.FEED, urlParams: { id: data.id }, authenticated: true,
+      }, data);
+    } catch (err) {
+      console.error(err);
+      throw err;
+    }
+  };
+
+  static deletePost = async (id: number): Promise<void> => {
+    try {
+      await deleteBackendAPI<{ message: "OK" }>({ path: APIPath.EVENTS, urlParams: { id }, authenticated: true });
+    } catch (err) {
+      console.error(err);
+      throw err;
+    }
+  };
 }
 
 export default FeedApi;

src/api/jobAdApi.ts

@@ -1,11 +1,10 @@
 /* eslint-disable no-console */
-import axios from "axios";
 import JobAd from "@models/JobAd";
-import { getAuthHeader } from "@utils/auth";
+import {
+  APIPath, deleteBackendAPI, getBackendAPI, postBackendAPI, putBackendAPI,
+} from "./backend";
 
-export const URL = `${process.env.NEXT_PUBLIC_API_URL}/jobads/`;
-
-export interface Options {
+interface Options {
   since?: Date;
   limit?: number;
   offset?: number;
@@ -13,83 +12,66 @@ export interface Options {
 }
 
 class JobAdApi {
-  static async getJobAds(options: Options = {}): Promise<JobAd[]> {
-    const {
-      since, limit, offset, auth,
-    } = options;
+  static getJobAd = async (id: number, auth = false): Promise<JobAd> => {
     try {
-      const params = {
-        since,
-        limit,
-        offset,
-      };
-      const headers = auth ? { Authorization: getAuthHeader() } : null;
-      const resp = await axios.get(`${URL}`, {
-        headers,
-        params,
+      return await getBackendAPI({
+        path: APIPath.JOBADS, urlParams: { id }, authenticated: auth,
       });
-      return resp.data.results;
     } catch (err) {
       console.error(err);
       throw err;
     }
-  }
+  };
 
-  static async getJobAd(id: number, auth = false): Promise<JobAd> {
+  static getJobAds = async ({
+    since, limit, offset, auth,
+  }: Options = {}): Promise<JobAd[]> => {
     try {
-      const headers = auth ? { Authorization: getAuthHeader() } : null;
-      const resp = await axios.get(`${URL}${id}/`, {
-        headers,
-      });
-      return resp.data;
-    } catch (err) {
-      console.error(err);
-      throw err;
-    }
-  }
-
-  static async createJobAd(data: JobAd): Promise<JobAd> {
-    try {
-      const resp = await axios.post(URL, data, {
-        headers: {
-          Authorization: getAuthHeader(),
+      return await getBackendAPI<JobAd[]>({
+        path: APIPath.JOBADS,
+        queryParams: {
+          since,
+          limit,
+          offset,
         },
+        authenticated: auth,
       });
-      return resp.data;
     } catch (err) {
       console.error(err);
       throw err;
     }
-  }
+  };
 
-  static async updateJobAd(data: JobAd): Promise<JobAd> {
+  static createJobAd = async (data: JobAd): Promise<JobAd> => {
     try {
-      const putUrl = `${URL}${data.id}/`;
-      const resp = await axios.put(putUrl, data, {
-        headers: {
-          Authorization: getAuthHeader(),
-        },
-      });
-      return resp.data;
+      return await postBackendAPI<JobAd, JobAd>({
+        path: APIPath.JOBADS, authenticated: true,
+      }, data);
     } catch (err) {
       console.error(err);
       throw err;
     }
-  }
+  };
 
-  static async deleteJobAd(id: number) {
+  static updateJobAd = async (data: JobAd): Promise<JobAd> => {
     try {
-      const resp = await axios.delete(`${URL}${id}`, {
-        headers: {
-          Authorization: getAuthHeader(),
-        },
-      });
-      return resp.data;
+      return await putBackendAPI<JobAd, JobAd>({
+        path: APIPath.JOBADS, urlParams: { id: data.id }, authenticated: true,
+      }, data);
     } catch (err) {
       console.error(err);
       throw err;
     }
-  }
+  };
+
+  static deleteJobAd = async (id: number): Promise<void> => {
+    try {
+      await deleteBackendAPI<{ message: "OK" }>({ path: APIPath.JOBADS, urlParams: { id }, authenticated: true });
+    } catch (err) {
+      console.error(err);
+      throw err;
+    }
+  };
 }
 
 export default JobAdApi;

src/api/signupApi.ts

@@ -1,182 +1,153 @@
 /* eslint-disable no-console */
-import axios from "axios";
 import { Signup, SignupForm } from "@models/Signup";
-import { getAuthHeader } from "@utils/auth";
+import {
+  APIPath, deleteBackendAPI, getBackendAPI, postBackendAPI, putBackendAPI,
+} from "./backend";
 
-export const URL = `${process.env.NEXT_PUBLIC_API_URL}/signup/`;
-export const FORM_URL = `${process.env.NEXT_PUBLIC_API_URL}/signupForm/`;
-
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface Options {
-  // limit?: number;
-  // offset?: number;
-  // auth?: boolean;
-}
+export type EmailRequest = {
+  mode: "all" | "actual" | "reserve";
+  subject: string;
+  content: string;
+};
 
 class SignupApi {
-  static async getSignup(id: number): Promise<Signup> {
+  static getSignup = async (id: number): Promise<Signup> => {
     try {
-      const resp = await axios.get(`${URL}${id}`, {
-        headers: {
-          Authorization: getAuthHeader(),
-        },
+      return await getBackendAPI<Signup>({
+        path: APIPath.SIGNUPS, urlParams: { id }, authenticated: true,
       });
-      return resp.data;
     } catch (err) {
       console.error(err);
       throw err;
     }
-  }
+  };
 
-  static async createSignup(data: Signup): Promise<Signup> {
+  static createSignup = async (data: Signup): Promise<Signup> => {
     try {
-      const resp = await axios.post(URL, data);
-      return resp.data;
+      return await postBackendAPI<Signup, Signup>({
+        path: APIPath.SIGNUPS,
+      }, data);
     } catch (err) {
       console.error(err);
       throw err;
     }
-  }
+  };
 
-  static async updateSignup(data: Signup, uuid: string): Promise<Signup> {
+  static updateSignup = async (data: Signup, uuid: string): Promise<Signup> => {
     try {
       const { id } = data;
       if (!id) throw new Error("SignupId required!");
-      const resp = await axios.put(`${URL}${id}/edit/`, data, {
-        params: { uuid },
-      });
-      return resp.data;
+      return await putBackendAPI<Signup, Signup>({
+        path: APIPath.SIGNUPS_EDIT,
+        urlParams: {
+          id,
+        },
+        queryParams: {
+          uuid,
+        },
+      }, data);
     } catch (err) {
       console.error(err);
       throw err;
     }
-  }
+  };
 
-  static async getSignupUUID(id: number, uuid: string): Promise<Signup> {
+  static getSignupUUID = async (id: number, uuid: string): Promise<Signup> => {
     try {
-      const resp = await axios.get(`${URL}${id}/edit/`, {
-        params: {
+      return await getBackendAPI<Signup>({
+        path: APIPath.SIGNUPS_EDIT,
+        urlParams: {
+          id,
+        },
+        queryParams: {
           uuid,
         },
       });
-      return resp.data;
     } catch (err) {
       console.error(err);
       throw err;
     }
-  }
+  };
 
-  static async deleteSignup(id: number) {
+  static deleteSignup = async (id: number): Promise<void> => {
     try {
-      const resp = await axios.delete(`${URL}${id}`, {
-        headers: {
-          Authorization: getAuthHeader(),
-        },
-      });
-      return resp.data;
+      await deleteBackendAPI<{ message: "OK" }>({ path: APIPath.SIGNUPS, urlParams: { id }, authenticated: true });
     } catch (err) {
       console.error(err);
       throw err;
     }
-  }
+  };
 
-  static async getForms(auth = false): Promise<SignupForm[]> {
+  static getForm = async (id: number, auth = false): Promise<SignupForm> => {
     try {
-      const headers = auth ? { Authorization: getAuthHeader() } : null;
-      const resp = await axios.get(FORM_URL, {
-        headers,
+      return await getBackendAPI<SignupForm>({
+        path: APIPath.SIGNUP_FORMS, urlParams: { id }, authenticated: auth,
       });
-      const { results } = resp.data;
-      return results;
     } catch (err) {
       console.error(err);
       throw err;
     }
-  }
+  };
 
-  static async getForm(id: number, auth = false): Promise<SignupForm> {
+  static getForms = async (auth = false): Promise<SignupForm[]> => {
     try {
-      const headers = auth ? { Authorization: getAuthHeader() } : null;
-      const resp = await axios.get(`${FORM_URL}${id}/`, {
-        headers,
+      return await getBackendAPI<SignupForm[]>({
+        path: APIPath.SIGNUP_FORMS, authenticated: auth,
       });
-      return resp.data;
     } catch (err) {
       console.error(err);
       throw err;
     }
-  }
+  };
 
-  static async createForm(data: SignupForm): Promise<SignupForm> {
+  static createForm = async (data: SignupForm): Promise<SignupForm> => {
     try {
-      const resp = await axios.post(FORM_URL, data, {
-        headers: {
-          Authorization: getAuthHeader(),
-        },
-      });
-      return resp.data;
+      return await postBackendAPI<SignupForm, SignupForm>({
+        path: APIPath.SIGNUP_FORMS, authenticated: true,
+      }, data);
     } catch (err) {
       console.error(err);
       throw err;
     }
-  }
+  };
 
-  static async updateForm(data: SignupForm): Promise<SignupForm> {
+  static updateForm = async (data: SignupForm): Promise<SignupForm> => {
     try {
-      const putUrl = `${FORM_URL}${data.id}/`;
-      const resp = await axios.put(putUrl, data, {
-        headers: {
-          Authorization: getAuthHeader(),
-        },
-      });
-      return resp.data;
+      return await putBackendAPI<SignupForm, SignupForm>({
+        path: APIPath.SIGNUP_FORMS, urlParams: { id: data.id }, authenticated: true,
+      }, data);
     } catch (err) {
       console.error(err);
       throw err;
     }
-  }
+  };
 
-  static async deleteForm(id: number) {
+  static deleteForm = async (id: number): Promise<void> => {
     try {
-      const resp = await axios.delete(`${FORM_URL}${id}`, {
-        headers: {
-          Authorization: getAuthHeader(),
-        },
-      });
-      return resp.data;
+      await deleteBackendAPI<{ message: "OK" }>({ path: APIPath.SIGNUP_FORMS, urlParams: { id }, authenticated: true });
     } catch (err) {
       console.error(err);
       throw err;
     }
-  }
+  };
 
-  static async signupFormSendEmail(data: any, id: number): Promise<any> {
+  static signupFormSendEmail = async (data: EmailRequest, id: number): Promise<void> => {
     try {
-      const resp = await axios.post(`${FORM_URL}${id}/sendemail/`, data, {
-        headers: {
-          Authorization: getAuthHeader(),
-        },
-      });
-      return resp.data;
+      await postBackendAPI<EmailRequest, { message: "Email sent" }>({ path: APIPath.SIGNUP_FORMS_EMAIL, urlParams: { id }, authenticated: true }, data);
     } catch (err) {
       console.error(err);
       throw err;
     }
-  }
+  };
 
-  static async getSignups(id: number): Promise<Signup[]> {
+  static getSignups = async (id: number): Promise<Signup[]> => {
     try {
-      const resp = await axios.get(`${FORM_URL}${id}/signups/`, {
-        headers: {
-          Authorization: getAuthHeader(),
-        },
-      });
-      return resp.data;
+      return await getBackendAPI<Signup[]>({ path: APIPath.SIGNUP_FORMS_SIGNUPS, urlParams: { id }, authenticated: true });
     } catch (err) {
       console.error(err);
       throw err;
     }
-  }
+  };
 }
 
 export default SignupApi;

src/api/tagApi.ts

@@ -1,26 +1,16 @@
 /* eslint-disable no-console */
-import axios from "axios";
 import Tag from "@models/Tag";
-
-export const URL = `${process.env.NEXT_PUBLIC_API_URL}/tags/`;
-
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface Options {
-  // limit?: number;
-  // offset?: number;
-  // auth?: boolean;
-}
+import { APIPath, getBackendAPI } from "./backend";
 
 class TagApi {
-  static async getTags(): Promise<Tag[]> {
+  static getTags = async (): Promise<Tag[]> => {
     try {
-      const resp = await axios.get(URL);
-      return resp.data.results;
+      return await getBackendAPI<Tag[]>({ path: APIPath.TAGS });
     } catch (err) {
       console.error(err);
       throw err;
     }
-  }
+  };
 }
 
 export default TagApi;

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,9 +6,10 @@ interface ButtonProps {
   onClick: () => void;
   buttonStyle: "hero" | "filled" | "filter" | "bordered";
   selected?: boolean;
+  children: React.ReactNode;
 }
 
-const StyledButton = styled.button<{ $selected: boolean }>`
+const StyledButton = styled.button<{ $selected?: boolean }>`
   border-radius: none;
   padding: 0.8rem 2rem;
   margin: 0.5rem;

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/ChangeLanguageButton.tsx

@@ -23,5 +23,5 @@ export default styled(ChangeLanguageButton)`
   font-size: 4rem;
   background: none;
   border: none;
-  width: fit-content;
+  width: 2cm;
 `;

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,13 +18,13 @@ const Row = styled.div`
 
 const ImageContainer = styled.div`
   position: relative;
-  height: 5rem;
-  width: 5rem;
+  height: 8rem;
+  width: 8rem;
   flex-shrink: 0;
 
   img {
     padding: 0.5rem !important;
-    border-radius: 50%;
+    border-radius: 15%;
   }
 `;
 
@@ -32,16 +32,24 @@ const Info = styled.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  padding: 0.25rem;
+  margin-left: -20px;
+  min-width: 150px;
+  padding: 2rem;
+  padding-top: 10px;
   color: ${colors.darkBlue};
 
   & > p {
-    font-size: 0.8rem;
+    font-size: 1rem;
     margin: 0;
   }
 
-  & > h3 {
+  & > a {
+    font-weight: 400;
     font-size: 0.9rem;
+  }
+
+  & > h3 {
+    font-size: 1.2rem;
     font-weight: 500;
   }
 `;
@@ -74,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 {
@@ -70,9 +70,9 @@ const CrossFadeImages: React.FC<CrossFadeImagesProps> = ({
       $duration={len * SINGLE_IMAGE_TIME}
     >
       { images.map((image, idx) => (
+        // eslint-disable-next-line react/no-array-index-key
         <div key={idx} className={idx > 0 ? "not-first" : undefined}>
           <AnimatedImage
-            key={image}
             src={image}
             objectFit="cover"
             width={width}

src/components/Draggable.tsx

@@ -0,0 +1,61 @@
+import React, { useRef } from "react";
+import { useDrag, useDrop } from "react-dnd";
+
+const type = "Draggable";
+
+const Draggable = ({
+  id, index, handleDrag, children,
+}) => {
+  const ref = useRef(null); // Initialize the reference
+
+  // useDrop hook is responsible for handling whether any item gets hovered or dropped on the element
+  const [, drop] = useDrop({
+    // accept receives a definition of what must be the type of the dragged item to be droppable
+    accept: type,
+    // This method is called when we hover over an element while dragging
+    drop(item: { index: number }) { // item is the dragged element
+      if (!ref.current) {
+        return;
+      }
+      const dragIndex = item.index;
+      // current element where the dragged element is hovered on
+      const hoverIndex = index;
+      // If the dragged element is hovered in the same place, then do nothing
+      if (dragIndex === hoverIndex) {
+        return;
+      }
+      // If it is dragged around other elements, then move the image and set the state with position changes
+      handleDrag(dragIndex, hoverIndex);
+      /*
+        Update the index for dragged item directly to avoid flickering
+        when the image was half dragged into the next
+      */
+      // eslint-disable-next-line no-param-reassign
+      item.index = hoverIndex;
+    },
+  });
+
+  // useDrag will be responsible for making an element draggable. It also expose, isDragging method to add any styles while dragging
+  const [{ isDragging }, drag] = useDrag(() => ({
+    // what type of item this to determine if a drop target accepts it
+    type,
+    // data of the item to be available to the drop methods
+    item: { id, index },
+    // method to collect additional data for drop handling like whether is currently being dragged
+    collect: (monitor) => ({
+      isDragging: monitor.isDragging(),
+    }),
+  }));
+
+  /*
+    Initialize drag and drop into the element using its reference.
+    Here we initialize both drag and drop on the same element (i.e., Image component)
+  */
+  drag(drop(ref));
+
+  return (
+    <div ref={ref}>{children}</div>
+  );
+};
+
+export default Draggable;

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/Favicons.tsx

@@ -1,8 +1,9 @@
+/* eslint-disable react/no-invalid-html-attribute */
 import React from "react";
 
 const Icons = (): JSX.Element => (
   <>
-    <link rel="shortcut icon" href="/favicons/favicon.ico" />
+    <link rel="icon" href="/favicons/favicon.ico" />
     <link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png" />
     <link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png" />
     <link rel="icon" type="image/png" sizes="48x48" href="/favicons/favicon-48x48.png" />

src/components/Feed/Events.tsx

@@ -0,0 +1,77 @@
+import {
+  Card,
+  PageLink,
+  CardSection,
+} from "@components/index";
+import Event from "@models/Event";
+import noop from "@utils/noop";
+import { Lang, getTranslateFunc } from "../../i18n";
+
+const cardTimeOpts: Intl.DateTimeFormatOptions = {
+  day: "numeric",
+  month: "numeric",
+  year: "numeric",
+  hour: "numeric",
+  minute: "2-digit",
+};
+
+type EventsProps = {
+  events: Event[];
+  lang: Lang
+};
+
+const Events: React.FC<EventsProps> = ({ events, lang }) => {
+  const isFi = lang === "fi";
+  const t = getTranslateFunc(lang);
+
+  const buttonText = `${t("Lue lisää")}\xa0›`;
+  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) => ({
+    ...e,
+    title: isFi ? e.title_fi : e.title_en,
+    description: isFi ? e.description_fi : e.description_en,
+    content: isFi ? e.content_fi : e.content_en,
+    location: isFi ? e.location_fi : e.location_en,
+    startDate: new Date(e.start_time).toLocaleString(locale, cardTimeOpts),
+    endDate: new Date(e.end_time).toLocaleString(locale, cardTimeOpts),
+  }));
+
+  return (
+    <CardSection id="#events">
+      {filteredEvents.map((event) => (
+        <Card
+          key={event.id}
+          title={event.title}
+          startTime={new Date(event.start_time).toLocaleString(locale, cardTimeOpts)}
+          text={event.description}
+          link={`/events/${event.id}`}
+          image={{
+            src: event.image || event.tags[0].icon,
+            alt: event.title,
+          }}
+          buttonOnClick={noop}
+          buttonText={buttonText}
+          data-e2e="event-card"
+        />
+      ))}
+      <aside>
+        <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>
+  );
+};
+
+export default Events;

src/components/Feed/Posts.tsx

@@ -0,0 +1,73 @@
+import {
+  Card,
+  PageLink,
+  CardSection,
+} from "@components/index";
+import Post from "@models/Feed";
+import noop from "@utils/noop";
+import { Lang, getTranslateFunc } from "../../i18n";
+
+const cardTimeOpts: Intl.DateTimeFormatOptions = {
+  day: "numeric",
+  month: "numeric",
+  year: "numeric",
+  hour: "numeric",
+  minute: "2-digit",
+};
+
+type PostsProps = {
+  feed: Post[];
+  lang: Lang
+};
+
+const Posts: React.FC<PostsProps> = ({ feed: posts, lang }) => {
+  const isFi = lang === "fi";
+  const t = getTranslateFunc(lang);
+
+  const buttonText = `${t("Lue lisää")}\xa0›`;
+  const allNewsText = t("Lue tuoreimmat uutiset");
+  const allNewsDesc = `${t("uutiset")}\xa0›`;
+  const meetingNotesText = t("Hallituksen pöytäkirjat");
+  const meetingNotesDesc = `${t("ja hallitukset kuulumiset")}\xa0›`;
+  const galleryText = t("Kuvia tapahtumista");
+  const galleryDesc = `${t("kuvagalleriassa")}\xa0›`;
+
+  const locale = isFi ? "fi-FI" : "en-GB";
+
+  const filteredFeed = posts.map((post) => ({
+    ...post,
+    title: isFi ? post.title_fi : post.title_en,
+    description: isFi ? post.description_fi : post.description_en,
+    content: isFi ? post.content_fi : post.content_en,
+    publish_time: new Date(post.publish_time).toLocaleString(locale, cardTimeOpts),
+  }));
+
+  return (
+    <CardSection>
+      {filteredFeed.map((post) => (
+        <Card
+          key={post.id}
+          title={post.title}
+          text={post.description}
+          startTime={post.publish_time}
+          link={`/feed/${post.id}`}
+          buttonOnClick={noop}
+          buttonText={buttonText}
+        />
+      ))}
+      <aside>
+        <PageLink to="/kilta/toiminta#uutiset" desc={allNewsDesc}>
+          {allNewsText}
+        </PageLink>
+        <PageLink to="https://static.sahkoinsinoorikilta.fi/Poytakirjat/" desc={meetingNotesDesc}>
+          {meetingNotesText}
+        </PageLink>
+        <PageLink to="https://sik.kuvat.fi" desc={galleryDesc}>
+          {galleryText}
+        </PageLink>
+      </aside>
+    </CardSection>
+  );
+};
+
+export default Posts;

src/components/HTMLLogo.tsx

@@ -1,58 +0,0 @@
-import React from "react";
-
-const Logo = (): JSX.Element => (
-  // eslint-disable-next-line react/no-danger
-  <head dangerouslySetInnerHTML={{
-    __html:
-    `<!--
-                                      -\`  o\` .s     h\`  -///.
-                                      .o+/o  \`d     m  /s\`\`\`y:  -+:.
-                            .///.  \`-.  -m\`   m::/ \`d  /s.\`.y: \`h..o/
-                           /o.\`.y- ..\`   :\`   \`\`\`\`  \`   .://.  ho+/o- \`y.
-                      ./+  +o\` .y-                             .  \`  .y- \`+//\`
-                     /+y/   :/+/.         .-::/+++++//:--\`           o. \`.h--/
-                     \` \`/s.               hNNMMMMMMMMMMNNy              o::d\`  -o-
-                 :+.   . .\`               mMMMMMMMMMMMMMMd               ---  \`/y++
-                  -o+-o:              \`-/oNMMMMMMMMMMMMMMNo:-\`               :o:\` .
-             \`:--..\`-/\`           \`-+ymNMMMMMMMMMMMMMMMMMMMMNmy+-\`     \`\`    \`\`  -++++.
-             \`h+/y/:     \`\`     .odNMMMMMMMMMNNmmmmmmNNMMMMMMMMMNdo..:sdd/       d.  .h
-              \`sh\`     \`+mds:.:yNMMMMMMMmds+:-...\`\`...-:+ydmMMMMMMMNmMmh+- .     o/--+o
-          \`\`\`\`\`\`+\`    .hMMMMMNMMMMMMMms:.                  .:yMMMMNds:.\`-+hms     .::. \`--
-         \`yo/y+/     :mMMMMMMMMMMMNy:\`       \`\`...       \`.+ymMNh+-\`.:sdMNds:\`\`     -/oom:
-          .oos      /NMMMMMMMMMMNy-      \`-oydmNNM  :h+:odNNms/.\`.+hmMNh+-\`.:sh-    .\`\`y/.:\`
-            -s\`    /MMMMMMMMMMMd:     \`-smMMMMMMMM  /MMMNh+-\`\`:sdMNms:.\`.+hNMNh:      hy+/-
-                  .NMMMMMMMMMMy\`     -hMMMMMMMMMMM  /MMo.\`./ymMNh+-\`\`:sdMNms:\`\`./\`    \`
-                  yMMMMMMMMMMy     \`sMMMMMMMMMMMMM  /MM+odNNmy/.\`.+yNMNh+- \`-odMNo
-                  \`:odMMMMMMd\`    \`hMMMMMMMMMMMMMM  /MMMNdo-\`\`-odMMms/\` \`/ymMMdo-
-                     \`NMMMMM-     sMMMMMMMMMMMMMMM  /MMN+\`\`/yNMNdo- \`-odMMMMMN\`
-                     /MMMMMd     .MMMMMMMMMMMMMMMM  /MMMMNMMNy/\` \`/ymMMdmMMMMM/
-                     sMMMMMo     +MMMMMMMMMMMMMMMM  /MMMMdmMMdsodMMNy/\` oMMMMMs
-                     yMMMMM+     +MMMMMMMMMMMMMNdh  /MMm/ \`oNMMMMMy.    +MMMMMy
-                     oMMMMMs     .MMMMMMMMMMMs-     /MMMMNMMNy/:smMMdo: sMMMMMo
-                     /MMMMMd      oMMMMMMMMN-       /MMMMdmMMmo:\` .+hNMNNMMMMM/
-      \`+ /hy.        \`NMMMMM:      oMMMMMMM+        /MMm/\` .ohNMNy/. \`/ymMMMMM\`         .-/+o-
-      .N\`m+oh     \`/smMMMMMMm\`      /NMMMMMo        /MMMMNy/. \`/ymMNdo:\`\`-ohNMNy/.     sNysd.
-       +yh..-     yMMMMMMMMMMh\`      .sNMMMN/       /MM//ymMNdo:\`\`-ohNMNy/.\`\`/ymMo     \`-smh.
-        ::--..:-  .NMMMMMMMMMMh.       .sNMMMh:     /MMs:\`\`-ohNNmy/.\`./ymMNdo:\`\`-\`   \`h-  \`/.
-        /oNodm:s   :NMMMMMMMMMMm/        \`+hNMNms:  /MMNNmy/.\`./ymMNdo:\`\`-ohNNmo     smys/-
-         \`dds.      :NMMMMMMMMMMMh:        \`.+hNMM  :s-./ymMNdo-\`\`-ohNNmy/.\`./y-    \`s.\`-/+
-         .s. ./s.    -mMMMMMMMMMMMNh/.         .:s    .\`  \`-odNNmy/.\`./ymMNdo\`     -\`   -.
-           /yhN:\`\`    .yMMMMMmNMMMMMMmy/-\`        \`:odN/     \`./ymMNdo-\`\`-ods\`    \`oyy//d.
-           --\`ydyy-     /ddo-\`-smMMMMMMMNmho/-\`  \`mMNdo.         \`:odNNmy/ \`     oo-\`-+y-
-             oyo-.:s\`    \`\`     ./hmMMMMMMMMMNmhs+y/.\`.\`            \`./yh/     :-./yy+
-             \` \`/hNy/:.            ./sdmMMMMMMMMMM\`-+hm/                     . ho\`\`\`-/
-               .s:my::-\`\`.-\`           .-/NMMMMMMMdNMMM/                   \`\`yydmsso\`
-                  m- .sysho+              mMMMMMMMMMMMN:                  /h:\`:yd-
-                  .  hh\` :M- \`\`           hNNNMMMMMmh+-              \`-+o+\`:dy. -\`
-                     /h+/yh\`.h+ .\`        \`.-::://:.           --/\`  ym:/M+ \`+:
-                      \`-:- -ms .md\`\`/\`                  .\`:    syyys.\`ydhos/
-                           s+ \`dymoyd\`-yss/ \`:  .\`  .\` \`syho- .M:  yd  oo
-                              :y\`/Nm. /do/- /M\` Nm/.M: sd-\`/M:\`hy++d+
-                                  /- .y+oN: sd  NyhhM: om/-+m-  .:-\`
-                                      \`-:-  o+  h/ /h:  -/+:\`
--->`,
-  }}
-  />
-);
-
-export default Logo;

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 }) => (
@@ -36,6 +37,7 @@ export const HeroSecondarySectionItem: React.FC<HeroSecondarySectionItemProps> =
 const Section = styled.section`
   background-color: ${colors.green1};
   color: ${colors.darkBlue};
+  width: 100%;
   padding: 3rem;
 
   h1 {
@@ -51,6 +53,7 @@ const Items = styled.div`
 
 interface HeroSecondarySectionProps {
   heading: string;
+  children: React.ReactNode;
 }
 
 const HeroSecondarySection: React.FC<HeroSecondarySectionProps> = ({ heading, children }) => (

src/components/Icon.tsx

@@ -15,7 +15,7 @@ interface IconProps {
   onClick?: React.MouseEventHandler<HTMLSpanElement>;
 }
 
-const nameToIcon = (name: IconType): JSX.Element | string => {
+const nameToIcon = (name: IconType): JSX.Element | null => {
   if (name === IconType.Facebook) {
     return (
       <svg
@@ -70,16 +70,34 @@ const nameToIcon = (name: IconType): JSX.Element | string => {
   }
   if (name === IconType.FinlandFlag) {
     return (
-      <span role="img">
-        🇫🇮
-      </span>
+      <svg
+        role="img"
+        viewBox="0 0 640 480"
+        width="64"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <title>Finland flag</title>
+        <path fill="#fff" d="M0 0h640v480H0z" />
+        <path fill="#002f6c" d="M0 174.5h640v131H0z" />
+        <path fill="#002f6c" d="M175.5 0h130.9v480h-131z" />
+      </svg>
     );
   }
   if (name === IconType.GBFlag) {
     return (
-      <span role="img">
-        🇬🇧
-      </span>
+      <svg
+        role="img"
+        viewBox="0 0 640 480"
+        width="64"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <title>GB flag</title>
+        <path fill="#012169" d="M0 0h640v480H0z" />
+        <path fill="#FFF" d="m75 0 244 181L562 0h78v62L400 241l240 178v61h-80L320 301 81 480H0v-60l239-178L0 64V0h75z" />
+        <path fill="#C8102E" d="m424 281 216 159v40L369 281h55zm-184 20 6 35L54 480H0l240-179zM640 0v3L391 191l2-44L590 0h50zM0 0l239 176h-60L0 42V0z" />
+        <path fill="#FFF" d="M241 0v480h160V0H241zM0 160v160h640V160H0z" />
+        <path fill="#C8102E" d="M0 193v96h640v-96H0zM273 0v480h96V0h-96z" />
+      </svg>
     );
   }
   return null;

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/Sections/TextSection.tsx

@@ -52,6 +52,7 @@ const StyledSection = styled.section`
     display: flex;
     flex-direction: column;
     justify-content: space-between;
+    z-index: 1;
 
     @media screen and (max-width: ${breakpoints.mobile}) {
       align-items: center;

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/components/Widgets/Checkbox/Checkboxes.tsx

@@ -5,20 +5,18 @@ import Checkbox from "./Checkbox";
 
 // See https://github.com/rjsf-team/react-jsonschema-form/blob/master/packages/core/src/components/widgets/CheckboxesWidget.js
 
-function selectValue(value, selected, all) {
+const selectValue = (value, selected, all) => {
   const at = all.indexOf(value);
   const updated = selected.slice(0, at).concat(value, selected.slice(at));
   // As inserting values at predefined index positions doesn't work with empty
   // arrays, we need to reorder the updated selection to match the initial order
   return updated.sort((a, b) => all.indexOf(a) > all.indexOf(b));
-}
+};
 
-function deselectValue(value, selected) {
-  return selected.filter((v) => v !== value);
-}
+const deselectValue = (value, selected) => selected.filter((v) => v !== value);
 
 type CheckboxesProps = Omit<WidgetProps, "options"> & {
-  options: any;
+  options: Record<string, any>;
 };
 
 const CheckboxContainer = styled.div`
@@ -32,12 +30,13 @@ const Checkboxes: React.FC<CheckboxesProps> = ({
   return (
     <div className="checkboxes" id={id}>
       {enumOptions.map((option, index) => {
+        const key = `${id}_${index}`;
         const checked = value.indexOf(option.value) !== -1;
         const itemDisabled = enumDisabled && enumDisabled.indexOf(option.value) !== -1;
         const disabledCls = disabled || itemDisabled || readonly ? "disabled" : "";
         const checkbox = (
           <Checkbox
-            id={`${id}_${index}`}
+            id={key}
             checked={checked}
             disabled={disabled || itemDisabled || readonly}
             autoFocus={autofocus && index === 0}
@@ -54,11 +53,11 @@ const Checkboxes: React.FC<CheckboxesProps> = ({
           </Checkbox>
         );
         return inline ? (
-          <label key={index} className={`checkbox-inline ${disabledCls}`}>
+          <label key={key} className={`checkbox-inline ${disabledCls}`}>
             {checkbox}
           </label>
         ) : (
-          <CheckboxContainer key={index} className={disabledCls}>
+          <CheckboxContainer key={key} className={disabledCls}>
             {checkbox}
           </CheckboxContainer>
         );

src/components/Widgets/MarkdownEditorWidget.tsx

@@ -4,9 +4,7 @@ import ReactMde from "react-mde";
 import { WidgetProps } from "@rjsf/core";
 import MarkdownStyles from "@views/common/MarkdownStyles";
 
-type MarkdownEditorWidgetProps = Omit<WidgetProps, "options"> & {
-  options: unknown;
-};
+type MarkdownEditorWidgetProps = WidgetProps;
 
 const Container = styled.div`
   background: white;

src/components/Widgets/RadioButton/RadioButtonWidget.tsx

@@ -4,7 +4,14 @@ import { WidgetProps } from "@rjsf/core";
 import RadioButton from "./RadioButton";
 
 type RadioButtonWidgetProps = Omit<WidgetProps, "options"> & {
-  options: any;
+  options: {
+    enumOptions: {
+      value: string;
+      label: string;
+    }[];
+    enumDisabled: string[];
+    inline: boolean;
+  };
 };
 
 const RadioButtonContainer = styled.div`
@@ -31,7 +38,8 @@ const RadioButtonWidget: React.FC<RadioButtonWidgetProps> = (props) => {
   // this is a temporary fix for radio button rendering bug in React, facebook/react#7630.
   return (
     <div className="field-radio-group" id={id}>
-      {enumOptions.map((option, i) => {
+      {enumOptions.map((option, index) => {
+        const key = `${id}_${index}`;
         const checked = option.value === value;
         const itemDisabled = enumDisabled && enumDisabled.indexOf(option.value) !== -1;
         const disabledCls = disabled || itemDisabled || readonly ? "disabled" : "";
@@ -42,7 +50,7 @@ const RadioButtonWidget: React.FC<RadioButtonWidgetProps> = (props) => {
             required={required}
             value={option.value}
             disabled={disabled || itemDisabled || readonly}
-            autoFocus={autofocus && i === 0}
+            autoFocus={autofocus && index === 0}
             onChange={() => onChange(option.value)}
             onBlur={onBlur && ((event) => onBlur(id, event.target.value))}
             onFocus={onFocus && ((event) => onFocus(id, event.target.value))}
@@ -52,11 +60,11 @@ const RadioButtonWidget: React.FC<RadioButtonWidgetProps> = (props) => {
         );
 
         return inline ? (
-          <label key={i} className={`radio-inline ${disabledCls}`}>
+          <label key={key} className={`radio-inline ${disabledCls}`}>
             {radio}
           </label>
         ) : (
-          <RadioButtonContainer key={i} className={disabledCls}>
+          <RadioButtonContainer key={key} className={disabledCls}>
             {radio}
           </RadioButtonContainer>
         );

src/components/Widgets/SignupQuestionsWidget/OptionsWidget.tsx

@@ -1,49 +1,72 @@
 import React from "react";
 import Checkbox from "@components/Widgets/Checkbox/Checkbox";
+import { SignupFormQuestion } from "@models/Signup";
+import { Lang } from "../../../i18n";
 import {
-  Question, InputProps, optionTypes, SignupQuestionError,
+  InputProps, optionTypes, SignupQuestionError,
 } from "./common";
 
 interface OptionsWidgetProps {
   inputProps: InputProps;
-  onChange: (value: Question[]) => void;
+  onChange: (value: SignupFormQuestion[]) => void;
 }
 
 class OptionsWidget extends React.Component<OptionsWidgetProps> {
-  handleListOptionsChange = (questions: Question[], index: number): React.ChangeEventHandler<HTMLInputElement> => (event) => {
+  handleListOptionsChange = (questions: SignupFormQuestion[], index: number, lang: Lang): React.ChangeEventHandler<HTMLInputElement> => (event) => {
     const { onChange } = this.props;
     const val = event.target.value;
     const lst = val.split(";").map((p) => p.trimLeft());
-    // eslint-disable-next-line no-param-reassign
-    questions[index].options = lst;
+
+    if (lang === "fi") {
+      // eslint-disable-next-line no-param-reassign
+      questions[index].options = {
+        ...questions[index].options,
+        enumNames_fi: lst,
+        enum: lst,
+      };
+    }
+    if (lang === "en") {
+      // eslint-disable-next-line no-param-reassign
+      questions[index].options = {
+        ...questions[index].options,
+        enumNames_en: lst,
+      };
+    }
     onChange(questions);
   };
 
-  handleTextOptionsChange = (questions: Question[], index: number): React.ChangeEventHandler<HTMLInputElement> => (event) => {
+  handleInfoTextOptionsChange = (questions: SignupFormQuestion[], index: number, lang: Lang): React.ChangeEventHandler<HTMLInputElement> => (event) => {
     const { onChange } = this.props;
     const val = event.target.value;
-    // eslint-disable-next-line no-param-reassign
-    questions[index].options = val as unknown as string[]; // TODO: Check type
+
+    if (lang === "fi") {
+      // eslint-disable-next-line no-param-reassign
+      questions[index].description_fi = val;
+    }
+    if (lang === "en") {
+      // eslint-disable-next-line no-param-reassign
+      questions[index].description_en = val;
+    }
     onChange(questions);
   };
 
-  handleIntegerOptionsChange = (questions: Question[], index: number): React.ChangeEventHandler<HTMLInputElement> => (event) => {
+  handleIntegerOptionsChange = (questions: SignupFormQuestion[], index: number): React.ChangeEventHandler<HTMLInputElement> => (event) => {
     const { onChange } = this.props;
     const val = event.target.value;
     if (val !== "") {
-      const lst = val.split(";").map((p) => p.trimLeft());
+      const lst: number[] = val.split(";").map((p) => Number(p.trimStart()));
       // Ignore everything else but the two first values
       // eslint-disable-next-line no-param-reassign
-      questions[index].options = lst.splice(0, 2);
+      questions[index].options.enum = lst.splice(0, 2) as unknown[] as string[];
     } else {
       // eslint-disable-next-line no-param-reassign
-      questions[index].options = [];
+      questions[index].options.enum = [];
     }
 
     onChange(questions);
   };
 
-  handleRequiredChange = (questions: Question[], index: number): React.ChangeEventHandler<HTMLInputElement> => (event) => {
+  handleRequiredChange = (questions: SignupFormQuestion[], index: number): React.ChangeEventHandler<HTMLInputElement> => (event) => {
     const { onChange } = this.props;
     const val: boolean = event.target.checked;
     // eslint-disable-next-line no-param-reassign
@@ -67,7 +90,7 @@ class OptionsWidget extends React.Component<OptionsWidgetProps> {
   render(): JSX.Element {
     const { inputProps } = this.props;
     const {
-      type, value, questions, index,
+      value, type, questions, index,
     } = inputProps;
     if (!optionTypes.includes(type)) {
       throw new SignupQuestionError(`Question widget type "${type}" not in types array.`);
@@ -82,25 +105,29 @@ class OptionsWidget extends React.Component<OptionsWidgetProps> {
         <>
           <input
             type="text"
-            placeholder="Write something informative"
-            value={questions[index].options}
-            onChange={this.handleTextOptionsChange(questions, index)}
+            placeholder="Write something informative in Finnish"
+            value={questions[index].description_fi}
+            onChange={this.handleInfoTextOptionsChange(questions, index, "fi")}
+            required
+          />
+          <input
+            type="text"
+            placeholder="Write something informative in English"
+            value={questions[index].description_en}
+            onChange={this.handleInfoTextOptionsChange(questions, index, "en")}
             required
           />
-          {this.requiredField()}
         </>
       );
     }
 
     if (type === "integer") {
-      const lst = value as string[];
-      const joinedValue = lst.join(";");
       return (
         <>
           <input
             type="text"
             placeholder="Minimum;Maximum"
-            value={joinedValue}
+            value={value.enum.join(";")}
             onChange={this.handleIntegerOptionsChange(questions, index)}
           />
           {this.requiredField()}
@@ -109,15 +136,20 @@ class OptionsWidget extends React.Component<OptionsWidgetProps> {
     }
 
     if (type === "radiobutton") {
-      const lst = value as string[];
-      const joinedValue = lst.join(";");
       return (
         <>
+          <input
+            type="text"
+            placeholder="Kyllä;ei;ehkä"
+            value={value.enumNames_fi.join(";")}
+            onChange={this.handleListOptionsChange(questions, index, "fi")}
+            required
+          />
           <input
             type="text"
             placeholder="Yes;no;maybe"
-            value={joinedValue}
-            onChange={this.handleListOptionsChange(questions, index)}
+            value={value.enumNames_en.join(";")}
+            onChange={this.handleListOptionsChange(questions, index, "en")}
             required
           />
         </>
@@ -125,15 +157,20 @@ class OptionsWidget extends React.Component<OptionsWidgetProps> {
     }
 
     if (type === "checkbox") {
-      const lst = value as string[];
-      const joinedValue = lst.join(";");
       return (
         <>
           <input
             type="text"
-            placeholder="A;B;C"
-            value={joinedValue}
-            onChange={this.handleListOptionsChange(questions, index)}
+            placeholder="Yksi;Kaksi;Kolme"
+            value={value.enumNames_fi.join(";")}
+            onChange={this.handleListOptionsChange(questions, index, "fi")}
+            required
+          />
+          <input
+            type="text"
+            placeholder="One;Two;Three"
+            value={value.enumNames_en.join(";")}
+            onChange={this.handleListOptionsChange(questions, index, "en")}
             required
           />
           {this.requiredField()}

src/components/Widgets/SignupQuestionsWidget/QuestionList.tsx

@@ -1,8 +1,9 @@
-import React, { ReactNode } from "react";
+import React from "react";
 import styled from "styled-components";
-import { Draggable } from "react-beautiful-dnd";
+import Draggable from "@components/Draggable";
 import colors from "@theme/colors";
-import { Question, InputProps } from "./common";
+import { SignupFormQuestion } from "@models/Signup";
+import { Lang } from "../../../i18n";
 import OptionsWidget from "./OptionsWidget";
 import TypeWidget from "./TypeWidget";
 import QuestionElement from "./Question";
@@ -16,77 +17,70 @@ const WidgetRow = styled.div`
 `;
 
 interface QuestionListProps {
-  questions: Question[];
-  innerRef: React.Ref<HTMLDivElement>;
-  placeholder: ReactNode;
-  onChange: (value: Question[]) => void;
+  questions: SignupFormQuestion[];
+  onChange: (value: SignupFormQuestion[]) => void;
 }
 
-class QuestionList extends React.Component<QuestionListProps> {
-  renderTextWidget = ({ questions, value, index }: InputProps): JSX.Element => (
-    <input type="text" value={value} onChange={this.handleNameInputChange(questions, index)} />
-  );
-
-  handleNameInputChange = (questions: Question[], index: number): React.ChangeEventHandler<HTMLInputElement> => (event) => {
-    const { onChange } = this.props;
-    const val = event.target.value;
-    // eslint-disable-next-line no-param-reassign
-    questions[index].name = val;
+const QuestionList: React.FC<QuestionListProps> = ({ questions, onChange }): JSX.Element => {
+  const handleDrag = (srcIndex, dstIndex) => {
+    const srcCopy = { ...questions[srcIndex] };
+    questions.splice(srcIndex, 1);
+    questions.splice(dstIndex, 0, srcCopy);
     onChange(questions);
   };
 
-  handleElementRemove = (questions: Question[], index: number) => (): void => {
-    const { onChange } = this.props;
+  const handleElementRemove = (index: number) => (): void => {
     const newQuestions = [...questions];
     newQuestions.splice(index, 1);
     onChange(newQuestions);
   };
 
-  renderQuestions(): JSX.Element[] {
-    const { questions, onChange } = this.props;
-    return questions.map((q, index) => {
-      const nameWidgetProps = {
-        value: q.name, type: "text", questions, index,
-      };
-      const nameWidget = this.renderTextWidget(nameWidgetProps);
+  const handleNameInputChange = (index: number, lang: Lang): React.ChangeEventHandler<HTMLInputElement> => (event) => {
+    const val = event.target.value;
+    if (lang === "fi") {
+      // eslint-disable-next-line no-param-reassign
+      questions[index].title_fi = val;
+    }
+    if (lang === "en") {
+      // eslint-disable-next-line no-param-reassign
+      questions[index].title_en = val;
+    }
+    onChange(questions);
+  };
 
-      const dataProps = {
-        value: q.options, type: q.type, questions, index,
-      };
-      const optionsWidget = <OptionsWidget inputProps={dataProps} onChange={onChange} />;
-      const typeSelectWidget = <TypeWidget inputProps={dataProps} onChange={onChange} />;
-      return (
-        <Draggable draggableId={q.id} key={q.id} index={index}>
-          {(provided) => (
-            <WidgetRow
-              {...provided.draggableProps}
-              {...provided.dragHandleProps}
-              ref={provided.innerRef}
-            >
+  return (
+    <div data-e2e="admin-signup-question">
+      {questions.map((q, index) => {
+        const inputProps = {
+          value: q.options,
+          type: q.type,
+          questions,
+          index,
+        };
+        const optionsWidget = <OptionsWidget inputProps={inputProps} onChange={onChange} />;
+        const typeSelectWidget = <TypeWidget inputProps={inputProps} onChange={onChange} />;
+        return (
+          <Draggable
+            key={q.id}
+            id={q.id}
+            index={index}
+            handleDrag={handleDrag}
+          >
+            <WidgetRow>
               <QuestionElement
-                onClick={this.handleElementRemove(questions, index)}
+                onClick={handleElementRemove(index)}
               >
-                {nameWidget}
+                <input type="text" value={q.title_fi} onChange={handleNameInputChange(index, "fi")} />
+                <input type="text" value={q.title_en} onChange={handleNameInputChange(index, "en")} />
                 {typeSelectWidget}
                 {optionsWidget}
               </QuestionElement>
             </WidgetRow>
-          )}
-        </Draggable>
-      );
-    });
-  }
-
-  render(): JSX.Element {
-    const { placeholder, innerRef } = this.props;
-
-    return (
-      <div ref={innerRef} data-e2e="admin-signup-question">
-        {this.renderQuestions()}
-        {placeholder}
-      </div>
-    );
-  }
-}
+          </Draggable>
+        );
+      })}
+    </div>
+  );
+};
 
 export default QuestionList;

src/components/Widgets/SignupQuestionsWidget/SignupQuestionsWidget.tsx

@@ -1,11 +1,10 @@
 import React from "react";
 import styled from "styled-components";
 import shortid from "shortid";
-import { DragDropContext, Droppable } from "react-beautiful-dnd";
 import colors from "@theme/colors";
 import AddIcon from "@components/AddIcon";
+import { SignupFormQuestion } from "@models/Signup";
 import QuestionList from "./QuestionList";
-import { Question } from "./common";
 
 const Widget = styled.div`
   & > button {
@@ -34,58 +33,39 @@ const AddQuestionButton = styled.button`
 interface SignupQuestionsWidgetProps {
   value: string;
   onChange: (value: string) => void;
-  onFocus: () => void;
-  required: boolean;
-  disabled: boolean;
 }
 
-const SignupQuestionsWidget: React.FC<SignupQuestionsWidgetProps> = ({ value, onFocus, onChange }) => {
-  const onValueChange = (questions: Question[]) => {
+const SignupQuestionsWidget: React.FC<SignupQuestionsWidgetProps> = ({ value, onChange }) => {
+  const onValueChange = (questions: SignupFormQuestion[]) => {
     const newValue = JSON.stringify(questions);
     onChange(newValue);
   };
 
   const handleNewRowClick = (questions) => () => {
-    const newRow: Question = {
+    const newRow: SignupFormQuestion = {
       id: shortid.generate(),
-      name: `Question #${questions.length + 1}`,
-      options: [],
+      title_fi: `Kysymys #${questions.length + 1}`,
+      title_en: `Question #${questions.length + 1}`,
+      options: {
+        enum: [],
+        enumNames_fi: [],
+        enumNames_en: [],
+      },
       type: "text",
     };
-    const newQuestions: Question[] = questions.concat([newRow]);
+    const newQuestions: SignupFormQuestion[] = questions.concat([newRow]);
 
     onValueChange(newQuestions);
   };
 
-  const handleDragEnd = (questions: Question[]) => (result) => {
-    const srcIndex = result.source.index;
-    const dstIndex = result.destination.index;
-    const srcCopy = { ...questions[srcIndex] };
-    questions.splice(srcIndex, 1);
-    questions.splice(dstIndex, 0, srcCopy);
-
-    onValueChange(questions);
-  };
-  const questions = JSON.parse(value) as Question[];
+  const questions: SignupFormQuestion[] = JSON.parse(value);
 
   return (
     <Widget>
-      <DragDropContext
-        onDragEnd={handleDragEnd(questions)}
-        onDragStart={onFocus}
-      >
-        <Droppable droppableId="questions">
-          {(provided) => (
-            <QuestionList
-              {...provided.droppableProps}
-              innerRef={provided.innerRef}
-              questions={questions}
-              onChange={onValueChange}
-              placeholder={provided.placeholder}
-            />
-          )}
-        </Droppable>
-      </DragDropContext>
+      <QuestionList
+        questions={questions}
+        onChange={onValueChange}
+      />
       <AddQuestionButton type="button" onClick={handleNewRowClick(questions)} data-e2e="admin-signup-new-question">
         <AddIcon />
         New Question

src/components/Widgets/SignupQuestionsWidget/TypeWidget.tsx

@@ -1,32 +1,29 @@
 import React from "react";
-import { Question, InputProps, optionTypes } from "./common";
+import { SignupFormQuestion } from "@models/Signup";
+import { InputProps, optionTypes } from "./common";
 
 interface TypeWidgetProps {
   inputProps: InputProps;
-  onChange: (value: Question[]) => void;
+  onChange: (value: SignupFormQuestion[]) => void;
 }
 
-class TypeWidget extends React.Component<TypeWidgetProps> {
-  handleTypeChange = (questions: Question[], index: number): React.ChangeEventHandler<HTMLSelectElement> => (event) => {
-    const { onChange } = this.props;
-    const val = event.target.value as Question["type"];
+const TypeWidget = ({ onChange, inputProps }: TypeWidgetProps): JSX.Element => {
+  const handleTypeChange = (questions: SignupFormQuestion[], index: number): React.ChangeEventHandler<HTMLSelectElement> => (event) => {
+    const val = event.target.value as SignupFormQuestion["type"];
     // eslint-disable-next-line no-param-reassign
     questions[index].type = val;
     onChange(questions);
   };
 
-  render(): JSX.Element {
-    const { inputProps } = this.props;
-    const { type, questions, index } = inputProps;
-    const options = optionTypes.map((t) => (
-      <option key={t} value={t}>{t}</option>
-    ));
-    return (
-      <select onChange={this.handleTypeChange(questions, index)} value={type} name="type">
-        {options}
-      </select>
-    );
-  }
-}
+  const { questions, type, index } = inputProps;
+  const options = optionTypes.map((t) => (
+    <option key={t} value={t}>{t}</option>
+  ));
+  return (
+    <select onChange={handleTypeChange(questions, index)} value={type} name="type">
+      {options}
+    </select>
+  );
+};
 
 export default TypeWidget;

src/components/Widgets/SignupQuestionsWidget/common.ts

@@ -1,19 +1,23 @@
+import type { SignupFormQuestion } from "@models/Signup";
+
 export interface Question {
   id: string;
   name: string;
   type: OptionTypes;
-  options: string[];
+  enum?: string[];
+  enumNames?: string[];
+  description?: string;
   required?: boolean;
 }
 
 export interface InputProps {
   index: number;
-  value: string | string[];
-  questions: Question[];
+  value: SignupFormQuestion["options"];
+  questions: SignupFormQuestion[];
   type: string;
 }
 
-type OptionTypes =
+export type OptionTypes =
   "text" |
   "info" |
   "integer" |

src/hooks/useFetchEvents.ts

@@ -1,56 +0,0 @@
-import { useRef } from "react";
-import useSWR from "swr";
-import isDeepEqual from "fast-deep-equal/react";
-import axios, { AxiosRequestConfig } from "axios";
-import Event from "@models/Event";
-import { getAuthHeader } from "@utils/auth";
-import { URL, Options } from "@api/eventApi";
-
-const fetcher = (url: string, config: AxiosRequestConfig) => axios.get(url, config).then((res) => res.data);
-
-const generateFetchParams = (id = "", options: Options = {}) => {
-  const url = `${URL}${id}`;
-  const {
-    auth, since, limit, offset,
-  } = options;
-
-  return {
-    url,
-    config: {
-      params: {
-        since,
-        limit,
-        offset,
-      },
-      headers: auth ? { Authorization: getAuthHeader() } : null,
-    },
-  };
-};
-
-interface FetchArguments {
-  initialData?: Event | Event[],
-  id?: string;
-  options?: Options
-}
-
-const useFetchEvents = ({
-  initialData,
-  id = "",
-  options = {},
-}: FetchArguments) => {
-  const { url, config } = generateFetchParams(id, options);
-
-  // Use ref, since config dependency is non-primitive => without this we have infinite fetch loop
-  const configRef = useRef(config);
-  if (!isDeepEqual(configRef.current, config)) {
-    configRef.current = config;
-  }
-
-  const { data, error } = useSWR([url, configRef.current], fetcher, { initialData });
-  return {
-    data: data?.results || data,
-    error,
-  };
-};
-
-export default useFetchEvents;

src/hooks/useFetchFeed.ts

@@ -1,53 +0,0 @@
-import { useRef } from "react";
-import useSWR from "swr";
-import isDeepEqual from "fast-deep-equal/react";
-import axios, { AxiosRequestConfig } from "axios";
-import Post from "@models/Feed";
-import { getAuthHeader } from "@utils/auth";
-import { URL, Options } from "@api/feedApi";
-
-const feedFetcher = (url: string, config?: AxiosRequestConfig) => axios.get(url, config).then((res) => res.data);
-
-const generateFetchParams = (id = "", options: Options = {}) => {
-  const url = `${URL}${id}`;
-  const { auth, limit, offset } = options;
-
-  return {
-    url,
-    config: {
-      params: {
-        limit,
-        offset,
-      },
-      headers: auth ? { Authorization: getAuthHeader() } : null,
-    },
-  };
-};
-
-interface FetchArguments {
-  initialData?: Post | Post[],
-  id?: string;
-  options?: Options
-}
-
-const useFetchFeed = ({
-  initialData,
-  id = "",
-  options = {},
-}: FetchArguments) => {
-  const { url, config } = generateFetchParams(id, options);
-
-  // Use ref, since config dependency is non-primitive => without this we have infinite fetch loop
-  const configRef = useRef(config);
-  if (!isDeepEqual(configRef.current, config)) {
-    configRef.current = config;
-  }
-
-  const { data, error } = useSWR([url, configRef.current], feedFetcher, { initialData });
-  return {
-    data: data?.results || data,
-    error,
-  };
-};
-
-export default useFetchFeed;

src/hooks/useFetchJobAds.ts

@@ -1,56 +0,0 @@
-import { useRef } from "react";
-import useSWR from "swr";
-import isDeepEqual from "fast-deep-equal/react";
-import axios, { AxiosRequestConfig } from "axios";
-import JobAd from "@models/JobAd";
-import { getAuthHeader } from "@utils/auth";
-import { URL, Options } from "@api/jobAdApi";
-
-const jobAdFetcher = (url: string, config?: AxiosRequestConfig) => axios.get(url, config).then((res) => res.data);
-
-const generateFetchParams = (id = "", options: Options = {}) => {
-  const url = `${URL}${id}`;
-  const {
-    since, limit, offset, auth,
-  } = options;
-
-  return {
-    url,
-    config: {
-      params: {
-        since,
-        limit,
-        offset,
-      },
-      headers: auth ? { Authorization: getAuthHeader() } : null,
-    },
-  };
-};
-
-interface FetchArguments {
-  initialData?: JobAd | JobAd[],
-  id?: string;
-  options?: Options;
-}
-
-const useFetchJobAds = ({
-  initialData,
-  id = "",
-  options = {},
-}: FetchArguments) => {
-  const { url, config } = generateFetchParams(id, options);
-
-  // Use ref, since config dependency is non-primitive => without this we have infinite fetch loop
-  const configRef = useRef(config);
-  if (!isDeepEqual(configRef.current, config)) {
-    configRef.current = config;
-  }
-
-  const { data, error } = useSWR([url, configRef.current], jobAdFetcher, { initialData });
-  return {
-    data: data?.results || data,
-    error,
-  };
-};
-
-export default useFetchJobAds;

src/hooks/useIsTouchDevice.ts

@@ -0,0 +1,14 @@
+import { useEffect, useState } from "react";
+
+const useIsTouchDevice = () => {
+  const [isTouchDevice, setTouchDevice] = useState(false);
+  useEffect(() => {
+  // simple way to check whether the device support touch (it doesn't check all fallback, it supports only modern browsers)
+    if (window !== undefined && "ontouchstart" in window) {
+      setTouchDevice(true);
+    }
+  }, []);
+  return isTouchDevice;
+};
+
+export default useIsTouchDevice;

src/i18n/index.tsx

@@ -1,10 +1,10 @@
 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";
 
-type Lang = "fi" | "en";
+export type Lang = "fi" | "en";
 const LOCAL_STORAGE_KEY = "locale";
 
 type TranslateFunc = (key: string) => string;
@@ -26,6 +26,11 @@ const translateFi: TranslateFunc = (key) => {
   return res || key;
 };
 
+export const getTranslateFunc = (language: Lang): TranslateFunc => {
+  if (language === "en") return translateEn;
+  return translateFi;
+};
+
 interface Store {
   language: Lang;
   changeLanguage: React.Dispatch<Lang>,
@@ -62,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);
@@ -73,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>
   );
@@ -84,7 +91,7 @@ export default LocaleStore;
 
 const useTranslation = () => {
   const { language, changeLanguage } = useContext(LocaleContext);
-  const t = language === "en" ? translateEn : translateFi;
+  const t = getTranslateFunc(language);
 
   return {
     t,

src/i18n/locales/en/common.json

@@ -6,7 +6,17 @@
   "Päättyy": "Ends at",
   "Lataa lisää": "Load more",
   "Tapahtumat": "Events",
+  "Kaikki tapahtumat": "All events",
+  "löydät tapahtumakalenterista": "you can find all events from the event calendar",
   "Uutiset": "News",
+  "uutiset": "news",
+  "Lue tuoreimmat uutiset": "Read news",
+  "Hallituksen pöytäkirjat": "Board meeting records",
+  "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",
@@ -40,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/models/Signup.ts

@@ -1,4 +1,4 @@
-import { Question } from "@components/Widgets/SignupQuestionsWidget/common";
+import { OptionTypes } from "@components/Widgets/SignupQuestionsWidget/common";
 
 export interface Signup {
   id?: number;
@@ -6,14 +6,31 @@ export interface Signup {
   answer: string;
 }
 
+// Describes how forms are stored in backend
+export interface SignupFormQuestion {
+  id: string;
+  title_fi: string;
+  title_en: string;
+  description_fi?: string;
+  description_en?: string;
+  type: OptionTypes;
+  options: {
+    enum: string[];
+    enumNames_fi: string[];
+    enumNames_en: string[];
+  };
+  required?: boolean;
+}
 export interface SignupForm {
   id?: number;
   title_fi: string;
   title_en: string;
   visible: boolean;
+  isOpen: boolean;
   start_time: string;
   end_time: string;
-  questions: Question[];
+  email_content: string;
+  questions: SignupFormQuestion[];
   signups: string[];
   quota: number;
   schema: {

src/pages/_app.tsx

@@ -1,16 +1,21 @@
 import React from "react";
+import { DndProvider } from "react-dnd";
+import { HTML5Backend } from "react-dnd-html5-backend";
+import { TouchBackend } from "react-dnd-touch-backend";
 import Head from "next/head";
 import { AppProps } from "next/app";
 import styled, { createGlobalStyle } from "styled-components";
 import { ToastContainer } from "react-toastify";
 import colors from "@theme/colors";
 import breakpoints from "@theme/breakpoints";
-import LocaleStore from "../i18n";
 
 import "react-mde/lib/styles/css/react-mde-all.css";
 import "react-toastify/dist/ReactToastify.css";
 import "normalize.css";
 
+import useIsTouchDevice from "@hooks/useIsTouchDevice";
+import LocaleStore from "../i18n";
+
 const fontFamily = "'Montserrat', sans-serif";
 const fontSize = 12; // 16px
 const lineHeight = 1.5;
@@ -127,27 +132,35 @@ const AppContainer = styled.div`
   background-color: ${colors.white};
 `;
 
-const Web20App = ({ Component, pageProps }: AppProps): JSX.Element => (
-  <>
-    <Head>
-      <meta httpEquiv="Content-Type" content="text/html; charset=utf-8" />
-      <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
-      <meta name="viewport" content="width=device-width, initial-scale=1" />
-      <title>Aalto-yliopiston Sähköinsinöörikilta ry</title>
-      <meta
-        name="description"
-        content="Aalto-yliopiston Sähköinsinöörikilta ry on Otaniemessä vaikuttava opiskelijajärjestö, joka on perustettu vuonna 1921. Kilta järjestää kaikenlaista toimintaa liittyen opintoihin ja vapaa-ajan viettoon."
-      />
-      <meta name="keywords" content="SIK AYY" />
-    </Head>
-    <GlobalCommonStyles />
-    <LocaleStore>
-      <AppContainer>
-        <Component {...pageProps} />
-      </AppContainer>
-    </LocaleStore>
-    <ToastContainer position="bottom-right" />
-  </>
-);
+const Web20App = ({ Component, pageProps }: AppProps): JSX.Element => {
+  const isTouchDevice = useIsTouchDevice();
+  // Assigning backend based on touch support on the device
+  const backendForDND = isTouchDevice ? TouchBackend : HTML5Backend;
+
+  return (
+    <>
+      <Head>
+        <meta httpEquiv="Content-Type" content="text/html; charset=utf-8" />
+        <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>Aalto-yliopiston Sähköinsinöörikilta ry</title>
+        <meta
+          name="description"
+          content="Aalto-yliopiston Sähköinsinöörikilta ry on Otaniemessä vaikuttava opiskelijajärjestö, joka on perustettu vuonna 1921. Kilta järjestää kaikenlaista toimintaa liittyen opintoihin ja vapaa-ajan viettoon."
+        />
+        <meta name="keywords" content="SIK AYY" />
+      </Head>
+      <GlobalCommonStyles />
+      <LocaleStore>
+        <AppContainer>
+          <DndProvider backend={backendForDND}>
+            <Component {...pageProps} />
+          </DndProvider>
+        </AppContainer>
+      </LocaleStore>
+      <ToastContainer position="bottom-right" />
+    </>
+  );
+};
 
 export default Web20App;

src/pages/_document.tsx

@@ -1,13 +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";
-import HTMLLogo from "@components/HTMLLogo";
 
-export default class MyDocument extends Document<{ styleTags: unknown }> {
-  static async getInitialProps(ctx: DocumentContext): Promise<DocumentInitialProps> {
+export default class MyDocument extends Document {
+  static async getInitialProps(ctx: DocumentContext) {
     const sheet = new ServerStyleSheet();
     const originalRenderPage = ctx.renderPage;
     try {
@@ -17,12 +16,7 @@ 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();
@@ -30,16 +24,15 @@ export default class MyDocument extends Document<{ styleTags: unknown }> {
   }
 
   render(): JSX.Element {
-    const { styleTags } = this.props;
+    const { styles } = this.props;
     return (
       <Html lang="fi">
         <Head>
-          <HTMLLogo />
           <link href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,800,900&display=swap" rel="stylesheet" />
           <Favicons />
         </Head>
         <body>
-          {styleTags}
+          {styles}
           <Main />
           <NextScript />
         </body>

src/pages/_error.tsx

@@ -0,0 +1,65 @@
+import { NextPage, NextPageContext } from "next";
+import NextErrorComponent, { ErrorProps } from "next/error";
+import * as Sentry from "@sentry/nextjs";
+
+type MyErrorProps = ErrorProps & {
+  hasGetInitialPropsRun: boolean;
+  err: Error & {
+    statusCode?: number;
+  };
+};
+
+const MyError: NextPage<MyErrorProps> = ({ statusCode, hasGetInitialPropsRun, err }) => {
+  if (!hasGetInitialPropsRun && err) {
+    // getInitialProps is not called in case of
+    // https://github.com/vercel/next.js/issues/8592. As a workaround, we pass
+    // err via _app.js so it can be captured
+    Sentry.captureException(err);
+    // Flushing is not required in this case as it only happens on the client
+  }
+  return <NextErrorComponent statusCode={statusCode} />;
+};
+
+MyError.getInitialProps = async (context: NextPageContext) => {
+  const { err, asPath } = context;
+  const defaultProps = await NextErrorComponent.getInitialProps(context);
+  const errorInitialProps: MyErrorProps = {
+    ...defaultProps,
+    err,
+    // Workaround for https://github.com/vercel/next.js/issues/8592, mark when
+    hasGetInitialPropsRun: true,
+  };
+
+  // Running on the server, the response object (`res`) is available.
+  //
+  // Next.js will pass an err on the server if a page's data fetching methods
+  // threw or returned a Promise that rejected
+  //
+  // Running on the client (browser), Next.js will provide an err if:
+  //
+  //  - a page's `getInitialProps` threw or returned a Promise that rejected
+  //  - an exception was thrown somewhere in the React lifecycle (render,
+  //    componentDidMount, etc) that was caught by Next.js's React Error
+  //    Boundary. Read more about what types of exceptions are caught by Error
+  //    Boundaries: https://reactjs.org/docs/error-boundaries.html
+
+  if (err) {
+    Sentry.captureException(err);
+    // Flushing before returning is necessary if deploying to Vercel, see
+    // https://vercel.com/docs/platform/limits#streaming-responses
+    await Sentry.flush(2000);
+    return errorInitialProps;
+  }
+
+  // If this point is reached, getInitialProps was called without any
+  // information about what the error might be. This is unexpected and may
+  // indicate a bug introduced in Next.js, so record it in Sentry
+  Sentry.captureException(
+    new Error(`_error.js getInitialProps missing data at path: ${asPath}`),
+  );
+  await Sentry.flush(2000);
+
+  return errorInitialProps;
+};
+
+export default MyError;

src/pages/admin/events/[id].tsx

@@ -19,7 +19,7 @@ const widgets = {
   markdownEditor: MarkdownEditorWidget,
 };
 
-const buildSchema = (formData: Event, signupForms: SignupForm[], tags: Tag[]) => {
+const buildSchema = (formData: Event | undefined, signupForms: SignupForm[], tags: Tag[]) => {
   const date = new Date(); const
     tomorrowDate = new Date();
   const currentDatetime = date.toISOString();
@@ -180,11 +180,11 @@ const EventCreatePage: NextPage = () => {
   useEffect(() => {
     TagApi.getTags()
       .then((res) => setTags(res))
-      .catch((err) => setError(err));
+      .catch((err) => setError(err.message));
 
     SignupApi.getForms(true)
       .then((res) => setSignupForms(res))
-      .catch((err) => setError(err));
+      .catch((err) => setError(err.message));
 
     const eventId = id && Number(id);
     if (eventId !== undefined) {
@@ -194,7 +194,7 @@ const EventCreatePage: NextPage = () => {
           tags: (res.tags).map((inst) => inst.id) as any,
           signupForm: (res.signupForm).map((inst) => inst.id) as any,
         }))
-        .catch((err) => setError(err));
+        .catch((err) => setError(err.message));
     }
   }, [id]);
 
@@ -230,7 +230,7 @@ const EventCreatePage: NextPage = () => {
       }
     } catch (err) {
       toast.error("Uh oh! Something went wrong! Try again later. 😟");
-      setError(err);
+      setError(err.message);
     }
   };
 

src/pages/admin/events/index.tsx

@@ -1,5 +1,6 @@
-import React 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,7 +9,8 @@ import { Button, Link } from "@components/index";
 import AddLink from "@components/AddLink";
 import Event from "@models/Event";
 import EventApi from "@api/eventApi";
-import useFetchEvents from "@hooks/useFetchEvents";
+import { fetcher, APIPath, API } from "@api/backend";
+import { StyledSelect, SelectWrapper } from "@components/Select";
 
 const URL = "/admin/events";
 
@@ -32,47 +34,113 @@ const confirmDelete = async (event: Event) => {
   }
 };
 
-const renderData = (events: Event[]) => {
-  if (!events || events.length === 0) {
+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.
+      </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>
   );
 };
 
-const AdminEventPage: NextPage = () => {
-  const { data } = useFetchEvents({ options: { auth: true } });
-  return (
-    <AdminListCommon>
-      <h1>Events</h1>
-      <AddLink text="Create event" to={`${URL}/create`} data-e2e="create-event" />
-      {renderData(data)}
-    </AdminListCommon>
-  );
-};
+const AdminEventPage: NextPage = () => (
+  <AdminListCommon>
+    <h1>Events</h1>
+    <AddLink text="Create event" to={`${URL}/create`} data-e2e="create-event" />
+    <Renderer />
+  </AdminListCommon>
+);
 
 export default AdminEventPage;

src/pages/admin/feed/[id].tsx

@@ -146,16 +146,16 @@ const FeedCreatePage: NextPage = () => {
   useEffect(() => {
     TagApi.getTags()
       .then((res) => setTags(res))
-      .catch((err) => setError(err));
+      .catch((err) => setError(err.message));
 
     const feedId = id && Number(id);
     if (feedId !== undefined) {
-      FeedApi.getPost(feedId, { auth: true })
+      FeedApi.getPost(feedId, true)
         .then((res) => setFormData({
           ...res,
           tags: (res.tags).map((inst) => inst.id) as any,
         }))
-        .catch((err) => setError(err));
+        .catch((err) => setError(err.message));
     }
   }, [id]);
 
@@ -179,7 +179,7 @@ const FeedCreatePage: NextPage = () => {
       }
     } catch (err) {
       toast.error("Uh oh! Something went wrong! Try again later. 😟");
-      setError(err);
+      setError(err.message);
     }
   };
 

src/pages/admin/feed/index.tsx

@@ -1,5 +1,6 @@
-import React 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,7 +9,8 @@ import { Button, Link } from "@components/index";
 import AddLink from "@components/AddLink";
 import Post from "@models/Feed";
 import PostApi from "@api/feedApi";
-import useFetchFeed from "@hooks/useFetchFeed";
+import { fetcher, APIPath, API } from "@api/backend";
+import { SelectWrapper, StyledSelect } from "@components/Select";
 
 const URL = "/admin/feed";
 
@@ -32,47 +34,81 @@ const confirmDelete = async (post: Post) => {
   }
 };
 
-const renderData = (feed: Post[]) => {
-  if (!feed || feed.length === 0) {
-    return <div>No posts.</div>;
+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 (
+      <div>
+        Failed loading feed
+      </div>
+    );
+  }
+  if (!feed?.length) {
+    return (
+      <div>No posts.</div>
+    );
   }
 
   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>
   );
 };
 
-const AdminFeedPage: NextPage = () => {
-  const { data } = useFetchFeed({ options: { auth: true } });
-  return (
-    <AdminListCommon>
-      <h1>Feed</h1>
-      <AddLink text="Create news post" to={`${URL}/create`} />
-      {renderData(data)}
-    </AdminListCommon>
-  );
-};
+const AdminFeedPage: NextPage = () => (
+  <AdminListCommon>
+    <h1>Feed</h1>
+    <AddLink text="Create news post" to={`${URL}/create`} />
+    <Renderer />
+  </AdminListCommon>
+);
 
 export default AdminFeedPage;

src/pages/admin/jobads/[id].tsx

@@ -123,7 +123,7 @@ const JobAdCreatePage: NextPage = () => {
     if (jobId !== undefined) {
       JobAdApi.getJobAd(jobId, true)
         .then((res) => setFormData(res))
-        .catch((err) => setError(err));
+        .catch((err) => setError(err.message));
     }
   }, [id]);
 
@@ -143,7 +143,7 @@ const JobAdCreatePage: NextPage = () => {
       }
     } catch (err) {
       toast.error("Uh oh! Something went wrong! Try again later. 😟");
-      setError(err);
+      setError(err.message);
     }
   };
 

src/pages/admin/jobads/index.tsx

@@ -1,5 +1,6 @@
 import React 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";
@@ -7,8 +8,8 @@ import AdminListCommon from "@views/admin/AdminListCommon";
 import { Button, Link } from "@components/index";
 import AddLink from "@components/AddLink";
 import JobAd from "@models/JobAd";
-import useFetchJobAds from "@hooks/useFetchJobAds";
 import JobAdApi from "@api/jobAdApi";
+import { fetcher, APIPath, API } from "@api/backend";
 
 const URL = "/admin/jobads";
 
@@ -32,8 +33,18 @@ const confirmDelete = async (jobad: JobAd) => {
   }
 };
 
-const renderData = (jobAds: JobAd[]) => {
-  if (!jobAds || jobAds.length === 0) {
+const Renderer: React.FC = () => {
+  const api: API = { path: APIPath.JOBADS, authenticated: true };
+  const { data: jobAds, error } = useSWR<JobAd[]>(api, fetcher);
+  if (error) {
+    console.error(error);
+    return (
+      <div>
+        Failed loading jobads
+      </div>
+    );
+  }
+  if (!jobAds?.length) {
     return <div>No advertisements.</div>;
   }
 
@@ -68,15 +79,12 @@ const renderData = (jobAds: JobAd[]) => {
   );
 };
 
-const AdminJobAdPage: NextPage = () => {
-  const { data } = useFetchJobAds({ options: { auth: true } });
-  return (
-    <AdminListCommon>
-      <h1>Job advertisements</h1>
-      <AddLink text="Create job ad" to={`${URL}/create`} />
-      {renderData(data)}
-    </AdminListCommon>
-  );
-};
+const AdminJobAdPage: NextPage = () => (
+  <AdminListCommon>
+    <h1>Job advertisements</h1>
+    <AddLink text="Create job ad" to={`${URL}/create`} />
+    <Renderer />
+  </AdminListCommon>
+);
 
 export default AdminJobAdPage;

src/pages/admin/login.tsx

@@ -1,8 +1,11 @@
-import React, { useState, useEffect } from "react";
+import React, {
+  useState,
+  useEffect,
+} from "react";
 import { NextPage } from "next";
 import { useRouter } from "next/router";
 import styled from "styled-components";
-import { generateToken, setTokenCookie, isAuthenticated } from "@utils/auth";
+import { authenticate, login } from "@api/auth";
 import AdminPageWrapper from "@views/common/AdminPageWrapper";
 
 const Main = styled.div`
@@ -20,8 +23,8 @@ const AdminLoginPage: NextPage = () => {
   const next = router.query.next as string || DEFAULT_REDIRECT;
 
   useEffect(() => {
-    isAuthenticated().then((res) => {
-      if (res) {
+    authenticate().then((authResult) => {
+      if (authResult) {
         router.push(next);
       }
     });
@@ -30,8 +33,7 @@ const AdminLoginPage: NextPage = () => {
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     try {
-      const token = await generateToken(username, password);
-      setTokenCookie(token);
+      await login(username, password);
       router.push(next);
     } catch (err) {
       setError("Failed to log in!");

src/pages/admin/logout.tsx

@@ -1,12 +1,12 @@
 import { NextPage } from "next";
 import { useRouter } from "next/router";
-import { deleteTokenCookie } from "@utils/auth";
+import { deleteTokenCookies } from "@utils/auth";
 
 const AdminLogoutPage: NextPage = () => {
   const router = useRouter();
   // client-side-only code
   if (typeof window !== "undefined") {
-    deleteTokenCookie();
+    deleteTokenCookies();
     router.push("/admin/login");
   }
   return null;

src/pages/admin/signups/[id].tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 import { NextPage } from "next";
 import { useRouter } from "next/router";
 import AdminCreateCommon from "@views/admin/AdminCreateCommon";
-import { SignupForm } from "@models/Signup";
+import { SignupForm, SignupFormQuestion } from "@models/Signup";
 import SignupApi from "@api/signupApi";
 import DatetimeWidget from "@components/Widgets/DatetimeWidget";
 import SignupQuestionsWidget from "@components/Widgets/SignupQuestionsWidget/SignupQuestionsWidget";
@@ -110,7 +110,7 @@ const SignupCreatePage: NextPage = () => {
 
   useEffect(() => {
     const suId = id && Number(id);
-    if (suId !== undefined) {
+    if (suId !== undefined && !Number.isNaN(suId)) {
       SignupApi.getForm(suId, true)
         .then((res) => {
           setFormData({
@@ -118,13 +118,13 @@ const SignupCreatePage: NextPage = () => {
             questions: JSON.stringify(res.questions) as any,
           });
         })
-        .catch((err) => setError(err));
+        .catch((err) => setError(err.message));
     }
   }, [id]);
 
   const onSubmit = async (data: any) => {
     try {
-      const questions = JSON.parse(data.formData.questions);
+      const questions: SignupFormQuestion[] = JSON.parse(data.formData.questions);
       const payload: SignupForm = {
         ...data.formData,
         questions,
@@ -150,7 +150,7 @@ const SignupCreatePage: NextPage = () => {
       }
     } catch (err) {
       toast.error("Uh oh! Something went wrong! Try again later. 😟");
-      setError(err);
+      setError(err.message);
     }
   };
 

src/pages/admin/signups/[id]/email.tsx

@@ -5,7 +5,7 @@ import { toast } from "react-toastify";
 import AdminCreateCommon from "@views/admin/AdminCreateCommon";
 import MarkdownEditorWidget from "@components/Widgets/MarkdownEditorWidget";
 import { SignupForm } from "@models/Signup";
-import SignupApi from "@api/signupApi";
+import SignupApi, { EmailRequest } from "@api/signupApi";
 
 const widgets = {
   markdownEditor: MarkdownEditorWidget,
@@ -67,11 +67,11 @@ const SignupEmailPage: NextPage = () => {
 
   const onSubmit = async (data) => {
     try {
-      const payload = data.formData;
+      const payload: EmailRequest = data.formData;
       await SignupApi.signupFormSendEmail(payload, Number(id));
       toast.success("Email sent successfully 😎");
     } catch (err) {
-      setError(err);
+      setError(err.message);
       toast.error("Uh oh! Something went wrong! Try again later. 😟");
     }
   };

src/pages/admin/signups/[id]/list.tsx

@@ -26,13 +26,19 @@ const SignupEmailPage: NextPage = () => {
   const { id } = router.query;
 
   useEffect(() => {
-    const formId = Number(id);
-    SignupApi.getForm(formId, true)
-      .then((res) => setSignupForm(res));
-
-    SignupApi.getSignups(formId).then((res) => setSignups(res));
+    const formId = id && Number(id);
+    if (formId !== undefined && !Number.isNaN(formId)) {
+      SignupApi.getForm(formId, true).then((res) => {
+        setSignupForm(res);
+      });
+      SignupApi.getSignups(formId).then((res) => {
+        setSignups(res);
+      });
+    }
   }, [id]);
 
+  const title = signupForm ? signupForm.title_fi : "Loading...";
+
   const confirmDelete = async (signup: Signup, question: any) => {
     if (window.confirm(`Delete: ${signup.id}: ${signup.answer[question.id]}; Are you sure?`) === true) {
       try {
@@ -45,27 +51,25 @@ const SignupEmailPage: NextPage = () => {
     }
   };
 
-  const title = signupForm ? signupForm.title_fi : "Loading...";
+  const renderData = () => {
+    if (!signupForm || !signups || signups.length === 0) {
+      return <div>No signups.</div>;
+    }
 
-  // TODO: ATM we filter 'info' questions from table here. Maybe remove them from answer JSON altogether?
-  const questions = signupForm ? signupForm.questions.filter((q) => q.type !== "info").map((q) => ({
-    title: q.name,
-    id: q.id,
-  })) : [];
+    // TODO: ATM we filter 'info' questions from table here. Maybe remove them from answer JSON altogether?
+    const questions = signupForm ? signupForm.questions.filter((q) => q.type !== "info").map((q) => ({
+      title: q.title_fi,
+      id: q.id,
+    })) : [];
 
-  // Generate 2-dimensional array where rows are signups and columns are answers to questions.
-  const CSVData = signups.map((s) => questions.map((q) => s.answer[q.id]));
-  // Add reserve signup "header"
-  if (signupForm?.quota) {
-    CSVData.splice(signupForm.quota, 0, ["RESERVE-SIGNUPS"]);
-  }
+    // Generate 2-dimensional array where rows are signups and columns are answers to questions.
+    const CSVData = signups.map((s) => questions.map((q) => s.answer[q.id]));
+    // Add reserve signup "header"
+    if (signupForm?.quota) {
+      CSVData.splice(signupForm.quota, 0, ["RESERVE-SIGNUPS"]);
+    }
 
-  return (
-    <AdminListCommon>
-      <h1>
-        {title}
-        : Sign-ups
-      </h1>
+    return (
       <table>
         <thead>
           <tr>
@@ -81,7 +85,6 @@ const SignupEmailPage: NextPage = () => {
             </th>
           </tr>
         </thead>
-
         <tbody>
           {signups.map((s) => (
             <tr key={s.id}>
@@ -99,6 +102,16 @@ const SignupEmailPage: NextPage = () => {
           ))}
         </tbody>
       </table>
+    );
+  };
+
+  return (
+    <AdminListCommon>
+      <h1>
+        {title}
+        : Sign-ups
+      </h1>
+      {renderData()}
     </AdminListCommon>
   );
 };

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/in_english.tsx

@@ -1,21 +1,25 @@
 import React from "react";
 import { NextPage, GetStaticProps } from "next";
 import Head from "next/head";
+import useSWR from "swr";
 import Event from "@models/Event";
-import EventApi from "@api/eventApi";
-import useFetchEvents from "@hooks/useFetchEvents";
 import Post from "@models/Feed";
-import FeedApi from "@api/feedApi";
-import useFetchFeed from "@hooks/useFetchFeed";
 import InEnglishPageView from "@views/InEnglishPage/InEnglishPageView";
 import PageWrapper from "@views/common/PageWrapper";
+import { fetcher, APIPath, API } from "@api/backend";
 
-const eventOptions = {
-  limit: 4,
+const eventApi: API = {
+  path: APIPath.EVENTS,
+  queryParams: {
+    limit: 4,
+  },
 };
 
-const feedOptions = {
-  limit: 4,
+const feedApi: API = {
+  path: APIPath.FEED,
+  queryParams: {
+    limit: 4,
+  },
 };
 
 interface InitialProps {
@@ -24,8 +28,8 @@ interface InitialProps {
 }
 
 const InEnglishPage: NextPage<InitialProps> = ({ initialEvents, initialFeed }) => {
-  const eventResult = useFetchEvents({ initialData: initialEvents, options: eventOptions });
-  const feedResult = useFetchFeed({ initialData: initialFeed, options: feedOptions });
+  const { data: events } = useSWR<Event[]>(eventApi, fetcher, { fallbackData: initialEvents });
+  const { data: feed } = useSWR<Post[]>(feedApi, fetcher, { fallbackData: initialFeed });
 
   return (
     <>
@@ -33,15 +37,15 @@ const InEnglishPage: NextPage<InitialProps> = ({ initialEvents, initialFeed }) =
         <link rel="canonical" href={`${process.env.NEXT_PUBLIC_SITE_URL}/in_english`} />
       </Head>
       <PageWrapper>
-        <InEnglishPageView events={eventResult.data as Event[]} feed={feedResult.data} />
+        <InEnglishPageView events={events} feed={feed} />
       </PageWrapper>
     </>
   );
 };
 
 export const getStaticProps: GetStaticProps<InitialProps> = async () => {
-  const initialEvents = await EventApi.getEvents(eventOptions);
-  const initialFeed = await FeedApi.getFeed(feedOptions);
+  const initialEvents = await fetcher<Event[]>(eventApi);
+  const initialFeed = await fetcher<Post[]>(feedApi);
   return {
     props: {
       initialEvents,

src/pages/index.tsx

@@ -1,31 +1,34 @@
 import React from "react";
 import { NextPage, GetStaticProps } from "next";
 import Head from "next/head";
+import useSWR from "swr";
 import Event from "@models/Event";
-import EventApi from "@api/eventApi";
-import useFetchEvents from "@hooks/useFetchEvents";
 import Post from "@models/Feed";
-import FeedApi from "@api/feedApi";
-import useFetchFeed from "@hooks/useFetchFeed";
 import FrontPageView from "@views/FrontPage/FrontPageView";
 import PageWrapper from "@views/common/PageWrapper";
+import { fetcher, API, APIPath } from "@api/backend";
 
-const eventOptions = {
-  limit: 4,
+const eventApi: API = {
+  path: APIPath.EVENTS,
+  queryParams: {
+    limit: 4,
+  },
 };
 
-const feedOptions = {
-  limit: 4,
+const feedApi: API = {
+  path: APIPath.FEED,
+  queryParams: {
+    limit: 4,
+  },
 };
-
 interface InitialProps {
   initialEvents: Event[];
   initialFeed: Post[];
 }
 
 const FrontPage: NextPage<InitialProps> = ({ initialEvents, initialFeed }) => {
-  const eventResult = useFetchEvents({ initialData: initialEvents, options: eventOptions });
-  const feedResult = useFetchFeed({ initialData: initialFeed, options: feedOptions });
+  const { data: events } = useSWR<Event[]>(eventApi, fetcher, { fallbackData: initialEvents });
+  const { data: feed } = useSWR<Post[]>(feedApi, fetcher, { fallbackData: initialFeed });
 
   return (
     <>
@@ -33,19 +36,19 @@ const FrontPage: NextPage<InitialProps> = ({ initialEvents, initialFeed }) => {
         <link rel="canonical" href={`${process.env.NEXT_PUBLIC_SITE_URL}/`} />
       </Head>
       <PageWrapper>
-        <FrontPageView events={eventResult.data as Event[]} feed={feedResult.data} />
+        <FrontPageView events={events} feed={feed} />
       </PageWrapper>
     </>
   );
 };
 
 export const getStaticProps: GetStaticProps<InitialProps> = async () => {
-  const initialEvents = await EventApi.getEvents(eventOptions);
-  const initialFeed = await FeedApi.getFeed(feedOptions);
+  const initialEvents = fetcher<Event[]>(eventApi);
+  const initialFeed = fetcher<Post[]>(feedApi);
   return {
     props: {
-      initialEvents,
-      initialFeed,
+      initialEvents: await initialEvents,
+      initialFeed: await initialFeed,
     },
     revalidate: 10,
   };

src/pages/kilta/toiminta.tsx

@@ -1,23 +1,31 @@
 import React from "react";
 import { NextPage, GetStaticProps } from "next";
 import Head from "next/head";
+import useSWR from "swr";
 import Event from "@models/Event";
 import EventApi from "@api/eventApi";
-import useFetchEvents from "@hooks/useFetchEvents";
 import Post from "@models/Feed";
 import FeedApi from "@api/feedApi";
-import useFetchFeed from "@hooks/useFetchFeed";
 import ActualPageView from "@views/ActualPage/ActualPageView";
 import PageWrapper from "@views/common/PageWrapper";
+import { fetcher, APIPath, API } from "@api/backend";
 
 interface InitialProps {
   initialEvents: Event[];
   initialFeed: Post[];
 }
 
+const eventApi: API = {
+  path: APIPath.EVENTS,
+};
+
+const feedApi: API = {
+  path: APIPath.FEED,
+};
+
 const ActualPage: NextPage<InitialProps> = ({ initialEvents, initialFeed }) => {
-  const eventResult = useFetchEvents({ initialData: initialEvents });
-  const feedResult = useFetchFeed({ initialData: initialFeed });
+  const { data: events } = useSWR<Event[]>(eventApi, fetcher, { fallbackData: initialEvents });
+  const { data: feed } = useSWR<Post[]>(feedApi, fetcher, { fallbackData: initialFeed });
 
   return (
     <>
@@ -25,7 +33,7 @@ const ActualPage: NextPage<InitialProps> = ({ initialEvents, initialFeed }) => {
         <link rel="canonical" href={`${process.env.NEXT_PUBLIC_SITE_URL}/kilta/toiminta`} />
       </Head>
       <PageWrapper>
-        <ActualPageView events={eventResult.data} feed={feedResult.data} />
+        <ActualPageView events={events} feed={feed} />
       </PageWrapper>
     </>
   );

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";
@@ -24,7 +24,9 @@ const SignUpPage: NextPage<InitialProps> = ({ initialForm }) => {
   const router = useRouter();
   const id = String(initialForm?.id ?? "");
   const URL = `${FORM_URL}${id}/`;
-  const { data, error } = useSWR<SignupForm>(URL, (url) => axios.get(url).then((res) => res.data), { initialData: initialForm });
+  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);
@@ -35,39 +37,48 @@ const SignUpPage: NextPage<InitialProps> = ({ initialForm }) => {
     return <LoadingView />;
   }
 
-  if (!data) {
+  if (!signupForm) {
     return (
       <NotFoundPage />
     );
   }
 
   const onSubmit = async ({ formData }: ISubmitEvent<string>) => {
+    setIsSending(true);
+
     const payload: Signup = {
-      signupForm_id: data.id,
+      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);
     }
   };
 
   return (
     <>
       <Head>
-        <link rel="canonical" href={`${process.env.NEXT_PUBLIC_SITE_URL}/signup/${data.id}`} />
+        <link rel="canonical" href={`${process.env.NEXT_PUBLIC_SITE_URL}/signup/${signupForm.id}`} />
       </Head>
       <PageWrapper>
         <SignUpPageView
-          signUpForm={data}
+          signUpForm={signupForm}
           formData={{}}
           onChange={noop}
           onSubmit={onSubmit}
+          formSent={formSent}
         />
       </PageWrapper>
     </>

src/pages/yritysyhteistyo.tsx

@@ -1,33 +1,36 @@
 import React from "react";
 import { NextPage, GetStaticProps } from "next";
 import Head from "next/head";
+import useSWR from "swr";
 import JobAd from "@models/JobAd";
-import JobAdApi from "@api/jobAdApi";
-import useFetchJobAds from "@hooks/useFetchJobAds";
 import CorporatePageView from "@views/CorporatePage/CorporatePageView";
 import PageWrapper from "@views/common/PageWrapper";
+import { API, APIPath, fetcher } from "@api/backend";
 
 interface InitialProps {
   initialJobAds: JobAd[];
 }
 
+const jobAdApi: API = {
+  path: APIPath.JOBADS,
+};
+
 const CorporatePage: NextPage<InitialProps> = ({ initialJobAds }) => {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const { data, error } = useFetchJobAds({ initialData: initialJobAds });
+  const { data: jobAds } = useSWR<JobAd[]>(jobAdApi, fetcher, { fallbackData: initialJobAds });
   return (
     <>
       <Head>
         <link rel="canonical" href={`${process.env.NEXT_PUBLIC_SITE_URL}/yritysyhteistyo`} />
       </Head>
       <PageWrapper>
-        <CorporatePageView jobAds={data as JobAd[]} />
+        <CorporatePageView jobAds={jobAds} />
       </PageWrapper>
     </>
   );
 };
 
 export const getStaticProps: GetStaticProps<InitialProps> = async () => {
-  const initialJobAds = await JobAdApi.getJobAds();
+  const initialJobAds = await fetcher<JobAd[]>(jobAdApi);
   return {
     props: {
       initialJobAds,

src/utils/auth.ts

@@ -1,46 +1,26 @@
-import axios from "axios";
 import Cookies from "js-cookie";
 
-const tokenUrl = `${process.env.NEXT_PUBLIC_API_URL}/api-token-auth/`;
-const checkUrl = `${process.env.NEXT_PUBLIC_API_URL}/api-token-verify/`;
-
-export async function generateToken(username: string, password: string): Promise<string> {
-  const resp = await axios.post(tokenUrl, {
-    username,
-    password,
-  });
-  return resp.data.token;
+export function setAccessTokenCookie(access_token: string): void {
+  Cookies.set("jwt_access", access_token);
+  Cookies.set("jwt_access", access_token, { domain: ".sahkoinsinoorikilta.fi" });
 }
 
-export function setTokenCookie(token: string) {
-  Cookies.set("jwt", token);
-  Cookies.set("jwt", token, { domain: ".sahkoinsinoorikilta.fi" });
+export function setRefreshTokenCookie(refresh_token: string): void {
+  Cookies.set("jwt_refresh", refresh_token);
+  Cookies.set("jwt_refresh", refresh_token, { domain: ".sahkoinsinoorikilta.fi" });
 }
 
-export function getTokenCookie(): string {
-  return Cookies.get("jwt");
+export function getAccessTokenCookie(): string {
+  return Cookies.get("jwt_access");
 }
 
-export function deleteTokenCookie(): void {
-  Cookies.remove("jwt", { domain: ".sahkoinsinoorikilta.fi" });
-  Cookies.remove("jwt");
+export function getRefreshTokenCookie(): string {
+  return Cookies.get("jwt_refresh");
 }
 
-export async function isAuthenticated(): Promise<boolean> {
-  try {
-    const token = getTokenCookie();
-    await axios.post(checkUrl, {
-      token,
-    });
-    return true;
-  } catch (err) {
-    // remove the cookie since it's invalid
-    deleteTokenCookie();
-    return false;
-  }
-}
-
-export function getAuthHeader(): string {
-  const jwt = getTokenCookie();
-  return `JWT ${jwt}`;
+export function deleteTokenCookies(): void {
+  Cookies.remove("jwt_access", { domain: ".sahkoinsinoorikilta.fi" });
+  Cookies.remove("jwt_access");
+  Cookies.remove("jwt_refresh", { domain: ".sahkoinsinoorikilta.fi" });
+  Cookies.remove("jwt_refresh");
 }

src/views/ActualPage/ActualPageHero.tsx

@@ -55,21 +55,6 @@ const ActualPageHero: React.FC = () => (
       />
     </HeroAside>
 
-    <HeroSecondarySection
-      heading="Kiltahuone sijaitsee Tuas-talossa (Maarintie 8)"
-    >
-      <HeroSecondarySectionItem note="Ma">
-        <span>
-          Killan hallitus päivystää kiltahuoneella <strong>maanantaisin.</strong> Tuolloin voit ostaa kiltatuotteita, kuten esim. haalarimerkkejä tai laulukirjoja.
-        </span>
-      </HeroSecondarySectionItem>
-      <HeroSecondarySectionItem note="To">
-        <span>
-          Kiltapäiväkerho Kiltis kokoontuu <strong>torstaisin kiltahuoneella.</strong>. Lämpimästi tervetuloa kaikki SIKkiläiset ja SIK-mieliset!
-        </span>
-      </HeroSecondarySectionItem>
-    </HeroSecondarySection>
-
   </Hero>
 );
 

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/ActualPage/EventCalendar.tsx

@@ -12,9 +12,11 @@ interface EventCalendarProps {
   events: Event[];
 }
 
+const DEFAULT_NUMBER_SHOWN = 10;
+
 const EventCalendar: React.FC<EventCalendarProps> = ({ events }) => {
   // const [filterSelected, setFilter] = useState(0);
-  const [numberShown, setNumberShown] = useState(8);
+  const [numberShown, setNumberShown] = useState(DEFAULT_NUMBER_SHOWN);
 
   const { t, i18n } = useTranslation();
   const isFi = i18n.language === "fi";
@@ -69,7 +71,7 @@ const EventCalendar: React.FC<EventCalendarProps> = ({ events }) => {
       </CardSection>
       { numberShown < events.length && (
         <FilterContainer>
-          <Button buttonStyle="bordered" onClick={() => { setNumberShown(numberShown + 8); }}>
+          <Button buttonStyle="bordered" onClick={() => { setNumberShown(numberShown + DEFAULT_NUMBER_SHOWN); }}>
             {t("Lataa lisää")}
           </Button>
         </FilterContainer>

src/views/ActualPage/News.tsx

@@ -12,9 +12,11 @@ interface NewsProps {
   feed: Post[];
 }
 
+const DEFAULT_NUMBER_SHOWN = 10;
+
 const News: React.FC<NewsProps> = ({ feed }) => {
   // const [filterSelected, setFilter] = useState(0);
-  const [numberShown, setNumberShown] = useState(8);
+  const [numberShown, setNumberShown] = useState(DEFAULT_NUMBER_SHOWN);
 
   const { i18n, t } = useTranslation();
   const isFi = i18n.language === "fi";
@@ -65,7 +67,7 @@ const News: React.FC<NewsProps> = ({ feed }) => {
       </CardSection>
       { numberShown < feed.length && (
         <FilterContainer>
-          <Button buttonStyle="bordered" onClick={() => { setNumberShown(numberShown + 8); }}>
+          <Button buttonStyle="bordered" onClick={() => { setNumberShown(numberShown + DEFAULT_NUMBER_SHOWN); }}>
             {t("Lataa lisää")}
           </Button>
         </FilterContainer>

src/views/ContactsPage/ContactsPageView.tsx

@@ -5,29 +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 OptmkJson from "./optmk.json";
-import OtmkJson from "./otmk.json";
-import EPtmkJson from "./eptmk.json";
-import SstmkJson from "./sstmk.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,
-  OptmkJson,
-  OtmkJson,
-  EPtmkJson,
-  SstmkJson,
-  TtmkJson,
-  UtmkJson,
-  YtmkJson,
-  Others,
+  // HvtmkJson,
+  // MtmkJson,
+  // NtmkJson,
+  // OptmkJson,
+  // OtmkJson,
+  // EPtmkJson,
+  // SstmkJson,
+  // ShntmkJson,
+  // ShtmkJson,
+  // TtmkJson,
+  // UtmkJson,
+  // YtmkJson,
+  // Others,
 ];
 
 const blankProfile = "/img/blank_profile.png";
@@ -64,9 +70,13 @@ const Index: React.FC<{ committees: typeof orderedCommittees }> = ({ committees
 
 const Container = styled.div`
   color: ${colors.darkBlue};
+  align-items: center;
+  justify-content: center;
+  width: 50vw;
 
   & > h2 {
     text-transform: uppercase;
+    font-size: 4rem;
     width: 100%;
   }
 
@@ -74,15 +84,39 @@ const Container = styled.div`
     display: flex;
     flex-flow: row wrap;
   }
+
+  @media (max-width: 950px) {
+    width: 100vw;
+  }
+`;
+
+const ContactContainer = styled.div`
+  overflow-x: hidden;
+  @media (max-width: 950px) {
+    margin-top: 0;
+  }
+`;
+
+const TitleContainer = styled.div`
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  padding: 10px 10px;
+  flex-direction: column;
+  margin: auto;
 `;
 
 const CommitteeContainer: React.FC<{
   committee: Committee;
+  children: React.ReactNode;
 }> = ({ committee, children }) => (
   <Container>
-    <h2>
-      {committee.name_fi || committee.name_en}
-    </h2>
+    <TitleContainer>
+      <h2>
+        {committee.name_fi || committee.name_en}
+      </h2>
+    </TitleContainer>
     <div>
       {committee.roles.map((role) => (
         role.representatives.map((representative) => (
@@ -137,26 +171,37 @@ const ContactsPageView: React.FC = () => (
         </div>
       </aside>
     </TextSection>
-
-    {orderedCommittees.map((json) => (
-      <React.Fragment key={json.slug}>
-        {(json.slug !== "board") && (
-          <Divider />
-        )}
-        <TextSection id={json.slug}>
-          <CommitteeContainer committee={json}>
-            {(json.slug === "board") && (
-            <p>
-              {"Hallitukseen saa yhteyden lähettämällä sähköpostia "}
-              <BlueLink to="mailto:hallitus@sahkoinsinoorikilta.fi">
-                hallitus@sahkoinsinoorikilta.fi
-              </BlueLink>
-            </p>
-            )}
-          </CommitteeContainer>
-        </TextSection>
-      </React.Fragment>
-    ))}
+    <ContactContainer>
+      {orderedCommittees.map((json) => (
+        <React.Fragment key={json.slug}>
+          {(json.slug !== "board") && (
+            <Divider />
+          )}
+          <TextSection id={json.slug}>
+            <CommitteeContainer committee={json}>
+              {(json.slug === "board") && (
+                <div>
+                  <p>
+                    {"Hallitukseen saa yhteyden lähettämällä sähköpostia "}
+                    <BlueLink to="mailto:hallitus@sahkoinsinoorikilta.fi">
+                      hallitus@sahkoinsinoorikilta.fi
+                    </BlueLink>
+                    . 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.
+                  </p>
+                </div>
+              )}
+            </CommitteeContainer>
+          </TextSection>
+        </React.Fragment>
+      ))}
+    </ContactContainer>
   </>
 );
 

src/views/ContactsPage/board.json

@@ -8,8 +8,10 @@
       "name_en": "Chairman of the Board",
       "representatives": [
         {
-          "name": "Johannes Ora",
-          "image": "https://static.sahkoinsinoorikilta.fi/img/board/chairman.jpg"
+          "name": "Otto Julkunen",
+          "phone_number": null,
+          "email": "otto.julkunen@sahkoinsinoorikilta.fi",
+          "image": "https://static.sahkoinsinoorikilta.fi/img/board/ottom.jpg"
         }
       ]
     },
@@ -18,10 +20,10 @@
       "name_en": "Secretary",
       "representatives": [
         {
-          "name": "Salla Lyytikäinen",
+          "name": "Karoliina Talvikangas",
           "phone_number": null,
-          "email": null,
-          "image": "https://static.sahkoinsinoorikilta.fi/img/board/secretary.jpg"
+          "email": "karoliina.talvikangas@sahkoinsinoorikilta.fi",
+          "image": "https://static.sahkoinsinoorikilta.fi/img/board/karoliina.jpg"
         }
       ]
     },
@@ -30,10 +32,10 @@
       "name_en": "Treasurer",
       "representatives": [
         {
-          "name": "Santeri Huhtala",
+          "name": "Ville Lairila",
           "phone_number": null,
-          "email": null,
-          "image": "https://static.sahkoinsinoorikilta.fi/img/board/treasurer.jpg"
+          "email": "ville.lairila@sahkoinsinoorikilta.fi",
+          "image": "https://static.sahkoinsinoorikilta.fi/img/board/ville.jpg"
         }
       ]
     },
@@ -42,10 +44,10 @@
       "name_en": "",
       "representatives": [
         {
-          "name": "Toni Ojala",
+          "name": "Aaron Löfgren",
           "phone_number": null,
-          "email": null,
-          "image": "https://static.sahkoinsinoorikilta.fi/img/board/captain1.jpg"
+          "email": "aaron.lofgren@sahkoinsinoorikilta.fi",
+          "image": "https://static.sahkoinsinoorikilta.fi/img/board/aaron.jpg"
         }
       ]
     },
@@ -54,10 +56,10 @@
       "name_en": "",
       "representatives": [
         {
-          "name": "Toni Lyttinen",
+          "name": "Kasper Skog",
           "phone_number": null,
-          "email": null,
-          "image": "https://static.sahkoinsinoorikilta.fi/img/board/captain2.jpg"
+          "email": "kasper.skog@sahkoinsinoorikilta.fi",
+          "image": "https://static.sahkoinsinoorikilta.fi/img/board/kasper.jpg"
         }
       ]
     },
@@ -66,10 +68,10 @@
       "name_en": "",
       "representatives": [
         {
-          "name": "Eveliina Ahonen",
+          "name": "Roni Vallius",
           "phone_number": null,
-          "email": null,
-          "image": "https://static.sahkoinsinoorikilta.fi/img/board/ceremonies.jpg"
+          "email": "roni.vallius@sahkoinsinoorikilta.fi",
+          "image": "https://static.sahkoinsinoorikilta.fi/img/board/roni.jpg"
         }
       ]
     },
@@ -78,22 +80,10 @@
       "name_en": "",
       "representatives": [
         {
-          "name": "Melisa Dönmez",
+          "name": "Elina Huttunen",
           "phone_number": null,
-          "email": null,
-          "image": "https://static.sahkoinsinoorikilta.fi/img/board/court_cancelor.jpg"
-        }
-      ]
-    },
-    {
-      "name_fi": "ISOvastaava",
-      "name_en": "",
-      "representatives": [
-        {
-          "name": "Heidi Mäkitalo",
-          "phone_number": null,
-          "email": null,
-          "image": "https://static.sahkoinsinoorikilta.fi/img/board/isocoordinator.jpg"
+          "email": "elina.huttunen@sahkoinsinoorikilta.fi",
+          "image": "https://static.sahkoinsinoorikilta.fi/img/board/elina.jpg"
         }
       ]
     },
@@ -102,10 +92,10 @@
       "name_en": "",
       "representatives": [
         {
-          "name": "Sauli Norja",
+          "name": "Julia Pykälä-aho",
           "phone_number": null,
-          "email": null,
-          "image": "https://static.sahkoinsinoorikilta.fi/img/board/wellbeing.jpg"
+          "email": "julia.pykalaaho@sahkoinsinoorikilta.fi",
+          "image": "https://static.sahkoinsinoorikilta.fi/img/board/julia.jpg"
         }
       ]
     },
@@ -114,22 +104,22 @@
       "name_en": "",
       "representatives": [
         {
-          "name": "Simo Hakanummi",
+          "name": "Juulia Härkönen",
           "phone_number": null,
-          "email": null,
-          "image": "https://static.sahkoinsinoorikilta.fi/img/board/studies.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": "Oskari Ponkala",
+          "name": "Tommi Sytelä",
           "phone_number": null,
-          "email": null,
-          "image": "https://static.sahkoinsinoorikilta.fi/img/board/technology.jpg"
+          "email": "tommi.sytela@sahkoinsinoorikilta.fi",
+          "image": "https://static.sahkoinsinoorikilta.fi/img/board/tommi.jpg"
         }
       ]
     },
@@ -138,10 +128,10 @@
       "name_en": "",
       "representatives": [
         {
-          "name": "Oliver Hiekkamies",
+          "name": "Pyry Vaara",
           "phone_number": null,
-          "email": null,
-          "image": "https://static.sahkoinsinoorikilta.fi/img/board/external.jpg"
+          "email": "pyry.vaara@sahkoinsinoorikilta.fi",
+          "image": "https://static.sahkoinsinoorikilta.fi/img/board/pyry.jpg"
         }
       ]
     },
@@ -150,10 +140,22 @@
       "name_en": "",
       "representatives": [
         {
-          "name": "Otto Julkunen",
+          "name": "Nette Levijoki",
           "phone_number": null,
-          "email": null,
-          "image": "https://static.sahkoinsinoorikilta.fi/img/board/corporate.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/ContactsPage/eptmk.json

@@ -3,6 +3,15 @@
   "name_fi": "Elepajatoimikunta",
   "name_en": "",
   "roles": [
+    {
+      "name_fi": "Pajapäävastaava",
+      "name_en": "",
+      "representatives": [
+        {
+          "name": "Oskari Ponkala"
+        }
+      ]
+    },
     {
       "name_fi": "Pajavastaava",
       "name_en": "",
@@ -16,35 +25,26 @@
       "name_fi": "Pajakisälli",
       "name_en": "",
       "representatives": [
-        {
-          "name": "Tommi Sytelä"
-        },
-        {
-          "name": "Eerikki Eskola"
-        },
-        {
-          "name": "Arkadii Kolchin"
-        },
         {
           "name": "Samu Nyman"
         },
         {
-          "name": "Konsta Langi"
+          "name": "Veikko Räty"
         },
         {
-          "name": "Johannes Viirimäki"
+          "name": "Ville Lairila"
         },
         {
           "name": "Justus Ojala"
         },
         {
-          "name": "Ville Tujunen"
+          "name": "Tommi Sytelä"
         },
         {
-          "name": "Antti Tarkka"
+          "name": "Visa Kurvi"
         },
         {
-          "name": "Pyry Vaara"
+          "name": "Petrus Asikainen"
         }
       ]
     }

src/views/ContactsPage/hvtmk.json

@@ -8,7 +8,7 @@
       "name_en": "Master of Wellbeing",
       "representatives": [
         {
-          "name": "Sauli Norja"
+          "name": "Sofia Öhman"
         }
       ]
     },
@@ -20,10 +20,10 @@
           "name": "Juha Anttila"
         },
         {
-          "name": "Aino Suomi"
+          "name": "Aleksi Helin"
         },
         {
-          "name": "Nestori Yrjönkoski"
+          "name": "Julia Pykälä-aho"
         }
       ]
     },
@@ -32,10 +32,16 @@
       "name_en": "Sports Representative",
       "representatives": [
         {
-          "name": "Elmeri Pälikkö"
+          "name": "Aaro Niskanen"
         },
         {
-          "name": "Joel Wickström"
+          "name": "Sauli Norja"
+        },
+        {
+          "name": "Viola Palolahti"
+        },
+        {
+          "name": "Eero Tihtonen"
         }
       ]
     },
@@ -44,7 +50,7 @@
       "name_en": "Guild Room Representative",
       "representatives": [
         {
-          "name": "Ilari Ojakorpi"
+          "name": "Patrick Linnanen"
         }
       ]
     },
@@ -53,7 +59,7 @@
       "name_en": "",
       "representatives": [
         {
-          "name": "Samuel Laine"
+          "name": "Samu Nyman"
         },
         {
           "name": "Aleksanteri Vesala"
@@ -61,20 +67,14 @@
       ]
     },
     {
-      "name_fi": "Retkivastaava",
+      "name_fi": "Retkeilyvastaava",
       "name_en": "",
       "representatives": [
         {
-          "name": "Jarno Mustonen"
+          "name": "Vilhelmiina Honkanen"
         },
         {
-          "name": "Suvi Karanta"
-        },
-        {
-          "name": "Jesse Räisänen"
-        },
-        {
-          "name": "Mikko Suhonen"
+          "name": "Pinja Leppänen"
         }
       ]
     }

src/views/ContactsPage/mtmk.json

@@ -1,6 +1,6 @@
 {
   "slug": "mtmk",
-  "name_fi": "Mediatoimikunta",
+  "name_fi": "Sössö-toimikunta",
   "name_en": "Media Committee",
   "roles": [
     {
@@ -8,55 +8,34 @@
       "name_en": "Chair, Editor in Chief",
       "representatives": [
         {
-          "name": "Sasu Saalasti",
+          "name": "Aino Suomi",
           "phone_number": null,
           "email": null,
           "image": null
         }
       ]
     },
-    {
-      "name_fi": "Mediamestari",
-      "name_en": "Master of Media",
-      "representatives": [
-        {
-          "name": "Salla Lyytikäinen"
-        }
-      ]
-    },
     {
       "name_fi": "Toimittaja",
       "name_en": "Journalist",
       "representatives": [
         {
-          "name": "Tuukka Syrjänen"
-        },
-        {
-          "name": "Ilmari Kasvi"
+          "name": "Emmaleena Ahonen"
         },
         {
           "name": "Elias Hirvonen"
         },
         {
-          "name": "Miika Koskela"
+          "name": "Ville Lairila"
         },
         {
-          "name": "Taneli Myllykangas"
+          "name": "Olli Komulainen"
         },
         {
-          "name": "Emmaleena Ahonen"
+          "name": "Pinja Salo"
         },
         {
-          "name": "Ville-Pekka Laakkonen"
-        },
-        {
-          "name": "Sofia Öhman"
-        },
-        {
-          "name": "Nestori Yrjönkoski"
-        },
-        {
-          "name": "Jami Hyytiäinen"
+          "name": "Tuukka Syrjänen"
         },
         {
           "name": "Aleksanteri Vesala"
@@ -68,22 +47,7 @@
       "name_en": "Journalist & Photographer",
       "representatives": [
         {
-          "name": "Kiia Einola"
-        }
-      ]
-    },
-    {
-      "name_fi": "Taittaja",
-      "name_en": "Layout Artist",
-      "representatives": [
-        {
-          "name": "Aino Suomi"
-        },
-        {
-          "name": "Olli Komulainen"
-        },
-        {
-          "name": "Emilia Kortelainen"
+          "name": "Jarno Mustonen"
         }
       ]
     },
@@ -93,6 +57,19 @@
       "representatives": [
         {
           "name": "Jonna Tammikivi"
+        },
+        {
+          "name": "Sasu Saalasti"
+        }
+
+      ]
+    },
+    {
+      "name_fi": "Taittaja & Toimittaja",
+      "name_en": "Layout Artist & Journalist",
+      "representatives": [
+        {
+          "name": "Juuli Leppänen"
         }
       ]
     },
@@ -101,14 +78,15 @@
       "name_en": "Photographer",
       "representatives": [
         {
-          "name": "Suvi Karanta"
+          "name": "Toni Lyttinen"
         },
         {
-          "name": "Mikko Haaparanta"
+          "name": "Sauli Norja"
         },
         {
-          "name": "Johannes Viirimäki"
+          "name": "Rasmus Räsänen"
         }
+
       ]
     },
     {
@@ -117,9 +95,15 @@
       "representatives": [
         {
           "name": "Kalle Petäjäaho"
-        },
+        }
+      ]
+    },
+    {
+      "name_fi": "Graafikko",
+      "name_en": "Photographer & Graphic Artist",
+      "representatives": [
         {
-          "name": "Maria Pöllä"
+          "name": "Otto Julkunen"
         }
       ]
     },

src/views/ContactsPage/ntmk.json

@@ -0,0 +1,82 @@
+{
+    "slug": "ntmk",
+    "name_fi": "N-Toimikunta",
+    "name_en": "",
+    "roles": [
+        {
+            "name_fi": "N-toimikunnan puheenjohtaja",
+            "name_en": "",
+            "representatives": [
+            {
+                "name": "Ville Kaakinen"
+            }
+            ]
+        },
+        {
+            "name_fi": "N-toimikunnan varapuheenjohtaja",
+            "name_en": "",
+            "representatives": [
+            {
+                "name": "Jami Hyytiäinen"
+            }
+            ]
+        },
+        {
+            "name_fi": "Sklubi-yhdyshenkilö",
+            "name_en": "",
+            "representatives": [
+            {
+                "name": "Ville-Pekka Laakkonen"
+            }
+            ]
+        },
+        {
+            "name_fi": "Alumivastaava",
+            "name_en": "",
+            "representatives": [
+            {
+                "name": "Ella Eilola"
+            }
+            ]
+        },
+        {
+            "name_fi": "N-Toimihenkilö",
+            "name_en": "",
+            "representatives": [
+            {
+                "name": "Timi Tiira"
+            },
+            {
+                "name": "Erna Virtanen"
+            },
+            {
+                "name": "Emmaleena Ahonen"
+            },
+            {
+                "name": "Jarno Mustonen"
+            },
+            {
+                "name": "Pekka Aho"
+            },
+            {
+                "name": "Mikko Haapamäki"
+            },
+            {
+                "name": "Jonna Tammikivi"
+            },
+            {
+                "name": "Juuli Leppänen"
+            },
+            {
+                "name": "Simo Hakanummi"
+            },
+            {
+                "name": "Tuomo Leino"
+            },
+            {
+                "name": "Sasu Saalasti"
+            }
+            ]
+        }
+    ]
+}