4 files changed, 35 insertions, 20 deletions

diff --git a/src/components/PollCard/PollCard.tsx b/src/components/PollCard/PollCard.tsx
index 2378945..689e872 100644
--- a/src/components/PollCard/PollCard.tsx
+++ b/src/components/PollCard/PollCard.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import {
   Card,
@@ -14,7 +14,8 @@ import { post } from '../../requests';
 import { useAuth } from '../../hooks/useAuth';
 
 interface PropTypes {
-  initialPoll: Poll;
+  poll: Poll;
+  setPoll: (poll: Poll) => void;
 }
 
 const DATE_FORMAT = {
@@ -49,8 +50,7 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
-const PollCard: React.FC<PropTypes> = ({ initialPoll }) => {
-  const [poll, setPoll] = useState<Poll>(initialPoll);
+const PollCard: React.FC<PropTypes> = ({ poll, setPoll }) => {
   const classes = useStyles();
   const { author, contents: { left, right }, vote } = poll;
   const { enqueueSnackbar } = useSnackbar();
@@ -68,15 +68,17 @@ const PollCard: React.FC<PropTypes> = ({ initialPoll }) => {
       });
     } else {
       const newVote = ({ which, pollId: poll._id });
-      post('votes/', newVote);
-      poll.contents[which].votes += 1;
-      poll.vote = {
+      const newPoll = { ...poll };
+      newPoll.contents[which].votes += 1;
+      newPoll.vote = {
         _id: '',
         authorId: '',
         createdAt: new Date(),
         ...newVote
       };
-      setPoll({ ...poll });
+      setPoll(newPoll);
+
+      post('votes/', newVote);
     }
   };
 
diff --git a/src/components/Feed/Feed.tsx b/src/components/PollsList/PollsList.tsx
index bf3c5b7..0fd8fa4 100644
--- a/src/components/Feed/Feed.tsx
+++ b/src/components/PollsList/PollsList.tsx
@@ -6,6 +6,7 @@ import PollCard from '../PollCard/PollCard';
 
 interface PropTypes {
   polls: Poll[];
+  mutate: (polls: Poll[], refetch: boolean) => void;
 }
 
 interface RenderPropTypes {
@@ -15,13 +16,24 @@ interface RenderPropTypes {
 }
 
 
-const Feed: React.FC<PropTypes> = ({ polls }) => {
+const PollsList: React.FC<PropTypes> = ({ polls, mutate }) => {
+
   const RenderItem: React.FC<RenderPropTypes> = ({ index, style, key }) => {
     const poll = polls[index];
+
+    const setPoll = (poll: Poll) => {
+      const newPolls = [...polls];
+      newPolls[index] = poll;
+
+      // Force-update list-size so everything re-renders
+      mutate([], false);
+      mutate(newPolls, false);
+    };
+
     return (
       // To re-render on list resize, add this info to key
-      <div key={key + polls.length} style={style}>
-        <PollCard initialPoll={poll} />
+      <div key={`${key}-${poll._id}-${polls.length}`} style={style}>
+        <PollCard poll={poll} setPoll={setPoll} />
       </div>
     );
   };
@@ -59,5 +71,5 @@ const Feed: React.FC<PropTypes> = ({ polls }) => {
   );
 };
 
-export default Feed;
+export default PollsList;
 
diff --git a/src/containers/FeedPage/FeedPage.tsx b/src/containers/FeedPage/FeedPage.tsx
index da0fb2a..7445c25 100644
--- a/src/containers/FeedPage/FeedPage.tsx
+++ b/src/containers/FeedPage/FeedPage.tsx
@@ -2,23 +2,23 @@ import React from 'react';
 import { Poll } from 'which-types';
 import { Container } from '@material-ui/core/';
 
-import Feed from '../../components/Feed/Feed';
+import PollsList from '../../components/PollsList/PollsList';
 import PollSubmission from './PollSubmission';
 import { useAuth } from '../../hooks/useAuth';
 import { useFeed } from '../../hooks/APIClient';
 
 const FeedPage: React.FC = () => {
-  const { data, mutate } = useFeed();
+  const { data: polls, mutate } = useFeed();
   const { isAuthenticated } = useAuth();
 
   const addPoll = (poll: Poll): void => {
-    mutate([poll, ...data], true);
+    mutate([poll, ...polls], true);
   };
 
   return (
     <Container maxWidth="sm" disableGutters>
       {isAuthenticated && <PollSubmission addPoll={addPoll} />}
-      <Feed polls={data} />
+      <PollsList polls={polls} mutate={mutate} />
     </Container>
   );
 };
diff --git a/src/containers/ProfilePage/ProfilePage.tsx b/src/containers/ProfilePage/ProfilePage.tsx
index db27d25..7a1d729 100644
--- a/src/containers/ProfilePage/ProfilePage.tsx
+++ b/src/containers/ProfilePage/ProfilePage.tsx
@@ -4,7 +4,7 @@ import { Poll } from 'which-types';
 import { Container } from '@material-ui/core';
 
 import ProfileInfo from './ProfileInfo';
-import Feed from '../../components/Feed/Feed';
+import PollsList from '../../components/PollsList/PollsList';
 import Loading from '../../components/Loading/Loading';
 import { useAuth } from '../../hooks/useAuth';
 import { useUser, useProfile } from '../../hooks/APIClient';
@@ -16,7 +16,7 @@ const ProfilePage: React.FC = () => {
   const { user } = useAuth();
 
   const { data: userInfo, mutate: setUserInfo } = useUser(username);
-  const { data: polls, isValidating } = useProfile(userInfo?._id);
+  const { data: polls, mutate: mutatePolls, isValidating } = useProfile(userInfo?._id);
 
   useEffect(() => {
     if (!username) {
@@ -44,9 +44,10 @@ const ProfilePage: React.FC = () => {
         savedPolls={polls.length}
         totalVotes={totalVotes}
       />
-      {!polls.length && isValidating
+      {
+        isValidating && !polls
         ? <Loading />
-        : <Feed polls={polls} />
+        : <PollsList polls={polls} mutate={mutatePolls} />
       }
     </Container>
   );