3-column layout #699
@ -1,44 +1,50 @@
|
|||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from 'react';
|
||||||
|
import { FormattedMessage } from 'react-intl';
|
||||||
const MinuteInMs = 1_000 * 60;
|
|
||||||
const HourInMs = MinuteInMs * 60;
|
|
||||||
const DayInMs = HourInMs * 24;
|
|
||||||
|
|
||||||
export interface NoteTimeProps {
|
export interface NoteTimeProps {
|
||||||
from: number;
|
from: number;
|
||||||
fallback?: string;
|
fallback?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const secondsInAMinute = 60;
|
||||||
|
const secondsInAnHour = secondsInAMinute * 60;
|
||||||
|
const secondsInADay = secondsInAnHour * 24;
|
||||||
|
|
||||||
export default function NoteTime(props: NoteTimeProps) {
|
export default function NoteTime(props: NoteTimeProps) {
|
||||||
const [time, setTime] = useState<string>();
|
const [time, setTime] = useState<string | JSX.Element>();
|
||||||
const { from, fallback } = props;
|
const { from, fallback } = props;
|
||||||
|
|
||||||
const absoluteTime = new Intl.DateTimeFormat(undefined, {
|
const absoluteTime = new Intl.DateTimeFormat(undefined, {
|
||||||
dateStyle: "medium",
|
dateStyle: 'medium',
|
||||||
timeStyle: "long",
|
timeStyle: 'long',
|
||||||
}).format(from);
|
}).format(from);
|
||||||
const fromDate = new Date(from);
|
|
||||||
const isoDate = fromDate.toISOString();
|
const isoDate = new Date(from).toISOString();
|
||||||
|
|
||||||
function calcTime() {
|
function calcTime() {
|
||||||
const fromDate = new Date(from);
|
const fromDate = new Date(from);
|
||||||
const ago = new Date().getTime() - from;
|
const currentTime = new Date();
|
||||||
const absAgo = Math.abs(ago);
|
const timeDifference = Math.floor((currentTime.getTime() - fromDate.getTime()) / 1000);
|
||||||
if (absAgo > DayInMs) {
|
|
||||||
return fromDate.toLocaleDateString(undefined, {
|
if (timeDifference < secondsInAMinute) {
|
||||||
year: "2-digit",
|
return <FormattedMessage defaultMessage="now" id="kaaf1E" />;
|
||||||
month: "short",
|
} else if (timeDifference < secondsInAnHour) {
|
||||||
day: "2-digit",
|
return `${Math.floor(timeDifference / secondsInAMinute)}m`;
|
||||||
});
|
} else if (timeDifference < secondsInADay) {
|
||||||
} else if (absAgo > HourInMs) {
|
return `${Math.floor(timeDifference / secondsInAnHour)}h`;
|
||||||
return `${fromDate.getHours().toString().padStart(2, "0")}:${fromDate.getMinutes().toString().padStart(2, "0")}`;
|
|
||||||
} else if (absAgo < MinuteInMs) {
|
|
||||||
return fallback;
|
|
||||||
} else {
|
} else {
|
||||||
const mins = Math.floor(absAgo / MinuteInMs);
|
if (fromDate.getFullYear() === currentTime.getFullYear()) {
|
||||||
if (ago < 0) {
|
return fromDate.toLocaleDateString(undefined, {
|
||||||
return `in ${mins}m`;
|
month: 'short',
|
||||||
|
day: 'numeric',
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
return fromDate.toLocaleDateString(undefined, {
|
||||||
|
year: 'numeric',
|
||||||
|
month: 'short',
|
||||||
|
day: 'numeric',
|
||||||
|
});
|
||||||
}
|
}
|
||||||
return `${mins}m`;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -52,13 +58,13 @@ export default function NoteTime(props: NoteTimeProps) {
|
|||||||
}
|
}
|
||||||
return s;
|
return s;
|
||||||
});
|
});
|
||||||
}, MinuteInMs);
|
}, 60_000); // update every minute
|
||||||
return () => clearInterval(t);
|
return () => clearInterval(t);
|
||||||
}, [from]);
|
}, [from]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<time dateTime={isoDate} title={absoluteTime}>
|
<time dateTime={isoDate} title={absoluteTime}>
|
||||||
{time}
|
{time || fallback}
|
||||||
</time>
|
</time>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user