Fix issue with mobile votes not persisting correctly

package.json

@@ -38,6 +38,7 @@
     "bootswatch": "^4.5.0",
     "choices.js": "^9.0.1",
     "classcat": "^4.1.0",
+    "clone": "^2.1.2",
     "emoji-mart": "^3.0.0",
     "emoji-short-name": "^1.0.0",
     "husky": "^4.2.5",

src/components/community-dropdown.tsx

@@ -97,7 +97,7 @@ export class CommunityDropdown extends Component<
                 />
                 <button
                   className="dropdown-exit btn"
-                  onClick={linkEvent(this, this.handleDropdownClose)}
+                  onClick={this.handleDropdownClose}
                 >
                   <svg className="icon icon-inline">
                     <use xlinkHref="#icon-cancel" />
@@ -121,7 +121,7 @@ export class CommunityDropdown extends Component<
                           <Link
                             className="community-listing-title"
                             to={`/c/${community.name}`}
-                            onClick={linkEvent(this, this.handleDropdownClose)}
+                            onClick={this.handleDropdownClose}
                           >
                             {community.name}
                           </Link>
@@ -146,10 +146,7 @@ export class CommunityDropdown extends Component<
                             <Link
                               className="community-listing-title"
                               to={`/c/${community.community_name}`}
-                              onClick={linkEvent(
-                                this,
-                                this.handleDropdownClose
-                              )}
+                              onClick={this.handleDropdownClose}
                             >
                               {community.community_name}
                             </Link>
@@ -168,7 +165,7 @@ export class CommunityDropdown extends Component<
                     Suggest new communities to be added on{' '}
                     <Link
                       to="/c/commrequest"
-                      onClick={linkEvent(this, this.handleDropdownClose)}
+                      onClick={this.handleDropdownClose}
                     >
                       /c/commrequest
                     </Link>
@@ -178,7 +175,7 @@ export class CommunityDropdown extends Component<
               <Link
                 className="dropdown-subtext"
                 to="/communities"
-                onClick={linkEvent(this, this.handleDropdownClose)}
+                onClick={this.handleDropdownClose}
               >
                 More detail
               </Link>
@@ -262,9 +259,9 @@ export class CommunityDropdown extends Component<
     }
   }
 
-  handleDropdownClose(i: CommunityDropdown, event: any) {
+  handleDropdownClose = () => {
     clearAllBodyScrollLocks();
-    i.props.removeDropdown();
+    this.props.removeDropdown();
   }
 
   handleFilterChange(i: CommunityDropdown, event: any) {
@@ -278,7 +275,7 @@ export class CommunityDropdown extends Component<
       !this.thisRef.current.contains(event.target) &&
       event.target.id != 'community-button'
     ) {
-      this.handleDropdownClose(this, event);
+      this.handleDropdownClose();
     }
   }
 

src/components/community.tsx

@@ -174,7 +174,7 @@ export class BaseCommunity extends Component<any, State> {
     };
   }
 
-  componentDidUpdate(_: any, lastState: State) {
+  componentDidUpdate(_lastProps: any, lastState: State) {
     if (
       lastState.dataType !== this.state.dataType ||
       lastState.sort !== this.state.sort ||
@@ -183,6 +183,17 @@ export class BaseCommunity extends Component<any, State> {
       this.setState({ loading: true });
       this.fetchData();
     }
+
+    if (_lastProps.location.pathname !== _lastProps.history.location.pathname) {
+      // Couldnt get a refresh working. This does for now.
+      location.reload();
+
+      // let currentId = this.props.match.params.id;
+      // WebSocketService.Instance.getPost(currentId);
+      // this.context.router.history.push('/sponsors');
+      // this.context.refresh();
+      // this.context.router.history.push(_lastProps.location.pathname);
+    }
   }
 
   render() {

src/components/post-listing.tsx

@@ -1,5 +1,6 @@
 import React, { Component, useEffect, useRef, useState } from 'react';
 import { Link, RouteComponentProps, withRouter } from 'react-router-dom';
+import clone from 'clone';
 import { WebSocketService, UserService } from '../services';
 import {
   Post,
@@ -465,6 +466,10 @@ export class BasePostListing extends Component<
   componentDidMount() {
     // scroll to top of page when loading post listing
     // window.scrollTo(0, 0);
+    console.log({ my_vote: this.props.post.my_vote })
+    this.setState({
+      my_vote: this.props.post.my_vote,
+    })
     window.addEventListener('resize', this.handleResize);
   }
 
@@ -1555,7 +1560,7 @@ export class BasePostListing extends Component<
     }
 
     let new_vote = this.state.my_vote === 1 ? 0 : 1;
-    const newState = { ...this.state };
+    const newState = clone(this.state);
 
     if (this.state.my_vote === 1) {
       newState.score--;
@@ -1587,7 +1592,7 @@ export class BasePostListing extends Component<
     }
 
     let new_vote = this.state.my_vote === -1 ? 0 : -1;
-    const newState = { ...this.state };
+    const newState = clone(this.state);
 
     if (this.state.my_vote === 1) {
       newState.score -= 2;

src/components/post.tsx

@@ -452,8 +452,7 @@ export class Post extends Component<any, PostState> {
     let res = wsJsonToRes(msg);
     if (msg.error) {
       toast(i18n.t(msg.error), 'danger');
-      this.state.loading = false;
-      this.setState(this.state);
+      this.setState({ loading: false });
       return;
     } else if (msg.reconnect) {
       WebSocketService.Instance.getPost({
@@ -461,14 +460,19 @@ export class Post extends Component<any, PostState> {
       });
     } else if (res.op == UserOperation.GetPost) {
       let data = res.data as GetPostResponse;
-      this.state.post = data.post;
-      this.state.comments = data.comments;
-      this.state.community = data.community;
-      this.state.moderators = data.moderators;
-      this.state.siteRes.admins = data.admins;
-      this.state.siteRes.sitemods = data.sitemods;
-      this.state.online = data.online;
-      this.state.loading = false;
+      this.setState({
+        post: data.post,
+        comments: data.comments,
+        community: data.community,
+        moderators: data.moderators,
+        siteRes: {
+          ...this.state.siteRes,
+          admins: data.admins,
+          sitemods: data.sitemods,
+        },
+        online: data.online,
+        loading: false,
+      })
       document.title = `${this.state.post.name} - ${this.state.siteRes.site.name}`;
 
       // Get cross-posts
@@ -491,7 +495,9 @@ export class Post extends Component<any, PostState> {
       // Necessary since it might be a user reply
       if (data.recipient_ids.length == 0) {
         this.state.comments.unshift(data.comment);
-        this.setState(this.state);
+        this.setState({
+          comments: [data.comment, ...this.state.comments]
+        })
       }
     } else if (isCommentChanged(res.op)) {
       let data = res.data as CommentResponse;

yarn.lock

@@ -5395,6 +5395,11 @@ [email protected]^1.0.2:
   resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
   integrity sha1-2jCcwmPfFZlMaIypAheco8fNfH4=
 
+[email protected]^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/clone/-/clone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f"
+  integrity sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=
+
 [email protected]^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"