add simple implementation of template questions

.babelrc

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

.env.development

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

.env.prod

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

.env.test

@@ -1,3 +1,2 @@
-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,24 +34,11 @@ 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",
-    "object-curly-newline": "warn",
-    "no-mixed-spaces-and-tabs": "warn",
-    "no-tabs": "warn",
-    "react/jsx-indent": "warn",
-    "padded-blocks": "warn",
-    "spaced-comment": "warn",
   },
 };

.github/agents/eslint-setup-fixer.agent.md

@@ -1,78 +0,0 @@
----
-description: "Use this agent when the user asks to set up or fix ESLint in a project, especially legacy or older projects.\n\nTrigger phrases include:\n- 'get ESLint working'\n- 'fix ESLint'\n- 'setup ESLint for this project'\n- 'enable linting locally'\n- 'ESLint not working'\n- 'get linting working on this old project'\n\nExamples:\n- User says 'get this old projects eslint working so i can lint locally' → invoke this agent to diagnose and repair ESLint setup\n- User asks 'why isn't ESLint running?' → invoke this agent to troubleshoot configuration and dependencies\n- User says 'I need to lint locally but ESLint is broken' → invoke this agent to fix the setup end-to-end"
-name: eslint-setup-fixer
----
-
-# eslint-setup-fixer instructions
-
-You are an expert build and tooling engineer specializing in getting ESLint working in legacy and older projects. Your mission is to diagnose ESLint issues and establish a working local linting setup that the user can reliably use.
-
-Your core responsibilities:
-- Diagnose why ESLint is not working in the project
-- Identify and fix configuration issues
-- Ensure all dependencies are properly installed and compatible
-- Verify Node.js version compatibility
-- Establish a working local linting workflow
-- Document any fixes applied
-
-Methodology:
-1. First, examine the current project state:
-   - Check if .eslintrc file exists (any format: .js, .json, .yml, .yaml)
-   - Look for eslintConfig in package.json
-   - Review package.json to see if eslint is listed as a dependency
-   - Check the Node.js version being used
-
-2. Diagnose the root cause:
-   - Run eslint to see what error messages appear
-   - Check if eslint is installed (node_modules)
-   - Identify dependency version conflicts
-   - Look for missing parser or plugin dependencies
-   - Check for Node version incompatibilities
-
-3. Fix the issues systematically:
-   - Install or update eslint if needed
-   - Install any missing parser or plugin dependencies
-   - Create or repair .eslintrc configuration if missing
-   - Update package.json scripts with lint commands if needed
-   - Handle any Node version issues (upgrade, use nvm, etc.)
-
-4. Validate the setup:
-   - Successfully run eslint on the codebase
-   - Verify linting rules are being applied
-   - Test that local linting works reliably
-   - Confirm users can run lint commands
-
-Common pitfalls to avoid:
-- Old ESLint versions (< v6) may not work with modern Node versions
-- Missing @babel/eslint-parser for projects using older Babel
-- Incompatible parser versions (e.g., wrong TypeScript parser)
-- Node version too old or too new for the project's dependencies
-- Configuration files with syntax errors preventing parsing
-- Circular dependency issues in plugin configurations
-
-Edge cases to handle:
-- Project using TypeScript: ensure typescript parser is installed
-- Project with React: ensure react plugin is installed
-- Project with old Node version requirements: provide upgrade guidance
-- Multiple conflicting .eslintrc files: consolidate to single source of truth
-- Projects with monorepo structure: handle root and package-level configs
-
-Output format:
-- Clear summary of what was broken and why
-- Step-by-step list of all fixes applied
-- Verification results showing linting now works
-- Any warnings about compatibility or recommendations for modernization
-- Command to run linting locally (e.g., `npm run lint` or `npm run eslint`)
-
-Quality checks:
-- Verify eslint command runs without errors
-- Confirm linting actually processes files (not just succeeding with no output)
-- Test that rules are being enforced
-- Ensure the fix is reproducible for other developers
-- Document any version constraints or platform-specific requirements
-
-When to ask for clarification:
-- If you're unsure whether the project uses TypeScript, React, or other special configs
-- If multiple conflicting approaches exist and you need user preference
-- If Node version constraints prevent a standard fix
-- If the project has unusual structure that prevents standard ESLint discovery

.gitignore

@@ -40,7 +40,3 @@ yarn-error.log*
 # SEO
 public/robots.txt
 public/sitemap.xml
-public/sitemap-0.xml
-
-# Sentry
-.sentryclirc

.gitlab-ci.yml

@@ -8,7 +8,7 @@ stages:
   - deploy
 
 install:
-  image: node:16
+  image: node:14
   stage: setup
   script:
     - npm ci
@@ -21,35 +21,34 @@ install:
     expire_in: 1 week
 
 audit:
-  image: node:16
+  image: node:14
   needs: ["install"]
-  allow_failure: true  
   stage: audit
   script:
     - npm audit --audit-level=critical
 
 es:lint:
-  image: node:16
+  image: node:14
   needs: ["install"]
   stage: lint
   script:
     - npm run lint:es
 
 css:lint:
-  image: node:16
+  image: node:14
   needs: ["install"]
   stage: lint
   script:
     - npm run lint:css
 
 # test:unit:
-#     image: node:16
+#     image: node:14
 #     stage: test
 #     script:
 #         - npm run test:unit
 
 build:
-  image: node:16
+  image: node:14
   needs: ["install"]
   stage: build
   script:
@@ -67,7 +66,7 @@ build:
       - .next/cache/
 
 test:e2e:
-  image: circleci/node:16-browsers
+  image: circleci/node:14-browsers
   needs: ["install", "build"]
   stage: test
   script:
@@ -80,32 +79,34 @@ test:e2e:
 
 publish:dev:
   stage: publish
-  image: docker:25-cli
+  image: docker:stable
   needs: ["build", "test:e2e", "es:lint", "css:lint"]
   services:
-    - docker:25-dind
+    - docker:stable-dind
   only:
     - master
   script:
-    - 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 info
     - 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:
   stage: publish
-  image: docker:25-cli
+  image: docker:stable
   services:
-    - docker:25-dind
+    - docker:stable-dind
   only:
     - production
   script:
-    - docker build . -t "$IMAGE_NAME":prod --build-arg SENTRY_AUTH_TOKEN="$SENTRY_AUTH_TOKEN"
+    - docker info
     - 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:
   stage: deploy
-  image: docker:25-cli
+  image: docker:stable
   only:
     - master
   environment:
@@ -119,13 +120,15 @@ 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_JOB_TOKEN $CI_REGISTRY
+    - docker login -u gitlab-ci-token -p "$CI_BUILD_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
-  image: docker:25-cli
+  image: docker:stable
   only:
     - production
   environment:
@@ -139,6 +142,8 @@ 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_JOB_TOKEN $CI_REGISTRY
+    - docker login -u gitlab-ci-token -p "$CI_BUILD_TOKEN" "$CI_REGISTRY"
   script:
     - docker stack deploy --with-registry-auth -c stack-compose.yml "$SERVICE_NAME"
+  after_script:
+    - docker logout "$CI_REGISTRY"

.husky/pre-push

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-npm run lint:es
+npm run lint

.nvmrc

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

.stylelintrc

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

Dockerfile

@@ -1,5 +1,5 @@
 # Install dependencies only when needed
-FROM node:16-alpine AS deps
+FROM node:14-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,21 +7,18 @@ COPY package.json package-lock.json ./
 RUN npm ci
 
 # Rebuild the source code only when needed
-FROM node:16-alpine AS builder
+FROM node:14-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:16-alpine AS runner
+FROM node:14-alpine AS runner
 WORKDIR /app
 
 ENV NODE_ENV production

README.md

