Add movie detail API and enhance draft admin/participant UI

- Introduced `/api/movie/<id>/detail` endpoint returning TMDB data for a movie. - Moved draft detail fetching logic into `common/utils.js` for reuse. - Updated Draft Admin panel: - Added phase navigation buttons with bootstrap icons. - Improved layout with refresh and status controls. - Updated Draft Participant panel: - Added movie pool display with links to movie details. - Added bootstrap-icons stylesheet and corresponding SCSS styles for new UI.
2025-08-08 15:12:40 -05:00
parent 9b6b3391e6
commit 24700071ed
8 changed files with 186 additions and 101 deletions
--- a/frontend/src/apps/draft/admin/DraftAdmin.jsx
+++ b/frontend/src/apps/draft/admin/DraftAdmin.jsx
@@ -4,6 +4,7 @@ import React, { useEffect, useState } from "react";
 import { useWebSocket } from "../WebSocketContext.jsx";
 import { WebSocketStatus } from "../common/WebSocketStatus.jsx";
 import { DraftMessage, DraftPhases, DraftPhase } from '../constants.js';
+import { fetchDraftDetails } from "../common/utils.js"

 const ParticipantList = ({ socket, participants, draftOrder }) => {
  const [connectedParticipants, setConnectedParticipants] = useState([])
@@ -48,37 +49,23 @@ const ParticipantList = ({ socket, participants, draftOrder }) => {
  )
 }

