From 35572ded55bc0736b4559afde480300b1ad426cb Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Tue, 23 Apr 2024 16:10:44 +0200 Subject: [PATCH 01/13] feat(replies): sort by timestamp --- src/hooks/use-replies.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/hooks/use-replies.ts b/src/hooks/use-replies.ts index a7012212..3bc62d3e 100644 --- a/src/hooks/use-replies.ts +++ b/src/hooks/use-replies.ts @@ -17,12 +17,14 @@ const useRepliesAndAccountReplies = (comment: Comment) => { }, [flattenedReplies, accountComments]); const repliesAndNotYetPublishedReplies = useMemo(() => { - return [ + const repliesSortedByVotes = [ // put the author's unpublished replies at the top, latest first (reverse) ...accountRepliesNotYetPublished.reverse(), // put the published replies after, ...(flattenedReplies || []), ]; + // sort by timestamp + return repliesSortedByVotes.sort((a: Comment, b: Comment) => a.timestamp - b.timestamp); }, [flattenedReplies, accountRepliesNotYetPublished]); return repliesAndNotYetPublishedReplies; From 351401869dc2f9dc23765df78f3ac6f391102038 Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Tue, 23 Apr 2024 21:36:02 +0200 Subject: [PATCH 02/13] chore(package.json): upgrade plebbit-react-hooks --- package.json | 2 +- yarn.lock | 78 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 79 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index e78bffa9..a931f6c8 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,7 @@ "dependencies": { "@capacitor/app": "1.1.1", "@floating-ui/react": "0.26.1", - "@plebbit/plebbit-react-hooks": "https://github.com/plebbit/plebbit-react-hooks.git#00aabcce2276c671c0f4a371d459c93eb39c936a", + "@plebbit/plebbit-react-hooks": "https://github.com/plebbit/plebbit-react-hooks.git#6d0d38ad52ce77715cb05be6cec55d691f5f013d", "@testing-library/jest-dom": "5.14.1", "@testing-library/react": "13.0.0", "@testing-library/user-event": "13.2.1", diff --git a/yarn.lock b/yarn.lock index a285f047..94664693 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3409,6 +3409,68 @@ uuid "9.0.1" viem "1.5.2" +"@plebbit/plebbit-js@https://github.com/plebbit/plebbit-js.git#347579798478c27eea4808b923ab6f21799fce89": + version "0.0.3" + resolved "https://github.com/plebbit/plebbit-js.git#347579798478c27eea4808b923ab6f21799fce89" + dependencies: + "@bonfida/spl-name-service" "2.3.8" + "@chainsafe/libp2p-gossipsub" "12.0.0" + "@chainsafe/libp2p-noise" "15.0.0" + "@chainsafe/libp2p-yamux" "6.0.2" + "@ensdomains/eth-ens-namehash" "2.0.15" + "@keyv/sqlite" "3.6.7" + "@libp2p/autonat" "1.0.12" + "@libp2p/bootstrap" "10.0.15" + "@libp2p/circuit-relay-v2" "^1.0.15" + "@libp2p/identify" "1.0.14" + "@libp2p/kad-dht" "12.0.7" + "@libp2p/mplex" "10.0.15" + "@libp2p/peer-id-factory" "4.0.6" + "@libp2p/webrtc" "4.0.19" + "@libp2p/webtransport" "4.0.19" + "@plebbit/plebbit-logger" "github:plebbit/plebbit-logger#355a96d7659ed820047980049dfa627d30d83a69" + "@plebbit/proper-lockfile" "github:plebbit/node-proper-lockfile#7fd6332117340c1d3d98dd0afee2d31cc06f72b8" + "@types/proper-lockfile" "4.1.2" + "@types/uuid" "8.3.4" + assert "2.1.0" + better-sqlite3 "9.3.0" + buffer "6.0.3" + captcha-canvas "3.2.1" + cbor "9.0.1" + debounce "1.2.1" + err-code "3.0.1" + ethers "6.10.0" + ext-name "5.0.0" + file-type "16.5.4" + hpagent "1.2.0" + ipfs-only-hash "4.0.0" + jose "4.11.0" + js-sha256 "0.9.0" + keyv "4.5.4" + knex "3.1.0" + kubo-rpc-client "3.0.3" + libp2p "1.2.1" + libp2p-crypto "0.21.2" + limiter-es6-compat "2.1.2" + localforage "1.10.0" + lodash-es "4.17.21" + lru-cache "10.1.0" + open-graph-scraper "6.3.3" + p-limit "4.0.0" + p-timeout "6.1.2" + peer-id "0.16.0" + probe-image-size "7.2.3" + retry "0.13.1" + rpc-websockets "7.9.0" + safe-stable-stringify "2.4.3" + sha1-uint8array "0.10.7" + skia-canvas "1.0.0" + tiny-typed-emitter "2.1.0" + tinycache "1.1.2" + ts-custom-error "3.3.1" + uuid "9.0.1" + viem "1.5.2" + "@plebbit/plebbit-logger@github:plebbit/plebbit-logger#355a96d7659ed820047980049dfa627d30d83a69": version "0.0.1" uid "355a96d7659ed820047980049dfa627d30d83a69" @@ -3438,6 +3500,22 @@ uuid "8.3.2" zustand "4.0.0" +"@plebbit/plebbit-react-hooks@https://github.com/plebbit/plebbit-react-hooks.git#6d0d38ad52ce77715cb05be6cec55d691f5f013d": + version "0.0.1" + resolved "https://github.com/plebbit/plebbit-react-hooks.git#6d0d38ad52ce77715cb05be6cec55d691f5f013d" + dependencies: + "@plebbit/plebbit-js" "https://github.com/plebbit/plebbit-js.git#347579798478c27eea4808b923ab6f21799fce89" + "@plebbit/plebbit-logger" "https://github.com/plebbit/plebbit-logger.git" + assert "2.0.0" + ethers "5.6.9" + localforage "1.10.0" + lodash.isequal "4.5.0" + memoizee "0.4.15" + quick-lru "5.1.1" + uint8arrays "3.1.1" + uuid "8.3.2" + zustand "4.0.0" + "@plebbit/proper-lockfile@github:plebbit/node-proper-lockfile#7fd6332117340c1d3d98dd0afee2d31cc06f72b8": version "4.1.2" resolved "https://codeload.github.com/plebbit/node-proper-lockfile/tar.gz/7fd6332117340c1d3d98dd0afee2d31cc06f72b8" From e48406d8542608fb217de7c0685a84b5d17650dd Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Tue, 23 Apr 2024 21:37:03 +0200 Subject: [PATCH 03/13] rerender postform if subplebbitAddress changes --- src/app.tsx | 30 ++++++++++++++++-------------- 1 file changed, 16 insertions(+), 14 deletions(-) diff --git a/src/app.tsx b/src/app.tsx index 85072860..21ba4e42 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -1,5 +1,5 @@ import { useEffect } from 'react'; -import { Outlet, Route, Routes, useLocation } from 'react-router-dom'; +import { Outlet, Route, Routes, useLocation, useParams } from 'react-router-dom'; import { isHomeView } from './lib/utils/view-utils'; import useTheme from './hooks/use-theme'; import styles from './app.module.css'; @@ -15,6 +15,20 @@ import { MobileBoardButtons } from './components/board-buttons'; import SubplebbitStats from './components/subplebbit-stats'; import PostForm from './components/post-form'; +const BoardLayout = () => { + const { subplebbitAddress } = useParams(); + return ( + <> + + + + + + + + + ); +}; const App = () => { const location = useLocation(); const isInHomeView = isHomeView(location.pathname); @@ -33,23 +47,11 @@ const App = () => { // // ); - const boardLayout = ( - <> - - - - - - - - - ); - return (
} /> - + }> } /> } /> } /> From a5a7a97e4712c6f27fe028d604fd508b23728593 Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Wed, 24 Apr 2024 08:48:31 +0200 Subject: [PATCH 04/13] feat(board): add post form UI on desktop with link type previewer --- src/components/post-form/post-form.module.css | 59 +++++++++++++++++++ src/components/post-form/post-form.tsx | 57 +++++++++++++++++- src/lib/utils/media-utils.ts | 2 +- src/themes.css | 4 ++ 4 files changed, 119 insertions(+), 3 deletions(-) diff --git a/src/components/post-form/post-form.module.css b/src/components/post-form/post-form.module.css index eb67a5f9..6b3ff070 100644 --- a/src/components/post-form/post-form.module.css +++ b/src/components/post-form/post-form.module.css @@ -19,6 +19,65 @@ padding-bottom: 100px; } +.postFormButtonDesktop table { + display: table; + border-spacing: 1px; + margin-left: auto; + margin-right: auto; + text-align: left; +} + +.postFormButtonDesktop td:first-child { + background-color: var(--post-form-field-title-background-color); + color: var(--post-form-field-title-color); + font-weight: var(--post-form-field-title-font-weight); + border: var(--post-form-field-border); + padding: 0 5px; + width: 80px; + font-size: 10pt; +} + +.postFormButtonDesktop td { + margin: 0; + padding: 0; + font-size: 10pt; + position: relative; +} + +.postFormButtonDesktop td > input[type="text"] { + width: 244px; + margin: 0; + margin-right: 2px; + padding: 2px 4px 3px; + border: 1px solid #aaa; + outline: none; + appearance: none; + font-family: arial, helvetica, sans-serif; + font-size: 10pt; +} + +.postFormButtonDesktop textarea { + width: 292px; + margin-bottom: 0; + outline: none; + border-radius: none; + border: 1px solid #aaa; + padding: 2px 4px 3px; + appearance: none; + font-family: arial, helvetica, sans-serif; + font-size: 10pt; + + /* textareas have a gap below them that differs along browsers https://stackoverflow.com/a/7144960 */ + vertical-align: top; +} + +.linkType { + font-weight: normal; + position: absolute; + white-space: nowrap; + bottom: 3px; +} + @media (max-width: 640px) { .postFormButtonDesktop { display: none; diff --git a/src/components/post-form/post-form.tsx b/src/components/post-form/post-form.tsx index 32de6070..6f165e6c 100644 --- a/src/components/post-form/post-form.tsx +++ b/src/components/post-form/post-form.tsx @@ -1,10 +1,61 @@ import { useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useLocation, useParams } from 'react-router-dom'; -import { useComment } from '@plebbit/plebbit-react-hooks'; +import { useAccount, useComment } from '@plebbit/plebbit-react-hooks'; +import { getLinkMediaInfo } from '../../lib/utils/media-utils'; +import { isValidURL } from '../../lib/utils/url-utils'; import { isDescriptionView, isPostPageView, isRulesView } from '../../lib/utils/view-utils'; import styles from './post-form.module.css'; +const LinkTypePreviewer = ({ link }: { link: string }) => { + const mediaInfo = getLinkMediaInfo(link); + return isValidURL(link) ? mediaInfo?.type : 'Invalid URL'; +}; + +const PostFormTable = () => { + const account = useAccount(); + const { displayName } = account || {}; + + const [link, setLink] = useState(''); + + return ( + + + + + + + + + + + + +
Name + +
Subject + + +
Comment