Create week view

frontend/src/app/tasks/utils/time.ts

@@ -4,11 +4,15 @@ export const convertTimeToMinutes = (time: string) => {
   return parseInt(hour) * 60 + parseInt(minute)
 }
 
+export const convertMinutesToTime = (timeInMinutes: number) => {
+  const hours = Math.floor(timeInMinutes / 60)
+  const minutes = timeInMinutes % 60
+
+  return `${hours}h ${minutes}m`
+}
+
 export const getTimeDifference = (startMinutes: number, endMinutes: number) => {
   const timeDiff = endMinutes - startMinutes
 
-  const hours = Math.floor(timeDiff / 60)
-  const minutes = timeDiff % 60
-
-  return `${hours}h ${minutes}m`
+  return convertMinutesToTime(timeDiff)
 }

frontend/src/app/tasks/week/page.tsx

@@ -1,3 +1,87 @@
+import { makeGetTasks } from '@/infra/task/getTasks'
+import { serverFetch } from '@/infra/lib/serverFetch'
+import { authOptions } from '@/app/api/auth/[...nextauth]/route'
+import { getServerSession } from 'next-auth'
+import { format, sub, eachDayOfInterval } from 'date-fns'
+import { Task } from '@/domain/Task'
+import { Typography, Box, Stack } from '@mui/joy'
+import { SimpleTaskBox } from '../components/TaskBox'
+import { convertTimeToMinutes, convertMinutesToTime } from '../utils/time'
+
+const getTasks = async (startTime: string, endTime: string) => {
+  const apiClient = await serverFetch()
+  const getTasks = makeGetTasks(apiClient)
+  const session = await getServerSession(authOptions)
+  const { id: userId } = session!.user
+
+  const tasks = await getTasks({ userId, startTime, endTime })
+
+  // Group tasks by date and add the total time for that date
+  return tasks.reduce<Record<Task['date'], { tasks: Array<Task>; time: number }>>((acc, task) => {
+    const startTime = convertTimeToMinutes(task.startTime)
+    const endTime = convertTimeToMinutes(task.endTime)
+    const timeDiff = endTime - startTime
+
+    if (acc[task.date]) {
+      const { tasks, time } = acc[task.date]
+
+      return { ...acc, [task.date]: { tasks: [...tasks, task], time: time + timeDiff } }
+    }
+
+    return { ...acc, [task.date]: { tasks: [task], time: timeDiff } }
+  }, {})
+}
+
 export default async function WeekView() {
-  return <div>Week!</div>
+  const today = new Date()
+  const sevenDaysAgo = sub(today, { days: 6 })
+  const dateRange = eachDayOfInterval({ start: sevenDaysAgo, end: today })
+  const groupedTasks = await getTasks(
+    format(sevenDaysAgo, 'yyyy-MM-dd'),
+    format(today, 'yyyy-MM-dd')
+  )
+
+  return (
+    <Stack direction="row" alignItems="stretch" height="100%">
+      {dateRange.map((date) => {
+        const formattedDate = format(date, 'eeee, do')
+        const dateTasks = groupedTasks[format(date, 'yyyy-MM-dd')]
+
+        return (
+          <Box
+            sx={{
+              flex: '1',
+              ':first-of-type': {
+                borderLeft: '1px solid #C4C6D0'
+              },
+              borderTop: '1px solid #C4C6D0',
+              borderBottom: '1px solid #C4C6D0',
+              borderRight: '1px solid #C4C6D0',
+              display: 'flex',
+              flexDirection: 'column',
+              minHeight: 'calc(100vh - 79px)',
+              gap: '8px'
+            }}
+            component="ul"
+            key={formattedDate}
+          >
+            <Box padding="22px 16px" borderBottom="1px solid #C4C6D0">
+              <Typography fontWeight="600">{formattedDate}</Typography>
+              <Typography fontWeight="600" textColor="#004c92">
+                {dateTasks?.time ? convertMinutesToTime(dateTasks.time) : '0h 0m'}
+              </Typography>
+            </Box>
+
+            {dateTasks?.tasks.map((task) => {
+              return (
+                <Box sx={{ padding: '0px 8px' }} key={task.id}>
+                  <SimpleTaskBox task={task} />
+                </Box>
+              )
+            })}
+          </Box>
+        )
+      })}
+    </Stack>
+  )
 }