@@ -4,26 +4,14 @@ This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next
 
 * **[React](https://facebook.github.io/react/)** (17.x)
 * **[Typescript](https://www.typescriptlang.org/)** (4.x)
-* **[Next.js](https://nextjs.org/)** (12.x)
-* **[Testcafe](https://devexpress.github.io/testcafe/)** - E2E Testing framework
+* **[Next.js](https://nextjs.org/)** (10.x)
+* [Testcafe](https://devexpress.github.io/testcafe/) - E2E Testing framework
 
 ## Installation
 
-
-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
-```
+1. Clone/download repo
+2. Install node v14 ([`nvm`](https://github.com/nvm-sh/nvm))
+3. `npm install`
 
 ## Getting Started
 

jest.config.js

@@ -1,20 +0,0 @@
-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,4 +1,5 @@
 /// <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,21 +1,9 @@
-const { withSentryConfig } = require("@sentry/nextjs");
 const withBundleAnalyzer = require("@next/bundle-analyzer")({
   enabled: process.env.ANALYZE === "true",
 });
 
-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({
+module.exports = withBundleAnalyzer({
+  target: "server",
   images: {
     domains: [
       "api.sahkoinsinoorikilta.fi",
@@ -23,7 +11,4 @@ module.exports = withBundleAnalyzer(withSentryConfig({
       "api.dev.sahkoinsinoorikilta.fi",
     ],
   },
-  sentry: {
-    hideSourceMaps: true, // Hide source maps, see: https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/#configure-source-maps
-  },
-}, sentryWebpackPluginOptions));
+});

package.json

@@ -27,79 +27,58 @@
     "start": "next dev",
     "start-prod": "next start --port ${SERVER_PORT:=80}",
     "serve": "next start --port 3000",
-    "test:unit": "jest --coverage",
     "test": "npm run testcafe",
     "testcafe": "testcafe --config-file testcafe.json",
     "build-analyze": "ANALYZE=true npm run build",
     "prepare": "husky install"
   },
   "devDependencies": {
-    "@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/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",
     "@types/shortid": "^0.0.29",
-    "@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",
+    "@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",
     "npm-run-all": "^4.1.5",
-    "postcss-jsx": "^0.36.4",
-    "postcss-syntax": "^0.36.2",
-    "stylelint": "^14.2.0",
-    "stylelint-config-recommended": "^6.0.0",
+    "stylelint": "^13.13.1",
+    "stylelint-config-standard": "^22.0.0",
     "stylelint-config-styled-components": "^0.1.1",
-    "testcafe": "^1.18.5",
-    "ts-jest": "^27.1.4",
-    "typescript": "^4.6.3"
+    "testcafe": "^1.15.3",
+    "typescript": "^4.3.5"
   },
   "dependencies": {
-    "@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",
+    "@next/bundle-analyzer": "^11.1.0",
+    "@rjsf/core": "^3.1.0",
+    "axios": "^0.21.1",
+    "date-fns": "^2.23.0",
     "fast-deep-equal": "^3.1.3",
-    "js-cookie": "^3.0.1",
+    "js-cookie": "^3.0.0",
     "lodash": "^4.17.21",
-    "mqtt": "^5.14.1",
-    "next": "^13.1.6",
+    "next": "^11.1.0",
     "normalize.css": "^8.0.1",
-    "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": "^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-mde": "^11.5.0",
-    "react-toastify": "^9.0.7",
-    "rehype-raw": "^6.1.1",
-    "rehype-sanitize": "^5.0.1",
-    "sharp": "^0.30.3",
+    "react-toastify": "^7.0.4",
+    "rehype-raw": "^6.0.0",
+    "rehype-sanitize": "^5.0.0",
+    "sharp": "^0.29.0",
     "shortid": "^2.2.16",
-    "styled-components": "^5.3.5",
-    "swr": "^1.2.2",
-    "uuid": "^13.0.0"
-  },
-  "engines": {
-    "node": "16"
-  },
-  "overrides": {
-    "react-mde": {
-      "react": "$react",
-      "react-dom": "$react-dom"
-    }
+    "styled-components": "^5.3.0",
+    "swr": "^0.5.6"
   }
 }

sentry.client.config.js

@@ -1,16 +0,0 @@
-// 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

@@ -1,4 +0,0 @@
-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

@@ -1,16 +0,0 @@
-// 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

@@ -1,73 +0,0 @@
-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

@@ -1,134 +0,0 @@
-import axios, { AxiosInstance, AxiosRequestConfig } from "axios";
-import { getAccessTokenCookie } from "@utils/auth";
-
-const API_TIMEOUT_MS = 10000;
-
-const axiosInstance: AxiosInstance = axios.create({
-  baseURL: process.env.NEXT_PUBLIC_API_URL,
-  timeout: API_TIMEOUT_MS,
-});
-
-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,10 +1,11 @@
 /* eslint-disable no-console */
+import axios from "axios";
 import Event from "@models/Event";
-import {
-  APIPath, deleteBackendAPI, getBackendAPI, postBackendAPI, putBackendAPI,
-} from "./backend";
+import { getAuthHeader } from "@utils/auth";
 
-interface Options {
+export const URL = `${process.env.NEXT_PUBLIC_API_URL}/events/`;
+
+export interface Options {
   limit?: number;
   offset?: number;
   auth?: boolean;
@@ -12,66 +13,83 @@ interface Options {
 }
 
 class EventApi {
-  static getEvent = async (id: number, auth = false): Promise<Event> => {
+  static async getEvent(id: number, auth = false): Promise<Event> {
     try {
-      return await getBackendAPI<Event>({
-        path: APIPath.EVENTS, urlParams: { id }, authenticated: auth,
+      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 getEvents = async ({
-    since, limit, offset, auth,
-  }: Options = {}): Promise<Event[]> => {
+  static async getEvents(options: Options = {}): Promise<Event[]> {
+    const {
+      since, limit, offset, auth,
+    } = options;
     try {
-      return await getBackendAPI<Event[]>({
-        path: APIPath.EVENTS,
-        queryParams: {
-          since,
-          limit,
-          offset,
+      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(),
         },
-        authenticated: auth,
       });
+      return resp.data;
     } catch (err) {
       console.error(err);
       throw err;
     }
-  };
+  }
 
-  static createEvent = async (data: Event): Promise<Event> => {
+  static async updateEvent(data: Event): Promise<Event> {
     try {
-      return await postBackendAPI<Event, Event>({
-        path: APIPath.EVENTS, authenticated: true,
-      }, data);
+      const putUrl = `${URL}${data.id}/`;
+      const resp = await axios.put(putUrl, data, {
+        headers: {
+          Authorization: getAuthHeader(),
+        },
+      });
+      return resp.data;
     } catch (err) {
       console.error(err);
       throw err;
     }
-  };
+  }
 
-  static updateEvent = async (data: Event): Promise<Event> => {
+  static async deleteEvent(id: number) {
     try {
-      return await putBackendAPI<Event, Event>({
-        path: APIPath.EVENTS, urlParams: { id: data.id }, authenticated: true,
-      }, data);
+      const resp = await axios.delete(`${URL}${id}`, {
+        headers: {
+          Authorization: getAuthHeader(),
+        },
+      });
+      return resp.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,71 +1,89 @@
 /* eslint-disable no-console */
+import axios from "axios";
 import Post from "@models/Feed";
-import {
-  APIPath, deleteBackendAPI, getBackendAPI, postBackendAPI, putBackendAPI,
-} from "./backend";
+import { getAuthHeader } from "@utils/auth";
 
-interface Options {
+export const URL = `${process.env.NEXT_PUBLIC_API_URL}/feed/`;
+
+export interface Options {
   limit?: number;
   offset?: number;
   auth?: boolean;
 }
 
 class FeedApi {
-  static getPost = async (id: number, auth?: boolean): Promise<Post> => {
+  static async getFeed(options: Options = {}): Promise<Post[]> {
+    const {
+      limit, offset, auth,
+    } = options;
+    const params = {
+      limit,
+      offset,
+    };
+    const headers = auth ? { Authorization: getAuthHeader() } : null;
     try {
-      return await getBackendAPI<Post>({
-        path: APIPath.FEED, urlParams: { id }, authenticated: auth,
-      });
+      const resp = await axios.get(URL, { params, headers });
+      return resp.data.results;
     } catch (err) {
       console.error(err);
       throw err;
     }
-  };
+  }
 
-  static getFeed = async ({ limit, offset, auth }: Options = {}): Promise<Post[]> => {
+  static async getPost(id: number, options: Options = {}): Promise<Post> {
+    const { auth } = options;
+    const headers = auth ? { Authorization: getAuthHeader() } : null;
     try {
-      return await getBackendAPI<Post[]>({
-        path: APIPath.FEED,
-        queryParams: {
-          limit,
-          offset,
+      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(),
         },
-        authenticated: auth,
       });
+      return resp.data;
     } catch (err) {
       console.error(err);
       throw err;
     }
-  };
+  }
 
-  static createPost = async (data: Post): Promise<Post> => {
+  static async updatePost(data: Post): Promise<Post> {
     try {
-      return await postBackendAPI<Post, Post>({ path: APIPath.FEED, authenticated: true }, data);
+      const putUrl = `${URL}${data.id}/`;
+      const resp = await axios.put(putUrl, data, {
+        headers: {
+          Authorization: getAuthHeader(),
+        },
+      });
+      return resp.data;
     } catch (err) {
       console.error(err);
       throw err;
     }
-  };
+  }
 
-  static updatePost = async (data: Post): Promise<Post> => {
+  static async deletePost(id: number) {
     try {
-      return await putBackendAPI<Post, Post>({
-        path: APIPath.FEED, urlParams: { id: data.id }, authenticated: true,
-      }, data);
+      const resp = await axios.delete(`${URL}${id}`, {
+        headers: {
+          Authorization: getAuthHeader(),
+        },
+      });
+      return resp.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,10 +1,11 @@
 /* eslint-disable no-console */
+import axios from "axios";
 import JobAd from "@models/JobAd";
-import {
-  APIPath, deleteBackendAPI, getBackendAPI, postBackendAPI, putBackendAPI,
-} from "./backend";
+import { getAuthHeader } from "@utils/auth";
 
-interface Options {
+export const URL = `${process.env.NEXT_PUBLIC_API_URL}/jobads/`;
+
+export interface Options {
   since?: Date;
   limit?: number;
   offset?: number;
@@ -12,66 +13,83 @@ interface Options {
 }
 
 class JobAdApi {
-  static getJobAd = async (id: number, auth = false): Promise<JobAd> => {
+  static async getJobAds(options: Options = {}): Promise<JobAd[]> {
+    const {
+      since, limit, offset, auth,
+    } = options;
     try {
-      return await getBackendAPI({
-        path: APIPath.JOBADS, urlParams: { id }, authenticated: auth,
+      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 getJobAds = async ({
-    since, limit, offset, auth,
-  }: Options = {}): Promise<JobAd[]> => {
+  static async getJobAd(id: number, auth = false): Promise<JobAd> {
     try {
-      return await getBackendAPI<JobAd[]>({
-        path: APIPath.JOBADS,
-        queryParams: {
-          since,
-          limit,
-          offset,
+      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(),
         },
-        authenticated: auth,
       });
+      return resp.data;
     } catch (err) {
       console.error(err);
       throw err;
     }
-  };
+  }
 
-  static createJobAd = async (data: JobAd): Promise<JobAd> => {
+  static async updateJobAd(data: JobAd): Promise<JobAd> {
     try {
-      return await postBackendAPI<JobAd, JobAd>({
-        path: APIPath.JOBADS, authenticated: true,
-      }, data);
+      const putUrl = `${URL}${data.id}/`;
+      const resp = await axios.put(putUrl, data, {
+        headers: {
+          Authorization: getAuthHeader(),
+        },
+      });
+      return resp.data;
     } catch (err) {
       console.error(err);
       throw err;
     }
-  };
+  }
 
-  static updateJobAd = async (data: JobAd): Promise<JobAd> => {
+  static async deleteJobAd(id: number) {
     try {
-      return await putBackendAPI<JobAd, JobAd>({
-        path: APIPath.JOBADS, urlParams: { id: data.id }, authenticated: true,
-      }, data);
+      const resp = await axios.delete(`${URL}${id}`, {
+        headers: {
+          Authorization: getAuthHeader(),
+        },
+      });
+      return resp.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,153 +1,247 @@
 /* eslint-disable no-console */
+import axios from "axios";
 import { Signup, SignupForm } from "@models/Signup";
-import {
-  APIPath, deleteBackendAPI, getBackendAPI, postBackendAPI, putBackendAPI,
-} from "./backend";
+import { getAuthHeader } from "@utils/auth";
+import { TemplateQuestion } from "@models/TemplateQuestion";
 
-export type EmailRequest = {
-  mode: "all" | "actual" | "reserve";
-  subject: string;
-  content: string;
-};
+export const URL = `${process.env.NEXT_PUBLIC_API_URL}/signup/`;
+export const FORM_URL = `${process.env.NEXT_PUBLIC_API_URL}/signupForm/`;
+export const QUESTIONS_URL = `${process.env.NEXT_PUBLIC_API_URL}/questions/`;
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface Options {
+  // limit?: number;
+  // offset?: number;
+  // auth?: boolean;
+}
 
 class SignupApi {
-  static getSignup = async (id: number): Promise<Signup> => {
+  static async getSignup(id: number): Promise<Signup> {
     try {
-      return await getBackendAPI<Signup>({
-        path: APIPath.SIGNUPS, urlParams: { id }, authenticated: true,
+      const resp = await axios.get(`${URL}${id}`, {
+        headers: {
+          Authorization: getAuthHeader(),
+        },
       });
+      return resp.data;
     } catch (err) {
       console.error(err);
       throw err;
     }
-  };
+  }
 
-  static createSignup = async (data: Signup): Promise<Signup> => {
+  static async createSignup(data: Signup): Promise<Signup> {
     try {
-      return await postBackendAPI<Signup, Signup>({
-        path: APIPath.SIGNUPS,
-      }, data);
+      const resp = await axios.post(URL, data);
+      return resp.data;
     } catch (err) {
       console.error(err);
       throw err;
     }
-  };
+  }
 
-  static updateSignup = async (data: Signup, uuid: string): Promise<Signup> => {
+  static async updateSignup(data: Signup, uuid: string): Promise<Signup> {
     try {
       const { id } = data;
       if (!id) throw new Error("SignupId required!");
-      return await putBackendAPI<Signup, Signup>({
-        path: APIPath.SIGNUPS_EDIT,
-        urlParams: {
-          id,
-        },
-        queryParams: {
-          uuid,
-        },
-      }, data);
+      const resp = await axios.put(`${URL}${id}/edit/`, data, {
+        params: { uuid },
+      });
+      return resp.data;
     } catch (err) {
       console.error(err);
       throw err;
     }
-  };
+  }
 
-  static getSignupUUID = async (id: number, uuid: string): Promise<Signup> => {
+  static async getSignupUUID(id: number, uuid: string): Promise<Signup> {
     try {
-      return await getBackendAPI<Signup>({
-        path: APIPath.SIGNUPS_EDIT,
-        urlParams: {
-          id,
-        },
-        queryParams: {
+      const resp = await axios.get(`${URL}${id}/edit/`, {
+        params: {
           uuid,
         },
       });
+      return resp.data;
     } catch (err) {
       console.error(err);
       throw err;
     }
-  };
+  }
 
-  static deleteSignup = async (id: number): Promise<void> => {
+  static async deleteSignup(id: number) {
     try {
-      await deleteBackendAPI<{ message: "OK" }>({ path: APIPath.SIGNUPS, urlParams: { id }, authenticated: true });
-    } catch (err) {
-      console.error(err);
-      throw err;
-    }
-  };
-
-  static getForm = async (id: number, auth = false): Promise<SignupForm> => {
-    try {
-      return await getBackendAPI<SignupForm>({
-        path: APIPath.SIGNUP_FORMS, urlParams: { id }, authenticated: auth,
+      const resp = await axios.delete(`${URL}${id}`, {
+        headers: {
+          Authorization: getAuthHeader(),
+        },
       });
+      return resp.data;
     } catch (err) {
       console.error(err);
       throw err;
     }
-  };
+  }
 
-  static getForms = async (auth = false): Promise<SignupForm[]> => {
+  static async getForms(auth = false): Promise<SignupForm[]> {
     try {
-      return await getBackendAPI<SignupForm[]>({
-        path: APIPath.SIGNUP_FORMS, authenticated: auth,
+      const headers = auth ? { Authorization: getAuthHeader() } : null;
+      const resp = await axios.get(FORM_URL, {
+        headers,
       });
+      const { results } = resp.data;
+      return results;
     } catch (err) {
       console.error(err);
       throw err;
     }
-  };
+  }
 
-  static createForm = async (data: SignupForm): Promise<SignupForm> => {
+  static async getForm(id: number, auth = false): Promise<SignupForm> {
     try {
-      return await postBackendAPI<SignupForm, SignupForm>({
-        path: APIPath.SIGNUP_FORMS, authenticated: true,
-      }, data);
+      const headers = auth ? { Authorization: getAuthHeader() } : null;
+      const resp = await axios.get(`${FORM_URL}${id}/`, {
+        headers,
+      });
+      return resp.data;
     } catch (err) {
       console.error(err);
       throw err;
     }
-  };
+  }
 
-  static updateForm = async (data: SignupForm): Promise<SignupForm> => {
+  static async createForm(data: SignupForm): Promise<SignupForm> {
     try {
-      return await putBackendAPI<SignupForm, SignupForm>({
-        path: APIPath.SIGNUP_FORMS, urlParams: { id: data.id }, authenticated: true,
-      }, data);
+      const resp = await axios.post(FORM_URL, data, {
+        headers: {
+          Authorization: getAuthHeader(),
+        },
+      });
+      return resp.data;
     } catch (err) {
       console.error(err);
       throw err;
     }
-  };
+  }
 
-  static deleteForm = async (id: number): Promise<void> => {
+  static async updateForm(data: SignupForm): Promise<SignupForm> {
     try {
-      await deleteBackendAPI<{ message: "OK" }>({ path: APIPath.SIGNUP_FORMS, urlParams: { id }, authenticated: true });
+      const putUrl = `${FORM_URL}${data.id}/`;
+      const resp = await axios.put(putUrl, data, {
+        headers: {
+          Authorization: getAuthHeader(),
+        },
+      });
+      return resp.data;
     } catch (err) {
       console.error(err);
       throw err;
     }
-  };
+  }
 
-  static signupFormSendEmail = async (data: EmailRequest, id: number): Promise<void> => {
+  static async deleteForm(id: number) {
     try {
-      await postBackendAPI<EmailRequest, { message: "Email sent" }>({ path: APIPath.SIGNUP_FORMS_EMAIL, urlParams: { id }, authenticated: true }, data);
+      const resp = await axios.delete(`${FORM_URL}${id}`, {
+        headers: {
+          Authorization: getAuthHeader(),
+        },
+      });
+      return resp.data;
     } catch (err) {
       console.error(err);
       throw err;
     }
-  };
+  }
 
-  static getSignups = async (id: number): Promise<Signup[]> => {
+  static async signupFormSendEmail(data: any, id: number): Promise<any> {
     try {
-      return await getBackendAPI<Signup[]>({ path: APIPath.SIGNUP_FORMS_SIGNUPS, urlParams: { id }, authenticated: true });
+      const resp = await axios.post(`${FORM_URL}${id}/sendemail/`, data, {
+        headers: {
+          Authorization: getAuthHeader(),
+        },
+      });
+      return resp.data;
     } catch (err) {
       console.error(err);
       throw err;
     }
-  };
+  }
+
+  static async getSignups(id: number): Promise<Signup[]> {
+    try {
+      const resp = await axios.get(`${FORM_URL}${id}/signups/`, {
+        headers: {
+          Authorization: getAuthHeader(),
+        },
+      });
+      return resp.data;
+    } catch (err) {
+      console.error(err);
+      throw err;
+    }
+  }
+
+  static async getTemplateQuestions(): Promise<TemplateQuestion[]> {
+    try {
+      const resp = await axios.get(`${QUESTIONS_URL}`);
+      return resp.data.results;
+    } catch (err) {
+      console.error(err);
+      throw err;
+    }
+  }
+
+  static async getTemplateQuestion(id: number): Promise<TemplateQuestion> {
+    try {
+      const resp = await axios.get(`${QUESTIONS_URL}${id}/`);
+      return resp.data;
+    } catch (err) {
+      console.error(err);
+      throw err;
+    }
+  }
+
+  static async createTemplateQuestion(question: TemplateQuestion): Promise<TemplateQuestion> {
+    try {
+      const resp = await axios.post(`${QUESTIONS_URL}`, question, {
+        headers: {
+          Authorization: getAuthHeader(),
+        },
+      });
+      return resp.data;
+    } catch (err) {
+      console.error(err);
+      throw err;
+    }
+  }
+
+  static async updateTemplateQuestion(question: TemplateQuestion): Promise<TemplateQuestion> {
+    try {
+      const putUrl = `${QUESTIONS_URL}${question.id}/`;
+      const resp = await axios.put(putUrl, question, {
+        headers: {
+          Authorization: getAuthHeader(),
+        },
+      });
+      return resp.data;
+    } catch (err) {
+      console.error(err);
+      throw err;
+    }
+  }
+
+  static async deleteTemplateQuestion(id: number): Promise<{ message: string }> {
+    try {
+      const resp = await axios.delete(`${QUESTIONS_URL}${id}`, {
+        headers: {
+          Authorization: getAuthHeader(),
+        },
+      });
+      return resp.data;
+    } catch (err) {
+      console.error(err);
+      throw err;
+    }
+  }
 }
 
 export default SignupApi;

src/api/tagApi.ts

@@ -1,16 +1,26 @@
 /* eslint-disable no-console */
+import axios from "axios";
 import Tag from "@models/Tag";
-import { APIPath, getBackendAPI } from "./backend";
+
+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;
+}
 
 class TagApi {
-  static getTags = async (): Promise<Tag[]> => {
+  static async getTags(): Promise<Tag[]> {
     try {
-      return await getBackendAPI<Tag[]>({ path: APIPath.TAGS });
+      const resp = await axios.get(URL);
+      return resp.data.results;
     } catch (err) {
       console.error(err);
       throw err;
     }
-  };
+  }
 }
 
 export default TagApi;

src/components/Accordion/Accordion.tsx

@@ -49,7 +49,6 @@ 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/legacy/image";
+import Image from "next/image";
 
 const Icon = "/img/add-icon.png";
 

src/components/AdminSidebar.tsx

@@ -49,6 +49,7 @@ const AdminSidebar: React.FC<AdminSidebarProps> = ({ path }) => (
     <StyledLink to="/admin/events" passHref $path={path}>Events&nbsp;›</StyledLink>
     <StyledLink to="/admin/feed" passHref $path={path}>Feed&nbsp;›</StyledLink>
     <StyledLink to="/admin/signups" passHref $path={path}>Signup forms&nbsp;›</StyledLink>
+    <StyledLink to="/admin/template-questions" passHref $path={path}>Template questions&nbsp;›</StyledLink>
     <StyledLink to="/admin/jobads" passHref $path={path}>Job advertisements&nbsp;›</StyledLink>
     <StyledLink to="https://static.sahkoinsinoorikilta.fi/admin" passHref $path={path}>Files&nbsp;›</StyledLink>
     <StyledLink data-e2e="admin-sidebar-logout" to="/admin/logout" passHref $path={path}>Logout&nbsp;›</StyledLink>

src/components/Button.tsx

@@ -6,10 +6,9 @@ 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/legacy/image";
+import Image from "next/image";
 import styled from "styled-components";
 import colors from "@theme/colors";
 import Link from "@components/Link";
@@ -43,7 +43,6 @@ const StyledCard = styled.article`
   }
 
   h3 {
-    hyphens: auto;
     padding: 0.5rem;
     font-size: 1.5rem;
     font-weight: 300;

src/components/ChangeLanguageButton.tsx

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

src/components/ContactCard.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import Image from "next/legacy/image";
+import Image from "next/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: 8rem;
-  width: 8rem;
+  height: 5rem;
+  width: 5rem;
   flex-shrink: 0;
 
   img {
     padding: 0.5rem !important;
-    border-radius: 15%;
+    border-radius: 50%;
   }
 `;
 
@@ -32,24 +32,16 @@ const Info = styled.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  margin-left: -20px;
-  min-width: 150px;
-  padding: 2rem;
-  padding-top: 10px;
+  padding: 0.25rem;
   color: ${colors.darkBlue};
 
   & > p {
-    font-size: 1rem;
+    font-size: 0.8rem;
     margin: 0;
   }
 
-  & > a {
-    font-weight: 400;
-    font-size: 0.9rem;
-  }
-
   & > h3 {
-    font-size: 1.2rem;
+    font-size: 0.9rem;
     font-weight: 500;
   }
 `;
@@ -74,7 +66,7 @@ const ContactCard: React.FC<ContactCardProps> = ({
             src={image}
             alt={name}
             layout="fill"
-            objectFit="cover"
+            objectFit="scale-down"
           />
         </ImageContainer>
       ) : null}
@@ -82,7 +74,7 @@ const ContactCard: React.FC<ContactCardProps> = ({
         <h3>{name}</h3>
         <p>{role_fi || role_en}</p>
         {phone ? <p>{phone}</p> : null}
-        {email ? <a href={`mailto:${email}`}>{email}</a> : null}
+        {email ? <p>{email}</p> : null}
       </Info>
     </Row>
   </Card>

src/components/CrossFadeImages.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import Image, { ImageProps } from "next/legacy/image";
+import Image, { ImageProps } from "next/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

@@ -1,61 +0,0 @@
-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,14 +6,13 @@ interface DropDownBoxProps {
   onMouseEnter: () => void;
   onMouseLeave: () => void;
   visible: boolean;
-  children: React.ReactNode;
 }
 
 const Box = styled.div`
   background-color: ${colors.white};
   border: 1px solid ${colors.black};
+  margin-top: 0.8rem;
   position: absolute;
-  /* margin-top: 0.8rem; hides cool onhover effect but fixes a gap problem */
   left: 0;
   top: 2.5rem;
   z-index: 20;

src/components/Favicons.tsx

@@ -1,9 +1,8 @@
-/* eslint-disable react/no-invalid-html-attribute */
 import React from "react";
 
 const Icons = (): JSX.Element => (
   <>
-    <link rel="icon" href="/favicons/favicon.ico" />
+    <link rel="shortcut 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

@@ -1,77 +0,0 @@
-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

@@ -1,73 +0,0 @@
-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/Footer/FooterContent.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import styled from "styled-components";
 import { Link } from "@components/index";
-import Icon, { IconType } from "@components/Icon";
 import colors from "@theme/colors";
 import breakpoints from "@theme/breakpoints";
 
@@ -29,7 +28,6 @@ const Content = styled.div`
   h4 {
     color: ${colors.lightBlue};
     padding: 1.5rem 0;
-    text-align: center;
   }
 
   a {
@@ -69,27 +67,6 @@ const Map = styled.div`
   }
 `;
 
-const SomeContainer = styled.div`
-  display: flex;
-  flex-flow: column nowrap;
-  justify-content: space-between;
-  a {
-    display: flex;
-    flex-flow: row nowrap;
-    justify-content: center;
-    margin-right: 0.5rem;
-
-    color: inherit;
-    text-decoration: none;
-
-  }
-  svg{
-    width: 24px;
-    height: 24px;
-    fill: ${colors.white};
-}
-`;
-
 const FooterContent: React.FC = () => (
   <Content>
     <div>
@@ -100,8 +77,10 @@ const FooterContent: React.FC = () => (
             <div>
               <p>TUAS-Talo</p>
               <p>Maarintie 8</p>
+              <p>PL 15500, 00076 Aalto</p>
             </div>
             <div>
+              <p>Y-tunnus: 1627010-1</p>
               <p>hallitus@sahkoinsinoorikilta.fi</p>
               <Link to="/yhteystiedot">Yhteystiedot</Link>
             </div>
@@ -113,13 +92,6 @@ const FooterContent: React.FC = () => (
             <Link to="https://sik.kuvat.fi">Kuvagalleria</Link>
             <Link to="https://static.sahkoinsinoorikilta.fi/logot-ja-grafiikka/">Logot ja grafiikka</Link>
           </div>
-          <div>
-            <SomeContainer>
-              <Icon name={IconType.Facebook} link="https://www.facebook.com/AaltoYliopistonSIK/" />
-              <Icon name={IconType.Instagram} link="https://www.instagram.com/sahkoinsinoorikilta/" />
-              <Icon name={IconType.LinkedIn} link="https://www.linkedin.com/groups/8103057/" />
-            </SomeContainer>
-          </div>
         </Columns>
       </MarginSpace>
     </div>

src/components/HTMLLogo.tsx

@@ -0,0 +1,58 @@
+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/Header.tsx

@@ -26,13 +26,6 @@ const Sticky = styled.div<{ $isHidden?: boolean; $mobileMenuOpen?: boolean }>`
   transition: all 200ms ease-out;
   height: ${(p) => (p.$mobileMenuOpen ? "100vh" : "unset")};
 
-  /* tape to allow mobile dropdown menu scrolling */
-  @media screen and (max-width: ${breakpoints.mobile}) {
-    overflow-y: ${(p) => (p.$mobileMenuOpen ? "auto" : "visible")};
-    overflow-x: hidden;
-    -webkit-overflow-scrolling: touch; /* apparently some ios optimization for smoother scrolin' */
-  }
-
   ${(p) => (p.$isHidden ? (`
     transition: all 200ms ease-in;
     transform: translateY(-100%);

src/components/HeaderLogo.tsx

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

src/components/Hero/Hero.tsx

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

src/components/Hero/HeroAside.tsx

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

src/components/Hero/HeroPrimarySection.tsx

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

src/components/Hero/HeroSecondarySection.tsx

@@ -22,7 +22,6 @@ const Item = styled.div`
 
 interface HeroSecondarySectionItemProps {
   note?: string;
-  children: React.ReactNode;
 }
 
 export const HeroSecondarySectionItem: React.FC<HeroSecondarySectionItemProps> = ({ note, children }) => (
@@ -37,7 +36,6 @@ export const HeroSecondarySectionItem: React.FC<HeroSecondarySectionItemProps> =
 const Section = styled.section`
   background-color: ${colors.green1};
   color: ${colors.darkBlue};
-  width: 100%;
   padding: 3rem;
 
   h1 {
@@ -53,7 +51,6 @@ 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 | null => {
+const nameToIcon = (name: IconType): JSX.Element | string => {
   if (name === IconType.Facebook) {
     return (
       <svg
@@ -70,34 +70,16 @@ const nameToIcon = (name: IconType): JSX.Element | null => {
   }
   if (name === IconType.FinlandFlag) {
     return (
-      <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>
+      <span role="img">
+        🇫🇮
+      </span>
     );
   }
   if (name === IconType.GBFlag) {
     return (
-      <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>
+      <span role="img">
+        🇬🇧
+      </span>
     );
   }
   return null;

src/components/InfoBox.tsx

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

src/components/Link.tsx

@@ -2,7 +2,6 @@ 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;
@@ -16,27 +15,18 @@ const Link: React.FC<Props> = ({
 }) => {
   if (template) {
     return (
-      <NextJSLink
-        href={template}
-        passHref={passHref}
-        as={to}
-        {...props}
-        onClick={onClick}
-        onMouseEnter={onMouseEnter}
-        onMouseLeave={onMouseLeave}
-      />
+      <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>
     );
   }
   if (to.startsWith("/") || to.startsWith("#")) {
     return (
-      <NextJSLink
-        href={to}
-        passHref={passHref}
-        {...props}
-        onClick={onClick}
-        onMouseEnter={onMouseEnter}
-        onMouseLeave={onMouseLeave}
-      />
+      <NextJSLink href={to} passHref={passHref} {...props}>
+        {/* eslint-disable-next-line jsx-a11y/anchor-has-content */}
+        <a onClick={onClick} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} {...props} />
+      </NextJSLink>
     );
   }
 

src/components/NavbarChildLink.tsx

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

src/components/NavbarDropdownLink.tsx

@@ -38,7 +38,6 @@ 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/Navigation.tsx

@@ -10,29 +10,20 @@ export const renderNavigationItems = (mobile = false): JSX.Element => (
   <>
     <NavbarDropdownLink to="/kilta" text="Kilta ›" exploded={mobile}>
       <NavbarChildLink to="/kilta/toiminta">Toiminta</NavbarChildLink>
-      <NavbarChildLink to="/kilta/jasenyys">Jäsenyys</NavbarChildLink>
-      <NavbarChildLink to="/kilta/hallitus">Hallitus</NavbarChildLink>
-      <NavbarChildLink to="/kilta/toimihenkilot">Toimihenkilöt</NavbarChildLink>
-      <NavbarChildLink to="/kilta/vuokraa">Vuokraa kalustoa</NavbarChildLink>
+      <NavbarChildLink to="/kilta/fuksi">Fuksi</NavbarChildLink>
       <NavbarChildLink to="/kilta/kunnianosoitukset">Kunnianosoitukset</NavbarChildLink>
       <NavbarChildLink to="https://static.sahkoinsinoorikilta.fi">Dokumenttiarkisto</NavbarChildLink>
       <NavbarChildLink to="https://sik.kuvat.fi">Kuvagalleria</NavbarChildLink>
-      <NavbarChildLink to="/kilta/kilta-avustus">Kilta-avustus</NavbarChildLink>
-    </NavbarDropdownLink>
-    <NavbarDropdownLink to="/" text="New students ›" exploded={mobile}>
-      <NavbarChildLink to="/newStudent/fuksi">Fukseille</NavbarChildLink>
-      <NavbarChildLink to="/newStudent/fukseille_en">For Freshmen</NavbarChildLink>
-      <NavbarChildLink to="/newStudent/forExchangers">For Exchange/MSc students</NavbarChildLink>
     </NavbarDropdownLink>
     <NavbarDropdownLink to="/opinnot_ja_ura" text="Opinnot ja ura" exploded={mobile} />
     <NavbarDropdownLink to="/yritysyhteistyo" text="Yritysyhteistyö" exploded={mobile} />
     <NavbarDropdownLink to="/yhteystiedot" text="Yhteystiedot" exploded={mobile}>
       {/* <NavbarChildLink to="https://en.wikipedia.org/wiki/Gay">Simo Höglund</NavbarChildLink> */}
     </NavbarDropdownLink>
-    <NavbarDropdownLink to="/yhdenvertaisuus" text="Yhdenvertaisuus" exploded={mobile} />
     <NavbarDropdownLink to="/in_english" text="In English" exploded={mobile} />
   </>
 );
+
 const Nav = styled.div`
   flex: 1 0 auto;
   display: flex;
@@ -56,11 +47,6 @@ const Nav = styled.div`
   @media screen and (max-width: ${breakpoints.mobile}) {
     justify-content: center;
     margin-left: 0;
-    /* line 59 */
-    border-top: 2px solid ${colors.lightBlue}; /* Add line above */
-    padding-top: 0.5rem; /* Add some spacing */
-    padding-bottom: 0.5rem; /* Add some spacing */
-    cursor: pointer; /* Make entire nav clickable */
   }
 
   svg {
@@ -82,12 +68,22 @@ const DesktopContainer = styled.div`
   }
 `;
 
+const SomeContainer = styled.div`
+  display: flex;
+  flex-flow: row nowrap;
+
+  a {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: center;
+    margin: 1rem;
+  }
+`;
+
 const MobileMenu = styled.div`
   display: flex;
   margin: 0 1rem;
-  align-items: center;
   cursor: pointer;
-  padding: 0 50%; /* Large clickable area horizontally cheeze */
 
   span {
     display: flex;
@@ -97,6 +93,9 @@ const MobileMenu = styled.div`
     display: none;
   }
 
+  @media screen and (max-width: ${breakpoints.mobile}) {
+    margin-left: 3rem;
+  }
 `;
 
 interface NavigationProps {
@@ -110,8 +109,13 @@ const Navigation: React.FC<NavigationProps> = ({ onMobileMenuOpen }) => {
       <DesktopContainer>
         {desktopItems}
       </DesktopContainer>
-      <MobileMenu onClick={onMobileMenuOpen}>
-        <Icon name={IconType.HamburgerMenu} />
+      <SomeContainer>
+        <Icon name={IconType.Facebook} link="https://www.facebook.com/AaltoYliopistonSIK/" />
+        <Icon name={IconType.Instagram} link="https://www.instagram.com/sahkoinsinoorikilta/" />
+        <Icon name={IconType.LinkedIn} link="https://www.linkedin.com/groups/8103057/" />
+      </SomeContainer>
+      <MobileMenu>
+        <Icon name={IconType.HamburgerMenu} onClick={onMobileMenuOpen} />
       </MobileMenu>
     </Nav>
   );

src/components/NavigationMobile.tsx

@@ -4,8 +4,8 @@ import colors from "@theme/colors";
 import { renderNavigationItems } from "./Navigation";
 
 const Nav = styled.nav`
-  padding: 1rem 1rem;
-  padding-bottom: 20rem;
+  padding: 1rem 2rem;
+
   a {
     fill: ${colors.lightBlue};
     color: ${colors.lightBlue};

src/components/PageLink.tsx

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

src/components/Sections/TextSection.tsx

@@ -52,7 +52,6 @@ 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

@@ -1,12 +0,0 @@
-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,18 +5,20 @@ import Checkbox from "./Checkbox";
 
 // See https://github.com/rjsf-team/react-jsonschema-form/blob/master/packages/core/src/components/widgets/CheckboxesWidget.js
 
-const selectValue = (value, selected, all) => {
+function 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));
-};
+}
 
-const deselectValue = (value, selected) => selected.filter((v) => v !== value);
+function deselectValue(value, selected) {
+  return selected.filter((v) => v !== value);
+}
 
 type CheckboxesProps = Omit<WidgetProps, "options"> & {
-  options: Record<string, any>;
+  options: any;
 };
 
 const CheckboxContainer = styled.div`
@@ -30,13 +32,12 @@ 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={key}
+            id={`${id}_${index}`}
             checked={checked}
             disabled={disabled || itemDisabled || readonly}
             autoFocus={autofocus && index === 0}
@@ -53,11 +54,11 @@ const Checkboxes: React.FC<CheckboxesProps> = ({
           </Checkbox>
         );
         return inline ? (
-          <label key={key} className={`checkbox-inline ${disabledCls}`}>
+          <label key={index} className={`checkbox-inline ${disabledCls}`}>
             {checkbox}
           </label>
         ) : (
-          <CheckboxContainer key={key} className={disabledCls}>
+          <CheckboxContainer key={index} className={disabledCls}>
             {checkbox}
           </CheckboxContainer>
         );

src/components/Widgets/MarkdownEditorWidget.tsx

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

src/components/Widgets/RadioButton/RadioButtonWidget.tsx

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

src/components/Widgets/SignupQuestionsWidget/OptionsWidget.tsx

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

src/components/Widgets/SignupQuestionsWidget/QuestionList.tsx

@@ -1,9 +1,8 @@
-import React from "react";
+import React, { ReactNode } from "react";
 import styled from "styled-components";
-import Draggable from "@components/Draggable";
+import { Draggable } from "react-beautiful-dnd";
 import colors from "@theme/colors";
-import { SignupFormQuestion } from "@models/Signup";
-import { Lang } from "../../../i18n";
+import { Question, InputProps } from "./common";
 import OptionsWidget from "./OptionsWidget";
 import TypeWidget from "./TypeWidget";
 import QuestionElement from "./Question";
@@ -17,70 +16,77 @@ const WidgetRow = styled.div`
 `;
 
 interface QuestionListProps {
-  questions: SignupFormQuestion[];
-  onChange: (value: SignupFormQuestion[]) => void;
+  questions: Question[];
+  innerRef: React.Ref<HTMLDivElement>;
+  placeholder: ReactNode;
+  onChange: (value: Question[]) => void;
 }
 
-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);
+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;
     onChange(questions);
   };
 
-  const handleElementRemove = (index: number) => (): void => {
+  handleElementRemove = (questions: Question[], index: number) => (): void => {
+    const { onChange } = this.props;
     const newQuestions = [...questions];
     newQuestions.splice(index, 1);
     onChange(newQuestions);
   };
 
-  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);
-  };
+  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);
 
-  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>
+      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}
+            >
               <QuestionElement
-                onClick={handleElementRemove(index)}
+                onClick={this.handleElementRemove(questions, index)}
               >
-                <input type="text" value={q.title_fi} onChange={handleNameInputChange(index, "fi")} />
-                <input type="text" value={q.title_en} onChange={handleNameInputChange(index, "en")} />
+                {nameWidget}
                 {typeSelectWidget}
                 {optionsWidget}
               </QuestionElement>
             </WidgetRow>
-          </Draggable>
-        );
-      })}
-    </div>
-  );
-};
+          )}
+        </Draggable>
+      );
+    });
+  }
+
+  render(): JSX.Element {
+    const { placeholder, innerRef } = this.props;
+
+    return (
+      <div ref={innerRef} data-e2e="admin-signup-question">
+        {this.renderQuestions()}
+        {placeholder}
+      </div>
+    );
+  }
+}
 
 export default QuestionList;

src/components/Widgets/SignupQuestionsWidget/SignupQuestionsWidget.tsx

@@ -1,10 +1,11 @@
 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 {
@@ -33,39 +34,58 @@ const AddQuestionButton = styled.button`
 interface SignupQuestionsWidgetProps {
   value: string;
   onChange: (value: string) => void;
+  onFocus: () => void;
+  required: boolean;
+  disabled: boolean;
 }
 
-const SignupQuestionsWidget: React.FC<SignupQuestionsWidgetProps> = ({ value, onChange }) => {
-  const onValueChange = (questions: SignupFormQuestion[]) => {
+const SignupQuestionsWidget: React.FC<SignupQuestionsWidgetProps> = ({ value, onFocus, onChange }) => {
+  const onValueChange = (questions: Question[]) => {
     const newValue = JSON.stringify(questions);
     onChange(newValue);
   };
 
   const handleNewRowClick = (questions) => () => {
-    const newRow: SignupFormQuestion = {
+    const newRow: Question = {
       id: shortid.generate(),
-      title_fi: `Kysymys #${questions.length + 1}`,
-      title_en: `Question #${questions.length + 1}`,
-      options: {
-        enum: [],
-        enumNames_fi: [],
-        enumNames_en: [],
-      },
+      name: `Question #${questions.length + 1}`,
+      options: [],
       type: "text",
     };
-    const newQuestions: SignupFormQuestion[] = questions.concat([newRow]);
+    const newQuestions: Question[] = questions.concat([newRow]);
 
     onValueChange(newQuestions);
   };
 
-  const questions: SignupFormQuestion[] = JSON.parse(value);
+  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[];
 
   return (
     <Widget>
-      <QuestionList
-        questions={questions}
-        onChange={onValueChange}
-      />
+      <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>
       <AddQuestionButton type="button" onClick={handleNewRowClick(questions)} data-e2e="admin-signup-new-question">
         <AddIcon />
         New Question

src/components/Widgets/SignupQuestionsWidget/TypeWidget.tsx

@@ -1,29 +1,32 @@
 import React from "react";
-import { SignupFormQuestion } from "@models/Signup";
-import { InputProps, optionTypes } from "./common";
+import { Question, InputProps, optionTypes } from "./common";
 
 interface TypeWidgetProps {
   inputProps: InputProps;
-  onChange: (value: SignupFormQuestion[]) => void;
+  onChange: (value: Question[]) => void;
 }
 
-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"];
+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"];
     // eslint-disable-next-line no-param-reassign
     questions[index].type = val;
     onChange(questions);
   };
 
-  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>
-  );
-};
+  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>
+    );
+  }
+}
 
 export default TypeWidget;

src/components/Widgets/SignupQuestionsWidget/common.ts

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

src/hooks/useFetchEvents.ts

@@ -0,0 +1,56 @@
+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

@@ -0,0 +1,53 @@
+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

@@ -0,0 +1,56 @@
+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

@@ -1,14 +0,0 @@
-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, useMemo, useReducer,
+  createContext, useContext, useReducer,
 } from "react";
 import fi from "./locales/fi/common.json";
 import en from "./locales/en/common.json";
 
-export type Lang = "fi" | "en";
+type Lang = "fi" | "en";
 const LOCAL_STORAGE_KEY = "locale";
 
 type TranslateFunc = (key: string) => string;
@@ -26,11 +26,6 @@ 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>,
@@ -67,7 +62,8 @@ const Reducer = (state: Store, action: Lang) => {
 };
 
 const LocaleContext = createContext(initialState);
-const LocaleStore: React.FC<{ children?: React.ReactNode }> = ({ children }) => {
+
+const LocaleStore: React.FC = ({ children }) => {
   const [state, dispatch] = useReducer(Reducer, initialState);
   const changeLanguage = (action: Lang) => {
     dispatch(action);
@@ -77,11 +73,8 @@ const LocaleStore: React.FC<{ children?: React.ReactNode }> = ({ children }) =>
       // Just ignore if fails to store value in user's browser
     }
   };
-
-  const localeValue = useMemo(() => ({ ...state, changeLanguage }), [state]);
-
   return (
-    <LocaleContext.Provider value={localeValue}>
+    <LocaleContext.Provider value={{ ...state, changeLanguage }}>
       {children}
     </LocaleContext.Provider>
   );
@@ -91,7 +84,7 @@ export default LocaleStore;
 
 const useTranslation = () => {
   const { language, changeLanguage } = useContext(LocaleContext);
-  const t = getTranslateFunc(language);
+  const t = language === "en" ? translateEn : translateFi;
 
   return {
     t,

src/i18n/locales/en/common.json

@@ -6,17 +6,7 @@
   "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",
@@ -50,7 +40,7 @@
   "Se aukeaa":
   "Signup opens at",
 
-  "Ilmoittautuminen sulkeutuu":
+  "Ilmoittauminen sulkeutuu":
   "Signup closes at",
 
   "Ilmoittauminen on umpeutunut!":

src/models/Signup.ts

@@ -1,37 +1,19 @@
-import { OptionTypes } from "@components/Widgets/SignupQuestionsWidget/common";
+import { Question } from "@components/Widgets/SignupQuestionsWidget/common";
 
 export interface Signup {
-  id?: number; // Database id for completed signup
-  submit_id?: string; // Signup request idempotency key
+  id?: number;
   signupForm_id: number;
   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;
-  email_content: string;
-  questions: SignupFormQuestion[];
+  questions: Question[];
   signups: string[];
   quota: number;
   schema: {

src/models/TemplateQuestion.ts

@@ -0,0 +1,7 @@
+import { Question } from "@components/Widgets/SignupQuestionsWidget/common";
+
+export type TemplateQuestion = {
+  id?: number;
+  name: string;
+  questions: Question[];
+};

src/pages/_app.tsx

@@ -1,21 +1,16 @@
 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;
@@ -132,35 +127,27 @@ const AppContainer = styled.div`
   background-color: ${colors.white};
 `;
 
-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" />
-    </>
-  );
-};
+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" />
+  </>
+);
 
 export default Web20App;

src/pages/_document.tsx

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

src/pages/_error.tsx

@@ -1,65 +0,0 @@
-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 | undefined, signupForms: SignupForm[], tags: Tag[]) => {
+const buildSchema = (formData: Event, 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.message));
+      .catch((err) => setError(err));
 
     SignupApi.getForms(true)
       .then((res) => setSignupForms(res))
-      .catch((err) => setError(err.message));
+      .catch((err) => setError(err));
 
     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.message));
+        .catch((err) => setError(err));
     }
   }, [id]);
 
@@ -230,7 +230,7 @@ const EventCreatePage: NextPage = () => {
       }
     } catch (err) {
       toast.error("Uh oh! Something went wrong! Try again later. 😟");
-      setError(err.message);
+      setError(err);
     }
   };
 

src/pages/admin/events/index.tsx

@@ -1,7 +1,6 @@
-import React, { useState, useEffect } from "react";
+import React from "react";
 import { NextPage } from "next";
-import useSWR from "swr";
-import { formatRelative, formatISO } from "date-fns";
+import { formatRelative } from "date-fns";
 import { toast } from "react-toastify";
 import styled from "styled-components";
 import AdminListCommon from "@views/admin/AdminListCommon";
@@ -9,8 +8,7 @@ import { Button, Link } from "@components/index";
 import AddLink from "@components/AddLink";
 import Event from "@models/Event";
 import EventApi from "@api/eventApi";
-import { fetcher, APIPath, API } from "@api/backend";
-import { StyledSelect, SelectWrapper } from "@components/Select";
+import useFetchEvents from "@hooks/useFetchEvents";
 
 const URL = "/admin/events";
 
@@ -34,113 +32,47 @@ const confirmDelete = async (event: Event) => {
   }
 };
 
-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) {
+const renderData = (events: Event[]) => {
+  if (!events || events.length === 0) {
     return <div>No events.</div>;
   }
 
   return (
-    <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>
+    <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>
           </tr>
-        </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>{formatISO(new Date(event.start_time), { representation: "date" })}</td>
-              <td>{formatISO(new Date(event.end_time), { representation: "date" })}</td>
-              <td>
-                <StyledButton $colorOverride="red" buttonStyle="filled" onClick={() => confirmDelete(event)}>
-                  Delete
-                </StyledButton>
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </div>
+        ))}
+      </tbody>
+    </table>
   );
 };
 
-const AdminEventPage: NextPage = () => (
-  <AdminListCommon>
-    <h1>Events</h1>
-    <AddLink text="Create event" to={`${URL}/create`} data-e2e="create-event" />
-    <Renderer />
-  </AdminListCommon>
-);
+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>
+  );
+};
 
 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.message));
