Merge pull request #86 from thecodingtree/36-date-calculation-for-notes-is-incorrect

Refactored Notes date label

Author: thecodingtree

app/_tests/db.test.tsx

@@ -6,7 +6,7 @@ import mockPrisma from '@/libs/__mocks__/prisma';
 
 import { contactCreator } from '@/server/api/creators';
 
-import { DeepMockProxy, mockDeep, mockReset } from 'vitest-mock-extended';
+import { mockDeep } from 'vitest-mock-extended';
 
 // 1- mock prisma module
 vi.mock('@/libs/__mocks__/prisma');
@@ -36,14 +36,16 @@ describe('DB Example Tests', () => {
     testMock.coreEntity.create.mockResolvedValue({
       id: '1',
       type: 'PROPERTY',
-      ownerId: '1',
+      creatorId: '1',
       teamId: null,
+      private: false,
       createdAt: new Date(),
       updatedAt: new Date(),
     });
 
     const result = await contactCreator({
       db: testMock,
+      user: { id: '1', email: 'test@example' },
       data: { name: 'test', surName: 'testerson', email: 'test@example' },
     });
 

app/_tests/utils.test.tsx

@@ -0,0 +1,56 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+import { format } from 'date-fns';
+
+import {
+  DAY_FORMAT,
+  TIME_FORMAT,
+  getNoteDateLabel,
+  getTaskDueLabel,
+} from '@/components/content/utils';
+
+// Test all date labels for Notes
+describe('getNoteDateLabel', () => {
+  it('should return the correct date labels Notes', () => {
+    const now = new Date();
+    const yesterday = new Date(now);
+    yesterday.setDate(now.getDate() - 1);
+    const lastWeek = new Date(now);
+    lastWeek.setDate(now.getDate() - 7);
+    const threeWeeksAgo = new Date(now);
+    threeWeeksAgo.setDate(now.getDate() - 21);
+    const lastMonth = new Date(now);
+    lastMonth.setMonth(now.getMonth() - 1);
+    const lastYear = new Date(now);
+    lastYear.setFullYear(now.getFullYear() - 1);
+
+    expect(getNoteDateLabel(now)).toBe(format(now, TIME_FORMAT));
+    expect(getNoteDateLabel(yesterday)).toBe(
+      'Yesterday at ' + format(yesterday, TIME_FORMAT),
+    );
+    expect(getNoteDateLabel(lastWeek)).toBe('Last week');
+    expect(getNoteDateLabel(threeWeeksAgo)).toBe('3 weeks ago');
+    expect(getNoteDateLabel(lastMonth)).toBe('1 month(s) ago');
+    expect(getNoteDateLabel(lastYear)).toBe('1 year(s) ago');
+  });
+});
+
+// Test all date labels for Tasks
+describe('getTaskDueLabel', () => {
+  it('should return the correct label for Tasks', () => {
+    const now = new Date();
+    const yesterday = new Date(now);
+    yesterday.setDate(now.getDate() - 1);
+    const tomorrow = new Date(now);
+    tomorrow.setDate(now.getDate() + 1);
+    const thisWeek = new Date(now);
+    thisWeek.setDate(now.getDate() + 3);
+    const nextWeek = new Date(now);
+    nextWeek.setDate(now.getDate() + 7);
+
+    expect(getTaskDueLabel(now)).toBe('Today');
+    expect(getTaskDueLabel(yesterday)).toBe('Overdue');
+    expect(getTaskDueLabel(tomorrow)).toBe('Tomorrow');
+    expect(getTaskDueLabel(thisWeek)).toBe(format(thisWeek, DAY_FORMAT));
+    expect(getTaskDueLabel(nextWeek)).toBe('Next week');
+  });
+});

components/content/Notes.tsx

@@ -1,6 +1,6 @@
 'use client';
-
 import { useState } from 'react';
+
 import { Textarea } from '@/components/ui/textarea';
 import { Button } from '@/components/ui/button';
 
@@ -11,47 +11,9 @@ import {
   CardFooter,
 } from '@/components/ui/card';
 import { getEntityIcon, getEntityLink } from '@/components/entities/utils';
+import { getNoteDateLabel } from './utils';
 import { NoteResult } from '@/server/note';
 
-const getDaysSinceDate = (date: Date): number => {
-  return Math.floor(
-    (new Date().getTime() - new Date(date).getTime()) / 86400000,
-  );
-};
-
-// TODO: This is a very naive implementation of this function
-export const getNoteDateLabel = (date: Date): string => {
-  const daysSinceDate = getDaysSinceDate(date);
-
-  if (daysSinceDate === 0) {
-    return date.toLocaleTimeString('en-US', { timeStyle: 'short' });
-  }
-
-  if (daysSinceDate === 1) {
-    return (
-      'Yesterday at ' + date.toLocaleTimeString('en-US', { timeStyle: 'short' })
-    );
-  }
-
-  if (daysSinceDate < 7) {
-    return `${daysSinceDate} days ago`;
-  }
-
-  if (daysSinceDate >= 7 && daysSinceDate < 14) {
-    return 'Last week';
-  }
-
-  if (daysSinceDate >= 14 && daysSinceDate < 31) {
-    return `${Math.floor(daysSinceDate / 7)} weeks ago}`;
-  }
-
-  if (daysSinceDate >= 31 && daysSinceDate < 365) {
-    return `${Math.floor(daysSinceDate / 31)} month(s) ago`;
-  }
-
-  return `${Math.floor(daysSinceDate / 365)} year(s) ago`;
-};
-
 export function Note({
   date,
   content,

components/content/Task.tsx

@@ -1,14 +1,5 @@
 'use client';
 
-import {
-  isToday,
-  isTomorrow,
-  isThisWeek,
-  isBefore,
-  differenceInWeeks,
-  format,
-} from 'date-fns';
-
 import { useState } from 'react';
 import { Textarea } from '@/components/ui/textarea';
 import { Button } from '@/components/ui/button';
@@ -21,39 +12,8 @@ import {
   CardDescription,
   CardHeader,
 } from '@/components/ui/card';
-import { getTaskIcon, getTaskDateLabel } from '@/components/tasks/utils';
-
-const getDaysUntilDate = (date: Date): number => {
-  return Math.floor(
-    (new Date(date).getTime() - new Date().getTime()) / 86400000,
-  );
-};
-
-export const getTaskDueLabel = (date: Date): string => {
-  const now = new Date();
-
-  if (isBefore(date, now)) {
-    return 'Overdue';
-  }
-
-  if (isToday(date)) {
-    return 'Today';
-  }
-
-  if (isTomorrow(date)) {
-    return 'Tomorrow';
-  }
-
-  if (differenceInWeeks(date, now) === 0) {
-    return `${format(date, 'EEEE')}`;
-  }
-
-  if (differenceInWeeks(date, now) === 1) {
-    return 'Next week';
-  }
-
-  return `${differenceInWeeks(date, now)} weeks from now`;
-};
+import { getTaskIcon } from '@/components/tasks/utils';
+import { getTaskDueLabel } from '@/components/content/utils';
 
 export default function Task({
   type,

components/content/utils.ts

@@ -0,0 +1,75 @@
+import {
+  isPast,
+  isToday,
+  isTomorrow,
+  isYesterday,
+  differenceInCalendarDays,
+  differenceInCalendarWeeks,
+  differenceInCalendarMonths,
+  differenceInCalendarYears,
+  format,
+} from 'date-fns';
+
+// etc: 12:00 PM
+export const TIME_FORMAT = 'h:mm a';
+export const DAY_FORMAT = 'EEEE';
+
+export const getNoteDateLabel = (date: Date): string => {
+  const now = new Date();
+  const daysSinceDate = differenceInCalendarDays(now, date);
+  const weeksSinceDate = differenceInCalendarWeeks(now, date);
+  const monthsSinceDate = differenceInCalendarMonths(now, date);
+  const yearsSinceDate = differenceInCalendarYears(now, date);
+
+  if (isToday(date)) {
+    return format(date, TIME_FORMAT);
+  }
+
+  if (isYesterday(date)) {
+    return `Yesterday at ${format(date, TIME_FORMAT)}`;
+  }
+
+  if (weeksSinceDate === 0) {
+    return `${daysSinceDate} days ago`;
+  }
+
+  if (weeksSinceDate === 1) {
+    return 'Last week';
+  }
+
+  if (weeksSinceDate > 1 && weeksSinceDate < 4) {
+    return `${weeksSinceDate} weeks ago`;
+  }
+
+  if (monthsSinceDate >= 1 && monthsSinceDate < 12) {
+    return `${monthsSinceDate} month(s) ago`;
+  }
+
+  return `${yearsSinceDate} year(s) ago`;
+};
+
+export const getTaskDueLabel = (date: Date): string => {
+  const now = new Date();
+
+  if (isPast(date)) {
+    return 'Overdue';
+  }
+
+  if (isToday(date)) {
+    return 'Today';
+  }
+
+  if (isTomorrow(date)) {
+    return 'Tomorrow';
+  }
+
+  if (differenceInCalendarWeeks(date, now) === 0) {
+    return `${format(date, DAY_FORMAT)}`;
+  }
+
+  if (differenceInCalendarWeeks(date, now) === 1) {
+    return 'Next week';
+  }
+
+  return `${differenceInCalendarWeeks(date, now)} weeks from now`;
+};

components/entities/EntityNotesTable.tsx

@@ -11,7 +11,8 @@ import {
   TableCell,
 } from '@/components/ui/table';
 
-import { AddNote, getNoteDateLabel } from '@/components/content/Notes';
+import { AddNote } from '@/components/content/Notes';
+import { getNoteDateLabel } from '@/components/content/utils';
 
 import { NoteType } from '@/server/sharedTypes';
 

server/api/creators.ts

@@ -52,7 +52,7 @@ export const contactCreator = async ({
     },
   } as Prisma.CoreEntityCreateInput;
 
-  const result = await createCoreEntity({ db, data: contactCreateInput });
+  const result = await createCoreEntity({ db, user, data: contactCreateInput });
 
   return contactDataMapper(result, user);
 };

server/coreEntities.ts

@@ -1,6 +1,6 @@
 import { Prisma, PrismaClient, CoreEntityType } from '@prisma/client';
 
-import { EntityFilterType } from '@/server/sharedTypes';
+import { EntityFilterType, SessionUser } from '@/server/sharedTypes';
 import { getTeamUser } from './team';
 
 const coreEntityInclude = Prisma.validator<Prisma.CoreEntityInclude>()({
@@ -132,11 +132,13 @@ export const getCoreEntity = ({
 export const createCoreEntity = async ({
   db,
   data,
+  user,
 }: {
   db: PrismaClient;
   data: Prisma.CoreEntityCreateInput;
+  user?: SessionUser;
 }) => {
-  const teamUser = await getTeamUser({ db });
+  const teamUser = await getTeamUser({ db, user: user?.id });
 
   return db.coreEntity.create({
     data: {