Updated pages to utilize error boundary

frontend/src/pages/Channels.jsx

@@ -1,14 +1,17 @@
-import React from 'react';
+import React, { lazy, Suspense } from 'react';
 import ChannelsTable from '../components/tables/ChannelsTable';
-import StreamsTable from '../components/tables/StreamsTable';
-import { Box } from '@mantine/core';
+const StreamsTable = lazy(() => import('../components/tables/StreamsTable'));
+import { Box, Text } from '@mantine/core';
 import { Allotment } from 'allotment';
 import { USER_LEVELS } from '../constants';
 import useAuthStore from '../store/auth';
 import useLocalStorage from '../hooks/useLocalStorage';
+import ErrorBoundary from '../components/ErrorBoundary';
 
-const ChannelsPage = () => {
+const PageContent = () => {
   const authUser = useAuthStore((s) => s.user);
+  if (!authUser.id) throw new Error()
+
   const [allotmentSizes, setAllotmentSizes] = useLocalStorage(
     'channels-splitter-sizes',
     [50, 50]
@@ -22,9 +25,6 @@ const ChannelsPage = () => {
     setAllotmentSizes(sizes);
   };
 
-  if (!authUser.id) {
-    return <></>;
-  }
   if (authUser.user_level <= USER_LEVELS.STANDARD) {
     return (
       <Box style={{ padding: 10 }}>
@@ -34,34 +34,41 @@ const ChannelsPage = () => {
   }
 
   return (
-    <div
-      style={{
-        height: '100vh',
-        width: '100%',
-        display: 'flex',
-        overflowX: 'auto',
-      }}
+    <Box h={'100vh'} w={'100%'} display={'flex'}
+         style={{ overflowX: 'auto' }}
     >
       <Allotment
         defaultSizes={allotmentSizes}
-        style={{ height: '100%', width: '100%', minWidth: '600px' }}
+        h={'100%'} w={'100%'} miw={'600px'}
         className="custom-allotment"
         minSize={100}
         onChange={handleSplitChange}
         onResize={handleResize}
       >
-        <div style={{ padding: 10, overflowX: 'auto', minWidth: '100px' }}>
-          <div style={{ minWidth: '600px' }}>
+        <Box p={10} miw={'100px'} style={{ overflowX: 'auto' }}>
+          <Box miw={'600px'}>
             <ChannelsTable />
-          </div>
-        </div>
-        <div style={{ padding: 10, overflowX: 'auto', minWidth: '100px' }}>
-          <div style={{ minWidth: '600px' }}>
-            <StreamsTable />
-          </div>
-        </div>
+          </Box>
+        </Box>
+        <Box p={10} miw={'100px'} style={{ overflowX: 'auto' }}>
+          <Box miw={'600px'}>
+            <ErrorBoundary>
+              <Suspense fallback={<Text>Loading...</Text>}>
+                <StreamsTable />
+              </Suspense>
+            </ErrorBoundary>
+          </Box>
+        </Box>
       </Allotment>
-    </div>
+    </Box>
+  );
+};
+
+const ChannelsPage = () => {
+  return (
+    <ErrorBoundary>
+      <PageContent/>
+    </ErrorBoundary>
   );
 };
 

frontend/src/pages/ContentSources.jsx

@@ -2,36 +2,38 @@ import useUserAgentsStore from '../store/userAgents';
 import M3UsTable from '../components/tables/M3UsTable';
 import EPGsTable from '../components/tables/EPGsTable';
 import { Box, Stack } from '@mantine/core';
+import ErrorBoundary from '../components/ErrorBoundary'
 
-const ErrorBoundary = ({ children }) => {
+const PageContent = () => {
   const error = useUserAgentsStore((state) => state.error);
-  if (error) {
-    return <div>Error: {error}</div>;
-  }
-  return children;
+  if (error) throw new Error(error);
+
+  return (
+    <Stack
+      p="10"
+      h="100%" // Set a specific height to ensure proper display
+      miw="1100px" // Prevent tables from becoming too cramped
+      style={{
+        overflowX: 'auto', // Enable horizontal scrolling when needed
+        overflowY: 'auto', // Enable vertical scrolling on the container
+      }}
+      spacing="xs" // Reduce spacing to give tables more room
+    >
+      <Box sx={{ flex: '1 1 50%', overflow: 'hidden' }}>
+        <M3UsTable />
+      </Box>
+
+      <Box sx={{ flex: '1 1 50%', overflow: 'hidden' }}>
+        <EPGsTable />
+      </Box>
+    </Stack>
+  );
 }
 
 const M3UPage = () => {
   return (
     <ErrorBoundary>
-      <Stack
-        p="10"
-        h="100%" // Set a specific height to ensure proper display
-        miw="1100px" // Prevent tables from becoming too cramped
-        style={{
-          overflowX: 'auto', // Enable horizontal scrolling when needed
-          overflowY: 'auto', // Enable vertical scrolling on the container
-        }}
-        spacing="xs" // Reduce spacing to give tables more room
-      >
-        <Box sx={{ flex: '1 1 50%', overflow: 'hidden' }}>
-          <M3UsTable />
-        </Box>
-
-        <Box sx={{ flex: '1 1 50%', overflow: 'hidden' }}>
-          <EPGsTable />
-        </Box>
-      </Stack>
+      <PageContent/>
     </ErrorBoundary>
   );
 }

frontend/src/pages/Users.jsx

@@ -1,55 +1,25 @@
-import React, { useState } from 'react';
 import UsersTable from '../components/tables/UsersTable';
 import { Box } from '@mantine/core';
 import useAuthStore from '../store/auth';
-import { USER_LEVELS } from '../constants';
+import ErrorBoundary from '../components/ErrorBoundary';
 
-const UsersPage = () => {
+const PageContent = () => {
   const authUser = useAuthStore((s) => s.user);
-
-  const [selectedUser, setSelectedUser] = useState(null);
-  const [userModalOpen, setUserModalOpen] = useState(false);
-  const [confirmDeleteOpen, setConfirmDeleteOpen] = useState(false);
-  const [deleteTarget, setDeleteTarget] = useState(null);
-  const [userToDelete, setUserToDelete] = useState(null);
-
-  if (!authUser.id) {
-    return <></>;
-  }
-
-  const closeUserModal = () => {
-    setSelectedUser(null);
-    setUserModalOpen(false);
-  };
-  const editUser = (user) => {
-    setSelectedUser(user);
-    setUserModalOpen(true);
-  };
-
-  const deleteUser = (id) => {
-    // Get user details for the confirmation dialog
-    const user = users.find((u) => u.id === id);
-    setUserToDelete(user);
-    setDeleteTarget(id);
-
-    // Skip warning if it's been suppressed
-    if (isWarningSuppressed('delete-user')) {
-      return executeDeleteUser(id);
-    }
-
-    setConfirmDeleteOpen(true);
-  };
-
-  const executeDeleteUser = async (id) => {
-    await API.deleteUser(id);
-    setConfirmDeleteOpen(false);
-  };
+  if (!authUser.id) throw new Error();
 
   return (
-    <Box style={{ padding: 10 }}>
+    <Box p={10}>
       <UsersTable />
     </Box>
   );
+}
+
+const UsersPage = () => {
+  return (
+    <ErrorBoundary>
+      <PageContent/>
+    </ErrorBoundary>
+  );
 };
 
 export default UsersPage;