fix: review changes

Kyutech-C3 · Nov 16, 2023 · 9d7d8ba · 9d7d8ba
1 parent 0e868d6
commit 9d7d8ba
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 98 deletions.
diff --git a/src/components/ui/DateDiffLabel/constant.ts b/src/components/ui/DateDiffLabel/constant.ts
@@ -1,34 +1,22 @@
 export const DATE_DIFF_LABEL = {
-  ja: {
-    second: {
-      future: { one: '秒後', other: '秒後' },
-      past: { one: '秒前', other: '秒前' },
-    },
-    minute: {
-      future: { one: '分後', other: '分後' },
-      past: { one: '分前', other: '分前' },
-    },
-    hour: {
-      future: { one: '時間後', other: '時間後' },
-      past: { one: '時間前', other: '時間前' },
-    },
-    day: {
-      future: { one: '日後', other: '日後' },
-      past: { one: '日前', other: '日前' },
-    },
-    week: {
-      future: { one: '週間後', other: '週間後' },
-      past: { one: '週間前', other: '週間前' },
-    },
-    month: {
-      future: { one: 'ヶ月後', other: 'ヶ月後' },
-      past: { one: 'ヶ月前', other: 'ヶ月前' },
-    },
-    year: {
-      future: { one: '年後', other: '年後' },
-      past: { one: '年前', other: '年前' },
-    },
-  } as const,
+  second: {
+    past: '秒前',
+  },
+  minute: {
+    past: '分前',
+  },
+  hour: {
+    past: '時間前',
+  },
+  day: {
+    past: '日前',
+  },
+  week: {
+    past: '週間前',
+  },
+  month: {
+    past: 'ヶ月前',
+  },
 } as const;
 
 export const MINUTE = 60;

