added comments

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<number | undefined>(30);
   const [communityTimeout, setCommunityTimeout] = useState<number | undefined>(
     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<HTMLInputElement>,
   ): 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<HTMLFormElement>,
   ): Promise<void> => {
@@ -84,6 +108,7 @@ const UpdateTimeout = (): JSX.Element => {
     }
   };
 
+  // Show a loader while the data is being fetched
   if (loading) {
     return <Loader />;
   }

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<number>(30);
   const sessionTimerRef = useRef<NodeJS.Timeout | null>(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<void> => {
     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,18 +108,29 @@ 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();
     window.addEventListener('mousemove', extendSession);
     window.addEventListener('keydown', extendSession);
   };
 
+  /**
+   * Effect that runs on component unmount to end the session and clean up resources.
+   */
   useEffect(() => {
     return () => endSession();
   }, []);