Added sorting tasks to consider description and tooltip with task cre…

…ation date

api/db/migrations.js

@@ -17,25 +17,24 @@ Migrations.add({
   version: 2,
   name: 'Add a few sample tasks.',
   async up() {
-    const createdAt = new Date();
     const user = await Accounts.findUserByUsername('fredmaia');
     await Tasks.insertAsync({
       description: 'Install Node@20',
       done: false,
       userId: user._id,
-      createdAt,
+      createdAt: new Date(2024, 1, 1),
     });
     await Tasks.insertAsync({
-      description: 'Install MeteorJS',
+      description: 'Install Meteor.js 3.0',
       done: false,
       userId: user._id,
-      createdAt,
+      createdAt: new Date(2024, 1, 2),
     });
     await Tasks.insertAsync({
       description: 'Clone this repository',
       done: false,
       userId: user._id,
-      createdAt,
+      createdAt: new Date(2024, 1, 3),
     });
   },
 });

ui/pages/tasks/components/task-item.jsx

@@ -1,7 +1,26 @@
-import { Box, Button, Checkbox, HStack, Stack } from '@chakra-ui/react';
+import {
+  Box,
+  Button,
+  Checkbox,
+  HStack,
+  Stack,
+  Tooltip,
+} from '@chakra-ui/react';
 import React, { memo } from 'react';
 import { useTaskItem } from '../hooks/use-task-item';
 
+const formatDate = (date) => {
+  return new Intl.DateTimeFormat('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+    hour12: false,
+  }).format(date);
+};
+
 export const TaskItem = memo(({ task }) => {
   const { onDelete, onMarkAsDone } = useTaskItem();
 
@@ -12,9 +31,19 @@ export const TaskItem = memo(({ task }) => {
           colorScheme="green"
           isChecked={task.done}
           onChange={() => onMarkAsDone(task._id)}
-          style={{ textDecoration: task.done ? 'line-through' : 'none' }}
         >
-          {task.description}
+          <Tooltip
+            label={`Added on ${formatDate(task.createdAt)}`}
+            hasArrow
+            placement="right-start"
+            openDelay={600}
+          >
+            <span
+              style={{ textDecoration: task.done ? 'line-through' : 'none' }}
+            >
+              {task.description}
+            </span>
+          </Tooltip>
         </Checkbox>
       </Box>
       <Stack w="20%" justify="flex-end" direction="row">

ui/pages/tasks/hooks/use-tasks.jsx

@@ -11,7 +11,7 @@ export function useTasks() {
 
   const tasks = useFind(
     Tasks,
-    [filter, { sort: { createdAt: -1 } }],
+    [filter, { sort: { createdAt: -1, description: -1 } }],
     [hideDone]
   );
   const count = useFind(Tasks, [{ userId }]).length;

ui/pages/tasks/tasks-page.jsx

@@ -12,6 +12,7 @@ import React, { Suspense } from 'react';
 import { TaskForm } from './components/task-form';
 import { TaskItem } from './components/task-item';
 import { useTasks } from './hooks/use-tasks';
+import '/api/tasks/tasks.methods';
 
 export default function TasksPage() {
   const { hideDone, setHideDone, tasks, count, pendingCount } = useTasks();