Fix issues with comments and posts having an additonal upvote (#607)

src/components/common/Comments/CommentItem.tsx

@@ -6,7 +6,7 @@ import {
   useTheme,
   VStack,
 } from "native-base";
-import React, { useRef } from "react";
+import React from "react";
 import {
   IconChevronDown,
   IconDots,
@@ -48,8 +48,6 @@ function CommentItem({
   const theme = useTheme();
   const settings = useAppSelector(selectSettings);
 
-  const initialVote = useRef(comment.comment.my_vote);
-
   if (!depth) {
     depth = comment.comment.comment.path.split(".").length;
   }
@@ -115,7 +113,6 @@ function CommentItem({
                     upvotes={comment.comment.counts.upvotes}
                     downvotes={comment.comment.counts.downvotes}
                     myVote={comment.comment.my_vote as ILemmyVote}
-                    initialVote={initialVote.current}
                   />
                 </AvatarUsername>
                 {!comment.collapsed ? (

src/components/common/Vote/SmallVoteIcons.tsx

@@ -7,12 +7,10 @@ function SmallVoteIcons({
   upvotes,
   downvotes,
   myVote,
-  initialVote,
 }: {
   upvotes: number;
   downvotes: number;
   myVote: ILemmyVote;
-  initialVote: number;
 }) {
   const theme = useTheme();
 
@@ -28,15 +26,11 @@ function SmallVoteIcons({
       <HStack space={1}>
         <HStack alignItems="center">
           <IconArrowUp color={upvoteColor} size={18} />
-          <Text color={upvoteColor}>
-            {myVote === 1 && initialVote !== 1 ? upvotes + 1 : upvotes}
-          </Text>
+          <Text color={upvoteColor}>{upvotes}</Text>
         </HStack>
         <HStack alignItems="center">
           <IconArrowDown color={downvoteColor} size={18} />
-          <Text color={downvoteColor}>
-            {myVote === -1 && initialVote !== -1 ? downvotes + 1 : downvotes}
-          </Text>
+          <Text color={downvoteColor}>{downvotes}</Text>
         </HStack>
       </HStack>
     ),

src/components/common/Vote/VoteData.tsx

@@ -32,7 +32,7 @@ function VoteData({ data, vote }: IProps) {
       <HStack alignItems="center">
         {scoreArrow}
         <Text color={color} fontSize="sm">
-          {vote === 1 ? data.score + 1 : data.score}
+          {data.score}
         </Text>
       </HStack>
     );
@@ -48,13 +48,13 @@ function VoteData({ data, vote }: IProps) {
       <HStack alignItems="center">
         <IconArrowUp color={upvoteColor} size={20} />
         <Text color={upvoteColor} fontSize="sm">
-          {vote === 1 ? data.upvotes + 1 : data.upvotes}
+          {data.upvotes}
         </Text>
       </HStack>
       <HStack alignItems="center">
         <IconArrowDown color={downvoteColor} size={20} />
         <Text color={downvoteColor} fontSize="sm">
-          {vote === -1 ? data.downvotes + 1 : data.downvotes}
+          {data.downvotes}
         </Text>
       </HStack>
     </>

src/components/screens/Comments/NewCommentScreen.tsx

@@ -123,7 +123,6 @@ function NewCommentScreen({
                   upvotes={upvotes}
                   downvotes={downvotes}
                   myVote={myVote as ILemmyVote}
-                  initialVote={0}
                 />
               </HStack>
               <HStack space={1} alignItems="center">

src/components/screens/Feed/components/CompactFeedItem/CompactFeedItemFooter.tsx

@@ -1,6 +1,6 @@
 import { PostView } from "lemmy-js-client";
 import { Box, HStack, Text, useTheme } from "native-base";
-import React, { useRef } from "react";
+import React from "react";
 import { IconMessage } from "tabler-icons-react-native";
 import { timeFromNowShort } from "../../../../../helpers/TimeHelper";
 import { ILemmyVote } from "../../../../../types/lemmy/ILemmyVote";
@@ -17,8 +17,6 @@ interface CompactFeedItemFooterProps {
 function CompactFeedItemFooter({ post }: CompactFeedItemFooterProps) {
   const { colors } = useTheme();
 
-  const initialVote = useRef(post.my_vote);
-
   return (
     <>
       <HStack alignItems="center" space={2}>
@@ -47,7 +45,6 @@ function CompactFeedItemFooter({ post }: CompactFeedItemFooterProps) {
           upvotes={post.counts.upvotes}
           downvotes={post.counts.downvotes}
           myVote={post.my_vote as ILemmyVote}
-          initialVote={initialVote.current}
         />
         <HStack alignItems="center" space={1}>
           <IconMessage color={colors.app.textSecondary} size={16} />

src/components/screens/Post/PostScreen.tsx

@@ -64,7 +64,15 @@ function PostScreen({ route, navigation }: IProps) {
       <VStack flex={1} backgroundColor={theme.colors.app.bg}>
         <FlashList
           ListHeaderComponent={
-            <PostHeader post={post} showLoadAll={route?.params?.showLoadAll} />
+            <PostHeader
+              currentPost={post.currentPost}
+              collapsed={post.collapsed}
+              setCollapsed={post.setCollapsed}
+              doLoad={post.doLoad}
+              doSave={post.doSave}
+              doVote={post.doVote}
+              showLoadAll={route?.params?.showLoadAll}
+            />
           }
           ListFooterComponent={<PostFooter post={post} />}
           data={post.visibleComments}

src/components/screens/Post/components/PostActionBar.tsx

@@ -73,21 +73,15 @@ function PostActionBar({ post, doVote, doSave }: IProps) {
         onPressHandler={onUpvotePress}
         type="upvote"
         isVoted={isUpvoted}
-        text={
-          post.my_vote === 1 ? post.counts.upvotes + 1 : post.counts.upvotes
-        }
+        text={post.counts.upvotes}
         isAccented
       />
 
       <VoteButton
         onPressHandler={onDownvotePress}
         type="downvote"
         isVoted={isDownvoted}
-        text={
-          post.my_vote === -1
-            ? post.counts.downvotes + 1
-            : post.counts.downvotes
-        }
+        text={post.counts.downvotes}
         isAccented
       />
 

src/components/screens/Post/components/PostHeader.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { SetStateAction, useState } from "react";
 import {
   Divider,
   HStack,
@@ -7,7 +7,7 @@ import {
   useTheme,
   VStack,
 } from "native-base";
-import { UsePost } from "../../../../hooks/post/postHooks";
+import { PostView } from "lemmy-js-client";
 import { getBaseUrl } from "../../../../helpers/LinkHelper";
 import PostContentView from "./PostContentView";
 import AvatarUsername from "../../../common/AvatarUsername";
@@ -17,32 +17,48 @@ import DatePublished from "../../../common/DatePublished";
 import PostActionBar from "./PostActionBar";
 import PostTitle from "./PostTitle";
 import { onGenericHapticFeedback } from "../../../../helpers/HapticFeedbackHelpers";
+import { ILemmyVote } from "../../../../types/lemmy/ILemmyVote";
 
 interface IProps {
-  post: UsePost;
+  currentPost: PostView;
+  collapsed: boolean;
+  setCollapsed: React.Dispatch<SetStateAction<boolean>>;
   showLoadAll: boolean;
+
+  doLoad: (refresh: boolean) => Promise<void>;
+  doSave: () => Promise<void>;
+  doVote: (value: ILemmyVote) => Promise<void>;
 }
 
-function PostHeader({ post, showLoadAll }: IProps) {
+function PostHeader({
+  currentPost,
+  collapsed,
+  setCollapsed,
+  showLoadAll,
+
+  doLoad,
+  doSave,
+  doVote,
+}: IProps) {
   const theme = useTheme();
 
-  const instanceBaseUrl = getBaseUrl(post.currentPost.community.actor_id);
+  const instanceBaseUrl = getBaseUrl(currentPost.community.actor_id);
 
   const [hideSLA, setHideSLA] = useState(false);
 
   const onPress = () => {
     onGenericHapticFeedback();
-    post.setCollapsed((prev) => !prev);
+    setCollapsed((prev) => !prev);
   };
 
   return (
     <VStack flex={1} backgroundColor={theme.colors.app.fg}>
       <Pressable onPress={onPress}>
-        {!post.collapsed ? (
-          <PostContentView post={post.currentPost} />
+        {!collapsed ? (
+          <PostContentView post={currentPost} />
         ) : (
           <VStack>
-            <PostTitle title={post.currentPost.post.name} mt={2} mb={2} />
+            <PostTitle title={currentPost.post.name} mt={2} mb={2} />
             <Text
               color={theme.colors.app.textSecondary}
               fontStyle="italic"
@@ -56,30 +72,26 @@ function PostHeader({ post, showLoadAll }: IProps) {
       </Pressable>
 
       <HStack mb={2} mx={4} space={2}>
-        <AvatarUsername creator={post.currentPost?.creator} />
+        <AvatarUsername creator={currentPost?.creator} />
       </HStack>
       <HStack space={2} mx={4} mb={2}>
         <CommunityLink
-          community={post.currentPost?.community}
+          community={currentPost?.community}
           instanceBaseUrl={instanceBaseUrl}
         />
-        <CommentCount commentCount={post.currentPost.counts.comments} />
-        <DatePublished published={post.currentPost?.post.published} />
+        <CommentCount commentCount={currentPost.counts.comments} />
+        <DatePublished published={currentPost?.post.published} />
       </HStack>
 
       <Divider my={1} bg={theme.colors.app.border} />
-      <PostActionBar
-        post={post.currentPost}
-        doSave={post.doSave}
-        doVote={post.doVote}
-      />
+      <PostActionBar post={currentPost} doSave={doSave} doVote={doVote} />
       <Divider bg={theme.colors.app.border} />
       {showLoadAll && !hideSLA && (
         <Pressable
           backgroundColor="#1A91FF"
           onPress={() => {
             setHideSLA(true);
-            post.doLoad(true);
+            doLoad(true).then();
           }}
         >
           <VStack>

src/hooks/feeds/useFeedItem.ts

@@ -1,7 +1,7 @@
 import { PostView } from "lemmy-js-client";
 import { useNavigation } from "@react-navigation/native";
 import { NativeStackNavigationProp } from "@react-navigation/native-stack";
-import React, { SetStateAction, useMemo, useState } from "react";
+import React, { SetStateAction, useMemo } from "react";
 import {
   onGenericHapticFeedback,
   onVoteHapticFeedback,
@@ -18,9 +18,6 @@ import { savePost } from "../../helpers/LemmyHelpers";
 import { handleLemmyError } from "../../helpers/LemmyErrorHelper";
 
 interface UseFeedItem {
-  myVote: ILemmyVote;
-  setMyVote: React.Dispatch<SetStateAction<ILemmyVote>>;
-
   onVotePress: (value: ILemmyVote, haptic?: boolean) => Promise<void>;
   onPress: () => void;
   doSave: () => Promise<void>;
@@ -36,7 +33,6 @@ const useFeedItem = (
 ): UseFeedItem => {
   const navigation = useNavigation<NativeStackNavigationProp<any>>();
   const dispatch = useAppDispatch();
-  const [myVote, setMyVote] = useState<ILemmyVote>(post.my_vote as ILemmyVote);
 
   const linkInfo = useMemo(() => getLinkInfo(post.post.url), [post]);
 
@@ -46,15 +42,42 @@ const useFeedItem = (
   const onVotePress = async (value: ILemmyVote, haptic = true) => {
     if (haptic) onVoteHapticFeedback();
 
-    const oldValue: ILemmyVote = post.my_vote as ILemmyVote;
+    let { upvotes, downvotes } = post.counts;
+
+    // If we already voted, this will be a neutral vote.
+    if (value === post.my_vote && value !== 0) value = 0;
+
+    // Store old value in case we encounter an error
+    const oldValue = post.my_vote;
+
+    // Deal with updating the upvote/downvote count
+    if (value === 0) {
+      if (oldValue === -1) downvotes -= 1;
+      if (oldValue === 1) upvotes -= 1;
+    }
+
+    if (value === 1) {
+      if (oldValue === -1) downvotes -= 1;
+      upvotes += 1;
+    }
+
+    if (value === -1) {
+      if (oldValue === 1) upvotes -= 1;
+      downvotes += 1;
+    }
 
-    setMyVote(value);
     setPosts((prev) =>
       prev.map((p) => {
         if (p.post.id === post.post.id) {
           return {
             ...p,
             my_vote: value,
+            counts: {
+              ...p.counts,
+              upvotes,
+              downvotes,
+              score: upvotes - downvotes,
+            },
           };
         }
 
@@ -81,7 +104,6 @@ const useFeedItem = (
         setPostRead();
       }
     } catch (e) {
-      setMyVote(oldValue);
       setPosts((prev) =>
         prev.map((p) => {
           if (p.post.id === post.post.id) {
@@ -156,9 +178,6 @@ const useFeedItem = (
   };
 
   return {
-    myVote,
-    setMyVote,
-
     onVotePress,
 
     doSave,