feat: adjust Rankings to new auth + User

main.py

@@ -55,7 +55,7 @@ def add_players(players: list[Player]):
 
 def list_players():
     with Session(engine) as session:
-        statement = select(Player).order_by(Player.name)
+        statement = select(Player).order_by(Player.display_name)
         return session.exec(statement).fetchall()
 
 

src/Rankings.tsx

@@ -1,12 +1,7 @@
-import { Dispatch, SetStateAction, useEffect, useMemo, useState } from "react";
+import { useEffect, useState } from "react";
 import { ReactSortable, ReactSortableProps } from "react-sortablejs";
-import { apiAuth } from "./api";
-
-interface Player {
-  id: number;
-  name: string;
-  number: string | null;
-}
+import { apiAuth, User } from "./api";
+import { useSession } from "./Session";
 
 type PlayerListProps = Partial<ReactSortableProps<any>> & {
   orderedList?: boolean;
@@ -17,116 +12,44 @@ function PlayerList(props: PlayerListProps) {
     <ReactSortable {...props} animation={200}>
       {props.list?.map((item, index) => (
         <div key={item.id} className="item">
-          {props.orderedList ? index + 1 + ". " + item.name : item.name}
+          {props.orderedList
+            ? index + 1 + ". " + item.display_name
+            : item.display_name}
         </div>
       ))}
     </ReactSortable>
   );
 }
 