-const DraftPhaseDisplay = ({ draftPhase }) => {
+const DraftPhaseDisplay = ({ draftPhase, nextPhaseHandler, prevPhaseHandler }) => {
  return (
    <div className="draft-phase-container">
      <label>Phase</label>
-      <ol>
-        {
-          DraftPhases.map((p) => (
-            <li key={p} className={p === draftPhase ? "current-phase" : ""}>
-              <span>{p}</span>
-            </li>
-          ))
-        }
-      </ol>
-    </div>
-  )
-}
-
-const DraftOrder = ({ socket, draftOrder }) => {
-  console.log("in component", draftOrder)
-  return (
-    <div>
-      <label>Draft Order</label>
-      <ol>
-        {
-          draftOrder.map((p) => (
-            <li key={p}>
-              {p}
-            </li>
-          ))
-        }
-      </ol>
+      <div className="d-flex">
+        <div className="change-phase"><button onClick={prevPhaseHandler}><i className="bi bi-chevron-left"></i></button></div>
+        <ol>
+          {
+            DraftPhases.map((p) => (
+              <li key={p} className={p === draftPhase ? "current-phase" : ""}>
+                <span>{p}</span>
+              </li>
+            ))
+          }
+        </ol>
+          <div className="change-phase"><button onClick={nextPhaseHandler}><i className="bi bi-chevron-right"></i></button></div>
+      </div>
    </div>
  )
 }
@@ -93,34 +80,16 @@ export const DraftAdmin = ({ draftSessionId }) => {
  console.log(socket)

  useEffect(() => {
-    async function fetchDraftDetails(draftSessionId) {
-      fetch(`/api/draft/${draftSessionId}/`)
-        .then((response) => {
-          if (response.ok) {
-            return response.json()
-          }
-          else {
-            throw new Error()
-          }
-        })
-        .then((data) => {
-          console.log(data)
-          setParticipants(data.participants)
-        })
-        .catch((err) => {
-          console.error("Error fetching draft details", err)
-        })
-    }
    fetchDraftDetails(draftSessionId)
+      .then((data) => {
+        console.log("Fetched draft data", data)
+        setParticipants(data.participants)
+      })
  }, [])

  useEffect(() => {

    if (!socket) return;
-    else {
-      console.warn("socket doesn't exist")
-    }
-    console.log('socket created', socket)

    const handleMessage = (event) => {
      const message = JSON.parse(event.data)
@@ -153,12 +122,29 @@ export const DraftAdmin = ({ draftSessionId }) => {
    };
  }, [socket]);

-  const handlePhaseChange = (destinationPhase) => {
+  const handlePhaseChange = (target) => {
+    let destination
+    const origin = draftPhase
+    if (target == "next") {
+      console.log(DraftPhase)
+      console.log("phase to be changed", origin, target, DraftPhase.WAITING)
+      if (origin == "waiting"){
+        destination = DraftPhase.DETERMINE_ORDER
+      } else if (origin == "determine_order"){
+        destination = DraftPhase.NOMINATION
+      }
+    } 
+    else if (target=="previous") {
+
+    }
+
+    if (!destination) {return}
    socket.send(
      JSON.stringify(
-        { type: DraftMessage.REQUEST.PHASE_CHANGE, "origin": draftPhase, "destination": destinationPhase }
+        { type: DraftMessage.REQUEST.PHASE_CHANGE, origin, destination }
      )
-    );
+    )
+    
  }


@@ -170,29 +156,25 @@ export const DraftAdmin = ({ draftSessionId }) => {
    )
  }

-
-
  return (
    <div className="container draft-panel admin">
-      <h3>Draft Admin Panel</h3>
-      <WebSocketStatus socket={socket} />
-      {/* <MessageLogger socket={socketRef.current} /> */}
+      <div className="d-flex justify-content-between border-bottom mb-2 p-1">
+        <h3>Draft Panel</h3>
+        <div className="d-flex gap-1">
+          <WebSocketStatus socket={socket} />
+          <button onClick={() => handleRequestDraftSummary()} className="btn btn-small btn-light">
+            <i className="bi bi-arrow-clockwise"></i>
+          </button>
+        </div>
+      </div>

      <ParticipantList
        socket={socket}
        participants={participants}
        draftOrder={draftOrder}
      />
-      <DraftPhaseDisplay draftPhase={draftPhase}></DraftPhaseDisplay>
-      <button onClick={() => handlePhaseChange(DraftPhase.DETERMINE_ORDER)} className="btn btn-primary mt-2 me-2">
-        Determine Draft Order
-      </button>
-      <button onClick={() => handleRequestDraftSummary()} className="btn btn-primary mt-2">
-        Request status
-      </button>
-      <button onClick={() => handlePhaseChange(DraftPhase.NOMINATION)} className="btn btn-primary mt-2 me-2">
-        Go to Nominate
-      </button>
+
+      <DraftPhaseDisplay draftPhase={draftPhase} nextPhaseHandler={ ()=>{handlePhaseChange('next')}} prevPhaseHandler= {() => {handlePhaseChange('previous')}}></DraftPhaseDisplay>
    </div>
  );
 };
--- a/frontend/src/apps/draft/common/utils.js
+++ b/frontend/src/apps/draft/common/utils.js
@@ -0,0 +1,29 @@
+export async function fetchDraftDetails(draftSessionId) {
+      return fetch(`/api/draft/${draftSessionId}/`)
+        .then((response) => {
+          if (response.ok) {
+            return response.json()
+          }
+          else {
+            throw new Error()
+          }
+        })
+        .catch((err) => {
+          console.error("Error fetching draft details", err)
+        })
+    }
+
+export async function fetchMovieDetails(draftSessionId) {
+      return fetch(`/api/draft/${draftSessionId}/movie/`)
+        .then((response) => {
+          if (response.ok) {
+            return response.json()
+          }
+          else {
+            throw new Error()
+          }
+        })
+        .catch((err) => {
+          console.error("Error fetching draft details", err)
+        })
+    }
--- a/frontend/src/apps/draft/participant/DraftParticipant.jsx
+++ b/frontend/src/apps/draft/participant/DraftParticipant.jsx
@@ -4,13 +4,40 @@ import React, { useEffect, useState } from "react";
 import { useWebSocket } from "../WebSocketContext.jsx";
 import { WebSocketStatus } from "../common/WebSocketStatus.jsx";
 import { DraftMessage, DraftPhases } from '../constants.js';
+import { fetchDraftDetails } from "../common/utils.js"
+
+const DraftMoviePool = ({ movies }) => {
+  return (
+    <div className="movie-pool-container">
+      <ul>
+        {movies.map(m => (
+          <li id={m?.id}>
+            <a href={`/api/movie/${m.id}/detail`}>
+              {m.title}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}

 export const DraftParticipant = ({ draftSessionId }) => {
  const socket = useWebSocket();
-  const [connectedParticipants, setConnectedParticipants] = useState([]);
+  const [participants, setParticipants] = useState([]);
  const [draftPhase, setDraftPhase] = useState();
+  const [movies, setMovies] = useState([]);
  console.log(socket)

+  useEffect(() => {
+    fetchDraftDetails(draftSessionId)
+      .then((data) => {
+        console.log("Fetched draft data", data)
+        setMovies(data.movies)
+      })
+  }, [])
+
+
  useEffect(() => {
    if (!socket) return;
    else {
@@ -60,27 +87,12 @@ export const DraftParticipant = ({ draftSessionId }) => {

  return (
    <div className="container draft-panel">
-      <h3>Draft Admin Panel</h3>
-      <WebSocketStatus socket={socket} />
-      {/* <MessageLogger socket={socketRef.current} /> */}
-      <label>Connected Particpants</label>
-      <input
-        type="text"
-        readOnly disabled
-        value={connectedParticipants ? JSON.stringify(connectedParticipants) : ""}
-      />
-      <label>Draft Phase</label>
-      <input
-        type="text"
-        readOnly disabled
-        value={draftPhase ? draftPhase : ""}
-      />
-      <button onClick={() => handlePhaseChange(DraftPhases.DETERMINE_ORDER)} className="btn btn-primary mt-2 me-2">
-        Determine Draft Order
-      </button>
-      <button onClick={handleRequestDraftSummary} className="btn btn-primary mt-2">
-        Request status
-      </button>
+      <div className="d-flex justify-content-between border-bottom mb-2 p-1">
+        <h3>Draft Panel</h3>
+        <WebSocketStatus socket={socket} />
+      </div>
+      
+      <DraftMoviePool movies={movies}></DraftMoviePool>
    </div>
  );
 };
--- a/frontend/src/index.js
+++ b/frontend/src/index.js
@@ -15,7 +15,7 @@ if (draftPartipantRoot) {
  const wsUrl = `ws://${window.location.host}/ws/draft/session/${draftSessionId}/participant`;
  createRoot(draftPartipantRoot).render(
    <WebSocketProvider url={wsUrl}>
-    <DraftParticipant />
+    <DraftParticipant draftSessionId={draftSessionId} />
  </WebSocketProvider>
  );
 }
--- a/frontend/src/scss/styles.scss
+++ b/frontend/src/scss/styles.scss
@@ -55,14 +55,32 @@
 .danger {
  @extend .bg-danger;
 }
+.draft-panel {
+}

 .draft-phase-container {
  label {
    @extend .fs-3;
  }
-  ol, ul {
+  .change-phase {
+    
+
+    button {
+      @extend .btn;
+      @extend .btn-light;
+      @extend .p-0;
+      height: 100%;
+    }
+  }
+
+  ol,
+  ul {
+    --bs-list-group-active-bg: var(--bs-primary-bg-subtle);
+    --bs-list-group-active-color: $dark;
    @extend .list-group;
    @extend .list-group-horizontal;
+    @extend .ms-1;
+    @extend .me-1;
    li {
      @extend .list-group-item;
      @extend .p-1;
@@ -70,18 +88,23 @@
      @extend .pe-2;

      &.current-phase {
-        @extend .active
+        @extend .active;
      }
    }
  }
 }

-.participant-list-container {
+.participant-list-container,
+.movie-pool-container {
  max-width: 575.98px;
  label {
    @extend .fs-3;
  }
  @extend .list-group;
+  ol,
+  ul {
+    @extend .p-0;
+  }
  ol {
    @extend .list-group-numbered;
  }
@@ -94,9 +117,5 @@
      @extend .me-auto;
      @extend .ps-1;
    }
-    &::marker{
-      content:">";
-      color:green;
-    }
  }
 }