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";
+import { apiAuth, User } from "./api";
-
+import { useSession } from "./Session";
-interface Player {
-  id: number;
-  name: string;
-  number: string | null;
-}
 
 type PlayerListProps = Partial<ReactSortableProps<any>> & {
   orderedList?: boolean;
@@ -17,117 +12,45 @@ 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[];
+  user: User;
-  players: Player[];
+  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 [playersLeft, setPlayersLeft] = useState<User[]>([]);
-  const [playersMiddle, setPlayersMiddle] = useState<Player[]>(otherPlayers);
+  const [playersMiddle, setPlayersMiddle] = useState<User[]>(otherPlayers);
-  const [playersRight, setPlayersRight] = useState<Player[]>([]);
+  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(({ display_name }) => display_name);
-      let left = playersLeft.map(({ name }) => name);
+    let middle = playersMiddle.map(({ display_name }) => display_name);
-      let middle = playersMiddle.map(({ name }) => name);
+    let right = playersRight.map(({ display_name }) => display_name);
-      let right = playersRight.map(({ name }) => name);
+    const data = { user: user, hate: left, undecided: middle, love: right };
-      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,25 +111,24 @@ export function Chemistry({ user, players }: PlayerInfoProps) {
 }
 
 export function MVP({ user, players }: PlayerInfoProps) {
-  const [availablePlayers, setAvailablePlayers] = useState<Player[]>(players);
+  const [availablePlayers, setAvailablePlayers] = useState<User[]>(players);
-  const [rankedPlayers, setRankedPlayers] = useState<Player[]>([]);
+  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(({ display_name }) => display_name);
-      let mvps = rankedPlayers.map(({ name }) => name);
+    const data = { user: user, mvps: mvps };
-      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 { user } = useSession();
-  const [players, setPlayers] = useState<Player[]>([]);
+  const [players, setPlayers] = useState<User[]>([]);
   const [openTab, setOpenTab] = useState("Chemistry");
 
   async function loadPlayers() {
+    try {
       const data = await apiAuth("player/list", null, "GET");
-    setPlayers(data as Player[]);
+      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,10 +235,7 @@ export default function Rankings() {
     setOpenTab(pageName);
   }
 
-  return (
+  return user ? (
-    <>
-      <SelectUser {...{ user, setUser, players, setPlayers }} />
-      {user.length === 1 && (
     <>
       <div className="container navbar">
         <button
@@ -344,7 +267,7 @@ export default function Rankings() {
         <MVP {...{ user, players }} />
       </div>
     </>
-      )}
+  ) : (
-    </>
+    <span>not logged in. refresh the page...</span>
   );
 }