schoology loading state

GunnWATT · Nov 3, 2024 · 2ae74ef · 2ae74ef
1 parent 8e87fbd
commit 2ae74ef
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 8 deletions.
diff --git a/client/src/components/classes/FetchFooter.tsx b/client/src/components/classes/FetchFooter.tsx
@@ -1,6 +1,6 @@
-import { useContext } from 'react';
-import {DateTime} from 'luxon';
-import Loading, { Spinner } from '../layout/Loading';
+import { useContext, useState } from 'react';
+import { DateTime } from 'luxon';
+import Loading from '../layout/Loading';
 
 // Firebase
 import { useAuth, useFunctions } from 'reactfire';
@@ -16,13 +16,26 @@ export default function FetchFooter() {
     const auth = useAuth();
     const functions = useFunctions();
 
+    const [resetting, setReseting] = useState(false);
+
     const cannotFetch = (lastAttemptedFetch != null && Date.now() - lastAttemptedFetch < 6 * 1000) || fetching;
 
     return (
         <footer className="mt-auto border-t border-tertiary divide-y divide-tertiary">
             <div className="py-2 flex items-center justify-between">
-                If your classes are wrong, reset Schoology.
-                <button className="px-2.5 py-[3px] rounded-md text-white bg-theme transition duration-200" onClick={() => sgyAuth(auth, functions)}>
+                {resetting ? (
+                    <Loading>Resetting...</Loading>
+                ) : (
+                    <div>If your classes are wrong, reset Schoology.</div>
+                )}
+                <button
+                    onClick={() => {
+                        setReseting(true)
+                        sgyAuth(auth, functions)
+                    }}
+                    disabled={resetting}
+                    className="px-2.5 py-[3px] rounded-md disabled:opacity-30 text-white bg-theme transition duration-200"
+                >
                     Reset
                 </button>
             </div>

diff --git a/client/src/components/firebase/SgySignInBtn.tsx b/client/src/components/firebase/SgySignInBtn.tsx
@@ -1,6 +1,7 @@
-import {useAuth, useFunctions} from 'reactfire';
+import { useAuth, useFunctions } from 'reactfire';
 import { Functions, httpsCallable } from 'firebase/functions';
 import { Auth } from 'firebase/auth';
+import { useState } from 'react';
 
 
 export async function sgyAuth(auth: Auth, functions: Functions) {
@@ -19,9 +20,18 @@ export default function SgySignInBtn() {
     const auth = useAuth();
     const functions = useFunctions();
 
+    const [loading, setLoading] = useState(false);
+
     return (
-        <button className="rounded w-full p-5 bg-background shadow-lg" onClick={() => sgyAuth(auth, functions)}>
-            Authenticate Schoology
+        <button
+            onClick={() => {
+                setLoading(true)
+                sgyAuth(auth, functions)
+            }}
+            disabled={loading}
+            className="rounded w-full p-5 disabled:opacity-30 bg-background shadow-lg transition duration-200"
+        >
+            {loading ? "Loading..." : "Authenticate Schoology"}
         </button>
     )
 }