Hide login button if user is logged

app/page.tsx

@@ -6,18 +6,9 @@ import decoration4 from '@/public/decorations/decoration-4.svg';
 import fullLogo from '@/public/logos/full-logo.svg';
 import Image from 'next/image';
 import Balancer from 'react-wrap-balancer';
-import { getUserData } from './actions';
 import styles from './page.module.css';
 
-export const revalidate = 60;
-
-const getUser = async () => {
-  return await getUserData();
-};
-
 export default async function Home() {
-  const user = await getUser();
-
   return (
     <main className={styles.main}>
       <div className={styles.row}>

components/Button/LoginButton.tsx

@@ -1,26 +1,30 @@
 'use client';
 import { loginIntoWebsite } from '@/app/actions';
+import { useUser } from '@/util/hooks';
 
 export default function LoginButton() {
-  return (
-    <button
-      onClick={(e) => {
-        e.preventDefault();
-        return loginIntoWebsite();
-      }}
-      style={{
-        padding: '1.2rem 5rem',
-        backgroundColor: 'hsla(var(--blue-500))',
-        border: '0',
-        borderRadius: 'var(--main-borderRadius)',
-        fontSize: '1.2rem',
-        fontWeight: 500,
-        color: '#fff',
-        width: 'fit-content',
-        cursor: 'pointer',
-      }}
-    >
-      Login
-    </button>
-  );
+  const user = useUser();
+
+  if (!user?.osuId)
+    return (
+      <button
+        onClick={(e) => {
+          e.preventDefault();
+          return loginIntoWebsite();
+        }}
+        style={{
+          padding: '1.2rem 5rem',
+          backgroundColor: 'hsla(var(--blue-500))',
+          border: '0',
+          borderRadius: 'var(--main-borderRadius)',
+          fontSize: '1.2rem',
+          fontWeight: 500,
+          color: '#fff',
+          width: 'fit-content',
+          cursor: 'pointer',
+        }}
+      >
+        Login
+      </button>
+    );
 }