diff --git a/src/components/ui/DateDiffLabel/index.stories.tsx b/src/components/ui/DateDiffLabel/index.stories.tsx
@@ -52,40 +52,4 @@ export const ThreeMonthAgo: Story = {
 
 export const YearAgo: Story = {
   args: { date: new Date(Date.now() - 1000 * 60 * 60 * 24 * 365) },
-};
-
-export const SecFuture: Story = {
-  args: { date: new Date(Date.now() + 1001) },
-};
-
-export const MinFuture: Story = {
-  args: { date: new Date(Date.now() + 1000 * 61) },
-};
-
-export const HourFuture: Story = {
-  args: { date: new Date(Date.now() + 1000 * 60 * 61) },
-};
-
-export const DayFuture: Story = {
-  args: { date: new Date(Date.now() + 1000 * 60 * 60 * 25) },
-};
-
-export const WeekFuture: Story = {
-  args: { date: new Date(Date.now() + 1000 * 60 * 60 * 24 * 8) },
-};
-
-export const MonthFuture: Story = {
-  args: { date: new Date(Date.now() + 1000 * 60 * 60 * 24 * 31) },
-};
-
-export const TwoMonthFuture: Story = {
-  args: { date: new Date(Date.now() + 1000 * 60 * 60 * 24 * 31 * 2) },
-}
-
-export const ThreeMonthFuture: Story = {
-  args: { date: new Date(Date.now() + 1000 * 60 * 60 * 24 * 31 * 3) },
-}
-
-export const YearFuture: Story = {
-  args: { date: new Date(Date.now() + 1000 * 60 * 60 * 24 * 366) },
 };
diff --git a/src/components/ui/DateDiffLabel/index.test.tsx b/src/components/ui/DateDiffLabel/index.test.tsx
@@ -6,34 +6,34 @@ import { DateDiffLabel } from ".";
 describe('test ui/DateDiffLabel', () => {
   const now = new Date(2023, 5, 15);
  it('should display seconds when difference is less than a minute', () => {
-    render(<DateDiffLabel date={new Date(2023, 5, 15, 0, 0, 30)} now={now} />);
-    expect(screen.getByText(/秒後/)).toBeInTheDocument();
+    render(<DateDiffLabel date={new Date(2023, 5, 14, 23, 59, 30)} now={now} />);
+    expect(screen.getByText(/秒前/)).toBeInTheDocument();
   });
 
   it('should display minutes when difference is less than an hour', () => {
-    render(<DateDiffLabel date={new Date(2023, 5, 15, 0, 30)} now={now} />);
-    expect(screen.getByText(/分後/)).toBeInTheDocument();
+    render(<DateDiffLabel date={new Date(2023, 5, 14, 23, 30)} now={now} />);
+    expect(screen.getByText(/分前/)).toBeInTheDocument();
   });
 
   it('should display hours when difference is less than a day', () => {
-    render(<DateDiffLabel date={new Date(2023, 5, 15, 1, 0)} now={now} />);
-    expect(screen.getByText(/時間後/)).toBeInTheDocument();
+    render(<DateDiffLabel date={new Date(2023, 5, 14, 23, 0)} now={now} />);
+    expect(screen.getByText(/時間前/)).toBeInTheDocument();
   });
 
   it('should display days when difference is less than a week', () => {
-    render(<DateDiffLabel date={new Date(2023, 5, 16)} now={now} />);
-    expect(screen.getByText(/日後/)).toBeInTheDocument();
+    render(<DateDiffLabel date={new Date(2023, 5, 14)} now={now} />);
+    expect(screen.getByText(/日前/)).toBeInTheDocument();
   });
 
   it('should display weeks when difference is less than a month', () => {
-    render(<DateDiffLabel date={new Date(2023, 5, 22)} now={now} />);
-    expect(screen.getByText(/週間後/)).toBeInTheDocument();
+    render(<DateDiffLabel date={new Date(2023, 5, 8)} now={now} />);
+    expect(screen.getByText(/週間前/)).toBeInTheDocument();
   });
 
 
   it('should display months when difference is less than a year', () => {
-    render(<DateDiffLabel date={new Date(2023, 6, 15)} now={now} />);
-    expect(screen.getByText(/ヶ月後/)).toBeInTheDocument();
+    render(<DateDiffLabel date={new Date(2023, 4, 15)} now={now} />);
+    expect(screen.getByText(/ヶ月前/)).toBeInTheDocument();
   });
 
   it('should display date in MM/DD format for dates within the same year', () => {

diff --git a/src/components/ui/DateDiffLabel/index.tsx b/src/components/ui/DateDiffLabel/index.tsx
@@ -12,7 +12,7 @@ type Prop = {
 
 export const DateDiffLabel: FC<Prop> = ({ 
   date, 
-  now, 
+  now = new Date(), 
   className,
 }) => {
   const nowDate = now ?? new Date();

diff --git a/src/components/ui/DateDiffLabel/logic.ts b/src/components/ui/DateDiffLabel/logic.ts
@@ -14,43 +14,30 @@ export const DateToDiffLabel = (
   const diffInSeconds = Math.abs(
     Math.floor((now.getTime() - date.getTime()) / 1000)
   );
-  const period = now.getTime() - date.getTime() > 0 ? 'past' : 'future';
 
   if(diffInSeconds <= MONTH * 3) {
     if (diffInSeconds < MINUTE)
         return `${diffInSeconds}${
-            DATE_DIFF_LABEL['ja']['second'][period][
-                diffInSeconds == 1 ? 'one' : 'other'
-            ]
+            DATE_DIFF_LABEL['second']['past']
         }`;
     if (diffInSeconds < HOUR)
         return `${Math.floor(diffInSeconds / MINUTE)}${
-            DATE_DIFF_LABEL['ja']['minute'][period][
-                Math.floor(diffInSeconds / MINUTE) == 1 ? 'one' : 'other'
-            ]
+            DATE_DIFF_LABEL['minute']['past']
         }`;
     if (diffInSeconds < DAY)
         return `${Math.floor(diffInSeconds / HOUR)}${
-            DATE_DIFF_LABEL['ja']['hour'][period][
-                Math.floor(diffInSeconds / HOUR) == 1 ? 'one' : 'other'
-            ]
+            DATE_DIFF_LABEL['hour']['past']
         }`;
     if (diffInSeconds < WEEK)
         return `${Math.floor(diffInSeconds / DAY)}${
-            DATE_DIFF_LABEL['ja']['day'][period][
-                Math.floor(diffInSeconds / DAY) == 1 ? 'one' : 'other'
-            ]
+            DATE_DIFF_LABEL['day']['past']
         }`;
     if (diffInSeconds < MONTH) 
         return `${Math.floor(diffInSeconds / WEEK)}${
-            DATE_DIFF_LABEL['ja']['week'][period][
-                Math.floor(diffInSeconds / WEEK) == 1 ? 'one' : 'other'
-            ]
+            DATE_DIFF_LABEL['week']['past']
         }`;
     return `${Math.floor(diffInSeconds / MONTH)}${
-      DATE_DIFF_LABEL['ja']['month'][period][
-        Math.floor(diffInSeconds / MONTH) == 1 ? 'one' : 'other'
-      ]
+      DATE_DIFF_LABEL['month']['past']
     }`;
   }