Merge pull request #261 from LemmyNet/show_score_setting

Showing / hiding scores based on setting. Fixes #241

lemmy-translations

@@ -1 +1 @@
-Subproject commit f05562455f5260d266d72b6130abb6f633e88a02
+Subproject commit f36cf2332878286378303d0ce9629728b3889ac9

package.json

@@ -68,7 +68,7 @@
     "eslint-plugin-prettier": "^3.3.1",
     "husky": "^6.0.0",
     "iso-639-1": "^2.1.9",
-    "lemmy-js-client": "0.11.0-rc.4",
+    "lemmy-js-client": "0.11.0-rc.6",
     "lint-staged": "^10.5.4",
     "mini-css-extract-plugin": "^1.4.1",
     "node-fetch": "^2.6.1",

src/shared/components/comment-node.tsx

@@ -29,6 +29,7 @@ import {
   colorList,
   wsClient,
   authField,
+  showScores,
 } from "../utils";
 import moment from "moment";
 import { MomentTime } from "./moment-time";
@@ -200,6 +201,8 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
               </button>
               {/* This is an expanding spacer for mobile */}
               <div className="mr-lg-4 flex-grow-1 flex-lg-grow-0 unselectable pointer mx-2"></div>
+              {showScores() && (
+                <>
                   <a
                     className={`unselectable pointer ${this.scoreColor}`}
                     onClick={linkEvent(node, this.handleCommentUpvote)}
@@ -215,6 +218,8 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                     </span>
                   </a>
                   <span className="mr-1">•</span>
+                </>
+              )}
               <span>
                 <MomentTime data={cv.comment} />
               </span>
@@ -281,7 +286,8 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                         aria-label={i18n.t("upvote")}
                       >
                         <Icon icon="arrow-up1" classes="icon-inline" />