+      .catch((err) => setError(err));
 
     const feedId = id && Number(id);
     if (feedId !== undefined) {
-      FeedApi.getPost(feedId, true)
+      FeedApi.getPost(feedId, { auth: true })
         .then((res) => setFormData({
           ...res,
           tags: (res.tags).map((inst) => inst.id) as any,
         }))
-        .catch((err) => setError(err.message));
+        .catch((err) => setError(err));
     }
   }, [id]);
 
@@ -179,7 +179,7 @@ const FeedCreatePage: NextPage = () => {
       }
     } catch (err) {
       toast.error("Uh oh! Something went wrong! Try again later. 😟");
-      setError(err.message);
+      setError(err);
     }
   };
 

src/pages/admin/feed/index.tsx

@@ -1,7 +1,6 @@
-import React, { useState, useEffect } from "react";
+import React from "react";
 import { NextPage } from "next";
-import useSWR from "swr";
-import { formatRelative, formatISO } from "date-fns";
+import { formatRelative } from "date-fns";
 import { toast } from "react-toastify";
 import styled from "styled-components";
 import AdminListCommon from "@views/admin/AdminListCommon";
@@ -9,8 +8,7 @@ import { Button, Link } from "@components/index";
 import AddLink from "@components/AddLink";
 import Post from "@models/Feed";
 import PostApi from "@api/feedApi";
