From 9085e235e132bfaa3789729840a616754be20f9f Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Thu, 17 Aug 2023 13:15:37 +0200 Subject: [PATCH] add tooltip for post dates --- package.json | 1 + src/components/views/All.jsx | 21 ++++++++-- src/components/views/Board.jsx | 53 +++++++++++++++++++++----- src/components/views/Subscriptions.jsx | 21 ++++++++-- src/components/views/Thread.jsx | 23 +++++++++-- src/utils/getFormattedTime.js | 14 +++++++ yarn.lock | 14 ++++++- 7 files changed, 124 insertions(+), 23 deletions(-) create mode 100644 src/utils/getFormattedTime.js diff --git a/package.json b/package.json index 990d4f51..bcaf0e0a 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "eslint": "8.36.0", "eslint-config-react-app": "7.0.1", "ext-name": "5.0.0", + "javascript-time-ago": "^2.5.9", "lodash": "4.17.21", "mock-require": "3.0.3", "postcss": "8.4.21", diff --git a/src/components/views/All.jsx b/src/components/views/All.jsx index 01a647c5..3bfee60e 100755 --- a/src/components/views/All.jsx +++ b/src/components/views/All.jsx @@ -29,6 +29,7 @@ import SettingsModal from '../modals/SettingsModal'; import findShortParentCid from '../../utils/findShortParentCid'; import getCommentMediaInfo from '../../utils/getCommentMediaInfo'; import getDate from '../../utils/getDate'; +import getFormattedTime from '../../utils/getFormattedTime'; import handleAddressClick from '../../utils/handleAddressClick'; import handleImageClick from '../../utils/handleImageClick'; import handleQuoteClick from '../../utils/handleQuoteClick'; @@ -851,7 +852,10 @@ const All = () => { {{({ shortAuthorAddress }) => (shortAuthorAddress)}} )   - {getDate(thread.timestamp)} + {getDate(thread.timestamp)}   c/ @@ -1179,7 +1183,10 @@ const All = () => {   - {getDate(reply.timestamp)} + {getDate(reply.timestamp)}   c/ @@ -1778,7 +1785,10 @@ const All = () => { tooltipPlace="top" className="offline-mobile-sub" /> - + {getDate(thread.timestamp)}   c/ @@ -2016,7 +2026,10 @@ const All = () => { tooltipPlace="top" className="offline-mobile-sub-reply" /> - + {getDate(reply.timestamp)}  c/ {reply.shortCid ? ( diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx index 02d51e16..15e82c62 100755 --- a/src/components/views/Board.jsx +++ b/src/components/views/Board.jsx @@ -30,6 +30,7 @@ import SettingsModal from '../modals/SettingsModal'; import findShortParentCid from '../../utils/findShortParentCid'; import getCommentMediaInfo from '../../utils/getCommentMediaInfo'; import getDate from '../../utils/getDate'; +import getFormattedTime from '../../utils/getFormattedTime'; import handleAddressClick from '../../utils/handleAddressClick'; import handleImageClick from '../../utils/handleImageClick'; import handleQuoteClick from '../../utils/handleQuoteClick'; @@ -953,7 +954,10 @@ const Board = () => { onClick={() => {setIsAdminListOpen(!isAdminListOpen)}} >## Board Admins   - {getDate(subplebbit.createdAt)} + {getDate(subplebbit.createdAt)}   Sticky @@ -1043,7 +1047,10 @@ const Board = () => { style={{marginBottom: "-15px"}}>Rules   - {getDate(subplebbit.createdAt)} + {getDate(subplebbit.createdAt)}  
@@ -1078,7 +1085,10 @@ const Board = () => { onClick={() => {setIsAdminListOpen(!isAdminListOpen)}} >## Board Admins   - {getDate(subplebbit.createdAt)} + {getDate(subplebbit.createdAt)}   Sticky @@ -1168,7 +1178,10 @@ const Board = () => { style={{marginBottom: "-15px"}}>Rules   - {getDate(subplebbit.createdAt)} + {getDate(subplebbit.createdAt)}  
@@ -1225,7 +1238,10 @@ const Board = () => { onClick={() => {setIsAdminListOpen(!isAdminListOpen)}} >## Board Admins   - {getDate(subplebbit.createdAt)} + {getDate(subplebbit.createdAt)}   Sticky @@ -1313,7 +1329,10 @@ const Board = () => { style={{marginBottom: "-15px"}}>Welcome to {subplebbit.title || subplebbit.address}   - {getDate(subplebbit.createdAt)} + {getDate(subplebbit.createdAt)}   {subplebbit.suggested?.avatarUrl ? ( @@ -1513,7 +1532,12 @@ const Board = () => { {({ shortAuthorAddress }) => (shortAuthorAddress)} )   - {getDate(thread.timestamp)} + + {getDate(thread.timestamp)} +   c/ @@ -1856,7 +1880,10 @@ const Board = () => {   - {getDate(reply.timestamp)} + {getDate(reply.timestamp)}   c/ @@ -2429,7 +2456,10 @@ const Board = () => { ) : null} - + {getDate(thread.timestamp)}   c/ @@ -2656,7 +2686,10 @@ const Board = () => {
- + {getDate(reply.timestamp)}  c/ {reply.shortCid ? ( diff --git a/src/components/views/Subscriptions.jsx b/src/components/views/Subscriptions.jsx index 40829f72..6e674085 100755 --- a/src/components/views/Subscriptions.jsx +++ b/src/components/views/Subscriptions.jsx @@ -30,6 +30,7 @@ import SettingsModal from '../modals/SettingsModal'; import findShortParentCid from '../../utils/findShortParentCid'; import getCommentMediaInfo from '../../utils/getCommentMediaInfo'; import getDate from '../../utils/getDate'; +import getFormattedTime from '../../utils/getFormattedTime'; import handleAddressClick from '../../utils/handleAddressClick'; import handleImageClick from '../../utils/handleImageClick'; import handleQuoteClick from '../../utils/handleQuoteClick'; @@ -862,7 +863,10 @@ const Subscriptions = () => { {{({ shortAuthorAddress }) => (shortAuthorAddress)}} )   - {getDate(thread.timestamp)} + {getDate(thread.timestamp)}   c/ @@ -1190,7 +1194,10 @@ const Subscriptions = () => {   - {getDate(reply.timestamp)} + {getDate(reply.timestamp)}   c/ @@ -1789,7 +1796,10 @@ const Subscriptions = () => { tooltipPlace="top" className="offline-mobile-sub" /> - + {getDate(thread.timestamp)}   c/ @@ -2027,7 +2037,10 @@ const Subscriptions = () => { tooltipPlace="top" className="offline-mobile-sub-reply" /> - + {getDate(reply.timestamp)}  c/ {reply.shortCid ? ( diff --git a/src/components/views/Thread.jsx b/src/components/views/Thread.jsx index edc69436..541530f8 100755 --- a/src/components/views/Thread.jsx +++ b/src/components/views/Thread.jsx @@ -28,6 +28,7 @@ import SettingsModal from '../modals/SettingsModal'; import findShortParentCid from '../../utils/findShortParentCid'; import getCommentMediaInfo from '../../utils/getCommentMediaInfo'; import getDate from '../../utils/getDate'; +import getFormattedTime from '../../utils/getFormattedTime'; import handleAddressClick from '../../utils/handleAddressClick'; import handleImageClick from '../../utils/handleImageClick'; import handleQuoteClick from '../../utils/handleQuoteClick'; @@ -998,7 +999,12 @@ const Thread = () => { )   - {getDate(comment?.timestamp)} + + {getDate(comment?.timestamp)} +   c/ @@ -1295,7 +1301,10 @@ const Thread = () => {   - + {getDate(reply?.timestamp)}  c/ @@ -1750,7 +1759,10 @@ const Thread = () => { {comment.title} ) : null} - + {getDate(comment?.timestamp)}   c/ @@ -1943,7 +1955,10 @@ const Thread = () => {
- + {getDate(reply?.timestamp)}  c/ {reply.shortCid ? ( diff --git a/src/utils/getFormattedTime.js b/src/utils/getFormattedTime.js new file mode 100644 index 00000000..3f301819 --- /dev/null +++ b/src/utils/getFormattedTime.js @@ -0,0 +1,14 @@ +import en from 'javascript-time-ago/locale/en' +import TimeAgo from 'javascript-time-ago' + +TimeAgo.addDefaultLocale(en); +const timeAgo = new TimeAgo('en-US'); + +const getFormattedTime = (timestamp) => { + try { + return timeAgo.format(timestamp * 1000) + } + catch (e) {} +}; + +export default getFormattedTime; \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 896338a8..12a1c00f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8997,6 +8997,13 @@ jake@^10.8.5: filelist "^1.0.4" minimatch "^3.1.2" +javascript-time-ago@^2.5.9: + version "2.5.9" + resolved "https://registry.yarnpkg.com/javascript-time-ago/-/javascript-time-ago-2.5.9.tgz#3c5d8012cd493d764c6b26a0ffe6e8b20afcf1fe" + integrity sha512-pQ8mNco/9g9TqWXWWjP0EWl6i/lAQScOyEeXy5AB+f7MfLSdgyV9BJhiOD1zrIac/lrxPYOWNbyl/IW8CW5n0A== + dependencies: + relative-time-format "^1.1.6" + jest-changed-files@^27.5.1: version "27.5.1" resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-27.5.1.tgz#a348aed00ec9bf671cc58a66fcbe7c3dfd6a68f5" @@ -12496,7 +12503,7 @@ react-tooltip@5.10.0: "@floating-ui/dom" "1.2.3" classnames "^2.3.2" -react-virtuoso@^4.5.0: +react-virtuoso@4.5.0: version "4.5.0" resolved "https://registry.yarnpkg.com/react-virtuoso/-/react-virtuoso-4.5.0.tgz#0bc043b4e3e928e7891aa541dd7e55d5b46db8c8" integrity sha512-OMP6XrzJMMos1vbJZC16RxGW7utAxUMP7i5PNPi6epBNVH7nz+CF/DlmecNBep5wyjLud51dQ5epjb2A0w9W/Q== @@ -12700,6 +12707,11 @@ relateurl@^0.2.7: resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9" integrity sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog== +relative-time-format@^1.1.6: + version "1.1.6" + resolved "https://registry.yarnpkg.com/relative-time-format/-/relative-time-format-1.1.6.tgz#724a5fbc3794b8e0471b6b61419af2ce699eb9f1" + integrity sha512-aCv3juQw4hT1/P/OrVltKWLlp15eW1GRcwP1XdxHrPdZE9MtgqFpegjnTjLhi2m2WI9MT/hQQtE+tjEWG1hgkQ== + remark-breaks@3.0.2: version "3.0.2" resolved "https://registry.yarnpkg.com/remark-breaks/-/remark-breaks-3.0.2.tgz#f466b9d3474d7323146c0149fc1496dabadd908e"