Merge pull request #4611 from OneCommunityGlobal/revert-4024-kanishk_fix_for_white_screen_page

Revert "Kanishk attempted fix white screen bug on first visit to pages"

Author: one-community

src/actions/authActions.js

@@ -115,40 +115,10 @@ export const getHeaderData = userId => {
   };
 };
 
-export const logoutUser = (isCrossTabLogout = false) => dispatch => {
+export const logoutUser = () => dispatch => {
   // Clear any active force-logout timer before logging out
   dispatch(stopForceLogout());
-  
-  // Only signal other tabs if this is NOT a cross-tab logout
-  // (to prevent infinite loops when responding to storage events)
-  if (!isCrossTabLogout) {
-    // Set a flag to signal other tabs to log out
-    // This flag will trigger a storage event in other tabs
-    localStorage.setItem('logoutFlag', 'true');
-    
-    // Use BroadcastChannel API for more reliable cross-tab communication
-    if (typeof BroadcastChannel !== 'undefined') {
-      try {
-        const channel = new BroadcastChannel('auth_sync');
-        channel.postMessage({ type: 'logout', timestamp: Date.now() });
-        // Close the channel after sending
-        setTimeout(() => channel.close(), 100);
-      } catch (error) {
-        // eslint-disable-next-line no-console
-        console.warn('BroadcastChannel not available:', error);
-      }
-    }
-    
-    // Clear the logout flag after a short delay to allow other tabs to detect it
-    // We use setTimeout to ensure the storage event fires first
-    setTimeout(() => {
-      localStorage.removeItem('logoutFlag');
-    }, 500);
-  }
-  
-  // Remove the token
   localStorage.removeItem(tokenKey);
-  
   httpService.setjwt(false);
   dispatch(setCurrentUser(null));
 };

src/components/App.jsx

@@ -1,5 +1,5 @@
 /* eslint-disable no-undef */
-import { Component, useEffect, useState } from 'react';
+import { Component, useEffect } from 'react';
 import { Provider, useSelector } from 'react-redux';
 import { BrowserRouter as Router, useLocation } from 'react-router-dom';
 import { PersistGate } from 'redux-persist/integration/react';
@@ -25,8 +25,10 @@ const queryClient = new QueryClient({
   },
 });
 
-// Move auth initialization to after store is ready
-let authInitialized = false;
+// Check for token
+if (process.env.NODE_ENV !== 'test') {
+  initAuth();
+}
 
 function UpdateDocumentTitle() {
   const location = useLocation();
@@ -124,228 +126,36 @@ function UpdateDocumentTitle() {
       try {
         initMessagingSocket(token);
       } catch (error) {
-        // eslint-disable-next-line no-console
-        console.error('WebSocket initialization failed:', error);
+        // console.error('WebSocket initialization failed:', error);
+        return error;
       }
     }
+    // else {
+    //   // console.warn('No auth token found for WebSocket connection');
+    // }
   }, []);
 
   return null;
 }
 
-// Error Boundary Component
-class ErrorBoundary extends Component {
-  constructor(props) {
-    super(props);
-    this.state = { hasError: false, error: null, errorInfo: null };
-  }
-
-  static getDerivedStateFromError(error) {
-    return { hasError: true };
-  }
-
-  componentDidCatch(error, errorInfo) {
-    this.setState({
-      error: error,
-      errorInfo: errorInfo,
-    });
-
-    // Log the error
-    logger.logError(error);
-
-    // Log additional error info for debugging
-    console.error('Error Boundary caught an error:', error, errorInfo);
-  }
-
-  render() {
-    if (this.state.hasError) {
-      return (
-        <div
-          className="d-flex justify-content-center align-items-center"
-          style={{ minHeight: '100vh' }}
-        >
-          <div className="text-center">
-            <h2>Something went wrong</h2>
-            <p>We are sorry, but something unexpected happened. Please try refreshing the page.</p>
-            <button
-              className="btn btn-primary"
-              onClick={() => {
-                this.setState({ hasError: false, error: null, errorInfo: null });
-                window.location.reload();
-              }}
-            >
-              Refresh Page
-            </button>
-            {process.env.NODE_ENV === 'development' && this.state.error && (
-              <details style={{ whiteSpace: 'pre-wrap', marginTop: '20px' }}>
-                <summary>Error Details (Development)</summary>
-                <p>{this.state.error.toString()}</p>
-                <p>{this.state.errorInfo.componentStack}</p>
-              </details>
-            )}
-          </div>
-        </div>
-      );
-    }
-
-    return this.props.children;
-  }
-}
-
 class App extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      storeReady: false,
-      authInitialized: false,
       hasError: false,
       error: null,
       errorInfo: null,
-    };
-    this.isLoggingOut = false; // Flag to prevent infinite logout loops
-    this.broadcastChannel = null; // BroadcastChannel for cross-tab communication
-    this.tokenCheckInterval = null; // Interval for periodic token checking
-    this.lastTokenValue = null; // Track last known token value
+    }; // Moving state initialization into constructor as per linting rule.
   }
 
