From f0ed1935e7893c2f960b8a85719402ce10832759 Mon Sep 17 00:00:00 2001 From: Adesojisouljay Date: Fri, 14 Jul 2023 19:45:16 +0100 Subject: [PATCH 1/7] reblog stats init --- src/common/api/hive.ts | 3 + .../components/entry-reblog-btn/index.tsx | 64 +++++++++++++---- .../components/entry-reblog-stats/index.tsx | 68 +++++++++++++++++++ src/common/img/svg.tsx | 6 ++ 4 files changed, 129 insertions(+), 12 deletions(-) create mode 100644 src/common/components/entry-reblog-stats/index.tsx diff --git a/src/common/api/hive.ts b/src/common/api/hive.ts index 5da3780c022..5085b425843 100644 --- a/src/common/api/hive.ts +++ b/src/common/api/hive.ts @@ -656,3 +656,6 @@ export const getRcOperationStats = (): Promise => client.call("rc_api", "ge export const getContentReplies = (author: string, permlink: string): Promise => client.call("condenser_api", "get_content_replies", { author, permlink }); + + export const getRebloggedUsers = async (author: string, permlink: string) => + client.call("condenser_api", "get_reblogged_by", { author, permlink }); diff --git a/src/common/components/entry-reblog-btn/index.tsx b/src/common/components/entry-reblog-btn/index.tsx index 3650013eb6c..a5d171256a3 100644 --- a/src/common/components/entry-reblog-btn/index.tsx +++ b/src/common/components/entry-reblog-btn/index.tsx @@ -14,9 +14,11 @@ import { error, success, info } from "../feedback"; import { reblog, formatError } from "../../api/operations"; import { _t } from "../../i18n"; import _c from "../../util/fix-class-names"; -import { repeatSvg } from "../../img/svg"; +import { repeatSvg, viewListSvg } from "../../img/svg"; import "./_index.scss"; import { useMappedStore } from "../../store/use-mapped-store"; +import { getRebloggedUsers } from "../../api/hive"; +import EntryRebloStats from "../entry-reblog-stats"; interface Props { entry: Entry; @@ -35,11 +37,15 @@ interface Props { interface State { inProgress: boolean; + rebloggedBy: string[]; + showReblogStats: boolean; } export class EntryReblogBtn extends BaseComponent { state: State = { - inProgress: false + inProgress: false, + rebloggedBy: [], + showReblogStats: false }; componentDidMount() { @@ -50,6 +56,7 @@ export class EntryReblogBtn extends BaseComponent { // Otherwise condenser_api.get_blog_entries will be called 2 times on page load. setTimeout(fetchReblogs, 500); } + this.getReblogs() } componentDidUpdate(prevProps: Readonly) { @@ -93,9 +100,24 @@ export class EntryReblogBtn extends BaseComponent { }); }; + getReblogs = async () => { + const { entry } = this.props + const rebloggedBy = await getRebloggedUsers(entry.author, entry.permlink) + this.stateSet({rebloggedBy}) + console.log(rebloggedBy) + console.log(this.state.rebloggedBy) + } + + showReblogs = () => { + this.stateSet({showReblogStats: true}) + } + hideReblogs = () => { + this.stateSet({showReblogStats: false}) + } + render() { const { activeUser, entry, reblogs } = this.props; - const { inProgress } = this.state; + const { inProgress, rebloggedBy, showReblogStats } = this.state; const reblogged = entry && @@ -104,15 +126,33 @@ export class EntryReblogBtn extends BaseComponent { undefined; const content = ( -
- - {repeatSvg} - -
+ <> +
+ + {repeatSvg} + +
+ <> +
+ + + {viewListSvg} + + + {rebloggedBy.length} +
+ + + ); if (!activeUser) { diff --git a/src/common/components/entry-reblog-stats/index.tsx b/src/common/components/entry-reblog-stats/index.tsx new file mode 100644 index 00000000000..da9b53834bd --- /dev/null +++ b/src/common/components/entry-reblog-stats/index.tsx @@ -0,0 +1,68 @@ +import React from 'react' +import { Form, Modal } from 'react-bootstrap'; +import { _t } from '../../i18n'; +import ProfileLink from '../profile-link'; +import UserAvatar from '../user-avatar'; + +const EntryRebloStats = (props: any) => { + const { hideReblogs, showReblogStats, rebloggedBy} = props; + + const reblogLists = ( +
+ {rebloggedBy.map((username: string)=> { + return ( +
+
+
+ + + + +
+ {ProfileLink({ + ...props, + username: {username}, + children: {username} + })} +
+
+
+
+ ) + }) + } +
+ ) + return ( +
+ + + All Reblogs + + + { + // this.setState({ searchText: e.target.value }); + }} + // disabled={searchTextDisabled} + /> + + + {reblogLists} + + +
+ ) +} + +export default EntryRebloStats \ No newline at end of file diff --git a/src/common/img/svg.tsx b/src/common/img/svg.tsx index ffff97feba3..ff1a7b31810 100644 --- a/src/common/img/svg.tsx +++ b/src/common/img/svg.tsx @@ -2013,3 +2013,9 @@ export const dragSvg = ( /> ); + +export const viewListSvg = ( + + + +) From 285e2fc069687088696a4d575bb258eac3e20c99 Mon Sep 17 00:00:00 2001 From: Adesojisouljay Date: Fri, 14 Jul 2023 22:02:24 +0100 Subject: [PATCH 2/7] style fixes --- .../components/entry-reblog-btn/index.tsx | 7 ++- .../components/entry-reblog-stats/index.tsx | 52 +++++++++++-------- 2 files changed, 32 insertions(+), 27 deletions(-) diff --git a/src/common/components/entry-reblog-btn/index.tsx b/src/common/components/entry-reblog-btn/index.tsx index a5d171256a3..6affbbf77df 100644 --- a/src/common/components/entry-reblog-btn/index.tsx +++ b/src/common/components/entry-reblog-btn/index.tsx @@ -102,10 +102,9 @@ export class EntryReblogBtn extends BaseComponent { getReblogs = async () => { const { entry } = this.props + this.stateSet({inProgress: true}) const rebloggedBy = await getRebloggedUsers(entry.author, entry.permlink) - this.stateSet({rebloggedBy}) - console.log(rebloggedBy) - console.log(this.state.rebloggedBy) + this.stateSet({rebloggedBy, inProgress: false}) } showReblogs = () => { @@ -146,10 +145,10 @@ export class EntryReblogBtn extends BaseComponent { {rebloggedBy.length} diff --git a/src/common/components/entry-reblog-stats/index.tsx b/src/common/components/entry-reblog-stats/index.tsx index da9b53834bd..3cfa50c5037 100644 --- a/src/common/components/entry-reblog-stats/index.tsx +++ b/src/common/components/entry-reblog-stats/index.tsx @@ -1,37 +1,43 @@ -import React from 'react' +import React, { useState } from 'react' import { Form, Modal } from 'react-bootstrap'; import { _t } from '../../i18n'; import ProfileLink from '../profile-link'; import UserAvatar from '../user-avatar'; +import LinearProgress from '../linear-progress'; const EntryRebloStats = (props: any) => { - const { hideReblogs, showReblogStats, rebloggedBy} = props; + const { hideReblogs, showReblogStats, rebloggedBy, inProgress} = props; + const [searchText, setSearchText] = useState("") const reblogLists = ( + <> + {inProgress && }
- {rebloggedBy.map((username: string)=> { - return ( -
-
-
- - - +
+ {rebloggedBy && rebloggedBy.length > 0 + ? rebloggedBy.map((username: string) => { + return ( +
+
+ + + -
- {ProfileLink({ - ...props, - username: {username}, - children: {username} - })} -
-
+
+ {ProfileLink({ + ...props, + username, + children: {username} + })}
+
- ) - }) - } + ); + }) + : _t("communities.no-results")} +
+ ) return (
@@ -50,9 +56,9 @@ const EntryRebloStats = (props: any) => { { - // this.setState({ searchText: e.target.value }); + setSearchText(e.target.value); }} // disabled={searchTextDisabled} /> From 0a749a70336d25dcb0cb41c58920c76fb5aec5cb Mon Sep 17 00:00:00 2001 From: Adesojisouljay Date: Sat, 15 Jul 2023 13:51:02 +0100 Subject: [PATCH 3/7] corrections on ui flow --- .../components/entry-reblog-btn/index.tsx | 46 +++++++++++-------- 1 file changed, 26 insertions(+), 20 deletions(-) diff --git a/src/common/components/entry-reblog-btn/index.tsx b/src/common/components/entry-reblog-btn/index.tsx index 6affbbf77df..da348e26fd0 100644 --- a/src/common/components/entry-reblog-btn/index.tsx +++ b/src/common/components/entry-reblog-btn/index.tsx @@ -124,18 +124,8 @@ export class EntryReblogBtn extends BaseComponent { reblogs.list.find((x) => x.author === entry.author && x.permlink === entry.permlink) !== undefined; - const content = ( + const reblogStats = ( <> -
- - {repeatSvg} - -
- <>
@@ -150,10 +140,21 @@ export class EntryReblogBtn extends BaseComponent { rebloggedBy={rebloggedBy} inProgress={inProgress} /> - ); + const content = ( + + ); + if (!activeUser) { return LoginRequired({ ...this.props, @@ -164,14 +165,19 @@ export class EntryReblogBtn extends BaseComponent { // Delete reblog if (reblogged) { return ( - - {content} - +
+ + {content} + + <> + {reblogStats} + +
); } From 1705bba35b4e4412bba150e93236c9ab59b076f2 Mon Sep 17 00:00:00 2001 From: Adesojisouljay Date: Sat, 15 Jul 2023 13:58:04 +0100 Subject: [PATCH 4/7] search input --- .../components/entry-reblog-stats/index.tsx | 17 ++++++++++------- src/common/i18n/locales/en-US.json | 1 + 2 files changed, 11 insertions(+), 7 deletions(-) diff --git a/src/common/components/entry-reblog-stats/index.tsx b/src/common/components/entry-reblog-stats/index.tsx index 3cfa50c5037..cae726f8b35 100644 --- a/src/common/components/entry-reblog-stats/index.tsx +++ b/src/common/components/entry-reblog-stats/index.tsx @@ -7,15 +7,19 @@ import LinearProgress from '../linear-progress'; const EntryRebloStats = (props: any) => { const { hideReblogs, showReblogStats, rebloggedBy, inProgress} = props; - const [searchText, setSearchText] = useState("") + const [searchedText, setSearchedText] = useState("") const reblogLists = ( <> {inProgress && }
- {rebloggedBy && rebloggedBy.length > 0 - ? rebloggedBy.map((username: string) => { + {rebloggedBy.length > 0 + ? rebloggedBy?.filter( + (name: any) => + name.toLowerCase().startsWith(searchedText) || + name.toLowerCase().includes(searchedText) + ).map((username: string) => { return (
@@ -50,17 +54,16 @@ const EntryRebloStats = (props: any) => { className="entry-votes-modal px-3" > - All Reblogs + {_t("entry-list-item.reblogs-list-title")} { - setSearchText(e.target.value); + setSearchedText(e.target.value); }} - // disabled={searchTextDisabled} /> diff --git a/src/common/i18n/locales/en-US.json b/src/common/i18n/locales/en-US.json index c4b691e64ed..af1edb13af2 100644 --- a/src/common/i18n/locales/en-US.json +++ b/src/common/i18n/locales/en-US.json @@ -305,6 +305,7 @@ "cross-posted": "cross-posted", "cross-posted-to": "to", "reblogged": "{{n}} reblogged", + "reblogs-list-title": "Reblogs", "promoted": "Promoted", "pinned": "Pinned Post", "replies": "1 response. Click to respond.", From 444c18df2e749026318a4f95e06dc46e7aff847c Mon Sep 17 00:00:00 2001 From: Adesojisouljay Date: Mon, 17 Jul 2023 21:15:48 +0100 Subject: [PATCH 5/7] profile link --- src/common/components/entry-reblog-btn/index.tsx | 2 ++ src/common/components/entry-reblog-stats/index.tsx | 8 +++++--- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/common/components/entry-reblog-btn/index.tsx b/src/common/components/entry-reblog-btn/index.tsx index da348e26fd0..59bced0a4cb 100644 --- a/src/common/components/entry-reblog-btn/index.tsx +++ b/src/common/components/entry-reblog-btn/index.tsx @@ -110,6 +110,7 @@ export class EntryReblogBtn extends BaseComponent { showReblogs = () => { this.stateSet({showReblogStats: true}) } + hideReblogs = () => { this.stateSet({showReblogStats: false}) } @@ -135,6 +136,7 @@ export class EntryReblogBtn extends BaseComponent { {rebloggedBy.length}
{ return (
- - - + {ProfileLink({ + ...props, + username, + children: + })}
{ProfileLink({ From 3014b8bdf01a42470638f8901cedebab2133b868 Mon Sep 17 00:00:00 2001 From: Adesojisouljay Date: Tue, 18 Jul 2023 10:22:00 +0100 Subject: [PATCH 6/7] load limit --- .../components/entry-reblog-stats/index.tsx | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) diff --git a/src/common/components/entry-reblog-stats/index.tsx b/src/common/components/entry-reblog-stats/index.tsx index 82dd3d3c4f5..68fb1bb0604 100644 --- a/src/common/components/entry-reblog-stats/index.tsx +++ b/src/common/components/entry-reblog-stats/index.tsx @@ -1,21 +1,27 @@ import React, { useState } from 'react' -import { Form, Modal } from 'react-bootstrap'; +import { Button, Form, Modal } from 'react-bootstrap'; import { _t } from '../../i18n'; import ProfileLink from '../profile-link'; import UserAvatar from '../user-avatar'; import LinearProgress from '../linear-progress'; const EntryRebloStats = (props: any) => { + const limit = 30 const { hideReblogs, showReblogStats, rebloggedBy, inProgress} = props; - const [searchedText, setSearchedText] = useState("") + const [searchedText, setSearchedText] = useState(""); + const [loadLimit, setLoadLimit] = useState(10) + + const loadMore = () => { + setLoadLimit(prev => prev + limit) + } const reblogLists = ( <> {inProgress && } -
+
{rebloggedBy.length > 0 - ? rebloggedBy?.filter( + ? rebloggedBy?.slice(0, loadLimit).filter( (name: any) => name.toLowerCase().startsWith(searchedText) || name.toLowerCase().includes(searchedText) @@ -40,8 +46,11 @@ const EntryRebloStats = (props: any) => {
); }) - : _t("communities.no-results")} + : _t("communities.no-results")}
+ {rebloggedBy.length > limit && }
) From 72e5f4daf138c70e5d9c42c4379e6feb11707629 Mon Sep 17 00:00:00 2001 From: Adesojisouljay Date: Thu, 20 Jul 2023 23:31:18 +0100 Subject: [PATCH 7/7] remove icon and text changes --- .../components/entry-reblog-btn/_index.scss | 9 +++++++++ src/common/components/entry-reblog-btn/index.tsx | 15 ++++++++------- src/common/i18n/locales/en-US.json | 3 ++- src/common/img/svg.tsx | 5 ----- 4 files changed, 19 insertions(+), 13 deletions(-) diff --git a/src/common/components/entry-reblog-btn/_index.scss b/src/common/components/entry-reblog-btn/_index.scss index 96be1f3b9bc..00ce367cebf 100644 --- a/src/common/components/entry-reblog-btn/_index.scss +++ b/src/common/components/entry-reblog-btn/_index.scss @@ -56,4 +56,13 @@ opacity: 1; } } + +} + +.reblog-stats{ + + .reblog-count{ + color: $dark-sky-blue; + cursor: pointer; + } } diff --git a/src/common/components/entry-reblog-btn/index.tsx b/src/common/components/entry-reblog-btn/index.tsx index 59bced0a4cb..fac1a04512e 100644 --- a/src/common/components/entry-reblog-btn/index.tsx +++ b/src/common/components/entry-reblog-btn/index.tsx @@ -1,5 +1,4 @@ import React from "react"; - import { Entry } from "../../store/entries/types"; import { Account } from "../../store/accounts/types"; import { User } from "../../store/users/types"; @@ -14,7 +13,7 @@ import { error, success, info } from "../feedback"; import { reblog, formatError } from "../../api/operations"; import { _t } from "../../i18n"; import _c from "../../util/fix-class-names"; -import { repeatSvg, viewListSvg } from "../../img/svg"; +import { repeatSvg } from "../../img/svg"; import "./_index.scss"; import { useMappedStore } from "../../store/use-mapped-store"; import { getRebloggedUsers } from "../../api/hive"; @@ -127,13 +126,15 @@ export class EntryReblogBtn extends BaseComponent { const reblogStats = ( <> -