diff --git a/src/components/ui/DateDiffLabel/constant.ts b/src/components/ui/DateDiffLabel/constant.ts index a08811c..4edc828 100644 --- 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 index e1c6e11..46a3779 100644 --- 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) }, }; \ No newline at end of file diff --git a/src/components/ui/DateDiffLabel/index.test.tsx b/src/components/ui/DateDiffLabel/index.test.tsx index c360307..8d8be0d 100644 --- 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(); - expect(screen.getByText(/秒後/)).toBeInTheDocument(); + render(); + expect(screen.getByText(/秒前/)).toBeInTheDocument(); }); it('should display minutes when difference is less than an hour', () => { - render(); - expect(screen.getByText(/分後/)).toBeInTheDocument(); + render(); + expect(screen.getByText(/分前/)).toBeInTheDocument(); }); it('should display hours when difference is less than a day', () => { - render(); - expect(screen.getByText(/時間後/)).toBeInTheDocument(); + render(); + expect(screen.getByText(/時間前/)).toBeInTheDocument(); }); it('should display days when difference is less than a week', () => { - render(); - expect(screen.getByText(/日後/)).toBeInTheDocument(); + render(); + expect(screen.getByText(/日前/)).toBeInTheDocument(); }); it('should display weeks when difference is less than a month', () => { - render(); - expect(screen.getByText(/週間後/)).toBeInTheDocument(); + render(); + expect(screen.getByText(/週間前/)).toBeInTheDocument(); }); it('should display months when difference is less than a year', () => { - render(); - expect(screen.getByText(/ヶ月後/)).toBeInTheDocument(); + render(); + 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 index fb6e30a..31204b3 100644 --- a/src/components/ui/DateDiffLabel/index.tsx +++ b/src/components/ui/DateDiffLabel/index.tsx @@ -12,7 +12,7 @@ type Prop = { export const DateDiffLabel: FC = ({ 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 index 77319c8..2af9ce6 100644 --- 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'] }`; }