47 lines
1.3 KiB
TypeScript
47 lines
1.3 KiB
TypeScript
import type { Route } from './+types/home'
|
|
import { Box, Typography, Container } from '@mui/material'
|
|
import { TaskList } from '~/components/TaskList'
|
|
import type { Task } from '~/types/task'
|
|
|
|
export function meta(_: Route.MetaArgs) {
|
|
return [
|
|
{ title: "Captain's Log - Dashboard" },
|
|
{ name: 'description', content: 'Task Dashboard' },
|
|
]
|
|
}
|
|
|
|
export async function loader(): Promise<{ tasks: Task[] }> {
|
|
try {
|
|
// Fetch tasks from the backend API during SSR
|
|
const apiUrl = process.env.API_URL || 'http://localhost:3000'
|
|
const response = await fetch(`${apiUrl}/api/tasks?status=todo`, {
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
})
|
|
|
|
if (!response.ok) {
|
|
console.error('Failed to fetch tasks:', response.statusText)
|
|
return { tasks: [] }
|
|
}
|
|
|
|
const tasks = await response.json()
|
|
return { tasks }
|
|
} catch (error) {
|
|
console.error('Error fetching tasks during SSR:', error)
|
|
return { tasks: [] }
|
|
}
|
|
}
|
|
|
|
export default function Home({ loaderData }: Route.ComponentProps) {
|
|
return (
|
|
<Container maxWidth="lg">
|
|
<Box sx={{ py: 4 }}>
|
|
<Typography variant="h1" component="h1" gutterBottom>
|
|
Dashboard
|
|
</Typography>
|
|
<TaskList initialTasks={loaderData.tasks} />
|
|
</Box>
|
|
</Container>
|
|
)
|
|
}
|