fix: unattended component reload due to session changes (#407)

* fix: unattended component reload due to session changes

When the session is updated, status goes back to loading then
authenticated or unauthenticated. session.accessTokenExpires may also be
updated.

This triggered various component refresh at unattented times, and brake
the user experience.

By splitting to only what's needed with memoization, it will prevent
unattented refresh.

* review

* review: change syntax
This commit is contained in:
2024-09-05 10:46:47 -06:00
committed by GitHub
parent c5f7fcc06b
commit db714f6390
9 changed files with 124 additions and 37 deletions

View File

@@ -5,7 +5,7 @@ import { useCallback, useEffect, useRef, useState } from "react";
import { Box, Button, Text, VStack, HStack } from "@chakra-ui/react";
import useRoomMeeting from "./useRoomMeeting";
import { useRouter } from "next/navigation";
import { useSession } from "next-auth/react";
import useSessionStatus from "../lib/useSessionStatus";
export type RoomDetails = {
params: {
@@ -18,9 +18,7 @@ export default function Room(details: RoomDetails) {
const roomName = details.params.roomName;
const meeting = useRoomMeeting(roomName);
const router = useRouter();
const { status } = useSession();
const sessionReady = status !== "loading";
const isAuthenticated = status === "authenticated";
const { isLoading, isAuthenticated } = useSessionStatus();
const [consentGiven, setConsentGiven] = useState<boolean | null>(null);
@@ -37,16 +35,16 @@ export default function Room(details: RoomDetails) {
};
useEffect(() => {
if (!sessionReady || !isAuthenticated || !roomUrl) return;
if (isLoading || !isAuthenticated || !roomUrl) return;
wherebyRef.current?.addEventListener("leave", handleLeave);
return () => {
wherebyRef.current?.removeEventListener("leave", handleLeave);
};
}, [handleLeave, roomUrl, sessionReady, isAuthenticated]);
}, [handleLeave, roomUrl, isLoading, isAuthenticated]);
if (!isAuthenticated && !consentGiven) {
if (isLoading && !isAuthenticated && !consentGiven) {
return (
<Box
display="flex"