-interface SelectUserProps {
-  user: Player[];
-  setUser: Dispatch<SetStateAction<Player[]>>;
-  players: Player[];
-  setPlayers: Dispatch<SetStateAction<Player[]>>;
-}
-
-export function SelectUser({
-  user,
-  setUser,
-  players,
-  setPlayers,
-}: SelectUserProps) {
-  return (
-    <>
-      <div className="box user">
-        {user.length < 1 ? (
-          <>
-            <span>your name?</span>
-            <br /> <span className="grey hint">drag your name here</span>
-          </>
-        ) : (
-          <>
-            <span
-              className="renew"
-              onClick={() => {
-                setUser([]);
-              }}
-            >
-              {" ✕"}
-            </span>
-          </>
-        )}
-        <PlayerList
-          list={user}
-          setList={setUser}
-          group={{
-            name: "user-shared",
-            put: function (to) {
-              return to.el.children.length < 1;
-            },
-          }}
-          className="dragbox"
-        />
-      </div>
-      {user.length < 1 && (
-        <div className="box one">
-          <h2>🥏🏃</h2>
-          <ReactSortable
-            list={players}
-            setList={setPlayers}
-            group={{ name: "user-shared", pull: "clone" }}
-            className="dragbox reservoir"
-            animation={200}
-          >
-            {players.length < 1 ? (
-              <span className="loader"></span>
-            ) : (
-              players.map((item, _) => (
-                <div key={"extra" + item.id} className="extra-margin">
-                  <div key={item.id} className="item">
-                    {item.name}
-                  </div>
-                </div>
-              ))
-            )}
-          </ReactSortable>
-        </div>
-      )}
-    </>
-  );
-}
-
 interface PlayerInfoProps {
-  user: Player[];
-  players: Player[];
+  user: User;
+  players: User[];
 }
 
 export function Chemistry({ user, players }: PlayerInfoProps) {
-  const index = players.indexOf(user[0]);
+  const index = players.indexOf(user);
   var otherPlayers = players.slice();
   otherPlayers.splice(index, 1);
-  const [playersLeft, setPlayersLeft] = useState<Player[]>([]);
-  const [playersMiddle, setPlayersMiddle] = useState<Player[]>(otherPlayers);
-  const [playersRight, setPlayersRight] = useState<Player[]>([]);
+  const [playersLeft, setPlayersLeft] = useState<User[]>([]);
+  const [playersMiddle, setPlayersMiddle] = useState<User[]>(otherPlayers);
+  const [playersRight, setPlayersRight] = useState<User[]>([]);
+
+  useEffect(() => {
+    setPlayersMiddle(otherPlayers);
+  }, [players]);
 
   const [dialog, setDialog] = useState("dialog");
 
   async function handleSubmit() {
     const dialog = document.querySelector("dialog[id='ChemistryDialog']");
     (dialog as HTMLDialogElement).showModal();
-    if (user.length < 1) {
-      setDialog("who are you?");
-    } else {
-      setDialog("sending...");
-      let _user = user.map(({ name }) => name)[0];
-      let left = playersLeft.map(({ name }) => name);
-      let middle = playersMiddle.map(({ name }) => name);
-      let right = playersRight.map(({ name }) => name);
-      const data = { user: _user, hate: left, undecided: middle, love: right };
-      const response = await apiAuth("chemistry", data);
-      response.ok ? setDialog("success!") : setDialog("try sending again");
-    }
+    setDialog("sending...");
+    let left = playersLeft.map(({ display_name }) => display_name);
+    let middle = playersMiddle.map(({ display_name }) => display_name);
+    let right = playersRight.map(({ display_name }) => display_name);
+    const data = { user: user, hate: left, undecided: middle, love: right };
+    const response = await apiAuth("chemistry", data);
+    response.ok ? setDialog("success!") : setDialog("try sending again");
   }
 
   return (
@@ -188,24 +111,23 @@ export function Chemistry({ user, players }: PlayerInfoProps) {
 }
 
 export function MVP({ user, players }: PlayerInfoProps) {
-  const [availablePlayers, setAvailablePlayers] = useState<Player[]>(players);
-  const [rankedPlayers, setRankedPlayers] = useState<Player[]>([]);
+  const [availablePlayers, setAvailablePlayers] = useState<User[]>(players);
+  const [rankedPlayers, setRankedPlayers] = useState<User[]>([]);
 
   const [dialog, setDialog] = useState("dialog");
 
+  useEffect(() => {
+    setAvailablePlayers(players);
+  }, [players]);
+
   async function handleSubmit() {
     const dialog = document.querySelector("dialog[id='MVPDialog']");
     (dialog as HTMLDialogElement).showModal();
-    if (user.length < 1) {
-      setDialog("who are you?");
-    } else {
-      setDialog("sending...");
-      let _user = user.map(({ name }) => name)[0];
-      let mvps = rankedPlayers.map(({ name }) => name);
-      const data = { user: _user, mvps: mvps };
-      const response = await apiAuth("mvps", data);
-      response.ok ? setDialog("success!") : setDialog("try sending again");
-    }
+    setDialog("sending...");
+    let mvps = rankedPlayers.map(({ display_name }) => display_name);
+    const data = { user: user, mvps: mvps };
+    const response = await apiAuth("mvps", data);
+    response.ok ? setDialog("success!") : setDialog("try sending again");
   }
 
   return (
@@ -267,21 +189,25 @@ export function MVP({ user, players }: PlayerInfoProps) {
 }
 
 export default function Rankings() {
-  const [user, setUser] = useState<Player[]>([]);
-  const [players, setPlayers] = useState<Player[]>([]);
+  const { user } = useSession();
+  const [players, setPlayers] = useState<User[]>([]);
   const [openTab, setOpenTab] = useState("Chemistry");
 
   async function loadPlayers() {
-    const data = await apiAuth("player/list", null, "GET");
-    setPlayers(data as Player[]);
+    try {
+      const data = await apiAuth("player/list", null, "GET");
+      setPlayers(data as User[]);
+    } catch (error) {
+      console.error(error);
+    }
   }
 
-  useMemo(() => {
+  useEffect(() => {
     loadPlayers();
   }, []);
 
   useEffect(() => {
-    user.length === 1 && openPage(openTab, "aliceblue");
+    openPage(openTab, "aliceblue");
   }, [user]);
 
   function openPage(pageName: string, color: string) {
@@ -309,42 +235,39 @@ export default function Rankings() {
     setOpenTab(pageName);
   }
 
-  return (
+  return user ? (
     <>
-      <SelectUser {...{ user, setUser, players, setPlayers }} />
-      {user.length === 1 && (
-        <>
-          <div className="container navbar">
-            <button
-              className="tablink"
-              id="ChemistryButton"
-              onClick={() => openPage("Chemistry", "aliceblue")}
-            >
-              🧪 Chemistry
-            </button>
-            <button
-              className="tablink"
-              id="MVPButton"
-              onClick={() => openPage("MVP", "aliceblue")}
-            >
-              🏆 MVP
-            </button>
-          </div>
+      <div className="container navbar">
+        <button
+          className="tablink"
+          id="ChemistryButton"
+          onClick={() => openPage("Chemistry", "aliceblue")}
+        >
+          🧪 Chemistry
+        </button>
+        <button
+          className="tablink"
+          id="MVPButton"
+          onClick={() => openPage("MVP", "aliceblue")}
+        >
+          🏆 MVP
+        </button>
+      </div>
 
-          <span className="grey">
-            assign as many or as few players as you want
-            <br />
-            and don't forget to <b>submit</b> (💾) when you're done :)
-          </span>
+      <span className="grey">
+        assign as many or as few players as you want
+        <br />
+        and don't forget to <b>submit</b> (💾) when you're done :)
+      </span>
 
-          <div id="Chemistry" className="tabcontent">
-            <Chemistry {...{ user, players }} />
-          </div>
-          <div id="MVP" className="tabcontent">
-            <MVP {...{ user, players }} />
-          </div>
-        </>
-      )}
+      <div id="Chemistry" className="tabcontent">
+        <Chemistry {...{ user, players }} />
+      </div>
+      <div id="MVP" className="tabcontent">
+        <MVP {...{ user, players }} />
+      </div>
     </>
+  ) : (
+    <span>not logged in. refresh the page...</span>
   );
 }