Offline Mode

.gitignore

@@ -26,7 +26,7 @@ yarn-error.log*
 /certs/production.pem
 /certs/production-key.pem
 
-
+.env.*.local
 .env.local
 .env
 

components/SignInMenu.tsx

@@ -1,4 +1,5 @@
 import Container from "@/components/Container";
+import { useCurrentSession } from "@/lib/client/useCurrentSession";
 import { signIn } from "next-auth/react";
 import { useRouter } from "next/router";
 import { useCallback, useEffect, useRef, useState } from "react";
@@ -14,6 +15,8 @@ const errorMessages: { [error: string]: string } = {
 };
 
 function SignInCard() {
+	const { status, session } = useCurrentSession();
+
 	const router = useRouter();
 	const emailRef = useRef<HTMLInputElement>(null);
 	const { executeRecaptcha } = useGoogleReCaptcha();
@@ -57,49 +60,58 @@ function SignInCard() {
 	return (
 		<div className="card bg-base-300 w-5/6 md:w-1/2">
 			<div className="card-body">
-				<h1 className="card-title">Sign In</h1>
-				{error && <p className="text-error">{error}</p>}
-				<p className="italic">Choose a login provider</p>
-				<span>
-					You currently <span className="text-red-500">have</span> to sign-in
-					using either your{" "}
-					<span className="text-green-400">original sign-in method</span> or
-					your <span className="text-green-400">email.</span>
-				</span>
-				<div className="divider" />
-
-				<button
-					onClick={() => signInWithCallbackUrl("google")}
-					className="btn btn-primary w-full font-bold text-md"
-				>
-					<FaGoogle />
-					Login with Google
-				</button>
-
-				<button
-					onClick={() => signInWithCallbackUrl("slack")}
-					className="btn btn-secondary w-full font-bold text-md"
-				>
-					<FaSlack />
-					Login with Slack
-				</button>
-
-				<div className="divider" />
-				<div className="flex flex-col gap-2">
-					<p>Email Sign In</p>
-					<input
-						ref={emailRef}
-						className="input input-bordered w-full"
-						type="email"
-						placeholder="Email"
-					/>
-					<button
-						onClick={logInWithEmail}
-						className="btn btn-accent w-full font-bold text-md"
-					>
-						Login with Email
-					</button>
-				</div>
+				{status === "authenticated" ? (
+					<>
+						<h1 className="card-title">Welcome back, {session.user!.name}</h1>
+						<progress className="progress w-56" />
+					</>
+				) : (
+					<>
+						<h1 className="card-title">Sign In</h1>
+						{error && <p className="text-error">{error}</p>}
+						<p className="italic">Choose a login provider</p>
+						<span>
+							You currently <span className="text-red-500">have</span> to
+							sign-in using either your{" "}
+							<span className="text-green-400">original sign-in method</span> or
+							your <span className="text-green-400">email.</span>
+						</span>
+						<div className="divider" />
+
+						<button
+							onClick={() => signInWithCallbackUrl("google")}
+							className="btn btn-primary w-full font-bold text-md"
+						>
+							<FaGoogle />
+							Login with Google
+						</button>
+
+						<button
+							onClick={() => signInWithCallbackUrl("slack")}
+							className="btn btn-secondary w-full font-bold text-md"
+						>
+							<FaSlack />
+							Login with Slack
+						</button>
+
+						<div className="divider" />
+						<div className="flex flex-col gap-2">
+							<p>Email Sign In</p>
+							<input
+								ref={emailRef}
+								className="input input-bordered w-full"
+								type="email"
+								placeholder="Email"
+							/>
+							<button
+								onClick={logInWithEmail}
+								className="btn btn-accent w-full font-bold text-md"
+							>
+								Login with Email
+							</button>
+						</div>
+					</>
+				)}
 			</div>
 		</div>
 	);

components/competition/CompHeaderCard.tsx

@@ -1,11 +1,22 @@
+import ClientApi from "@/lib/api/ClientApi";
 import { NotLinkedToTba } from "@/lib/client/ClientUtils";
 import { Competition, Match, Report } from "@/lib/Types";
 import { useState } from "react";
 import { BiExport } from "react-icons/bi";
+
 import { FaCalendarDay } from "react-icons/fa";
-import { MdAutoGraph, MdQueryStats, MdCoPresent } from "react-icons/md";
+import {
+	MdAutoGraph,
+	MdQueryStats,
+	MdCoPresent,
+	MdCloudSync,
+} from "react-icons/md";
 import ViewMatchesModal from "../ViewMatchesModal";
 import { User } from "../../lib/Types";
+import toast from "react-hot-toast";
+import { syncCompData } from "@/lib/api/ClientApiUtils";
+
+const api = new ClientApi();
 
 export default function CompHeaderCard({
 	comp,
@@ -21,16 +32,73 @@ export default function CompHeaderCard({
 	matchPathway: string;
 }) {
 	const [viewMatches, setViewMatches] = useState(false);
+	const [syncingOfflineData, setSyncingOfflineData] = useState(false);
 
 	async function toggleViewMatches() {
 		setViewMatches(!viewMatches);
 	}
 
+	async function syncComp() {
+		if (!comp) return;
+
+		const toastId = toast.loading("Caching offline pages...");
+		setSyncingOfflineData(true);
+		new Promise(async (resolve, reject) => {
+			await syncCompData(api, comp._id!.toString());
+
+			const totalItemsToSync = comp?.pitReports.length || 0;
+			let itemsSynced = 0;
+			await Promise.all(
+				comp?.pitReports.map(async (report) => {
+					await fetch(`${location.href}/pit/${report}`);
+					itemsSynced++;
+					toast.loading(
+						`Caching offline pages... (${itemsSynced}/${totalItemsToSync})`,
+						{
+							id: toastId,
+						},
+					);
+				}),
+			);
+
+			console.log("Cached all offline pages!");
+			toast.success("Cached all offline pages!", { id: toastId });
+
+			// Finally block doesn't run for some reason
+			setSyncingOfflineData(false);
+			resolve(true);
+		})
+			.catch((err) => {
+				toast.error(`Error syncing offline data. Error: ${err}`, {
+					id: toastId,
+				});
+
+				// Finally block doesn't run for some reason
+				setSyncingOfflineData(false);
+			})
+			.finally(() => setSyncingOfflineData(false));
+	}
+
 	return (
 		<div className="w-full card bg-base-200 shadow-xl">
 			<div className="card-body">
 				<div className="flex flex-row items-center justify-between w-full">
 					<h1 className="card-title text-3xl font-bold">{comp?.name}</h1>
+					<div
+						className="tooltip"
+						data-tip="Sync Offline Data"
+					>
+						{syncingOfflineData ? (
+							<span className="loading loading-spinner loading-xs" />
+						) : (
+							<button
+								onClick={syncComp}
+								className="btn btn-ghost"
+							>
+								<MdCloudSync />
+							</button>
+						)}
+					</div>
 				</div>
 				<div className="divider"></div>
 				<div className="w-full flex flex-col sm:flex-row items-center mt-4 max-sm:space-y-1">