From b12399de5fcbf75a18e515fce074788c850e6e6d Mon Sep 17 00:00:00 2001 From: abias Date: Sat, 3 Jun 2023 22:02:07 -0400 Subject: [PATCH 01/12] Make comments nested lists --- src/assets/css/main.css | 5 ++ .../components/comment/comment-node.tsx | 47 +++++++------------ .../components/comment/comment-nodes.tsx | 28 +++++++++-- 3 files changed, 46 insertions(+), 34 deletions(-) diff --git a/src/assets/css/main.css b/src/assets/css/main.css index a0d72394..5315aa37 100644 --- a/src/assets/css/main.css +++ b/src/assets/css/main.css @@ -213,6 +213,11 @@ blockquote { overflow-y: auto; } +.comments { + list-style: none; + padding: 0; +} + .thumbnail { object-fit: cover; min-height: 60px; diff --git a/src/shared/components/comment/comment-node.tsx b/src/shared/components/comment/comment-node.tsx index 7ed5e8f4..35ef33ac 100644 --- a/src/shared/components/comment/comment-node.tsx +++ b/src/shared/components/comment/comment-node.tsx @@ -159,18 +159,18 @@ export class CommentNode extends Component { } render() { - let node = this.props.node; - let cv = this.props.node.comment_view; + const node = this.props.node; + const cv = this.props.node.comment_view; - let purgeTypeText = + const purgeTypeText = this.state.purgeType == PurgeType.Comment ? i18n.t("purge_comment") : `${i18n.t("purge")} ${cv.creator.name}`; - let canMod_ = + const canMod_ = canMod(cv.creator.id, this.props.moderators, this.props.admins) && cv.community.local; - let canModOnSelf = + const canModOnSelf = canMod( cv.creator.id, this.props.moderators, @@ -178,59 +178,46 @@ export class CommentNode extends Component { UserService.Instance.myUserInfo, true ) && cv.community.local; - let canAdmin_ = + const canAdmin_ = canAdmin(cv.creator.id, this.props.admins) && cv.community.local; - let canAdminOnSelf = + const canAdminOnSelf = canAdmin( cv.creator.id, this.props.admins, UserService.Instance.myUserInfo, true ) && cv.community.local; - let isMod_ = isMod(cv.creator.id, this.props.moderators); - let isAdmin_ = + const isMod_ = isMod(cv.creator.id, this.props.moderators); + const isAdmin_ = isAdmin(cv.creator.id, this.props.admins) && cv.community.local; - let amCommunityCreator_ = amCommunityCreator( + const amCommunityCreator_ = amCommunityCreator( cv.creator.id, this.props.moderators ); - let borderColor = this.props.node.depth - ? colorList[(this.props.node.depth - 1) % colorList.length] - : colorList[0]; - let moreRepliesBorderColor = this.props.node.depth + const moreRepliesBorderColor = this.props.node.depth ? colorList[this.props.node.depth % colorList.length] : colorList[0]; - let showMoreChildren = + const showMoreChildren = this.props.viewType == CommentViewType.Tree && !this.state.collapsed && node.children.length == 0 && node.comment_view.counts.child_count > 0; return ( -
+
  • @@ -1024,11 +1011,13 @@ export class CommentNode extends Component { allLanguages={this.props.allLanguages} siteLanguages={this.props.siteLanguages} hideImages={this.props.hideImages} + isChild={!this.props.noIndent} + depth={this.props.node.depth + 1} /> )} {/* A collapsed clearfix */} - {this.state.collapsed &&
    } -
    + {this.state.collapsed &&
    } +
    • ); } diff --git a/src/shared/components/comment/comment-nodes.tsx b/src/shared/components/comment/comment-nodes.tsx index ba8997ac..11960da1 100644 --- a/src/shared/components/comment/comment-nodes.tsx +++ b/src/shared/components/comment/comment-nodes.tsx @@ -1,6 +1,8 @@ +import classNames from "classnames"; import { Component } from "inferno"; import { CommunityModeratorView, Language, PersonView } from "lemmy-js-client"; import { CommentNodeI, CommentViewType } from "../../interfaces"; +import { colorList } from "../../utils"; import { CommentNode } from "./comment-node"; interface CommentNodesProps { @@ -20,6 +22,8 @@ interface CommentNodesProps { allLanguages: Language[]; siteLanguages: number[]; hideImages?: boolean; + isChild?: boolean; + depth?: number; } export class CommentNodes extends Component { @@ -28,10 +32,24 @@ export class CommentNodes extends Component { } render() { - let maxComments = this.props.maxCommentsShown ?? this.props.nodes.length; + const maxComments = this.props.maxCommentsShown ?? this.props.nodes.length; - return ( -
    + const borderColor = this.props.depth + ? colorList[this.props.depth % colorList.length] + : colorList[0]; + + return this.props.nodes.length > 0 ? ( +
      {this.props.nodes.slice(0, maxComments).map(node => ( { hideImages={this.props.hideImages} /> ))} -
    - ); + + ) : null; } } From 48c16cc977957db400920ec355e9b5e535dda33a Mon Sep 17 00:00:00 2001 From: SleeplessOne1917 Date: Sat, 3 Jun 2023 23:49:49 -0400 Subject: [PATCH 02/12] Make comment depth easier to track visually --- src/shared/components/comment/comment-nodes.tsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/src/shared/components/comment/comment-nodes.tsx b/src/shared/components/comment/comment-nodes.tsx index 11960da1..64477fdf 100644 --- a/src/shared/components/comment/comment-nodes.tsx +++ b/src/shared/components/comment/comment-nodes.tsx @@ -41,14 +41,10 @@ export class CommentNodes extends Component { return this.props.nodes.length > 0 ? (
      {this.props.nodes.slice(0, maxComments).map(node => ( Date: Wed, 14 Jun 2023 20:28:20 -0400 Subject: [PATCH 03/12] Add long polling to update unread counts in navbar. (#1271) * Upping version. * Add long-polling to update unread counts in navbar. - Fixes #1148 * Using async for polling. * Update src/shared/utils.ts Co-authored-by: Sander Saarend * Adding window visibility check, removing generic sleep. --------- Co-authored-by: SleeplessOne1917 Co-authored-by: Sander Saarend --- package.json | 2 +- src/shared/components/app/navbar.tsx | 57 +++++++++++++++------------- src/shared/utils.ts | 16 ++++++++ 3 files changed, 47 insertions(+), 28 deletions(-) diff --git a/package.json b/package.json index fd7cf4ad..2298d9e1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "lemmy-ui", - "version": "0.18.0-beta.6", + "version": "0.18.0-rc.1", "description": "An isomorphic UI for lemmy", "repository": "https://github.com/LemmyNet/lemmy-ui", "license": "AGPL-3.0", diff --git a/src/shared/components/app/navbar.tsx b/src/shared/components/app/navbar.tsx index bdbac9ff..6d310eef 100644 --- a/src/shared/components/app/navbar.tsx +++ b/src/shared/components/app/navbar.tsx @@ -16,8 +16,10 @@ import { isBrowser, myAuth, numToSI, + poll, showAvatars, toast, + updateUnreadCountsInterval, } from "../../utils"; import { Icon } from "../common/icon"; import { PictrsImage } from "../common/pictrs-image"; @@ -64,7 +66,7 @@ export class Navbar extends Component { if (isBrowser()) { // On the first load, check the unreads this.requestNotificationPermission(); - await this.fetchUnreads(); + this.fetchUnreads(); this.requestNotificationPermission(); document.addEventListener("mouseup", this.handleOutsideMenuClick); @@ -406,35 +408,36 @@ export class Navbar extends Component { return amAdmin() || moderatesS; } - async fetchUnreads() { - const auth = myAuth(); - if (auth) { - this.setState({ unreadInboxCountRes: { state: "loading" } }); - this.setState({ - unreadInboxCountRes: await HttpService.client.getUnreadCount({ - auth, - }), - }); - - if (this.moderatesSomething) { - this.setState({ unreadReportCountRes: { state: "loading" } }); - this.setState({ - unreadReportCountRes: await HttpService.client.getReportCount({ - auth, - }), - }); - } - - if (amAdmin()) { - this.setState({ unreadApplicationCountRes: { state: "loading" } }); - this.setState({ - unreadApplicationCountRes: - await HttpService.client.getUnreadRegistrationApplicationCount({ + fetchUnreads() { + poll(async () => { + if (window.document.visibilityState !== "hidden") { + const auth = myAuth(); + if (auth) { + this.setState({ + unreadInboxCountRes: await HttpService.client.getUnreadCount({ auth, }), - }); + }); + + if (this.moderatesSomething) { + this.setState({ + unreadReportCountRes: await HttpService.client.getReportCount({ + auth, + }), + }); + } + + if (amAdmin()) { + this.setState({ + unreadApplicationCountRes: + await HttpService.client.getUnreadRegistrationApplicationCount({ + auth, + }), + }); + } + } } - } + }, updateUnreadCountsInterval); } get unreadInboxCount(): number { diff --git a/src/shared/utils.ts b/src/shared/utils.ts index 46e8601b..2ab0f767 100644 --- a/src/shared/utils.ts +++ b/src/shared/utils.ts @@ -75,6 +75,7 @@ export const commentTreeMaxDepth = 8; export const markdownFieldCharacterLimit = 50000; export const maxUploadImages = 20; export const concurrentImageUpload = 4; +export const updateUnreadCountsInterval = 30000; export const relTags = "noopener nofollow"; @@ -1490,3 +1491,18 @@ export function newVote(voteType: VoteType, myVote?: number): number { return myVote == -1 ? 0 : -1; } } + +function sleep(millis: number): Promise { + return new Promise(resolve => setTimeout(resolve, millis)); +} + +/** + * Polls / repeatedly runs a promise, every X milliseconds + */ +export async function poll(promiseFn: any, millis: number) { + if (window.document.visibilityState !== "hidden") { + await promiseFn(); + } + await sleep(millis); + return poll(promiseFn, millis); +} From ab0805432dab4594ede8fc8579e3750d9b3187a7 Mon Sep 17 00:00:00 2001 From: abias Date: Wed, 14 Jun 2023 20:52:31 -0400 Subject: [PATCH 04/12] Make comment border colors semi-transparent --- src/server/index.tsx | 2 +- src/shared/components/comment/comment-node.tsx | 11 ++++------- src/shared/utils.ts | 2 +- 3 files changed, 6 insertions(+), 9 deletions(-) diff --git a/src/server/index.tsx b/src/server/index.tsx index 43024076..06dc33a4 100644 --- a/src/server/index.tsx +++ b/src/server/index.tsx @@ -156,7 +156,7 @@ server.get("/*", async (req, res) => { site = try_site.data; initializeSite(site); - if (path != "/setup" && !site.site_view.local_site.site_setup) { + if (path !== "/setup" && !site.site_view.local_site.site_setup) { return res.redirect("/setup"); } diff --git a/src/shared/components/comment/comment-node.tsx b/src/shared/components/comment/comment-node.tsx index 51826462..0380a726 100644 --- a/src/shared/components/comment/comment-node.tsx +++ b/src/shared/components/comment/comment-node.tsx @@ -270,10 +270,6 @@ export class CommentNode extends Component { this.props.moderators ); - - const borderColor = this.props.node.depth - ? colorList[(this.props.node.depth - 1) % colorList.length] - : colorList[0]; const moreRepliesBorderColor = this.props.node.depth ? colorList[this.props.node.depth % colorList.length] : colorList[0]; @@ -951,9 +947,9 @@ export class CommentNode extends Component {
    {showMoreChildren && (