wip

frontend/src/app/tasks/[[...date]]/loading.tsx

@@ -0,0 +1,42 @@
+'use client'
+
+import Box from '@mui/joy/Box'
+
+import Divider from '@mui/joy/Divider'
+import { Skeleton } from '@mui/joy'
+
+import { CreateTask } from '../components/CreateTask'
+import { CreateTaskFormProvider } from '../providers/CreateTaskFormProvider'
+
+export default function Loading() {
+  return (
+    <Box
+      sx={{
+        display: 'grid',
+        gridTemplateAreas: {
+          xs: "'divider-1 divider-1''select-template start-timer''divider-2 divider-2''create-task-form create-task-form''task-list task-list'",
+          sm: "'divider-1 divider-1''select-template start-timer''divider-2 divider-2''create-task-form task-list'"
+        },
+        gridTemplateColumns: {
+          xs: '1fr',
+          sm: '558px 558px'
+        },
+        columnGap: '30px',
+        rowGap: '16px',
+        margin: '0 auto'
+      }}
+    >
+      <Divider sx={{ gridArea: 'divider-1' }} />
+
+      <CreateTaskFormProvider>
+        <CreateTask projects={[]} taskTypes={[]} templates={[]} />
+
+        <Divider sx={{ gridArea: 'divider-2' }} />
+
+        <Box sx={{ gridArea: 'task-list', position: 'relative' }}>
+          <Skeleton width="100%" height="96px" />
+        </Box>
+      </CreateTaskFormProvider>
+    </Box>
+  )
+}

frontend/src/app/tasks/page.tsx → frontend/src/app/tasks/[[...date]]/page.tsx

@@ -1,4 +1,4 @@
-import { DayView } from './DayView'
+import { DayView } from '../DayView'
 import { makeGetProjects } from '@/infra/project/getProjects'
 import { makeGetTaskTypes } from '@/infra/taskType/getTaskTypes'
 import { makeGetTemplates } from '@/infra/template/getTemplates'

frontend/src/app/tasks/actions/getTasksGroupedByDate.ts

@@ -8,6 +8,8 @@ import { Task } from '@/domain/Task'
 import { convertTimeToMinutes } from '../utils/time'
 import { unstable_cache } from 'next/cache'
 
