2025-07-26

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} />);
+  }
+});