Moved error logic to separate component

This commit is contained in:
Nick Sandstrom 2025-12-10 20:38:28 -08:00
parent 4df4e5f963
commit 700d0d2383

View file

@ -3,29 +3,37 @@ import M3UsTable from '../components/tables/M3UsTable';
import EPGsTable from '../components/tables/EPGsTable';
import { Box, Stack } from '@mantine/core';
const M3UPage = () => {
const ErrorBoundary = ({ children }) => {
const error = useUserAgentsStore((state) => state.error);
if (error) return <div>Error: {error}</div>;
return (
<Stack
style={{
padding: 10,
height: '100%', // Set a specific height to ensure proper display
minWidth: '1100px', // Prevent tables from becoming too cramped
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>
if (error) {
return <div>Error: {error}</div>;
}
return children;
}
<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>
</ErrorBoundary>
);
};
}
export default M3UPage;