Merge branch 'master' into 'production'

Master See merge request sahkoinsinoorikilta/vtmk/web2.0-frontend!194
2025-11-21 19:23:29 +00:00
parent 2009a65f55 c22bad5718
commit 6cb18c4a13
9 changed files with 1125 additions and 63 deletions
@@ -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;
 }
@@ -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;
@@ -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,
    };
@@ -54,7 +54,7 @@
      "name_en": "Guild Room Representative",
      "representatives": [
        {
-          "name": "Justus Ojala"
+          "name": "Milja Kuusela"
        },
        {
          "name": "Aaro Rasilainen"
@@ -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
@@ -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;