uskomaton säätö

extras

kakka

.env.local.example

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

.eslintignore

@@ -5,3 +5,4 @@ node_modules
 # don't lint nyc coverage output
 coverage
 next-env.d.ts
+tests

.gitlab-ci.yml

@@ -8,7 +8,7 @@ stages:
   - deploy
 
 install:
-  image: node:16
+  image: node:20
   stage: setup
   script:
     - npm ci
@@ -21,7 +21,7 @@ install:
     expire_in: 1 week
 
 audit:
-  image: node:16
+  image: node:20
   needs: ["install"]
   allow_failure: true  
   stage: audit
@@ -29,27 +29,27 @@ audit:
     - npm audit --audit-level=critical
 
 es:lint:
-  image: node:16
+  image: node:20
   needs: ["install"]
   stage: lint
   script:
     - npm run lint:es
 
 css:lint:
-  image: node:16
+  image: node:20
   needs: ["install"]
   stage: lint
   script:
     - npm run lint:css
 
 # test:unit:
-#     image: node:16
+#     image: node:20
 #     stage: test
 #     script:
 #         - npm run test:unit
 
 build:
-  image: node:16
+  image: node:20
   needs: ["install"]
   stage: build
   script:
@@ -67,11 +67,20 @@ build:
       - .next/cache/
 
 test:e2e:
-  image: circleci/node:16-browsers
+  # Use a Cypress image which has Node 20 + Chrome and runs as root (solves permission issues)
+  image: cypress/browsers:latest
   needs: ["install", "build"]
   stage: test
   script:
-    - npm run testcafe
+    # No sudo needed if running as root. 
+    # If permissions are still wrong, we CAN fix them because we are root.
+    # But usually, being root means we can overwrite/rm the files anyway.
+    
+    # 1. Clean install to ensure native modules match this container's environment
+    - npm ci
+
+    # 2. Run TestCafe (using the CI script for headless mode)
+    - npm run testcafe:ci
   artifacts:
     paths:
       - e2e-screenshots

next-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+import "./.next/types/routes.d.ts";
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.

next.config.js