-import { fetcher, APIPath, API } from "@api/backend";
-import { SelectWrapper, StyledSelect } from "@components/Select";
+import useFetchFeed from "@hooks/useFetchFeed";
 
 const URL = "/admin/feed";
 
@@ -34,81 +32,47 @@ const confirmDelete = async (post: Post) => {
   }
 };
 
-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>
-    );
+const renderData = (feed: Post[]) => {
+  if (!feed || feed.length === 0) {
+    return <div>No posts.</div>;
   }
 
   return (
-    <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>
+    <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>
           </tr>
-        </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>{formatISO(new Date(post.publish_time), { representation: "date" })}</td>
-              <td>
-                <StyledButton $colorOverride="red" buttonStyle="filled" onClick={() => confirmDelete(post)}>
-                  Delete
-                </StyledButton>
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </div>
+        ))}
+      </tbody>
+    </table>
   );
 };
 
-const AdminFeedPage: NextPage = () => (
-  <AdminListCommon>
-    <h1>Feed</h1>
-    <AddLink text="Create news post" to={`${URL}/create`} />
-    <Renderer />
-  </AdminListCommon>
-);
+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>
+  );
+};
 
 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.message));
+        .catch((err) => setError(err));
     }
   }, [id]);
 
@@ -143,7 +143,7 @@ const JobAdCreatePage: NextPage = () => {
       }
     } catch (err) {
       toast.error("Uh oh! Something went wrong! Try again later. 😟");
-      setError(err.message);
+      setError(err);
     }
   };
 

