2025-07-26

frontend/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env", "@babel/preset-react"]
+}

frontend/package.json

@@ -3,14 +3,21 @@
     "dev": "SASS_LOG_LEVEL=error webpack serve --config webpack.config.js"
   },
   "devDependencies": {
+    "@babel/core": "^7.28.0",
+    "@babel/preset-env": "^7.28.0",
+    "@babel/preset-react": "^7.27.1",
+    "babel-loader": "^10.0.0",
     "css-loader": "^7.1.2",
     "sass": "^1.89.2",
     "sass-loader": "^16.0.5",
     "style-loader": "^4.0.0",
+    "webpack": "^5.100.2",
     "webpack-cli": "^6.0.1",
     "webpack-dev-server": "^5.2.2"
   },
   "dependencies": {
-    "bootstrap": "^5.3.7"
+    "bootstrap": "^5.3.7",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   }
 }

frontend/src/apps/draft/index.jsx

@@ -0,0 +1,44 @@
+import React, { useEffect, useState, useRef } from "react";
+
+export const DraftAdmin = ({ draftSessionId }) => {
+  const [latestMessage, setLatestMessage] = useState(null);
+  const socketRef = useRef(null);
+  const wsUrl = `ws://${window.location.host}/ws/draft/session/${draftSessionId}/`;
+
+  useEffect(() => {
+    socketRef.current = new WebSocket(wsUrl);
+
+    socketRef.current.onmessage = (event) => {
+      const data = JSON.parse(event.data);
+      setLatestMessage(data);
+    };
+
+    socketRef.current.onclose = () => {
+      console.warn("WebSocket connection closed.");
+    };
+
+    return () => {
+      socketRef.current.close();
+    };
+  }, [wsUrl]);
+
+  const handleStartDraft = () => {
+    socketRef.current.send(JSON.stringify({ type: "start_draft" }));
+  }
+
+  return (
+    <div className="container mt-4">
+      <h1>Draft Admin Panel</h1>
+      <label>Latest Message</label>
+      <input
+        type="text"
+        className="form-control"
+        readOnly disabled
+        value={latestMessage ? JSON.stringify(latestMessage) : ""}
+      />
+      <button onClick={handleStartDraft} className="btn btn-primary">
+        Start Draft
+      </button>
+    </div>
+  );
+};

frontend/src/index.js

@@ -1,2 +1,15 @@
 import './scss/styles.scss'
-console.log("Webpack HMR loaded!");
+console.log("Webpack HMR loaded!");
+
+import React from "react";
+import { createRoot } from "react-dom/client";
+import {DraftAdmin} from './apps/draft/index.jsx'
+
+document.addEventListener("DOMContentLoaded", () => {
+  const draftApp = document.getElementById("draft-app");
+  if (draftApp) {
+    const root = createRoot(draftApp);
+    const draftId = draftApp.dataset.draftId
+    root.render(<DraftAdmin draftSessionId={draftId} />);
+  }
+});

frontend/webpack.config.js

@@ -10,6 +10,13 @@ module.exports = {
   mode: "development",
   module: {
     rules: [
+      {
+        test: /\.(js|jsx)$/, // include .jsx files
+        exclude: /node_modules/,
+        use: {
+          loader: "babel-loader",
+        },
+      },
       {
         test: /\.scss$/,
         use: [