use badge-muted

[lemmy-ui.git] / src / shared / components / post / post-listing.tsx

diff --git a/src/shared/components/post/post-listing.tsx b/src/shared/components/post/post-listing.tsx
index b3a93c095f4490a00a91475546281efab999a81c..137ded9e80626b20ab5b81d264301ec1161df1af 100644 (file)
--- a/src/shared/components/post/post-listing.tsx
+++ b/src/shared/components/post/post-listing.tsx
@@ -22,7 +22,7 @@ import {
   SavePost,
   TransferCommunity,
 } from "lemmy-js-client";
-import { getExternalHost } from "../../env";
+import { getExternalHost, getHttpBase } from "../../env";
 import { i18n } from "../../i18next";
 import { BanType, PostFormParams, PurgeType } from "../../interfaces";
 import { UserService, WebSocketService } from "../../services";
@@ -32,6 +32,7 @@ import {
   amMod,
   canAdmin,
   canMod,
+  canShare,
   futureDaysToUnixTime,
   hostname,
   isAdmin,
@@ -46,6 +47,7 @@ import {
   numToSI,
   relTags,
   setupTippy,
+  share,
   showScores,
   wsClient,
 } from "../../utils";
@@ -80,9 +82,9 @@ interface PostListingState {
   showReportDialog: boolean;
   reportReason?: string;
   my_vote?: number;
-  score: bigint;
-  upvotes: bigint;
-  downvotes: bigint;
+  score: number;
+  upvotes: number;
+  downvotes: number;
 }
 
 interface PostListingProps {
@@ -325,13 +327,13 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
           <PersonListing person={post_view.creator} />
 
           {this.creatorIsMod_ && (
-            <span className="mx-1 badge badge-light">{i18n.t("mod")}</span>
+            <span className="mx-1 badge badge-muted">{i18n.t("mod")}</span>
           )}
           {this.creatorIsAdmin_ && (
-            <span className="mx-1 badge badge-light">{i18n.t("admin")}</span>
+            <span className="mx-1 badge badge-muted">{i18n.t("admin")}</span>
           )}
           {post_view.creator.bot_account && (
-            <span className="mx-1 badge badge-light">
+            <span className="mx-1 badge badge-muted">
               {i18n.t("bot_account").toLowerCase()}
             </span>
           )}
@@ -342,6 +344,15 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
             </span>
           )}
         </li>
+        {post_view.post.language_id !== 0 && (
+          <span className="mx-1 badge badge-muted">
+            {
+              this.props.allLanguages.find(
+                lang => lang.id === post_view.post.language_id
+              )?.name
+            }
+          </span>
+        )}
         <li className="list-inline-item">•</li>
         {url && !(hostname(url) === getExternalHost()) && (
           <>
@@ -560,9 +571,19 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
 
   commentsLine(mobile = false) {
     let post = this.props.post_view.post;
+
     return (
       <div className="d-flex justify-content-start flex-wrap text-muted font-weight-bold mb-1">
         {this.commentsButton}
+        {canShare() && (
+          <button
+            className="btn btn-link"
+            onClick={linkEvent(this, this.handleShare)}
+            type="button"
+          >
+            <Icon icon="share" inline />
+          </button>
+        )}
         {!post.local && (
           <a
             className="btn btn-link btn-animate text-muted py-0"
@@ -652,9 +673,9 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     );
   }
 
-  get unreadCount(): bigint | undefined {
+  get unreadCount(): number | undefined {
     let pv = this.props.post_view;
-    return pv.unread_comments == pv.counts.comments || pv.unread_comments == 0n
+    return pv.unread_comments == pv.counts.comments || pv.unread_comments == 0
       ? undefined
       : pv.unread_comments;
   }
@@ -691,7 +712,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
               {showScores() && (
                 <span
                   className={classNames("ml-2", {
-                    invisible: this.state.downvotes === 0n,
+                    invisible: this.state.downvotes === 0,
                   })}
                 >
                   {numToSI(this.state.downvotes)}
@@ -1311,19 +1332,19 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
 
     if (myVote == 1) {
       this.setState({
-        score: this.state.score - 1n,
-        upvotes: this.state.upvotes - 1n,
+        score: this.state.score - 1,
+        upvotes: this.state.upvotes - 1,
       });
     } else if (myVote == -1) {
       this.setState({
-        score: this.state.score + 2n,
-        upvotes: this.state.upvotes + 1n,
-        downvotes: this.state.downvotes - 1n,
+        score: this.state.score + 2,
+        upvotes: this.state.upvotes + 1,
+        downvotes: this.state.downvotes - 1,
       });
     } else {
       this.setState({
-        score: this.state.score + 1n,
-        upvotes: this.state.upvotes + 1n,
+        score: this.state.score + 1,
+        upvotes: this.state.upvotes + 1,
       });
     }
 
@@ -1354,19 +1375,19 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
 
     if (myVote == 1) {
       this.setState({
-        score: this.state.score - 2n,
-        upvotes: this.state.upvotes - 1n,
-        downvotes: this.state.downvotes + 1n,
+        score: this.state.score - 2,
+        upvotes: this.state.upvotes - 1,
+        downvotes: this.state.downvotes + 1,
       });
     } else if (myVote == -1) {
       this.setState({
-        score: this.state.score + 1n,
-        downvotes: this.state.downvotes - 1n,
+        score: this.state.score + 1,
+        downvotes: this.state.downvotes - 1,
       });
     } else {
       this.setState({
-        score: this.state.score - 1n,
-        downvotes: this.state.downvotes + 1n,
+        score: this.state.score - 1,
+        downvotes: this.state.downvotes + 1,
       });
     }
 
@@ -1399,6 +1420,15 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     this.setState({ showEdit: false });
   }
 
+  handleShare(i: PostListing) {
+    const { name, body, id } = i.props.post_view.post;
+    share({
+      title: name,
+      text: body?.slice(0, 50),
+      url: `${getHttpBase()}/post/${id}`,
+    });
+  }
+
   handleShowReportDialog(i: PostListing) {
     i.setState({ showReportDialog: !i.state.showReportDialog });
   }