Create and wrap application in context for state of socket

Author: chiaryan

apps/frontend/src/app/layout.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { AntdRegistry } from "@ant-design/nextjs-registry";
 import { ConfigProvider } from "antd";
+import WebSocketProvider from "@/components/WebSocketProvider/websocketprovider";
 
 const RootLayout = ({
   children,
@@ -23,7 +24,11 @@ const RootLayout = ({
           },
         }}
       >
-        <AntdRegistry>{children}</AntdRegistry>
+        <AntdRegistry>
+          <WebSocketProvider>
+            {children}
+          </WebSocketProvider>
+        </AntdRegistry>
       </ConfigProvider>
     </body>
   </html>

apps/frontend/src/app/match/page.tsx

@@ -0,0 +1,23 @@
+"use client";
+import {
+  Button,
+  Layout,
+} from "antd";
+import { Content } from "antd/es/layout/layout";
+import Header from "@/components/Header/header"
+import "./styles.scss";
+import { useContext } from "react";
+import { WebSocketContext } from "@/contexts/websocketcontext";
+
+export default function ProfilePage(): JSX.Element {
+  const {open, toggle} = useContext(WebSocketContext)! // ! is a null-check
+  return (
+    <Layout className="layout">
+      <Header selectedKey={["0"]} />
+        <Content className="content">
+          <Button onClick={toggle}>Toggle me</Button>
+          <p>{open ? "OPEN" : "CLOSE"}</p>
+        </Content>
+    </Layout>
+  )
+}

apps/frontend/src/app/match/styles.scss

@@ -0,0 +1 @@
+@use "../styles.scss"

apps/frontend/src/components/WebSocketProvider/websocketprovider.tsx

@@ -0,0 +1,19 @@
+"use client"
+
+import { ReactNode, useState } from "react"
+import { WebSocketContext } from "@/contexts/websocketcontext";
+
+export default function WebSocketProvider({children}: {children: ReactNode}) {
+    const [open, setOpen] = useState(false)
+    function toggle() {
+        if (open) {
+            setOpen(false)
+        } else {
+            setOpen(true)
+        }
+    }
+
+    return <WebSocketContext.Provider value = {{toggle, open}}>
+        {children}
+    </WebSocketContext.Provider>
+}

apps/frontend/src/contexts/websocketcontext.tsx

@@ -0,0 +1,10 @@
+"use client";
+import { createContext } from "react";
+
+type SocketState = {
+    toggle: () => void;
+    open: boolean;
+};
+
+export const WebSocketContext = createContext<SocketState | null>(null);
+