+export type TasksGroupedByDate = Record<Task['date'], { tasks: Array<Task>; time: number }>
+
 export const getTasksGroupedByDate = unstable_cache(
   async (startTime: string, endTime: string, limit?: number) => {
     const apiClient = await serverFetch()
@@ -18,7 +20,7 @@ export const getTasksGroupedByDate = unstable_cache(
     const tasks = await getTasks({ userId, startTime, endTime, limit })
 
     // 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) => {
+    return tasks.reduce<TasksGroupedByDate>((acc, task) => {
       const startTime = convertTimeToMinutes(task.startTime)
       const endTime = convertTimeToMinutes(task.endTime)
       const timeDiff = endTime - startTime

frontend/src/app/tasks/components/TaskList.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import Box from '@mui/joy/Box'
+import { Box, Skeleton } from '@mui/joy'
 
 import { Project } from '@/domain/Project'
 import { TaskType } from '@/domain/TaskType'
@@ -16,7 +16,7 @@ type TaskListProps = {
 }
 
 export const TaskList = ({ projects, taskTypes, sx }: TaskListProps) => {
-  const { tasks } = useGetTasks()
+  const { tasks, isLoading } = useGetTasks()
 
   return (
     <Box
@@ -26,9 +26,11 @@ export const TaskList = ({ projects, taskTypes, sx }: TaskListProps) => {
         flexDirection: 'column',
         gap: '16px',
         listStyle: 'none',
+        position: 'relative',
         ...sx
       }}
     >
+      <Skeleton width="100%" height="96px" loading={isLoading} />
       {tasks.map((task) => (
         <TaskBox projects={projects} taskTypes={taskTypes} key={task.id} task={task} />
       ))}

frontend/src/app/tasks/hooks/useDateParam.ts

@@ -1,13 +1,13 @@
-import { useSearchParams } from 'next/navigation'
+import { useParams } from 'next/navigation'
 import { getDateFromParam } from '../utils/time'
 import { useMemo } from 'react'
 
 export const useDateParam = () => {
-  const searchParams = useSearchParams()
+  const params = useParams()
 
   return useMemo(() => {
-    const dateParam = searchParams.get('date')
+    const dateParam = params.date ? params.date[0] : ''
     const date = getDateFromParam(dateParam)
     return { date, dateParam }
-  }, [searchParams])
+  }, [params.date])
 }

frontend/src/app/tasks/hooks/useGetTasks.ts

@@ -12,11 +12,10 @@ export const useGetTasks = () => {
   const selectedDate = format(date, 'yyyy-MM-dd')
   const getTasks = makeGetTasks(apiClient)
 
-  const { data } = useQuery({
+  const { data = [], isLoading } = useQuery({
     queryKey: ['tasks', userId, selectedDate],
-    queryFn: () => getTasks({ userId, startTime: selectedDate, endTime: selectedDate }),
-    initialData: []
+    queryFn: () => getTasks({ userId, startTime: selectedDate, endTime: selectedDate })
   })
 
-  return { tasks: data }
+  return { tasks: data, isLoading }
 }

frontend/src/app/tasks/layout.tsx

@@ -25,7 +25,8 @@ import { ScreenReaderOnly } from '@/ui/ScreenReaderOnly/ScreenReaderOnly'
 export default function TasksLayout({ children }: PropsWithChildren) {
   const pathname = usePathname()
   const { dateParam } = useDateParam()
-  const dateUrl = dateParam ? `?date=${dateParam}` : ''
+
+  const selectedTabValue = dateParam ? pathname : `${pathname}/`
 
   return (
     <Box
@@ -58,12 +59,12 @@ export default function TasksLayout({ children }: PropsWithChildren) {
             paddding: '1px'
           }}
           size="md"
-          value={`${pathname}${dateUrl}`}
+          value={selectedTabValue}
         >
           <TabList disableUnderline>
-            <TimeViewTab path={`/tasks${dateUrl}`}>Day</TimeViewTab>
-            <TimeViewTab path={`/tasks/week${dateUrl}`}>Week</TimeViewTab>
-            <TimeViewTab path={`/tasks/month${dateUrl}`}>Month</TimeViewTab>
+            <TimeViewTab path={`/tasks/${dateParam}`}>Day</TimeViewTab>
+            <TimeViewTab path={`/tasks/week/${dateParam}`}>Week</TimeViewTab>
+            <TimeViewTab path={`/tasks/month/${dateParam}`}>Month</TimeViewTab>
           </TabList>
         </Tabs>
         <DateSelector />
@@ -79,33 +80,37 @@ const DateSelector = () => {
   const router = useRouter()
 
   const formattedDate = () => {
+    if (pathname.includes('month') || pathname.includes('week')) {
+      return format(date, 'MMMM, yyyy')
+    }
+
     if (isSameDay(date, new Date())) return `Today, ${format(new Date(), 'MMM dd')}`
 
     return format(date, 'cccc, MMM dd')
   }
 
   const nextDate = () => {
     if (pathname.includes('week')) {
-      return format(addWeeks(date, 1), 'yyyy-MM-dd')
+      return `/tasks/week/${format(addWeeks(date, 1), 'yyyy-MM-dd')}`
     }
 
     if (pathname.includes('month')) {
-      return format(addMonths(date, 1), 'yyyy-MM-dd')
+      return `/tasks/month/${format(addMonths(date, 1), 'yyyy-MM')}`
     }
 
-    return format(addDays(date, 1), 'yyyy-MM-dd')
+    return `/tasks/${format(addDays(date, 1), 'yyyy-MM-dd')}`
   }
 
   const previousDate = () => {
     if (pathname.includes('week')) {
-      return format(subWeeks(date, 1), 'yyyy-MM-dd')
+      return `/tasks/week/${format(subWeeks(date, 1), 'yyyy-MM-dd')}`
     }
 
     if (pathname.includes('month')) {
-      return format(subMonths(date, 1), 'yyyy-MM-dd')
+      return `/tasks/month/${format(subMonths(date, 1), 'yyyy-MM-dd')}`
     }
 
-    return format(subDays(date, 1), 'yyyy-MM-dd')
+    return `/tasks/${format(subDays(date, 1), 'yyyy-MM-dd')}`
   }
 
   return (
@@ -126,7 +131,7 @@ const DateSelector = () => {
           ':active': { background: '#DCDCE5' },
           borderRadius: '8px 0 0 8px'
         }}
-        onClick={() => router.push(`${pathname}?date=${previousDate()}`)}
+        onClick={() => router.push(previousDate())}
       >
         <ChevronLeft16Regular color="black" />
         <ScreenReaderOnly>Select Previous Date</ScreenReaderOnly>
@@ -142,7 +147,7 @@ const DateSelector = () => {
           ':active': { background: '#DCDCE5' },
           borderRadius: '0 8px 8px 0'
         }}
-        onClick={() => router.push(`${pathname}?date=${nextDate()}`)}
+        onClick={() => router.push(nextDate())}
       >
         <ChevronRight16Regular color="black" />
         <ScreenReaderOnly>Select Next Date</ScreenReaderOnly>

frontend/src/app/tasks/month/[[...date]]/components/WeekDays.tsx

@@ -0,0 +1,29 @@
+import { Typography } from '@mui/joy'
+
+const WEEK_DAYS = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
+
+export const WeekDays = () => {
+  return WEEK_DAYS.map((day) => {
+    return (
+      <Typography
+        sx={{
+          textAlign: 'center',
+          padding: { xs: '8px', sm: '22px 16px' },
+          borderBottom: '1px solid #C4C6D0',
+          borderTop: '1px solid #C4C6D0',
+          borderRight: '1px solid #C4C6D0',
+          ':first-of-type': { borderLeft: '1px solid #C4C6D0' },
+          ':nth-of-type(7n)': { borderRight: { sm: 'none' }, borderLeft: { sm: 'none' } },
+          fontWeight: '600',
+          backgroundColor: '#fff',
+          fontSize: { xs: '0px', sm: '1rem' },
+          ':first-letter': { fontSize: '1rem' }
+        }}
+        component="div"
+        key={day}
+      >
+        {day}
+      </Typography>
+    )
+  })
+}

frontend/src/app/tasks/month/[[...date]]/loading.tsx

@@ -0,0 +1,75 @@
+'use client'
+
+import { Box, Skeleton, Typography } from '@mui/joy'
+import { WeekDays } from './components/WeekDays'
+import { useDateParam } from '../../hooks/useDateParam'
+import { format } from 'date-fns'
+
+export default function Loading() {
+  const { date } = useDateParam()
+
+  return (
+    <>
+      <Typography
+        sx={{
+          fontSize: { xs: 'lg', sm: 'xl4' }
+        }}
+        level="h1"
+        textAlign="center"
+      >
+        {format(date, 'MMMM yyy')}
+      </Typography>
+      <Box
+        sx={{
+          display: 'grid',
+          gridTemplateColumns: 'repeat(7,minmax(0,1fr))'
+        }}
+        alignItems="stretch"
+        height="100%"
+      >
+        <WeekDays />
+        {Array.from(Array(35).keys()).map((_, index) => {
+          return (
+            <Box
+              sx={{
+                backgroundColor: '#fff',
+                padding: { xs: '4px', sm: '22px 16px' },
+                height: { xs: '77px', sm: '185px' },
+                borderBottom: '1px solid #C4C6D0',
+                borderRight: '1px solid #C4C6D0',
+                ':nth-of-type(7n + 1)': { borderLeft: { xs: '1px solid #C4C6D0', sm: 'none' } },
+                ':nth-of-type(7n)': { borderRight: { sm: 'none' }, borderLeft: { sm: 'none' } },
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '4px',
+                overflow: 'auto'
+              }}
+              key={index}
+            >
+              <Box
+                sx={{
+                  width: '100%',
+                  position: 'relative',
+                  height: '27px'
+                }}
+              >
+                <Skeleton />
+              </Box>
+              <Box
+                sx={{
+                  display: 'flex',
+                  flexDirection: { xs: 'column', sm: 'row' },
+                  gap: { xs: '4px ', sm: '8px' }
+                }}
+              >
+                <Box sx={{ position: 'relative', width: '100%', height: '74px' }}>
+                  <Skeleton />
+                </Box>
+              </Box>
+            </Box>
+          )
+        })}
+      </Box>
+    </>
+  )
+}

frontend/src/app/tasks/month/page.tsx → frontend/src/app/tasks/month/[[...date]]/page.tsx

@@ -5,19 +5,18 @@ import {
   lastDayOfWeek,
   format,
   eachDayOfInterval,
-  isSameDay,
+  isToday,
   isSameMonth
 } from 'date-fns'
-import { Box, Typography } from '@mui/joy'
-import { getTasksGroupedByDate } from '../actions/getTasksGroupedByDate'
-import { convertMinutesToTime, getDateFromParam } from '../utils/time'
-import { SimpleTaskBox } from '../components/TaskBox'
+import { Typography, Box } from '@mui/joy'
 import { Fragment } from 'react'
+import { getTasksGroupedByDate } from '../../actions/getTasksGroupedByDate'
+import { getDateFromParam, convertMinutesToTime } from '../../utils/time'
+import { WeekDays } from './components/WeekDays'
+import { SimpleTaskBox } from '../../components/TaskBox'
 
-const WEEK_DAYS = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
-
-export default async function MonthView({ searchParams }: { searchParams: { date?: string } }) {
-  const selectedDate = getDateFromParam(searchParams.date)
+export default async function MonthView({ params }: { params: { date?: string } }) {
+  const selectedDate = getDateFromParam(params.date && params.date[0])
   const firstDayOfFirstWeek = startOfWeek(startOfMonth(selectedDate))
   const lastDayOfLastWeek = lastDayOfWeek(lastDayOfMonth(selectedDate))
   const dateRange = eachDayOfInterval({ start: firstDayOfFirstWeek, end: lastDayOfLastWeek })
@@ -41,31 +40,7 @@ export default async function MonthView({ searchParams }: { searchParams: { date
         alignItems="stretch"
         height="100%"
       >
-        {WEEK_DAYS.map((day, index) => {
-          const isToday = index === selectedDate.getDay()
-          return (
-            <Typography
-              sx={{
-                textAlign: 'center',
-                padding: { xs: '8px', sm: '22px 16px' },
-                borderBottom: '1px solid #C4C6D0',
-                borderTop: '1px solid #C4C6D0',
-                borderRight: '1px solid #C4C6D0',
-                ':first-of-type': { borderLeft: '1px solid #C4C6D0' },
-                ':nth-of-type(7n)': { borderRight: { sm: 'none' }, borderLeft: { sm: 'none' } },
-                fontWeight: '600',
-                backgroundColor: isToday ? '#E6EFF8' : '#fff',
-                color: isToday ? '#004c92' : 'auto',
-                fontSize: { xs: '0px', sm: '1rem' },
-                ':first-letter': { fontSize: '1rem' }
-              }}
-              component="div"
-              key={day}
-            >
-              {day}
-            </Typography>
-          )
-        })}
+        <WeekDays />
 
         {dateRange.map((date) => {
           const formattedDate = format(date, 'yyyy-MM-dd')
@@ -74,7 +49,7 @@ export default async function MonthView({ searchParams }: { searchParams: { date
           return (
             <Box
               sx={{
-                backgroundColor: isSameDay(date, selectedDate) ? ' #E6EFF8' : '#fff',
+                backgroundColor: isToday(date) ? ' #E6EFF8' : '#fff',
                 padding: { xs: '4px', sm: '22px 16px' },
                 height: { xs: '77px', sm: '185px' },
                 borderBottom: '1px solid #C4C6D0',