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']
}`;
}