Achen 237 google calendar permission request

src/app/auth/login/google/callback/route.tsx

@@ -1,9 +1,9 @@
 import type { OAuth2Tokens } from "arctic";
 import { decodeIdToken } from "arctic";
-import { and, eq } from "drizzle-orm";
+import { eq } from "drizzle-orm";
 import { cookies } from "next/headers";
 import { db } from "@/db";
-import { oauthAccounts, users } from "@/db/schema";
+import { oauthAccounts } from "@/db/schema";
 import { setSessionTokenCookie } from "@/lib/auth/cookies";
 import { oauth } from "@/lib/auth/oauth";
 import { createSession, generateSessionToken } from "@/lib/auth/session";
@@ -22,9 +22,8 @@ export async function GET(request: Request): Promise<Response> {
 	const codeVerifier = cookieStore.get("oauth_code_verifier")?.value ?? null;
 	const redirectUrl = cookieStore.get("auth_redirect_url")?.value ?? "/";
 
-	cookieStore.delete("auth_redirect_url");
-	cookieStore.delete("oauth_state");
-	cookieStore.delete("oauth_code_verifier");
+	cookieStore.delete("session");
+	cookieStore.delete({ name: "session", path: "/" });
 
 	if (
 		code === null ||
@@ -127,7 +126,16 @@ export async function GET(request: Request): Promise<Response> {
 			oauthRefreshToken: googleRefreshToken,
 			oauthAccessTokenExpiresAt: googleTokenExpiry,
 		});
+
+		cookieStore.delete("session");
+		cookieStore.delete({ name: "session", path: "/" });
+
 		await setSessionTokenCookie(sessionToken, session.expiresAt);
+
+		cookieStore.delete("oauth_state");
+		cookieStore.delete("oauth_code_verifier");
+		cookieStore.delete("auth_redirect_url");
+
 		const userRecord = await getUserById(existingUser.id);
 
 		if (!userRecord) {
@@ -145,6 +153,9 @@ export async function GET(request: Request): Promise<Response> {
 			oauthRefreshToken: googleRefreshToken,
 			oauthAccessTokenExpiresAt: googleTokenExpiry,
 		});
+
+		// cookieStore.delete("session");
+		// cookieStore.delete({ name: "session", path: "/" });
 		await setSessionTokenCookie(sessionToken, session.expiresAt);
 
 		memberId = user.memberId;

src/app/auth/login/google/route.tsx

@@ -4,11 +4,17 @@ import {
 	generateState,
 } from "arctic";
 import { cookies, headers } from "next/headers";
+import { deleteSessionTokenCookie } from "@/lib/auth/cookies";
 import { oauth } from "@/lib/auth/oauth";
 
-export async function GET(): Promise<Response> {
+export async function GET(request: Request): Promise<Response> {
+	const { searchParams } = new URL(request.url);
+	const promptValue = searchParams.get("prompt") || "consent";
 	const state = generateState();
 	const codeVerifier = generateCodeVerifier();
+
+	await deleteSessionTokenCookie();
+
 	const url = new URL(
 		oauth.createAuthorizationURLWithPKCE(
 			"https://auth.icssc.club/authorize",
@@ -23,8 +29,10 @@ export async function GET(): Promise<Response> {
 			],
 		),
 	);
+	url.searchParams.set("prompt", promptValue);
 
 	const cookieStore = await cookies();
+
 	cookieStore.set("oauth_state", state, {
 		path: "/",
 		httpOnly: true,

src/components/availability/availability.tsx

@@ -3,6 +3,7 @@
 import { fetchGoogleCalendarEvents } from "@actions/availability/google/calendar/action";
 import { useDrag } from "@use-gesture/react";
 import { formatInTimeZone } from "date-fns-tz";
+import { useRouter } from "next/navigation";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useShallow } from "zustand/shallow";
 import {
@@ -133,10 +134,15 @@ export function Availability({
 	user: UserProfile | null;
 	scheduledBlocks: SelectScheduledMeeting[];
 }) {
+	const router = useRouter();
 	const availabilityView = useAvailabilityViewStore(
 		(state) => state.availabilityView,
 	);
 
+	const overlayGoogleCalendar = useAvailabilityViewStore(
+		(state) => state.overlayGoogleCalendar,
+	);
+
 	const selectionIsLocked = useGroupSelectionStore(
 		(state) => state.selectionIsLocked,
 	);
@@ -218,6 +224,7 @@ export function Availability({
 	const [googleCalendarEvents, setGoogleCalendarEvents] = useState<
 		GoogleCalendarEvent[]
 	>([]);
+	// const [hasFetchedCalendar, setHasFetchedCalendar] = useState(false);
 
 	const [availabilityDates, setAvailabilityDates] = useState(() =>
 		deriveInitialAvailability({
@@ -280,27 +287,39 @@ export function Availability({
 	}, [confirmSave]);
 
 	useEffect(() => {
-		if (availabilityDates.length > 0 && anchorNormalizedDate.length > 0) {
-			const firstDateISO = anchorNormalizedDate[0].toISOString();
-
-			const lastDateObj = new Date(
-				anchorNormalizedDate[anchorNormalizedDate.length - 1],
-			);
-			lastDateObj.setHours(23, 59, 59, 999);
-			const lastDateISO = lastDateObj.toISOString();
-
-			fetchGoogleCalendarEvents(firstDateISO, lastDateISO)
-				.then((events) => {
-					setGoogleCalendarEvents(events);
-				})
-				.catch((error) => {
-					console.error("Error fetching Google Calendar events:", error);
-					setGoogleCalendarEvents([]);
-				});
-		} else {
-			setGoogleCalendarEvents([]);
+		if (!overlayGoogleCalendar) {
+			return;
 		}
-	}, [availabilityDates, anchorNormalizedDate]);
+
+		if (availabilityDates.length === 0 || anchorNormalizedDate.length === 0)
+			return;
+
+		const firstDateISO = anchorNormalizedDate[0].toISOString();
+		const lastDateObj = new Date(
+			anchorNormalizedDate[anchorNormalizedDate.length - 1],
+		);
+		lastDateObj.setHours(23, 59, 59, 999);
+
+		fetchGoogleCalendarEvents(firstDateISO, lastDateObj.toISOString()).then(
+			(result) => {
+				if (
+					result.status === "missing_scope" ||
+					result.status === "not_authenticated"
+				) {
+					router.push("/auth/login/google/?prompt=consent");
+
+					return;
+				}
+				setGoogleCalendarEvents(result.events);
+			},
+		);
+	}, [
+		overlayGoogleCalendar,
+		availabilityDates,
+		anchorNormalizedDate,
+		// hasFetchedCalendar,
+		router,
+	]);
 
 	const members = useMemo(() => {
 		const presentMemberIds = [
@@ -658,6 +677,7 @@ export function Availability({
 												currentPageAvailability={currentPageAvailability}
 												googleCalendarEvents={googleCalendarEvents}
 												meetingDates={meetingData.dates}
+												showGoogleCalendar={overlayGoogleCalendar}
 											/>
 										)}
 									</tr>
@@ -685,7 +705,6 @@ export function Availability({
 					availabilityDates={availabilityDates}
 					fromTime={fromTimeMinutes}
 					members={members}
-					timezone={userTimezone}
 					anchorNormalizedDate={anchorNormalizedDate}
 					currentPageAvailability={currentPageAvailability}
 					availabilityTimeBlocks={availabilityTimeBlocks}

src/components/availability/group-availability.tsx

@@ -312,7 +312,7 @@ export function GroupAvailability({
 		],
 	);
 
-	const handleMouseDown = useCallback(
+	const _handleMouseDown = useCallback(
 		({
 			zotDateIndex,
 			blockIndex,
@@ -328,7 +328,7 @@ export function GroupAvailability({
 		[isScheduling, setStartBlockSelection, setEndBlockSelection],
 	);
 
-	const handleMouseMove = useCallback(
+	const _handleMouseMove = useCallback(
 		({
 			zotDateIndex,
 			blockIndex,
@@ -343,7 +343,7 @@ export function GroupAvailability({
 		[isScheduling, startBlockSelection, setEndBlockSelection],
 	);
 
-	const handleMouseUp = useCallback(() => {
+	const _handleMouseUp = useCallback(() => {
 		if (
 			isScheduling &&
 			startBlockSelection &&

src/components/availability/group-responses.tsx

@@ -17,7 +17,6 @@ interface GroupResponsesProps {
 	availabilityDates: ZotDate[];
 	members: Member[];
 	fromTime: number;
-	timezone: string;
 	anchorNormalizedDate: Date[];
 	currentPageAvailability: ZotDate[];
 	availabilityTimeBlocks: number[];

src/components/availability/header/availability-header.tsx

@@ -7,6 +7,7 @@ import {
 	saveScheduledTimeBlock,
 } from "@actions/meeting/schedule/action";
 import GoogleIcon from "@mui/icons-material/Google";
+import { FormControlLabel, Switch } from "@mui/material";
 import {
 	CalendarCheck,
 	CalendarPlus,
@@ -27,6 +28,7 @@ import type { UserProfile } from "@/lib/auth/user";
 import { cn } from "@/lib/utils";
 import type { ZotDate } from "@/lib/zotdate";
 import { useAvailabilityViewStore } from "@/store/useAvailabilityViewStore";
+import { useBestTimesToggleStore } from "@/store/useBestTimesToggleStore";
 import { useScheduleSelectionStore } from "@/store/useScheduleSelectionStore";
 
 interface AvailabilityHeaderProps {
@@ -64,15 +66,20 @@ export function AvailabilityHeader({
 		})),
 	);
 
+	const { overlayGoogleCalendar, setOverlayGoogleCalendar } =
+		useAvailabilityViewStore(
+			useShallow((state) => ({
+				overlayGoogleCalendar: state.overlayGoogleCalendar,
+				setOverlayGoogleCalendar: state.setOverlayGoogleCalendar,
+			})),
+		);
+
 	const handleCancel = () => {
 		onCancel();
 		setChangeableTimezone(true);
 		setAvailabilityView("group");
 	};
 
-	// const [isGuestDialogOpen, setIsGuestDialogOpen] = useState(false);
-	// const [guestName, setGuestName] = useState("");
-
 	const [_isAuthModalOpen, setIsAuthModalOpen] = useState(false);
 	const [isEditModalOpen, setIsEditModalOpen] = useState(false);
 	const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
@@ -83,8 +90,6 @@ export function AvailabilityHeader({
 
 	const handleSave = async () => {
 		if (!user) {
-			// setIsGuestDialogOpen(true);
-
 			return;
 		}
 		setChangeableTimezone(true);
@@ -100,11 +105,6 @@ export function AvailabilityHeader({
 			setHasAvailability(true);
 			setAvailabilityView("group");
 			onSave();
-
-			// Clear guest member name
-			if (!user) {
-				// setGuestName("");
-			}
 		} else {
 			console.error("Error saving availability:", response.body.error);
 		}
@@ -179,6 +179,10 @@ export function AvailabilityHeader({
 		}
 	};
 
+	const handleToggleCalendar = (event: React.ChangeEvent<HTMLInputElement>) => {
+		setOverlayGoogleCalendar(event.target.checked);
+	};
+
 	return (
 		<>
 			<div className="px-2 pt-8">
@@ -220,6 +224,17 @@ export function AvailabilityHeader({
 									<span className="hidden md:flex">Save</span>
 									<CircleCheckIcon />
 								</Button>
+								<FormControlLabel
+									className="ml-2"
+									control={
+										<Switch
+											checked={overlayGoogleCalendar}
+											onChange={handleToggleCalendar}
+											size="small"
+										/>
+									}
+									label="Google Calendar"
+								/>
 							</>
 						) : (
 							<>

src/components/availability/personal-availability.tsx

@@ -14,6 +14,7 @@ interface PersonalAvailabilityProps {
 	currentPageAvailability: ZotDate[];
 	googleCalendarEvents: GoogleCalendarEvent[];
 	meetingDates: string[];
+	showGoogleCalendar: boolean;
 }
 
 export function PersonalAvailability({
@@ -24,12 +25,17 @@ export function PersonalAvailability({
 	currentPageAvailability,
 	googleCalendarEvents,
 	meetingDates,
+	showGoogleCalendar,
 }: PersonalAvailabilityProps) {
 	const [isStateUnsaved, setIsStateUnsaved] = useState(false);
 	const initialAvailabilityRef = useRef<string | null>(null);
 
+	const visibleGoogleCalendarEvents = showGoogleCalendar
+		? googleCalendarEvents
+		: [];
+
 	const { processedCellSegments } = useGoogleCalendar({
-		googleCalendarEvents,
+		googleCalendarEvents: visibleGoogleCalendarEvents,
 		currentPageAvailability,
 		availabilityTimeBlocks,
 		meetingDates,

src/components/availability/table/availability-table-header.tsx

@@ -20,7 +20,7 @@ export function AvailabilityTableHeader({
 }: AvailabilityTableHeaderProps) {
 	//extra day calculation for day spillover
 	//put in here to prevent infinite adding, recalculates everytime something changes
-	const [newBlocks, newAvailDates] = newZonedPageAvailAndDates(
+	const [newBlocks, _newAvailDates] = newZonedPageAvailAndDates(
 		currentPageAvailability,
 		null,
 		doesntNeedDay,

src/components/creation/creation.tsx

@@ -41,7 +41,7 @@ export function Creation({ user }: { user: UserProfile | null }) {
 			(isoString) => new ZotDate(new Date(isoString)),
 		);
 	}, [urlState.selectedDates]);
-	const [recommendation, setRecommendation] = useState<boolean>(false);
+	const [_recommendation, _setRecommendation] = useState<boolean>(false);
 
 	// Helper to update selected days.
 	const setSelectedDays = (daysOrUpdater: React.SetStateAction<ZotDate[]>) => {
@@ -63,8 +63,8 @@ export function Creation({ user }: { user: UserProfile | null }) {
 		void setUrlState({ meetingName: newName });
 	};
 
-	const meetingLocation = urlState.meetingLocation;
-	const setMeetingLocation = (locOrUpdater: React.SetStateAction<string>) => {
+	const _meetingLocation = urlState.meetingLocation;
+	const _setMeetingLocation = (locOrUpdater: React.SetStateAction<string>) => {
 		const newLoc =
 			typeof locOrUpdater === "function"
 				? locOrUpdater(urlState.meetingLocation)