@@ -1,29 +1,54 @@
+// web2.0-frontend/next.config.js
 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({
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  compiler: {
+    styledComponents: true,
+  },
   images: {
-    domains: [
-      "api.sahkoinsinoorikilta.fi",
-      "static.sahkoinsinoorikilta.fi",
-      "api.dev.sahkoinsinoorikilta.fi",
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "api.sahkoinsinoorikilta.fi",
+      },
+      {
+        protocol: "https",
+        hostname: "static.sahkoinsinoorikilta.fi",
+      },
+      {
+        protocol: "https",
+        hostname: "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));
+  // Note: The 'sentry' key is removed from here as it is no longer supported in v8
+};
+
+// Sentry options are now passed as a single object in the second argument
+const sentryOptions = {
+  // For all available options, see:
+  // https://github.com/getsentry/sentry-webpack-plugin#options
+
+  // Suppresses all logs
+  silent: true,
+
+  // Hides source maps from generated client bundles
+  hideSourceMaps: true,
+
+  // Automatically tree-shake Sentry logger statements to reduce bundle size
+  disableLogger: true,
+
+  // Upload a larger set of source maps for prettier stack traces (increases build time)
+  widenClientFileUpload: true,
+
+  // (Optional) You can add org and project if not set in environment variables
+  // org: "your-org-slug",
+  // project: "your-project-slug",
+};
+
+// Wrap the config with Sentry first, then Bundle Analyzer
+module.exports = withBundleAnalyzer(withSentryConfig(nextConfig, sentryOptions));

package.json

@@ -20,21 +20,22 @@
         "postbuild": "next-sitemap",
         "export": "next export",
         "lint": "npm run lint:es && npm run lint:css",
-    "lint:es": "next lint",
-    "lint:es:fix": "next lint --fix",
+        "lint:es": "eslint . --ext .js,.jsx,.ts,.tsx",
+        "lint:es:fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix",
         "lint:css": "stylelint \"./src/**/*.{ts,tsx}\"",
-    "dev": "next dev",
-    "start": "next dev",
+        "dev": "next dev --webpack",
+        "start": "next dev --webpack",
         "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",
+        "testcafe:ci": "testcafe 'chrome:headless --no-sandbox --disable-dev-shm-usage' --config-file  testcafe.json",
         "build-analyze": "ANALYZE=true npm run build",
         "prepare": "husky install"
     },
     "devDependencies": {
-    "@types/jest": "^27.4.1",
+        "@types/jest": "^30.0.0",
         "@types/js-cookie": "^3.0.1",
         "@types/node": "^16.11.36",
         "@types/react": "^18.0.15",
@@ -45,13 +46,13 @@
         "@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": "^8.57.1",
         "eslint-config-airbnb": "^19.0.4",
         "eslint-config-airbnb-typescript": "^17.0.0",
-    "eslint-config-next": "^13.1.6",
+        "eslint-config-next": "^13.5.11",
         "eslint-plugin-import": "^2.26.0",
         "husky": "^7.0.4",
-    "jest": "^27.5.1",
+        "jest": "^30.2.0",
         "next-sitemap": "^3.1.11",
         "npm-run-all": "^4.1.5",
         "postcss-jsx": "^0.36.4",
@@ -59,20 +60,21 @@
         "stylelint": "^14.2.0",
         "stylelint-config-recommended": "^6.0.0",
         "stylelint-config-styled-components": "^0.1.1",
-    "testcafe": "^1.18.5",
-    "ts-jest": "^27.1.4",
-    "typescript": "^4.6.3"
+        "testcafe": "^3.7.2",
+        "ts-jest": "^29.4.6",
+        "typescript": "^5.9.3"
     },
     "dependencies": {
         "@next/bundle-analyzer": "^12.2.3",
         "@rjsf/core": "^4.2.0",
-    "@sentry/nextjs": "^7.34.0",
-    "axios": "^0.26.1",
+        "@sentry/nextjs": "^10.29.0",
+        "axios": "^1.13.2",
         "date-fns": "^2.28.0",
         "fast-deep-equal": "^3.1.3",
         "js-cookie": "^3.0.1",
         "lodash": "^4.17.21",
-    "next": "^13.1.6",
+        "mqtt": "^5.14.1",
+        "next": "^16.0.8",
         "normalize.css": "^8.0.1",
         "react": "^18.2.0",
         "react-csv": "^2.2.2",
@@ -86,10 +88,11 @@
         "react-toastify": "^9.0.7",
         "rehype-raw": "^6.1.1",
         "rehype-sanitize": "^5.0.1",
-    "sharp": "^0.30.3",
+        "sharp": "^0.34.5",
         "shortid": "^2.2.16",
         "styled-components": "^5.3.5",
-    "swr": "^1.2.2"
+        "swr": "^1.2.2",
+        "uuid": "^13.0.0"
     },
     "overrides": {
         "react-mde": {

sentry.edge.config.js

@@ -0,0 +1,18 @@
+// This file configures the initialization of Sentry for edge features (middleware, edge routes, and so on).
+// The config you add here will be used whenever one of the edge features is loaded.
+// Note that this config is unrelated to the Vercel Edge Runtime and is also required when running locally.
+// 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,
+  // Adjust this value in production, or use tracesSampler for greater control
+  // tracesSampleRate: 1.0, // Commented out as client/server configs don't have it
+  // Setting this option to true will print useful information to the console while you're setting up Sentry.
+  // debug: false, // Commented out as client/server configs don't have it
+});

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/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";
@@ -22,6 +22,7 @@ const StyledCard = styled.article`
   display: flex;
   flex-direction: column;
   color: ${colors.black};
+  position: relative;
   margin: 1rem;
   text-align: center;
 
@@ -72,7 +73,7 @@ const WrappedCard: React.FC<WrappedCardProps> = ({
 }) => (
   <StyledCard {...props}>
     {image && (
-      <Image src={image.src} alt={image.alt} layout="responsive" width={0} height={0} objectFit="scale-down" />
+      <Image src={image.src} alt={image.alt} fill sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw" style={{ objectFit: "scale-down" }} />
     )}
     <p>{startTime}</p>
     <h3>{title}</h3>

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";
 
@@ -73,8 +73,9 @@ const ContactCard: React.FC<ContactCardProps> = ({
           <Image
             src={image}
             alt={name}
-            layout="fill"
-            objectFit="cover"
+            fill
+            sizes="128px"
+            style={{ objectFit: "cover" }}
           />
         </ImageContainer>
       ) : null}

src/components/CrossFadeImages.tsx

@@ -1,16 +1,16 @@
 import React from "react";
-import Image, { ImageProps } from "next/legacy/image";
+import Image from "next/image";
 import styled, { keyframes, Keyframes } from "styled-components";
 
 interface CrossFadeImagesProps {
-  width: ImageProps["width"];
-  height: ImageProps["height"];
+  width: number | string;
+  height: number | string;
   images: string[];
   presentationTime: number;
   fadeTime: number;
 }
 
-const AnimatedImage = styled(Image)<{ layout: string; $delay: number }>`
+const AnimatedImage = styled(Image) <{ $delay: number }>`
   animation-delay: ${(p) => p.$delay}s;
 `;
 
@@ -75,8 +75,9 @@ const CrossFadeImages: React.FC<CrossFadeImagesProps> = ({
           <AnimatedImage
             src={image}
             objectFit="cover"
-            width={width}
-            height={height}
+            alt=""
+            width={width as any}
+            height={height as any}
             layout="responsive"
             $delay={delays[idx]}
           />

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";
 
@@ -18,8 +18,9 @@ const HeaderLogo: React.FC = () => (
     <Image
       src={TitleImage}
       alt="logo"
-      layout="fill"
-      objectFit="scale-down"
+      fill
+      sizes="200px"
+      style={{ objectFit: "scale-down" }}
     />
   </Logo>
 );

src/components/Navigation.tsx

@@ -19,7 +19,7 @@ export const renderNavigationItems = (mobile = false): JSX.Element => (
       <NavbarChildLink to="https://sik.kuvat.fi">Kuvagalleria</NavbarChildLink>
       <NavbarChildLink to="/kilta/kilta-avustus">Kilta-avustus</NavbarChildLink>
     </NavbarDropdownLink>
-    <NavbarDropdownLink to="/newStudent" text="New students ›" exploded={mobile}>
+    <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>

src/components/NavigationMobile.tsx

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

src/i18n/index.tsx

@@ -1,5 +1,5 @@
 import React, {
-  createContext, useContext, useMemo, useReducer,
+  createContext, useContext, useMemo, useReducer, useEffect,
 } from "react";
 import fi from "./locales/fi/common.json";
 import en from "./locales/en/common.json";
@@ -36,16 +36,10 @@ interface Store {
   changeLanguage: React.Dispatch<Lang>,
 }
 
-let initialLanguage: Lang = "fi";
-try {
-  const storedLang = localStorage.getItem(LOCAL_STORAGE_KEY) as Lang;
-  initialLanguage = storedLang;
-} catch (err) {
-  // Just ignore if fails to get value from browser (server etc.)
-}
-
+// Always default to 'fi' for the initial state to ensure Server/Client match.
+// We will hydrate the user's preference in useEffect below.
 const initialState: Store = {
-  language: initialLanguage,
+  language: "fi",
   changeLanguage: null,
 };
 
@@ -69,6 +63,22 @@ const Reducer = (state: Store, action: Lang) => {
 const LocaleContext = createContext(initialState);
 const LocaleStore: React.FC<{ children?: React.ReactNode }> = ({ children }) => {
   const [state, dispatch] = useReducer(Reducer, initialState);
+
+  // Sync with localStorage only after the component has mounted (client-side)
+  useEffect(() => {
+    try {
+      const storedLang = localStorage.getItem(LOCAL_STORAGE_KEY) as Lang;
+      if (storedLang && (storedLang === "fi" || storedLang === "en")) {
+        // Only dispatch if different to prevent unnecessary re-renders
+        if (storedLang !== state.language) {
+          dispatch(storedLang);
+        }
+      }
+    } catch (err) {
+      // Just ignore if fails to get value from browser
+    }
+  }, []); // Empty dependency array ensures this runs once on mount
+
   const changeLanguage = (action: Lang) => {
     dispatch(action);
     try {

src/instrumentation-client.ts

@@ -1,7 +1,4 @@
-// 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/
-
+/* eslint-disable import/prefer-default-export */
 import * as Sentry from "@sentry/nextjs";
 
 const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN;
@@ -14,3 +11,6 @@ Sentry.init({
   // `release` value here - use the environment variable `SENTRY_RELEASE`, so
   // that it will also get attached to your source maps
 });
+
+// This is required by Sentry v8 to instrument navigation (tracing)
+export const onRouterTransitionStart = Sentry.captureRouterTransitionStart;

src/instrumentation.ts

@@ -0,0 +1,13 @@
+import * as Sentry from "@sentry/nextjs";
+
+export async function register() {
+  if (process.env.NEXT_RUNTIME === "nodejs") {
+    await import("../sentry.server.config");
+  }
+
+  if (process.env.NEXT_RUNTIME === "edge") {
+    await import("../sentry.edge.config");
+  }
+}
+
+export const onRequestError = Sentry.captureRequestError;

src/models/Signup.ts

@@ -1,7 +1,8 @@
 import { OptionTypes } from "@components/Widgets/SignupQuestionsWidget/common";
 
 export interface Signup {
-  id?: number;
+  id?: number; // Database id for completed signup
+  submit_id?: string; // Signup request idempotency key
   signupForm_id: number;
   answer: string;
 }

src/pages/kilta/guildroom.tsx

@@ -0,0 +1,18 @@
+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/signup/[id].tsx

@@ -13,6 +13,7 @@ import PageWrapper from "@views/common/PageWrapper";
 import LoadingView from "@views/common/LoadingView";
 import noop from "@utils/noop";
 import NotFoundPage from "@pages/404";
+import { v4 as uuid } from "uuid";
 
 type InitialProps = {
   initialForm: SignupForm;
@@ -23,6 +24,7 @@ const FORM_URL = `${process.env.NEXT_PUBLIC_API_URL}/signupForm/`;
 const SignUpPage: NextPage<InitialProps> = ({ initialForm }) => {
   const router = useRouter();
   const id = String(initialForm?.id ?? "");
+  const SUBMIT_ID = uuid(); // Submission key, generated on page refresh
   const URL = `${FORM_URL}${id}/`;
   const { data: signupForm, error } = useSWR<SignupForm>(URL, (url) => axios.get(url).then((res) => res.data), { fallbackData: initialForm });
 
@@ -43,6 +45,7 @@ const SignUpPage: NextPage<InitialProps> = ({ initialForm }) => {
 
   const onSubmit = async ({ formData }: ISubmitEvent<string>) => {
     const payload: Signup = {
+      submit_id: SUBMIT_ID, // This is for preventing duplicate requests; NOT RELATED TO THE SIGNUP ID IN DATABASE
       signupForm_id: signupForm.id,
       answer: formData,
     };

src/views/CommitteePage/hvtmk.json

@@ -54,7 +54,7 @@
       "name_en": "Guild Room Representative",
       "representatives": [
         {
-          "name": "Justus Ojala"
+          "name": "Milja Kuusela"
         },
         {
           "name": "Aaro Rasilainen"

src/views/EventPage/EventPageView.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 rehypeRaw from "rehype-raw";
 import rehypeSanitize from "rehype-sanitize";
@@ -81,10 +81,9 @@ const EventPageView: React.FC<EventPageViewProps> = ({ event }) => {
           <Image
             src={event.image || event.tags[0].icon}
             alt={title}
-            objectFit="scale-down"
-            layout="responsive"
             width={16}
             height={9}
+            style={{ objectFit: "scale-down" }}
           />
         </h1>
         <div>

src/views/FeedPage/FeedPageView.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 rehypeRaw from "rehype-raw";
 import rehypeSanitize from "rehype-sanitize";
@@ -65,10 +65,9 @@ const FeedPageView: React.FC<FeedPageViewProps> = ({ post }) => {
           <Image
             src={post.image}
             alt={title}
-            objectFit="scale-down"
-            layout="responsive"
             width={16}
             height={9}
+            style={{ objectFit: "scale-down" }}
           />
           )}
         </h1>

src/views/ForFreshmenPage/ForFreshmenPageView.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 {
   CTASection, TextSection, InfoBox, PageLink, Link,
@@ -61,10 +61,9 @@ const ForFreshmenPageView: React.FC = () => (
           <Image
             src="https://static.sahkoinsinoorikilta.fi/FTMK/IMG_6539.JPG"
             alt="Kipparit"
-            layout="responsive"
             width={100}
             height={80}
-            objectFit="contain"
+            style={{ objectFit: "contain" }}
           />
         </ImageContainer>
 

src/views/ForInternationalPage/ForIntlPageView.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 {
   CTASection, TextSection, InfoBox, PageLink, Link,
@@ -78,10 +78,9 @@ const ForIntlPageView: React.FC = () => (
           <Image
             src="https://static.sahkoinsinoorikilta.fi/FTMK/Captains2025.jpg"
             alt="Kipparit"
-            layout="responsive"
             width={100}
             height={80}
-            objectFit="contain"
+            style={{ objectFit: "contain" }}
           />
         </ImageContainer>
 

src/views/FreshmenPage/FreshmenPageView.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 {
   CTASection, TextSection, InfoBox, PageLink, Link,
@@ -60,10 +60,9 @@ const FreshmenPageView: React.FC = () => (
           <Image
             src="https://static.sahkoinsinoorikilta.fi/FTMK/IMG_6539.JPG"
             alt="Kipparit"
-            layout="responsive"
             width={100}
             height={80}
-            objectFit="contain"
+            style={{ objectFit: "contain" }}
           />
         </ImageContainer>
 

src/views/FrontPage/FrontPageHero.tsx

@@ -30,7 +30,7 @@ const FrontPageHero: React.FC = () => (
       <HeroAsideItem
         header="Vasta-aloittaneelle opiskelijalle"
         text="Fuksikasvatusta ja ISOtoimintaa"
-        link="/kilta/fuksi"
+        link="/newStudent/fuksi"
         linkText="Fuksit&nbsp; ›"
       />
       <HeroAsideItem

src/views/FrontPage/FrontPageView.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 {
   Divider,
@@ -93,43 +93,43 @@ const FrontPageView: React.FC<FrontPageViewProps> = ({ events, feed }) => (
         <SponsorReel>
           <div>
             <Link to="https://new.abb.com/fi/">
-              <Image src={ABB} alt="ABB" layout="responsive" width={200} height={100} objectFit="contain" />
+              <Image src={ABB} alt="ABB" width={200} height={100} style={{ objectFit: "contain" }} />
             </Link>
             <Link to="https://caruna.fi/">
-              <Image src={Caruna} alt="Caruna" layout="responsive" width={200} height={100} objectFit="contain" />
+              <Image src={Caruna} alt="Caruna" width={200} height={100} style={{ objectFit: "contain" }} />
             </Link>
             <Link to="https://www.nokia.com/">
-              <Image src={Nokia} alt="Nokia" layout="responsive" width={200} height={100} objectFit="contain" />
+              <Image src={Nokia} alt="Nokia" width={200} height={100} style={{ objectFit: "contain" }} />
             </Link>
             <Link to="https://www.ensto.com/fi/">
-              <Image src={Ensto} alt="Ensto" layout="responsive" width={200} height={100} objectFit="contain" />
+              <Image src={Ensto} alt="Ensto" width={200} height={100} style={{ objectFit: "contain" }} />
             </Link>
             <Link to="https://www.esett.com/">
-              <Image src={eSett} alt="eSett" layout="responsive" width={200} height={100} objectFit="contain" />
+              <Image src={eSett} alt="eSett" width={200} height={100} style={{ objectFit: "contain" }} />
             </Link>
             <Link to="https://www.fingrid.fi/">
-              <Image src={Fingrid} alt="Fingrid" layout="responsive" width={200} height={100} objectFit="contain" />
+              <Image src={Fingrid} alt="Fingrid" width={200} height={100} style={{ objectFit: "contain" }} />
             </Link>
             <Link to="https://www.okmetic.com/fi/">
-              <Image src={Okmetic} alt="Okmetic" layout="responsive" width={200} height={100} objectFit="contain" />
+              <Image src={Okmetic} alt="Okmetic" width={200} height={100} style={{ objectFit: "contain" }} />
             </Link>
             <Link to="https://www.granlund.fi/">
-              <Image src={Granlund} alt="Granlund" layout="responsive" width={200} height={100} objectFit="contain" />
+              <Image src={Granlund} alt="Granlund" width={200} height={100} style={{ objectFit: "contain" }} />
             </Link>
             <Link to="https://www.eaton.com/fi/fi-fi.html">
-              <Image src={Eaton} alt="Eaton" layout="responsive" width={200} height={100} objectFit="contain" />
+              <Image src={Eaton} alt="Eaton" width={200} height={100} style={{ objectFit: "contain" }} />
             </Link>
             <Link to="https://www.ericsson.com/en">
-              <Image src={Ericsson} alt="Ericsson" layout="responsive" width={200} height={100} objectFit="contain" />
+              <Image src={Ericsson} alt="Ericsson" width={200} height={100} style={{ objectFit: "contain" }} />
             </Link>
             <Link to="https://www.saab.com/fi/markets/finland">
-              <Image src={Saab} alt="Saab" layout="responsive" width={200} height={100} objectFit="contain" />
+              <Image src={Saab} alt="Saab" width={200} height={100} style={{ objectFit: "contain" }} />
             </Link>
             <Link to="https://www.stul.fi/">
-              <Image src={STUL} alt="STUL" layout="responsive" width={200} height={100} objectFit="contain" />
+              <Image src={STUL} alt="STUL" width={200} height={100} style={{ objectFit: "contain" }} />
             </Link>
             <Link to="https://www.metso.com/fi/">
-              <Image src={Metso} alt="Metso" layout="responsive" width={200} height={100} objectFit="contain" />
+              <Image src={Metso} alt="Metso" width={200} height={100} style={{ objectFit: "contain" }} />
             </Link>
           </div>
           <Link to="/yritysyhteistyo">Haluatko kuulla lisää yhteistyöstä kanssamme?</Link>

src/views/GuildroomPage/GuildroomPageView.tsx

@@ -0,0 +1,97 @@
+import { useState, useEffect } from "react";
+import mqtt from "mqtt";
+import { TextSection } from "@components/index";
+import styled from "styled-components";
+
+const CoffeeTitle = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  font-size: 3rem;
+  font-weight: bold;
+`;
+
+const Cups = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  font-size: 7rem;
+  font-variant-numeric: tabular-nums;
+`;
+
+const Time = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  font-size: 1rem;
+`;
+
+const GuildroomView = () => {
+  const [brewing, setBrewing] = useState<boolean>(false);
+  const [time, setTime] = useState<number>(0);
+  const [cups, setCups] = useState<number>(0);
+  const [client, setClient] = useState<mqtt.MqttClient | null>(null);
+  const [status, setStatus] = useState<boolean>(false);
+
+  useEffect(() => {
+    setStatus(false);
+    if (process.env.NEXT_PUBLIC_MQTT_HOST) {
+      setClient(mqtt.connect(`wss://${process.env.NEXT_PUBLIC_MQTT_HOST}`));
+    } else {
+      console.error("MQTT host undefined");
+    }
+  }, []);
+
+  useEffect(() => {
+    if (client) {
+      client.on("connect", () => {
+        setStatus(true);
+        client.subscribe("sik/kiltahuone/kahvivaaka/#", (err) => {
+          if (!err) {
+            console.log("Connected to MQTT server!");
+          }
+        });
+      });
+      client.on("error", (err) => {
+        console.error("Connection error: ", err);
+        client.end();
+      });
+      client.on("reconnect", () => {
+        setStatus(false);
+      });
+      client.on("offline", () => {
+        setStatus(false);
+      });
+      client.on("message", (topic, message) => {
+        if (topic === "sik/kiltahuone/kahvivaaka/cups") {
+          setCups(Number(message.toString()));
+        }
+        if (topic === "sik/kiltahuone/kahvivaaka/brewtime") {
+          setTime(Number(message.toString()));
+        }
+        if (topic === "sik/kiltahuone/kahvivaaka/brewing") {
+          setBrewing(Boolean(message.toString()));
+        }
+      });
+    }
+  }, [client]);
+
+  if (!status) {
+    return (
+      <CoffeeTitle style={{ margin: "10%" }}>NO MQTT CONNECTION</CoffeeTitle>
+    );
+  }
+
+  return (
+    <div style={{ margin: "10%" }}>
+      <CoffeeTitle>{brewing ? "Brewing more..." : "Cups left"}</CoffeeTitle>
+      <Cups>{cups}</Cups>
+      <Time>Brewed {time} min ago</Time>
+    </div>
+  );
+};
+
+export default GuildroomView;

src/views/MembershipPage/MembershipPageView.tsx

@@ -19,6 +19,19 @@ const MembershipPageView: React.FC = () => (
           Killan ulkojäseneksi voidaan hyväksyä jäsenmaksun maksanut henkilö, joita ei voida hyväksyä varsinaiseksi jäseneksi.
           Killan kannatusjäseneksi voidaan hyväksyä henkilö tai yhteisö, joka haluaa tukea killan toimintaa.
         </p>
+        <p>
+          Killan sääntöjen mukaan jäsenmaksuista määrätään seuraavasti:
+          <br />
+        </p>
+        <p>
+          <h5>8 § Jäsenmaksut</h5>
+          <br />
+          Jäsenet ovat velvollisia suorittamaan lukuvuosittain killalle jäsenmaksun.
+          Kunniajäsenet ovat vapautettuja jäsenmaksuista.
+        </p>
+        <p>
+          Jäsenmaksujen suuruudet määrää killan yleinen kokous.
+        </p>
 
         <h6 id="jasenmaksu">Jäsenmaksu</h6>
         <p>
@@ -36,6 +49,11 @@ const MembershipPageView: React.FC = () => (
             Jäsenrekisterin tietosuojaseloste
           </Link>
         </p>
+        <p>
+          <Link to="https://static.sahkoinsinoorikilta.fi/saannot/killansaannot.pdf">
+            Killan säännöt
+          </Link>
+        </p>
       </div>
     </TextSection>
   </>

src/views/StudiesPage/StudiesPageView.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import Image from "next/legacy/image";
+import Image from "next/image";
 import {
   CTASection, TextSection, PageLink, Link,
 } from "@components/index";
@@ -81,8 +81,7 @@ const StudiesPageView: React.FC = () => (
           alt="Ville Viikari"
           width={300}
           height={150}
-          layout="responsive"
-          objectFit="contain"
+          style={{ objectFit: "contain" }}
         />
         <h6>Ville Viikari</h6>
         <p>

testcafe.json

@@ -8,5 +8,5 @@
   },
   "skipJsErrors": true,
   "appCommand": "npm run serve",
-  "appInitDelay": 2000
+  "appInitDelay": 10000
 }

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

@@ -1,6 +1,6 @@
 import { Selector } from "testcafe";
 import {
-  getSiteRoot, getPageUrl, deleteForm, doLogin, generateAccessToken, getPostRequestLogger, waitForLogger
+  getSiteRoot, getPageUrl, deleteForm, doLogin, generateAccessToken, getPostRequestLogger, waitForLogger,
 } from "../utils";
 
 const LOGGER = getPostRequestLogger("signupForm/");

tests/testcafe/utils.ts

@@ -159,10 +159,10 @@ export const generateTestEvent = async (formIds = [], jwt_access: string) => (
 export const sleep = async (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
 
 export const waitForLogger = async (logger: RequestLogger) => {
-  for (let i = 0; i < 50; i++) {
+  for (let i = 0; i < 50; i += 1) {
     await sleep(100);
     if (logger.requests.length > 0) {
       return;
     }
   }
-}
+};

tsconfig.json

@@ -5,7 +5,7 @@
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "lib": [
       "dom",
       "esnext"