src/pages/admin/jobads/index.tsx

@@ -1,15 +1,14 @@
 import React from "react";
 import { NextPage } from "next";
-import useSWR from "swr";
-import { formatRelative, formatISO } from "date-fns";
+import { formatRelative } from "date-fns";
 import { toast } from "react-toastify";
 import styled from "styled-components";
 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";
 
@@ -33,18 +32,8 @@ const confirmDelete = async (jobad: JobAd) => {
   }
 };
 
-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) {
+const renderData = (jobAds: JobAd[]) => {
+  if (!jobAds || jobAds.length === 0) {
     return <div>No advertisements.</div>;
   }
 
@@ -64,7 +53,7 @@ const Renderer: React.FC = () => {
             <td>{ad.description_fi}</td>
             <td>
               {ad.autohide_enabled
-                ? formatISO(new Date(ad.autohide_at), { representation: "date" })
+                ? formatRelative(new Date(ad.autohide_at), new Date())
                 : "Disabled"}
             </td>
             <td>
@@ -79,12 +68,15 @@ const Renderer: React.FC = () => {
   );
 };
 
-const AdminJobAdPage: NextPage = () => (
-  <AdminListCommon>
-    <h1>Job advertisements</h1>
-    <AddLink text="Create job ad" to={`${URL}/create`} />
-    <Renderer />
-  </AdminListCommon>
-);
+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>
+  );
+};
 
 export default AdminJobAdPage;

