From 539d0cc55480cd59f94c520f287101833539f7db Mon Sep 17 00:00:00 2001 From: Jordan Campbell Date: Wed, 21 Aug 2024 19:48:08 -0500 Subject: [PATCH] added comments --- .../UpdateSession/UpdateSession.tsx | 31 ++++++++++++-- src/utils/useSession.tsx | 40 +++++++++++++++++++ 2 files changed, 68 insertions(+), 3 deletions(-) diff --git a/src/components/UpdateSession/UpdateSession.tsx b/src/components/UpdateSession/UpdateSession.tsx index 0808c9068c..54cc72d7db 100644 --- a/src/components/UpdateSession/UpdateSession.tsx +++ b/src/components/UpdateSession/UpdateSession.tsx @@ -11,6 +11,16 @@ import { UPDATE_SESSION_TIMEOUT } from 'GraphQl/Mutations/mutations'; import './UpdateSession.css'; import Loader from 'components/Loader/Loader'; +/** + * Component for updating the session timeout for a community. + * + * This component fetches the current session timeout value from the server + * and allows the user to update it using a slider. + * + * The component also handles form submission, making a mutation request to update the session timeout. + * + * @returns JSX.Element - The rendered component. + */ const UpdateTimeout = (): JSX.Element => { const { t } = useTranslation('translation', { keyPrefix: 'communityProfile', @@ -19,7 +29,7 @@ const UpdateTimeout = (): JSX.Element => { const [timeout, setTimeout] = useState(30); const [communityTimeout, setCommunityTimeout] = useState( 30, - ); //timeout from database for community + ); // Timeout from database for the community const { data, @@ -32,7 +42,10 @@ const UpdateTimeout = (): JSX.Element => { timeout: number; }; - //handle fetching timeout from community + /** + * Effect that fetches the current session timeout from the server and sets the initial state. + * If there is an error in fetching the data, it is handled using the error handler. + */ React.useEffect(() => { if (queryError) { errorHandler(t, queryError as Error); @@ -49,7 +62,11 @@ const UpdateTimeout = (): JSX.Element => { } }, [data, queryError]); - //handles slider changes + /** + * Handles changes to the slider value and updates the timeout state. + * + * @param e - The event triggered by slider movement. + */ const handleOnChange = ( e: Event | React.ChangeEvent, ): void => { @@ -65,6 +82,13 @@ const UpdateTimeout = (): JSX.Element => { } }; + /** + * Handles form submission to update the session timeout. + * It makes a mutation request to update the timeout value on the server. + * If the update is successful, a success toast is shown, and the state is updated. + * + * @param e - The event triggered by form submission. + */ const handleOnSubmit = async ( e: React.FormEvent, ): Promise => { @@ -84,6 +108,7 @@ const UpdateTimeout = (): JSX.Element => { } }; + // Show a loader while the data is being fetched if (loading) { return ; } diff --git a/src/utils/useSession.tsx b/src/utils/useSession.tsx index 8bfbd35243..39605442d7 100644 --- a/src/utils/useSession.tsx +++ b/src/utils/useSession.tsx @@ -13,6 +13,17 @@ type UseSessionReturnType = { handleLogout: () => void; }; +/** + * Custom hook for managing user session timeouts in a React application. + * + * This hook handles: + * - Starting and ending the user session. + * - Displaying a warning toast at half of the session timeout duration. + * - Logging the user out and displaying a session expiration toast when the session times out. + * - Automatically resetting the timers when user activity is detected. + * + * @returns UseSessionReturnType - An object with methods to start and end the session, and to handle logout. + */ const useSession = (): UseSessionReturnType => { const [sessionTimeout, setSessionTimeout] = useState(30); const sessionTimerRef = useRef(null); @@ -24,6 +35,10 @@ const useSession = (): UseSessionReturnType => { GET_COMMUNITY_SESSION_TIMEOUT_DATA, ); + /** + * Effect that runs on initial mount to fetch session timeout data and set the session timeout state. + * If the query fails, an error handler is invoked. + */ useEffect(() => { if (queryError) { errorHandler(t, queryError as Error); @@ -36,17 +51,27 @@ const useSession = (): UseSessionReturnType => { } }, [data, queryError]); + /** + * Resets the session and warning timers by clearing any existing timeouts. + */ const resetTimers = (): void => { if (sessionTimerRef.current) clearTimeout(sessionTimerRef.current); if (warningTimerRef.current) clearTimeout(warningTimerRef.current); }; + /** + * Ends the session by clearing timers and removing event listeners for user activity. + */ const endSession = (): void => { resetTimers(); window.removeEventListener('mousemove', extendSession); window.removeEventListener('keydown', extendSession); }; + /** + * Handles user logout, revoking the refresh token and clearing local storage. + * Displays a toast notification about session expiration and redirects the user to the login page. + */ const handleLogout = async (): Promise => { try { await revokeRefreshToken(); @@ -63,6 +88,10 @@ const useSession = (): UseSessionReturnType => { ); }; + /** + * Initializes the session and warning timers based on the current session timeout duration. + * Displays a warning toast at half the session timeout duration and logs the user out at the end of the session. + */ const initializeTimers = (): void => { const warningTime = sessionTimeout / 2; const sessionTimeoutInMilliseconds = sessionTimeout * 60 * 1000; @@ -79,11 +108,19 @@ const useSession = (): UseSessionReturnType => { }, sessionTimeoutInMilliseconds); }; + /** + * Extends the session by resetting the timers and initializing them again. + * This function is triggered by user activity such as mouse movement or key presses. + */ const extendSession = (): void => { resetTimers(); initializeTimers(); }; + /** + * Starts the session by initializing timers and adding event listeners for user activity. + * Resets the timers whenever user activity is detected. + */ const startSession = (): void => { resetTimers(); initializeTimers(); @@ -91,6 +128,9 @@ const useSession = (): UseSessionReturnType => { window.addEventListener('keydown', extendSession); }; + /** + * Effect that runs on component unmount to end the session and clean up resources. + */ useEffect(() => { return () => endSession(); }, []);