External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

add tooltip for post dates

Browse Source
This commit is contained in:
plebeius.eth
2023-08-17 13:15:37 +02:00
parent 9b66334577
commit 9085e235e1
7 changed files with 124 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+1
View File
@@ -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",
src/components/views/All.jsx
+17 -4
View File
@@ -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 = () => {
{<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>}
</span>)
&nbsp;
<span key={`dt-${index}`} className="date-time" data-utc="data">{getDate(thread.timestamp)}</span>
<span key={`dt-${index}`}
data-tooltip-id="tooltip"
data-tooltip-content={getFormattedTime(thread.timestamp)}
data-tooltip-place="top">{getDate(thread.timestamp)}</span>
&nbsp;
<span key={`pn-${index}`} className="post-number post-number-desktop">
<span key={`pl1-${index}`}>c/</span>
@@ -1179,7 +1183,10 @@ const All = () => {
</span>
</span>
&nbsp;
<span key={`dt-${index}`} className="date-time" data-utc="data">{getDate(reply.timestamp)}</span>
<span key={`dt-${index}`} className="date-time"
data-tooltip-id="tooltip"
data-tooltip-content={getFormattedTime(reply.timestamp)}
data-tooltip-place="top">{getDate(reply.timestamp)}</span>
&nbsp;
<span key={`pn-${index}`} className="post-number post-number-desktop">
<span id="reply-button" style={{cursor: 'pointer'}} key={`pl1-${index}`} title="Link to this post">c/</span>
@@ -1778,7 +1785,10 @@ const All = () => {
tooltipPlace="top"
className="offline-mobile-sub" />
</span>
<span key={`mob-dt-${index}`} className="date-time-mobile post-number-mobile">
<span key={`mob-dt-${index}`} className="date-time-mobile post-number-mobile"
data-tooltip-id="tooltip"
data-tooltip-content={getFormattedTime(thread.timestamp)}
data-tooltip-place="top">
{getDate(thread.timestamp)}
&nbsp;
<span key={`mob-no-${index}`}>c/</span>
@@ -2016,7 +2026,10 @@ const All = () => {
tooltipPlace="top"
className="offline-mobile-sub-reply" />
</span>
<span key={`mob-dt-${index}`} className="date-time-mobile post-number-mobile">
<span key={`mob-dt-${index}`} className="date-time-mobile post-number-mobile"
data-tooltip-id="tooltip"
data-tooltip-content={getFormattedTime(reply.timestamp)}
data-tooltip-place="top">
{getDate(reply.timestamp)}&nbsp;
<span key={`mob-pl1-${index}`}>c/</span>
{reply.shortCid ? (
src/components/views/Board.jsx
+43 -10
View File
@@ -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</span>
&nbsp;
<span className="date-time">{getDate(subplebbit.createdAt)}</span>
<span className="date-time"
data-tooltip-id="tooltip"
data-tooltip-content={getFormattedTime(subplebbit.createdAt)}
data-tooltip-place="top">{getDate(subplebbit.createdAt)}</span>
&nbsp;
<img src="assets/sticky.gif" alt="Sticky" title="Sticky" style={{marginBottom: "-1px",
imageRendering: "pixelated",}} />
@@ -1043,7 +1047,10 @@ const Board = () => {
style={{marginBottom: "-15px"}}>Rules</span>
&nbsp;
</span>
<span className="date-time-mobile post-number-mobile">{getDate(subplebbit.createdAt)}</span>
<span className="date-time-mobile post-number-mobile"
data-tooltip-id="tooltip"
data-tooltip-content={getFormattedTime(subplebbit.createdAt)}
data-tooltip-place="top">{getDate(subplebbit.createdAt)}</span>
&nbsp;
</div>
<blockquote className="post-message-mobile">
@@ -1078,7 +1085,10 @@ const Board = () => {
onClick={() => {setIsAdminListOpen(!isAdminListOpen)}}
>## Board Admins</span>
&nbsp;
<span className="date-time">{getDate(subplebbit.createdAt)}</span>
<span className="date-time"
data-tooltip-id="tooltip"
data-tooltip-content={getFormattedTime(subplebbit.createdAt)}
data-tooltip-place="top">{getDate(subplebbit.createdAt)}</span>
&nbsp;
<img src="assets/sticky.gif" alt="Sticky" title="Sticky" style={{marginBottom: "-1px",
imageRendering: "pixelated",}} />
@@ -1168,7 +1178,10 @@ const Board = () => {
style={{marginBottom: "-15px"}}>Rules</span>
&nbsp;
</span>
<span className="date-time-mobile post-number-mobile">{getDate(subplebbit.createdAt)}</span>
<span className="date-time-mobile post-number-mobile"
data-tooltip-id="tooltip"
data-tooltip-content={getFormattedTime(subplebbit.createdAt)}
data-tooltip-place="top">{getDate(subplebbit.createdAt)}</span>
&nbsp;
</div>
<blockquote className="post-message-mobile">
@@ -1225,7 +1238,10 @@ const Board = () => {
onClick={() => {setIsAdminListOpen(!isAdminListOpen)}}
>## Board Admins</span>
&nbsp;
<span className="date-time">{getDate(subplebbit.createdAt)}</span>
<span className="date-time"
data-tooltip-id="tooltip"
data-tooltip-content={getFormattedTime(subplebbit.createdAt)}
data-tooltip-place="top">{getDate(subplebbit.createdAt)}</span>
&nbsp;
<img src="assets/sticky.gif" alt="Sticky" title="Sticky" style={{marginBottom: "-1px",
imageRendering: "pixelated",}} />
@@ -1313,7 +1329,10 @@ const Board = () => {
style={{marginBottom: "-15px"}}>Welcome to {subplebbit.title || subplebbit.address}</span>
&nbsp;
</span>
<span className="date-time-mobile post-number-mobile">{getDate(subplebbit.createdAt)}</span>
<span className="date-time-mobile post-number-mobile"
data-tooltip-id="tooltip"
data-tooltip-content={getFormattedTime(subplebbit.createdAt)}
data-tooltip-place="top">{getDate(subplebbit.createdAt)}</span>
&nbsp;
</div>
{subplebbit.suggested?.avatarUrl ? (
@@ -1513,7 +1532,12 @@ const Board = () => {
<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>
</span>)
&nbsp;
<span key={`dt-${index}`} className="date-time" data-utc="data">{getDate(thread.timestamp)}</span>
<span key={`dt-${index}`} className="date-time"
data-tooltip-id="tooltip"
data-tooltip-content={getFormattedTime(thread?.timestamp)}
data-tooltip-place="top">
{getDate(thread.timestamp)}
</span>
&nbsp;
<span key={`pn-${index}`} className="post-number post-number-desktop">
<span key={`pl1-${index}`}>c/</span>
@@ -1856,7 +1880,10 @@ const Board = () => {
</span>
</span>
&nbsp;
<span key={`dt-${index}`} className="date-time" data-utc="data">{getDate(reply.timestamp)}</span>
<span key={`dt-${index}`} className="date-time"
data-tooltip-id="tooltip"
data-tooltip-content={getFormattedTime(reply.timestamp)}
data-tooltip-place="top">{getDate(reply.timestamp)}</span>
&nbsp;
<span key={`pn-${index}`} className="post-number post-number-desktop">
<span key={`pl1-${index}`}>c/</span>
@@ -2429,7 +2456,10 @@ const Board = () => {
</span>)
: null}
</span>
<span key={`mob-dt-${index}`} className="date-time-mobile post-number-mobile">
<span key={`mob-dt-${index}`} className="date-time-mobile post-number-mobile"
data-tooltip-id="tooltip"
data-tooltip-content={getFormattedTime(thread.timestamp)}
data-tooltip-place="top">
{getDate(thread.timestamp)}
&nbsp;
<span key={`mob-no-${index}`}>c/</span>
@@ -2656,7 +2686,10 @@ const Board = () => {
</span>
<br key={`mob-br-${index}`} />
</span>
<span key={`mob-dt-${index}`} className="date-time-mobile post-number-mobile">
<span key={`mob-dt-${index}`} className="date-time-mobile post-number-mobile"
data-tooltip-id="tooltip"
data-tooltip-content={getFormattedTime(reply.timestamp)}
data-tooltip-place="top">
{getDate(reply.timestamp)}&nbsp;
<span key={`mob-pl1-${index}`}>c/</span>
{reply.shortCid ? (
src/components/views/Subscriptions.jsx
+17 -4
View File
@@ -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 = () => {
{<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>}
</span>)
&nbsp;
<span key={`dt-${index}`} className="date-time" data-utc="data">{getDate(thread.timestamp)}</span>
<span key={`dt-${index}`} className="date-time"
data-tooltip-id="tooltip"
data-tooltip-content={getFormattedTime(thread.timestamp)}
data-tooltip-place="top">{getDate(thread.timestamp)}</span>
&nbsp;
<span key={`pn-${index}`} className="post-number post-number-desktop">
<span key={`pl1-${index}`}>c/</span>
@@ -1190,7 +1194,10 @@ const Subscriptions = () => {
</span>
</span>
&nbsp;
<span key={`dt-${index}`} className="date-time" data-utc="data">{getDate(reply.timestamp)}</span>
<span key={`dt-${index}`} className="date-time"
data-tooltip-id="tooltip"
data-tooltip-content={getFormattedTime(reply.timestamp)}
data-tooltip-place="top">{getDate(reply.timestamp)}</span>
&nbsp;
<span key={`pn-${index}`} className="post-number post-number-desktop">
<span id="reply-button" style={{cursor: 'pointer'}} key={`pl1-${index}`} title="Link to this post">c/</span>
@@ -1789,7 +1796,10 @@ const Subscriptions = () => {
tooltipPlace="top"
className="offline-mobile-sub" />
</span>
<span key={`mob-dt-${index}`} className="date-time-mobile post-number-mobile">
<span key={`mob-dt-${index}`} className="date-time-mobile post-number-mobile"
data-tooltip-id="tooltip"
data-tooltip-content={getFormattedTime(thread.timestamp)}
data-tooltip-place="top">
{getDate(thread.timestamp)}
&nbsp;
<span key={`mob-no-${index}`}>c/</span>
@@ -2027,7 +2037,10 @@ const Subscriptions = () => {
tooltipPlace="top"
className="offline-mobile-sub-reply" />
</span>
<span key={`mob-dt-${index}`} className="date-time-mobile post-number-mobile">
<span key={`mob-dt-${index}`} className="date-time-mobile post-number-mobile"
data-tooltip-id="tooltip"
data-tooltip-content={getFormattedTime(reply.timestamp)}
data-tooltip-place="top">
{getDate(reply.timestamp)}&nbsp;
<span key={`mob-pl1-${index}`}>c/</span>
{reply.shortCid ? (
src/components/views/Thread.jsx
+19 -4
View File
@@ -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 = () => {
</span>)
</span>
&nbsp;
<span className="date-time" data-utc="data">{getDate(comment?.timestamp)}</span>
<span className="date-time"
data-tooltip-id="tooltip"
data-tooltip-content={getFormattedTime(comment?.timestamp)}
data-tooltip-place="top">
{getDate(comment?.timestamp)}
</span>
&nbsp;
<span className="post-number post-number-desktop">
<span>c/</span>
@@ -1295,7 +1301,10 @@ const Thread = () => {
</span>
</span>
&nbsp;
<span key={`dt-${index}`} className="date-time">
<span key={`dt-${index}`} className="date-time"
data-tooltip-id="tooltip"
data-tooltip-content={getFormattedTime(reply?.timestamp)}
data-tooltip-place="top">
{getDate(reply?.timestamp)}&nbsp;
<span key={`pn-${index}`} className="post-number post-number-desktop">
<span key={`pl1-${index}`}>c/</span>
@@ -1750,7 +1759,10 @@ const Thread = () => {
{comment.title}
</span>) : null}
</span>
<span key={`mob-dt-${comment.cid}`} className="date-time-mobile post-number-mobile">
<span key={`mob-dt-${comment.cid}`} className="date-time-mobile post-number-mobile"
data-tooltip-id="tooltip"
data-tooltip-content={getFormattedTime(comment?.timestamp)}
data-tooltip-place="top">
{getDate(comment?.timestamp)}
&nbsp;
<span key={`mob-no-${comment.cid}`}>c/</span>
@@ -1943,7 +1955,10 @@ const Thread = () => {
</span>
<br key={`mob-br-${index}`} />
</span>
<span key={`mob-dt-${index}`} className="date-time-mobile post-number-mobile">
<span key={`mob-dt-${index}`} className="date-time-mobile post-number-mobile"
data-tooltip-id="tooltip"
data-tooltip-content={getFormattedTime(reply?.timestamp)}
data-tooltip-place="top">
{getDate(reply?.timestamp)}&nbsp;
<span key={`mob-pl1-${index}`}>c/</span>
{reply.shortCid ? (
src/utils/getFormattedTime.js
+14
View File
@@ -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;
yarn.lock
+13 -1
View File
@@ -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"