src/pages/admin/login.tsx

@@ -1,11 +1,8 @@
-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 { authenticate, login } from "@api/auth";
+import { generateToken, setTokenCookie, isAuthenticated } from "@utils/auth";
 import AdminPageWrapper from "@views/common/AdminPageWrapper";
 
 const Main = styled.div`
@@ -23,8 +20,8 @@ const AdminLoginPage: NextPage = () => {
   const next = router.query.next as string || DEFAULT_REDIRECT;
 
   useEffect(() => {
-    authenticate().then((authResult) => {
-      if (authResult) {
+    isAuthenticated().then((res) => {
+      if (res) {
         router.push(next);
       }
     });
@@ -33,7 +30,8 @@ const AdminLoginPage: NextPage = () => {
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     try {
-      await login(username, password);
+      const token = await generateToken(username, password);
+      setTokenCookie(token);
       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 { deleteTokenCookies } from "@utils/auth";
+import { deleteTokenCookie } from "@utils/auth";
 
 const AdminLogoutPage: NextPage = () => {
   const router = useRouter();
   // client-side-only code
   if (typeof window !== "undefined") {
-    deleteTokenCookies();
+    deleteTokenCookie();
     router.push("/admin/login");
   }
   return null;

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

@@ -1,14 +1,17 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { NextPage } from "next";
 import { useRouter } from "next/router";
+import shortid from "shortid";
 import AdminCreateCommon from "@views/admin/AdminCreateCommon";
-import { SignupForm, SignupFormQuestion } from "@models/Signup";
+import { SignupForm } from "@models/Signup";
 import SignupApi from "@api/signupApi";
 import DatetimeWidget from "@components/Widgets/DatetimeWidget";
 import SignupQuestionsWidget from "@components/Widgets/SignupQuestionsWidget/SignupQuestionsWidget";
 import MarkdownEditorWidget from "@components/Widgets/MarkdownEditorWidget";
 import { buildValidationSchema } from "@views/SignUpPage/FormUtils";
 import { toast } from "react-toastify";
+import { TemplateQuestion } from "@models/TemplateQuestion";
+import { Question } from "@components/Widgets/SignupQuestionsWidget/common";
 
 const DEFAULT_EMAIL = `Moikka,
 
