Feat/reblog stats

src/common/api/hive.ts

@@ -656,3 +656,6 @@ export const getRcOperationStats = (): Promise<any> => client.call("rc_api", "ge
 
 export const getContentReplies = (author: string, permlink: string): Promise<Entry[] | null> =>
   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 });

src/common/components/entry-reblog-btn/_index.scss

@@ -56,4 +56,13 @@
       opacity: 1;
     }
   }
+
+}
+
+.reblog-stats{
+
+  .reblog-count{
+    color: $dark-sky-blue;
+    cursor: pointer;
+  }
 }

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";
@@ -17,6 +16,8 @@ import _c from "../../util/fix-class-names";
 import { repeatSvg } 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 +36,15 @@ interface Props {
 
 interface State {
   inProgress: boolean;
+  rebloggedBy: string[];
+  showReblogStats: boolean;
 }
 
 export class EntryReblogBtn extends BaseComponent<Props> {
   state: State = {
-    inProgress: false
+    inProgress: false,
+    rebloggedBy: [],
+    showReblogStats: false
   };
 
   componentDidMount() {
@@ -50,6 +55,7 @@ export class EntryReblogBtn extends BaseComponent<Props> {
       // Otherwise condenser_api.get_blog_entries will be called 2 times on page load.
       setTimeout(fetchReblogs, 500);
     }
+    this.getReblogs()
   }
 
   componentDidUpdate(prevProps: Readonly<Props>) {
@@ -93,26 +99,63 @@ export class EntryReblogBtn extends BaseComponent<Props> {
       });
   };
 
+  getReblogs = async () => {
+    const { entry } = this.props
+    this.stateSet({inProgress: true})
+    const rebloggedBy = await getRebloggedUsers(entry.author, entry.permlink)
+    this.stateSet({rebloggedBy, inProgress: false})
+  }
+
+  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 &&
       activeUser &&
       reblogs.list.find((x) => x.author === entry.author && x.permlink === entry.permlink) !==
         undefined;
 
+    const reblogStats = (
+      <>
+        <div onClick={this.showReblogs} className="reblog-stats">
+          <Tooltip 
+          content={rebloggedBy.length > 1 ? `${rebloggedBy.length} ${_t("entry-reblog.reblogs")}` :
+           `${rebloggedBy.length} ${_t("entry-reblog.reblog")}`}
+           >
+            <a className="reblog-count">
+              {rebloggedBy.length}
+            </a>           
+          </Tooltip> 
+        </div>
+          <EntryRebloStats 
+          {...this.props}
+          hideReblogs={this.hideReblogs}
+          showReblogStats={showReblogStats}
+          rebloggedBy={rebloggedBy}
+          inProgress={inProgress}
+          />
+      </>
+    );
+
     const content = (
-      <div
-        className={_c(
-          `entry-reblog-btn ${reblogged ? "reblogged" : ""} ${inProgress ? "in-progress" : ""} `
-        )}
-      >
-        <Tooltip content={reblogged ? _t("entry-reblog.delete-reblog") : _t("entry-reblog.reblog")}>
-          <a className="inner-btn">{repeatSvg}</a>
-        </Tooltip>
-      </div>
+        <div
+          className={_c(
+            `entry-reblog-btn d-flex align-items-center ${reblogged ? "reblogged" : ""} ${inProgress ? "in-progress" : ""} `
+          )}
+        >
+          <Tooltip content={reblogged ? _t("entry-reblog.delete-reblog") : _t("entry-reblog.reblog")}>
+            <a className="inner-btn">{repeatSvg}</a>
+          </Tooltip>
+        </div>
     );
 
     if (!activeUser) {
@@ -125,14 +168,19 @@ export class EntryReblogBtn extends BaseComponent<Props> {
     // Delete reblog
     if (reblogged) {
       return (
-        <PopoverConfirm
-          onConfirm={this.deleteReblog}
-          okVariant="danger"
-          titleText={_t("entry-reblog.delete-confirm-title")}
-          okText={_t("entry-reblog.delete-confirm-ok")}
-        >
-          {content}
-        </PopoverConfirm>
+        <div className="d-flex">
+          <PopoverConfirm
+            onConfirm={this.deleteReblog}
+            okVariant="danger"
+            titleText={_t("entry-reblog.delete-confirm-title")}
+            okText={_t("entry-reblog.delete-confirm-ok")}
+          >
+            {content}
+          </PopoverConfirm>
+          <>
+            {reblogStats}
+          </>
+        </div>
       );
     }
 

src/common/components/entry-reblog-stats/index.tsx

@@ -0,0 +1,88 @@
+import React, { useState } from 'react'
+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 [loadLimit, setLoadLimit] = useState(10)
+
+    const loadMore = () => {
+      setLoadLimit(prev => prev + limit)
+    }
+
+    const reblogLists = (
+      <>
+        {inProgress && <LinearProgress/>}
+        <div className="voters-list d-flex flex-column">
+          <div className="list-body">
+            {rebloggedBy.length > 0
+              ? rebloggedBy?.slice(0, loadLimit).filter(
+                (name: any) =>
+                  name.toLowerCase().startsWith(searchedText) ||
+                  name.toLowerCase().includes(searchedText)
+              ).map((username: string) => {
+                  return (
+                    <div className="list-item" key={username}>
+                      <div className="item-main">
+                      {ProfileLink({
+                          ...props,
+                          username,
+                          children: <UserAvatar username={username} size="small" />
+                        })}
+
+                        <div className="item-info">
+                          {ProfileLink({
+                            ...props,
+                            username,
+                            children: <span className="item-name notranslate">{username}</span>
+                          })}
+                        </div>
+                      </div>
+                    </div>
+                  );
+                })
+                : _t("communities.no-results")}
+          </div>
+            {rebloggedBy.length > limit && <Button className="align-self-center w-50 mt-3"
+            onClick={loadMore}
+            >{_t("g.load-more")}</Button>}
+        </div>
+      </>
+    )
+  return (
+    <div>
+        <Modal
+            onHide={hideReblogs}
+            show={showReblogStats}
+            centered={true}
+            size="lg"
+            animation={false}
+            className="entry-votes-modal px-3"
+          >
+            <Modal.Header closeButton={true} className="align-items-center px-0">
+              <Modal.Title>{_t("entry-list-item.reblogs-list-title")}</Modal.Title>
+            </Modal.Header>
+            <Form.Group className="w-100 mb-3">
+              <Form.Control
+                type="text"
+                placeholder={_t("friends.search-placeholder")}
+                value={searchedText}
+                onChange={(e) => {
+                  setSearchedText(e.target.value);
+                }}
+              />
+            </Form.Group>
+            <Modal.Body className="px-0">
+                {reblogLists}
+            </Modal.Body>
+          </Modal>
+    </div>
+  )
+}
+
+export default EntryRebloStats

src/common/i18n/locales/en-US.json

@@ -308,6 +308,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.",
@@ -339,7 +340,8 @@
     "delete-reblog": "Undo Reblog",
     "delete-confirm-title": "Undo reblog?",
     "delete-confirm-ok": "Undo",
-    "delete-success": "Reblog removed"
+    "delete-success": "Reblog removed",
+    "reblogs":"Reblogs"
   },
   "entry-tip": {
     "title": "Tip"

src/common/img/svg.tsx

@@ -2013,3 +2013,4 @@ export const dragSvg = (
     />
   </svg>
 );
+