feat: make entire logo clickable

src/App.tsx

@@ -8,8 +8,8 @@ function App() {
       <div className="logo">
         <a href={baseUrl}>
           <img alt="logo" height="66%" src="logo.svg" />
-        </a>
           <h3 className="centered">cutt</h3>
+        </a>
         <span className="grey">cool ultimate team tool</span>
       </div>
       <Rankings />

src/Rankings.tsx

@@ -1,4 +1,4 @@
-import { Dispatch, SetStateAction, useEffect, useState } from "react";
+import { Dispatch, SetStateAction, useEffect, useMemo, useState } from "react";
 import { ReactSortable, ReactSortableProps } from "react-sortablejs";
 import api, { baseUrl } from "./api";
 
@@ -268,7 +268,28 @@ export function MVP({ user, players }: PlayerInfoProps) {
   );
 }
 
-function openPage(pageName: string, color: string) {
+export default function Rankings() {
+  const [user, setUser] = useState<Player[]>([]);
+  const [players, setPlayers] = useState<Player[]>([]);
+  const [openTab, setOpenTab] = useState("Chemistry");
+
+  async function loadPlayers() {
+    const response = await fetch(`${baseUrl}player/list`, {
+      method: "GET",
+    });
+    const data = await response.json();
+    setPlayers(data as Player[]);
+  }
+
+  useMemo(() => {
+    loadPlayers();
+  }, []);
+
+  useEffect(() => {
+    user.length === 1 && openPage(openTab, "aliceblue");
+  }, [user]);
+
+  function openPage(pageName: string, color: string) {
     // Hide all elements with class="tabcontent" by default */
     var i, tabcontent, tablinks;
     tabcontent = document.getElementsByClassName("tabcontent");
@@ -290,24 +311,9 @@ function openPage(pageName: string, color: string) {
     activeButton.style.fontWeight = "bold";
     activeButton.style.opacity = "100%";
     document.body.style.backgroundColor = color;
-}
+    setOpenTab(pageName);
-
-export default function Rankings() {
-  const [user, setUser] = useState<Player[]>([]);
-  const [players, setPlayers] = useState<Player[]>([]);
-
-  async function loadPlayers() {
-    const response = await fetch(`${baseUrl}player/list`, {
-      method: "GET",
-    });
-    const data = await response.json();
-    setPlayers(data as Player[]);
   }
 
-  useEffect(() => {
-    loadPlayers();
-  }, []);
-
   return (
     <>
       <SelectUser {...{ user, setUser, players, setPlayers }} />