xevion/rdap
1
0
Fork 0
mirror of https://github.com/Xevion/rdap.git synced 2025-12-06 19:16:03 -06:00
Code Issues Packages Projects Releases Wiki Activity

Use react-timeago for DynamicDate component, improve relative timing display

Browse Source
This commit is contained in:
Xevion
2024-05-09 22:09:42 -05:00
parent 1b78d7e37c
commit 757adcf385
3 changed files with 9 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -20,6 +20,7 @@
"react-dom": "18.2.0", "react-dom": "18.2.0",
"react-hook-form": "^7.42.1", "react-hook-form": "^7.42.1",
"react-ogp": "^0.0.3", "react-ogp": "^0.0.3",
"react-timeago": "^7.2.0",
"sass": "^1.57.1", "sass": "^1.57.1",
"true-myth": "^7.1.0", "true-myth": "^7.1.0",
"usehooks-ts": "^2.9.1", "usehooks-ts": "^2.9.1",

8
src/components/common/DynamicDate.tsx
View File

@@ -1,6 +1,7 @@
import type { FunctionComponent } from "react"; import type { FunctionComponent } from "react";
import { useBoolean } from "usehooks-ts"; import { useBoolean } from "usehooks-ts";
import { format, formatDistanceToNow } from "date-fns"; import { format, formatDistanceToNow } from "date-fns";
import TimeAgo from "react-timeago";
type DynamicDateProps = { type DynamicDateProps = {
value: Date | number; value: Date | number;
@@ -23,11 +24,8 @@ const DynamicDate: FunctionComponent<DynamicDateProps> = ({
<button onClick={toggleFormat}> <button onClick={toggleFormat}>
<span title={date.toISOString()}> <span title={date.toISOString()}>
{showAbsolute {showAbsolute
? format(date, absoluteFormat ?? "LLL do, y HH:mm:ss") ? format(date, absoluteFormat ?? "LLL do, y HH:mm:ss xxx")
: formatDistanceToNow(date, { : <TimeAgo date={date} />}
includeSeconds: true,
addSuffix: true,
})}
</span> </span>
</button> </button>
); );

5
yarn.lock
View File

@@ -2032,6 +2032,11 @@ react-ogp@^0.0.3:
resolved "https://registry.yarnpkg.com/react-ogp/-/react-ogp-0.0.3.tgz#f3d49ff49e593576778f6a11824a4ccb2d8b427d" resolved "https://registry.yarnpkg.com/react-ogp/-/react-ogp-0.0.3.tgz#f3d49ff49e593576778f6a11824a4ccb2d8b427d"
integrity sha512-+m5my7G6dxzN79e1e/M5VV2MmM2sXrTqs+hfL8sFHsjWn4PMv3P8eD/aMSHPibvp6BYsiFCeWMMSzcqUCIQr9w== integrity sha512-+m5my7G6dxzN79e1e/M5VV2MmM2sXrTqs+hfL8sFHsjWn4PMv3P8eD/aMSHPibvp6BYsiFCeWMMSzcqUCIQr9w==
react-timeago@^7.2.0:
version "7.2.0"
resolved "https://registry.yarnpkg.com/react-timeago/-/react-timeago-7.2.0.tgz#ae929d7423a63cbc3dc228e49d22fbf586d459ca"
integrity sha512-2KsBEEs+qRhKx/kekUVNSTIpop3Jwd7SRBm0R4Eiq3mPeswRGSsftY9FpKsE/lXLdURyQFiHeHFrIUxLYskG5g==
react@18.2.0: react@18.2.0:
version "18.2.0" version "18.2.0"
resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5" resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"