@@ -98,7 +101,10 @@ const buildUISchema = () => {
 
 const SignupCreatePage: NextPage = () => {
   const [formData, setFormData] = useState<SignupForm>(null);
+  const [templateQuestions, setTemplateQuestions] = useState<TemplateQuestion[]>([]);
   const [error, setError] = useState<string>(null);
+  const templateSelectionRef = useRef<HTMLSelectElement>(null);
+  const templateNameRef = useRef<HTMLInputElement>(null);
 
   const router = useRouter();
 
@@ -110,7 +116,7 @@ const SignupCreatePage: NextPage = () => {
 
   useEffect(() => {
     const suId = id && Number(id);
-    if (suId !== undefined && !Number.isNaN(suId)) {
+    if (suId !== undefined) {
       SignupApi.getForm(suId, true)
         .then((res) => {
           setFormData({
@@ -122,9 +128,14 @@ const SignupCreatePage: NextPage = () => {
     }
   }, [id]);
 
+  useEffect(() => {
+    SignupApi.getTemplateQuestions().then((res) => setTemplateQuestions(res))
+      .catch((err) => setError(err.message));
+  }, []);
+
   const onSubmit = async (data: any) => {
     try {
-      const questions: SignupFormQuestion[] = JSON.parse(data.formData.questions);
+      const questions = JSON.parse(data.formData.questions);
       const payload: SignupForm = {
         ...data.formData,
         questions,
@@ -150,7 +161,7 @@ const SignupCreatePage: NextPage = () => {
       }
     } catch (err) {
       toast.error("Uh oh! Something went wrong! Try again later. 😟");
-      setError(err.message);
+      setError(err);
     }
   };
 
@@ -172,6 +183,40 @@ const SignupCreatePage: NextPage = () => {
         error={error}
         widgets={widgets}
       />
+      <div>
+        <select
+          ref={templateSelectionRef}
+          onChange={(event) => {
+            const addedTemplate = templateQuestions.find((q) => String(q.id) === event.target.value);
+            if (addedTemplate) {
+            // Generate new ids
+              const newItems = addedTemplate.questions.map((q) => ({ ...q, id: shortid() }));
+              // Concatenate new items to existing questions
+              const questions = JSON.parse(formData.questions as unknown as string).concat(newItems);
+              setFormData({
+                ...formData,
+                questions: JSON.stringify(questions) as unknown as Question[],
+              });
+            }
+            templateSelectionRef.current.value = "";
+          }}
+        >
+          <option value="">No template</option>
+          {templateQuestions.map((q) => (
+            <option key={q.id} value={q.id}>{q.name}</option>
+          ))}
+        </select>
+        <input ref={templateNameRef} />
+        <button
+          type="button"
+          onClick={() => {
+            const questions = JSON.parse(formData.questions as unknown as string);
+            console.log(questions);
+            SignupApi.createTemplateQuestion({ name: templateNameRef.current.value, questions });
+          }}
+        >Create new template
+        </button>
+      </div>
       {/* {formData.id && <p>
           Check out the signup form here: <Link to={`/signup/${formData.id}`}>{formData.title_fi}</Link>
         </p>} */}

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, { EmailRequest } from "@api/signupApi";
+import SignupApi from "@api/signupApi";
 
 const widgets = {
   markdownEditor: MarkdownEditorWidget,
@@ -67,11 +67,11 @@ const SignupEmailPage: NextPage = () => {
 
   const onSubmit = async (data) => {
     try {
-      const payload: EmailRequest = data.formData;
+      const payload = data.formData;
       await SignupApi.signupFormSendEmail(payload, Number(id));
       toast.success("Email sent successfully 😎");
     } catch (err) {
-      setError(err.message);
+      setError(err);
       toast.error("Uh oh! Something went wrong! Try again later. 😟");
     }
   };

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

@@ -26,18 +26,12 @@ const SignupEmailPage: NextPage = () => {
   const { id } = router.query;
 
   useEffect(() => {
-    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 formId = Number(id);
+    SignupApi.getForm(formId, true)
+      .then((res) => setSignupForm(res));
 
-  const title = signupForm ? signupForm.title_fi : "Loading...";
+    SignupApi.getSignups(formId).then((res) => setSignups(res));
+  }, [id]);
 
   const confirmDelete = async (signup: Signup, question: any) => {
     if (window.confirm(`Delete: ${signup.id}: ${signup.answer[question.id]}; Are you sure?`) === true) {
@@ -51,25 +45,27 @@ const SignupEmailPage: NextPage = () => {
     }
   };
 
-  const renderData = () => {
-    if (!signupForm || !signups || signups.length === 0) {
-      return <div>No signups.</div>;
-    }
+  const title = signupForm ? signupForm.title_fi : "Loading...";
 
-    // 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,
-    })) : [];
+  // 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,
+  })) : [];
 
-    // 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 (
+  return (
+    <AdminListCommon>
+      <h1>
+        {title}
+        : Sign-ups
+      </h1>
       <table>
         <thead>
           <tr>
@@ -85,6 +81,7 @@ const SignupEmailPage: NextPage = () => {
             </th>
           </tr>
         </thead>
+
         <tbody>
           {signups.map((s) => (
             <tr key={s.id}>
@@ -102,16 +99,6 @@ const SignupEmailPage: NextPage = () => {
           ))}
         </tbody>
       </table>
-    );
-  };
-
-  return (
-    <AdminListCommon>
-      <h1>
-        {title}
-        : Sign-ups
-      </h1>
-      {renderData()}
     </AdminListCommon>
   );
 };

src/pages/admin/signups/index.tsx

@@ -1,7 +1,6 @@
-import React, { useState, useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { NextPage } from "next";
-import useSWR from "swr";
-import { formatRelative, formatISO } from "date-fns";
+import { formatRelative } from "date-fns";
 import { toast } from "react-toastify";
 import styled from "styled-components";
 import AdminListCommon from "@views/admin/AdminListCommon";
@@ -9,8 +8,6 @@ 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";
 
@@ -34,117 +31,57 @@ const confirmDelete = async (signup: SignupForm) => {
   }
 };
 
-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) {
+const renderData = (signupForms: SignupForm[]) => {
+  if (!signupForms || signupForms.length === 0) {
     return <div>No signup forms.</div>;
   }
 
   return (
-    <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>
+    <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>
           </tr>
-        </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>{formatISO(new Date(signupForm.start_time), { representation: "date" })}</td>
-              <td>{formatISO(new Date(signupForm.end_time), { representation: "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>
+        ))}
+      </tbody>
+    </table>
   );
 };
 
-const AdminSignupPage: NextPage = () => (
-  <AdminListCommon>
-    <h1>Sign-up forms</h1>
-    <AddLink text="Create signup form" to={`${URL}/create`} data-e2e="create-signup" />
-    <Renderer />
-  </AdminListCommon>
-);
+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>
+  );
+};
 
 export default AdminSignupPage;

src/pages/admin/template-questions/[id].tsx

@@ -0,0 +1,118 @@
+import React, { useEffect, useState } from "react";
+import { NextPage } from "next";
+import { useRouter } from "next/router";
+import AdminCreateCommon from "@views/admin/AdminCreateCommon";
+import SignupApi from "@api/signupApi";
+import SignupQuestionsWidget from "@components/Widgets/SignupQuestionsWidget/SignupQuestionsWidget";
+import { toast } from "react-toastify";
+import { TemplateQuestion } from "@models/TemplateQuestion";
+
+const widgets = {
+  signup: SignupQuestionsWidget,
+};
+
+const buildSchema = (formData: TemplateQuestion) => ({
+  title: formData?.name ?? "New Sign-up form",
+  type: "object",
+  required: ["name", "questions"],
+  properties: {
+    name: {
+      type: "string",
+      title: "Name",
+      default: "",
+    },
+    questions: {
+      type: "string",
+      title: "Questions",
+      default: "[]",
+    },
+  },
+});
+
+const buildUISchema = () => ({
+  questions: {
+    "ui:widget": "signup",
+  },
+});
+
+const TemplateQuestionCreatePage: NextPage = () => {
+  const [formData, setFormData] = useState<TemplateQuestion>(null);
+  const [error, setError] = useState<string>(null);
+
+  const router = useRouter();
+
+  let id: string;
+
+  if (router.query?.id && router.query.id !== "create") {
+    id = router.query.id as string;
+  }
+
+  useEffect(() => {
+    const templateId = id && Number(id);
+    SignupApi.getTemplateQuestion(templateId, true)
+      .then((res) => {
+        setFormData({
+          ...res,
+          questions: JSON.stringify(res.questions) as any,
+        });
+      })
+      .catch((err) => setError(err.message));
+  }, [id]);
+
+  const onSubmit = async (data: any) => {
+    try {
+      const questions = JSON.parse(data.formData.questions);
+      const payload: TemplateQuestion = {
+        ...data.formData,
+        questions,
+      };
+
+      if (payload.id === undefined) {
+        const resp = await SignupApi.createTemplateQuestion(payload);
+        toast.success("Sign-up created successfully 😎");
+        router.push("/admin/template-questions");
+        setFormData({
+          ...resp,
+          questions: JSON.stringify(resp.questions) as any,
+        });
+      } else {
+        const resp = await SignupApi.updateTemplateQuestion(payload);
+        toast.success("Sign-up updated successfully 😎");
+        router.push("/admin/template-questions");
+        setFormData({
+          ...resp,
+          questions: JSON.stringify(resp.questions) as any,
+        });
+      }
+    } catch (err) {
+      toast.error("Uh oh! Something went wrong! Try again later. 😟");
+      setError(err);
+    }
+  };
+
+  const onChange = (data) => setFormData(data.formData);
+
+  const title = formData?.id
+    ? `Edit template questions "${formData.name}"`
+    : "Create template questions";
+
+  return (
+    <>
+      <AdminCreateCommon
+        title={title}
+        formData={formData}
+        schema={buildSchema(formData)}
+        UISchema={buildUISchema()}
+        onChange={onChange}
+        onSubmit={onSubmit}
+        error={error}
+        widgets={widgets}
+      />
+      {/* {formData.id && <p>
+          Check out the signup form here: <Link to={`/signup/${formData.id}`}>{formData.title_fi}</Link>
+        </p>} */}
+    </>
+  );
+};
+
+export default TemplateQuestionCreatePage;

src/pages/admin/template-questions/index.tsx

@@ -0,0 +1,80 @@
+import React, { useEffect, useState } from "react";
+import { NextPage } from "next";
+import { toast } from "react-toastify";
+import styled from "styled-components";
+import AdminListCommon from "@views/admin/AdminListCommon";
+import { Button, Link } from "@components/index";
+import AddLink from "@components/AddLink";
+import SignupApi from "@api/signupApi";
+import { TemplateQuestion } from "@models/TemplateQuestion";
+
+const URL = "/admin/template-questions";
+
+const StyledButton = styled(Button) <{ $colorOverride: "red" }>`
+  background-color: ${(p) => p.$colorOverride};
+  border-radius: 8px;
+  color: white;
+  font-size: 13px;
+  font-weight: bold;
+`;
+
+const confirmDelete = async (template: TemplateQuestion) => {
+  if (window.confirm(`Delete: ${template.id}: ${template.name}; Are you sure?`) === true) {
+    try {
+      await SignupApi.deleteTemplateQuestion(template.id);
+      toast.success("Template question removed successfully 😎");
+      window.location.reload(); // TODO: Fetch/update event list, so user sees the signup in the list
+    } catch (err) {
+      toast.error("Uh oh! Something went wrong! Try again later. 😟");
+    }
+  }
+};
+
+const renderData = (templates: TemplateQuestion[]) => {
+  if (templates.length === 0) {
+    return <div>No signup forms.</div>;
+  }
+
+  return (
+    <table>
+      <thead>
+        <tr>
+          <th>Name</th>
+        </tr>
+      </thead>
+      <tbody>
+        {templates.map((template) => (
+          <tr key={template.id}>
+            <td><Link to={`${URL}/${template.id}`}>{template.name}</Link></td>
+            <td>
+              <StyledButton $colorOverride="red" buttonStyle="filled" onClick={() => confirmDelete(template)}>
+                Delete
+              </StyledButton>
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+};
+
+const AdminSignupTemplateQuestions: NextPage = () => {
+  const [allTemplates, setTemplates] = useState<TemplateQuestion[]>([]);
+
+  useEffect(() => {
+    SignupApi.getTemplateQuestions(true)
+      .then((res) => setTemplates(res));
+  }, []);
+
+  console.log(allTemplates);
+
+  return (
+    <AdminListCommon>
+      <h1>Sign-up forms</h1>
+      <AddLink text="Create template questions" to={`${URL}/create`} data-e2e="create-template-questions" />
+      {renderData(allTemplates)}
+    </AdminListCommon>
+  );
+};
+
+export default AdminSignupTemplateQuestions;

src/pages/events/[id].tsx

@@ -14,13 +14,14 @@ interface InitialProps {
 
 const EventPage: NextPage<InitialProps> = ({ event }) => {
   const router = useRouter();
+  const { id } = router.query;
 
   if (router.isFallback) return <LoadingView />;
 
   return (
     <>
       <Head>
-        <link rel="canonical" href={`${process.env.NEXT_PUBLIC_SITE_URL}/events/${event.id}`} />
+        <link rel="canonical" href={`${process.env.NEXT_PUBLIC_SITE_URL}/events/${id}`} />
       </Head>
       <PageWrapper>
         <EventPageView event={event} />
@@ -29,34 +30,36 @@ const EventPage: NextPage<InitialProps> = ({ event }) => {
   );
 };
 
-export const getStaticPaths: GetStaticPaths = async () => ({
-  paths: [],
-  fallback: "blocking",
-});
+export const getStaticPaths: GetStaticPaths = async () => {
+  const allEvents = await EventApi.getEvents();
+  const paths = allEvents.map((e: Event) => ({
+    params: {
+      id: String(e.id),
+    },
+  }
+  ));
+  return {
+    paths,
+    fallback: true,
+  };
+};
 
 export const getStaticProps: GetStaticProps<InitialProps> = async ({ params }) => {
-  const id = Number(params?.id);
-  if (!id) {
-    return {
-      notFound: true,
-      revalidate: 10,
-    };
-  }
-
+  const { id } = params;
+  let notFound = false;
+  let event: Event;
   try {
-    const event = await EventApi.getEvent(id);
-    return {
-      props: {
-        event,
-      },
-      revalidate: 10, // Required for deleting hidden pages
-    };
-  } catch {
-    return {
-      notFound: true,
-      revalidate: 10,
-    };
+    event = await EventApi.getEvent(Number(id));
+  } catch (err) {
+    notFound = true;
   }
+  return {
+    props: {
+      event,
+    },
+    revalidate: 10, // Required for deleting hidden pages
+    notFound,
+  };
 };
 
 export default EventPage;

src/pages/feed/[id].tsx

@@ -14,13 +14,14 @@ interface InitialProps {
 
 const FeedPage: NextPage<InitialProps> = ({ post }) => {
   const router = useRouter();
+  const { id } = router.query;
 
   if (router.isFallback) return <LoadingView />;
 
   return (
     <>
       <Head>
-        <link rel="canonical" href={`${process.env.NEXT_PUBLIC_SITE_URL}/feed/${post.id}`} />
+        <link rel="canonical" href={`${process.env.NEXT_PUBLIC_SITE_URL}/feed/${id}`} />
       </Head>
       <PageWrapper>
         <FeedPageView post={post} />
@@ -29,34 +30,37 @@ const FeedPage: NextPage<InitialProps> = ({ post }) => {
   );
 };
 
-export const getStaticPaths: GetStaticPaths = async () => ({
-  paths: [],
-  fallback: "blocking",
-});
+export const getStaticPaths: GetStaticPaths = async () => {
+  const feed = await FeedApi.getFeed();
+  const paths = feed.map((post: Post) => ({
+    params: {
+      id: String(post.id),
+    },
+  }
+  ));
+  return {
+    paths,
+    fallback: true,
+  };
+};
 
 export const getStaticProps: GetStaticProps<InitialProps> = async ({ params }) => {
-  const id = Number(params?.id);
-  if (!id) {
-    return {
-      notFound: true,
-      revalidate: 10,
-    };
+  const { id } = params;
+  let notFound = false;
+  let post: Post;
+  try {
+    post = await FeedApi.getPost(Number(id));
+  } catch (err) {
+    notFound = true;
   }
 
-  try {
-    const post = await FeedApi.getPost(id);
-    return {
-      props: {
-        post,
-      },
-      revalidate: 10, // Required for deleting hidden pages
-    };
-  } catch {
-    return {
-      notFound: true,
-      revalidate: 10,
-    };
-  }
+  return {
+    props: {
+      post,
+    },
+    revalidate: 10, // Required for deleting hidden pages
+    notFound,
+  };
 };
 
 export default FeedPage;

src/pages/in_english.tsx

@@ -1,25 +1,21 @@
 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 eventApi: API = {
-  path: APIPath.EVENTS,
-  queryParams: {
-    limit: 4,
-  },
+const eventOptions = {
+  limit: 4,
 };
 
-const feedApi: API = {
-  path: APIPath.FEED,
-  queryParams: {
-    limit: 4,
-  },
+const feedOptions = {
+  limit: 4,
 };
 
 interface InitialProps {
@@ -28,8 +24,8 @@ interface InitialProps {
 }
 
 const InEnglishPage: NextPage<InitialProps> = ({ initialEvents, initialFeed }) => {
-  const { data: events } = useSWR<Event[]>(eventApi, fetcher, { fallbackData: initialEvents });
-  const { data: feed } = useSWR<Post[]>(feedApi, fetcher, { fallbackData: initialFeed });
+  const eventResult = useFetchEvents({ initialData: initialEvents, options: eventOptions });
+  const feedResult = useFetchFeed({ initialData: initialFeed, options: feedOptions });
 
   return (
     <>
@@ -37,22 +33,19 @@ const InEnglishPage: NextPage<InitialProps> = ({ initialEvents, initialFeed }) =
         <link rel="canonical" href={`${process.env.NEXT_PUBLIC_SITE_URL}/in_english`} />
       </Head>
       <PageWrapper>
-        <InEnglishPageView events={events} feed={feed} />
+        <InEnglishPageView events={eventResult.data as Event[]} feed={feedResult.data} />
       </PageWrapper>
     </>
   );
 };
 
 export const getStaticProps: GetStaticProps<InitialProps> = async () => {
-  const [eventsResult, feedResult] = await Promise.allSettled([
-    fetcher<Event[]>(eventApi),
-    fetcher<Post[]>(feedApi),
-  ]);
-
+  const initialEvents = await EventApi.getEvents(eventOptions);
+  const initialFeed = await FeedApi.getFeed(feedOptions);
   return {
     props: {
-      initialEvents: eventsResult.status === "fulfilled" ? eventsResult.value : [],
-      initialFeed: feedResult.status === "fulfilled" ? feedResult.value : [],
+      initialEvents,
+      initialFeed,
     },
     revalidate: 10,
   };

src/pages/index.tsx

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

src/pages/kilta/fuksi.tsx

@@ -7,7 +7,7 @@ import PageWrapper from "@views/common/PageWrapper";
 const FreshmenPage: NextPage = () => (
   <>
     <Head>
-      <link rel="canonical" href={`${process.env.NEXT_PUBLIC_SITE_URL}/newStudent/fuksi`} />
+      <link rel="canonical" href={`${process.env.NEXT_PUBLIC_SITE_URL}/kilta/fuksi`} />
     </Head>
     <PageWrapper>
       <FreshmenPageView />

src/pages/kilta/guildroom.tsx

@@ -1,18 +0,0 @@
-import React from "react";
-import { NextPage } from "next";
-import Head from "next/head";
-import GuildroomPageView from "@views/GuildroomPage/GuildroomPageView";
-import PageWrapper from "@views/common/PageWrapper";
-
-const GuildroomPage: NextPage = () => (
-  <>
-    <Head>
-      <link rel="canonical" href={`${process.env.NEXT_PUBLIC_SITE_URL}/kilta/guildroom`} />
-    </Head>
-    <PageWrapper>
-      <GuildroomPageView />
-    </PageWrapper>
-  </>
-);
-
-export default GuildroomPage;

src/pages/kilta/hallitus.tsx

@@ -1,18 +0,0 @@
-import React from "react";
-import { NextPage } from "next";
-import Head from "next/head";
-import BoardPageView from "@views/BoardPage/BoardPageView";
-import PageWrapper from "@views/common/PageWrapper";
-
-const BoardPage: NextPage = () => (
-  <>
-    <Head>
-      <link rel="canonical" href={`${process.env.NEXT_PUBLIC_SITE_URL}/kilta/hallitus`} />
-    </Head>
-    <PageWrapper>
-      <BoardPageView />
-    </PageWrapper>
-  </>
-);
-
-export default BoardPage;