-                        {this.state.upvotes !== this.state.score && (
+                        {showScores() &&
+                          this.state.upvotes !== this.state.score && (
                             <span class="ml-1">{this.state.upvotes}</span>
                           )}
                       </button>
@@ -297,7 +303,8 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
                           aria-label={i18n.t("downvote")}
                         >
                           <Icon icon="arrow-down1" classes="icon-inline" />
-                          {this.state.upvotes !== this.state.score && (
+                          {showScores() &&
+                            this.state.upvotes !== this.state.score && (
                               <span class="ml-1">{this.state.downvotes}</span>
                             )}
                         </button>

src/shared/components/person.tsx

@@ -108,15 +108,6 @@ export class Person extends Component<any, PersonState> {
     sort: Person.getSortTypeFromProps(this.props.match.sort),
     page: Person.getPageFromProps(this.props.match.page),
     saveUserSettingsForm: {
-      show_nsfw: null,
-      theme: null,
-      default_sort_type: null,
-      default_listing_type: null,
-      lang: null,
-      show_avatars: null,
-      send_notifications_to_email: null,
-      bio: null,
-      display_name: null,
       auth: authField(false),
     },
     changePasswordForm: {
@@ -773,6 +764,23 @@ export class Person extends Component<any, PersonState> {
               </div>
             </div>
           )}
+          <div class="form-group">
+            <div class="form-check">
+              <input
+                class="form-check-input"
+                id="user-show-scores"
+                type="checkbox"
+                checked={this.state.saveUserSettingsForm.show_scores}
+                onChange={linkEvent(
+                  this,
+                  this.handleUserSettingsShowScoresChange
+                )}
+              />
+              <label class="form-check-label" htmlFor="user-show-scores">
+                {i18n.t("show_scores")}
+              </label>
+            </div>
+          </div>
           <div class="form-group">
             <div class="form-check">
               <input
@@ -963,6 +971,13 @@ export class Person extends Component<any, PersonState> {
     i.setState(i.state);
   }
 
+  handleUserSettingsShowScoresChange(i: Person, event: any) {
+    i.state.saveUserSettingsForm.show_scores = event.target.checked;
+    UserService.Instance.localUserView.local_user.show_scores =
+      event.target.checked; // Just for instant updates
+    i.setState(i.state);
+  }
+
   handleUserSettingsSendNotificationsToEmailChange(i: Person, event: any) {
     i.state.saveUserSettingsForm.send_notifications_to_email =
       event.target.checked;
@@ -1134,6 +1149,8 @@ export class Person extends Component<any, PersonState> {
         UserService.Instance.localUserView.person.display_name;
       this.state.saveUserSettingsForm.show_avatars =
         UserService.Instance.localUserView.local_user.show_avatars;
+      this.state.saveUserSettingsForm.show_scores =
+        UserService.Instance.localUserView.local_user.show_scores;
       this.state.saveUserSettingsForm.email =
         UserService.Instance.localUserView.local_user.email;
       this.state.saveUserSettingsForm.bio =

src/shared/components/post-listing.tsx

@@ -39,6 +39,7 @@ import {
   previewLines,
   wsClient,
   authField,
+  showScores,
 } from "../utils";
 import { i18n } from "../i18next";
 import { externalHost } from "../env";
@@ -346,12 +347,16 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
         >
           <Icon icon="arrow-up1" classes="upvote" />
         </button>
+        {showScores() ? (
           <div
             class={`unselectable pointer font-weight-bold text-muted px-1`}
             data-tippy-content={this.pointsTippy}
           >
             {this.state.score}
           </div>
+        ) : (
+          <div class="p-1"></div>
+        )}
         {this.props.enableDownvotes && (
           <button
             className={`btn-animate btn btn-link p-0 ${
@@ -477,7 +482,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
         </button>
         {!mobile && (
           <>
-            {this.state.downvotes !== 0 && (
+            {this.state.downvotes !== 0 && showScores() && (
               <button
                 class="btn text-muted py-0 pr-0"
                 data-tippy-content={this.pointsTippy}
@@ -513,6 +518,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
         {mobile && (
           <>
             <div>
+              {showScores() ? (
                 <button
                   className={`btn-animate btn py-0 px-1 ${
                     this.state.my_vote == 1 ? "text-info" : "text-muted"
@@ -524,7 +530,19 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                   <Icon icon="arrow-up1" classes="icon-inline small mr-2" />
                   {this.state.upvotes}
                 </button>
-              {this.props.enableDownvotes && (
+              ) : (
+                <button
+                  className={`btn-animate btn py-0 px-1 ${
+                    this.state.my_vote == 1 ? "text-info" : "text-muted"
+                  }`}
+                  onClick={linkEvent(this, this.handlePostLike)}
+                  aria-label={i18n.t("upvote")}
+                >
+                  <Icon icon="arrow-up1" classes="icon-inline small" />
+                </button>
+              )}
+              {this.props.enableDownvotes &&
+                (showScores() ? (
                   <button
                     className={`ml-2 btn-animate btn py-0 pl-1 ${
                       this.state.my_vote == -1 ? "text-danger" : "text-muted"
@@ -538,7 +556,17 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                       <span>{this.state.downvotes}</span>
                     )}
                   </button>
-              )}
+                ) : (
+                  <button
+                    className={`ml-2 btn-animate btn py-0 pl-1 ${
+                      this.state.my_vote == -1 ? "text-danger" : "text-muted"
+                    }`}
+                    onClick={linkEvent(this, this.handlePostDisLike)}
+                    aria-label={i18n.t("downvote")}
+                  >
+                    <Icon icon="arrow-down1" classes="icon-inline small" />
+                  </button>
+                ))}
             </div>
             <button
               class="btn btn-link btn-animate text-muted py-0 pl-1 pr-0"

src/shared/utils.ts

@@ -520,6 +520,13 @@ export function showAvatars(): boolean {
   );
 }
 
+export function showScores(): boolean {
+  return (
+    UserService.Instance.localUserView?.local_user.show_scores ||
+    !UserService.Instance.localUserView
+  );
+}
+
 export function isCakeDay(published: string): boolean {
   // moment(undefined) or moment.utc(undefined) returns the current date/time
   // moment(null) or moment.utc(null) returns null

yarn.lock

@@ -5125,10 +5125,10 @@ lcid@^1.0.0:
   dependencies:
     invert-kv "^1.0.0"
 
-lemmy-js-client@0.11.0-rc.4:
-  version "0.11.0-rc.4"
-  resolved "https://registry.yarnpkg.com/lemmy-js-client/-/lemmy-js-client-0.11.0-rc.4.tgz#bd5652538309efac686aa10329b3a04fac6f85c2"
-  integrity sha512-7pCEEWkmaOoxxJ9+QSTVQFwThdjIWFp/mSs4c82TYs6tKAJsmfqzBkvSK9QVpSA2OOeYVWoThklKcrlmNV2d6A==
+lemmy-js-client@0.11.0-rc.6:
+  version "0.11.0-rc.6"
+  resolved "https://registry.yarnpkg.com/lemmy-js-client/-/lemmy-js-client-0.11.0-rc.6.tgz#897671c8e24be8ba2a6074efc63264c421969380"
+  integrity sha512-/AIws5bidcNIi8wSzJx7mwo5Ip2u78s4/bMdEyfEqWKWqdNwEKV/6eYnyThA3j9gYXjd8ty731s0l0kSs/vmhA==
 
 levn@^0.4.1:
   version "0.4.1"