-  componentDidMount() {
-    // Wait for store to be ready before initializing auth
-    this.setState({ storeReady: true });
-
-    // Initialize auth after a short delay to ensure store is fully ready
-    setTimeout(() => {
-      if (process.env.NODE_ENV !== 'test' && !authInitialized) {
-        try {
-          initAuth();
-          authInitialized = true;
-          this.setState({ authInitialized: true });
-          // Store initial token value
-          this.lastTokenValue = localStorage.getItem('token');
-        } catch (error) {
-          console.error('Error initializing auth:', error);
-          logger.logError(error);
-        }
-      }
-    }, 100);
-
-    // Listen for storage events to sync auth state between tabs
-    this.handleStorageChange = this.handleStorageChange.bind(this);
-    window.addEventListener('storage', this.handleStorageChange);
-
-    // Use BroadcastChannel API for more reliable cross-tab communication
-    if (typeof BroadcastChannel !== 'undefined') {
-      this.broadcastChannel = new BroadcastChannel('auth_sync');
-      this.broadcastChannel.onmessage = event => {
-        if (event.data && event.data.type === 'logout') {
-          this.handleCrossTabLogout();
-        }
-      };
-    }
-
-    // Periodic token check as fallback (checks every 500ms)
-    // This ensures we catch logout even if storage events don't fire
-    this.tokenCheckInterval = setInterval(() => {
-      this.checkTokenStatus();
-    }, 500);
-  }
-
-  componentWillUnmount() {
-    // Clean up storage event listener
-    if (this.handleStorageChange) {
-      window.removeEventListener('storage', this.handleStorageChange);
-    }
-    // Clean up BroadcastChannel
-    if (this.broadcastChannel) {
-      this.broadcastChannel.close();
-    }
-    // Clean up token check interval
-    if (this.tokenCheckInterval) {
-      clearInterval(this.tokenCheckInterval);
-    }
-  }
-
-  checkTokenStatus() {
-    // Periodic check to detect if token was removed in another tab
-    // This is a fallback for when storage events don't fire reliably
-    if (this.isLoggingOut) return; // Skip if already logging out
-
-    const currentToken = localStorage.getItem('token');
-    const wasAuthenticated = this.lastTokenValue !== null;
-    const isNowUnauthenticated = currentToken === null;
-
-    // If we had a token before and now it's gone, we were logged out
-    if (wasAuthenticated && isNowUnauthenticated) {
-      this.handleCrossTabLogout();
-    }
-
-    // Update last known token value
-    this.lastTokenValue = currentToken;
-  }
-
-  handleCrossTabLogout() {
-    // Handle cross-tab logout (called from storage events, BroadcastChannel, or token check)
-    if (!this.isLoggingOut) {
-      this.isLoggingOut = true;
-
-      // Immediately redirect to login - don't wait for Redux state update
-      // This ensures the user sees the login page right away
-      if (
-        window.location.pathname !== '/login' &&
-        !window.location.pathname.startsWith('/login') &&
-        !window.location.pathname.startsWith('/forgotpassword')
-      ) {
-        window.location.href = '/login';
-        return; // Exit early, let the redirect handle cleanup
-      }
-
-      // If already on login page, just update Redux state
-      if (store && store.dispatch) {
-        const { logoutUser } = require('../actions/authActions');
-        // Use a version of logoutUser that doesn't set the flag to prevent loops
-        store.dispatch(logoutUser(true)); // Pass true to indicate cross-tab logout
-      }
-
-      // Reset flag after a delay
-      setTimeout(() => {
-        this.isLoggingOut = false;
-      }, 1000);
-    }
-  }
-
-  handleStorageChange(event) {
-    // Sync auth state when localStorage changes in other tabs
-    if (event.key === 'token' || event.key === 'authToken') {
-      // Handle login sync - token was added in another tab
-      if (event.newValue && !authInitialized) {
-        try {
-          initAuth();
-          authInitialized = true;
-          this.setState({ authInitialized: true });
-        } catch (error) {
-          console.error('Error syncing auth from storage event:', error);
-        }
-      }
-      // Handle logout sync - token was removed in another tab
-      if (event.newValue === null && event.oldValue !== null && !this.isLoggingOut) {
-        // Token was removed in another tab, log out this tab
-        this.handleCrossTabLogout();
-      }
-    }
-    // Also check for explicit logout flag
-    if (event.key === 'logoutFlag') {
-      if (event.newValue === 'true' && !this.isLoggingOut) {
-        // Another tab triggered logout, log out this tab
-        this.handleCrossTabLogout();
-        // Clear the flag
-        localStorage.removeItem('logoutFlag');
-      }
-    }
+  static getDerivedStateFromError(error) {
+    // Update state so the next render will show the fallback UI
+    return { hasError: true };
   }
 
   componentDidCatch(error, errorInfo) {
+    // Log the error
     logger.logError(error);
-    // eslint-disable-next-line no-console
-    console.error('App component caught an error:', error, errorInfo);
 
     // Update state with error details
     this.setState({
@@ -416,17 +226,15 @@ class App extends Component {
     return (
       <Provider store={store}>
         <PersistGate loading={<Loading />} persistor={persistor}>
-          <ErrorBoundary>
-            <QueryClientProvider client={queryClient}>
-              <ModalProvider>
-                <Router>
-                  <ThemeManager />
-                  <UpdateDocumentTitle />
-                  {routes}
-                </Router>
-              </ModalProvider>
-            </QueryClientProvider>
-          </ErrorBoundary>
+          <QueryClientProvider client={queryClient}>
+            <ModalProvider>
+              <Router>
+                <ThemeManager />
+                <UpdateDocumentTitle />
+                {routes}
+              </Router>
+            </ModalProvider>
+          </QueryClientProvider>
         </PersistGate>
       </Provider>
     );