From cab8de5c6b246e1aa1376fa2b8666f09b44b6469 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Mon, 10 Aug 2020 11:12:06 +0300
Subject: refator: Feed -> PollList

---
 src/components/Feed/Feed.tsx           | 63 ----------------------------
 src/components/PollCard/PollCard.tsx   | 18 ++++----
 src/components/PollsList/PollsList.tsx | 75 ++++++++++++++++++++++++++++++++++
 3 files changed, 85 insertions(+), 71 deletions(-)
 delete mode 100644 src/components/Feed/Feed.tsx
 create mode 100644 src/components/PollsList/PollsList.tsx

(limited to 'src/components')

diff --git a/src/components/Feed/Feed.tsx b/src/components/Feed/Feed.tsx
deleted file mode 100644
index bf3c5b7..0000000
--- a/src/components/Feed/Feed.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import React from 'react';
-import { Poll } from 'which-types';
-import { WindowScroller, AutoSizer, List } from 'react-virtualized';
-import PollCard from '../PollCard/PollCard';
-
-
-interface PropTypes {
-  polls: Poll[];
-}
-
-interface RenderPropTypes {
-  index: number;
-  key: string;
-  style: React.CSSProperties;
-}
-
-
-const Feed: React.FC<PropTypes> = ({ polls }) => {
-  const RenderItem: React.FC<RenderPropTypes> = ({ index, style, key }) => {
-    const poll = polls[index];
-    return (
-      // To re-render on list resize, add this info to key
-      <div key={key + polls.length} style={style}>
-        <PollCard initialPoll={poll} />
-      </div>
-    );
-  };
-
-  return (
-    <WindowScroller>
-      {({
-        height,
-        isScrolling,
-        registerChild,
-        onChildScroll,
-        scrollTop
-      }) => (
-        <AutoSizer disableHeight>
-          {({ width }) => (
-            <div ref={registerChild}>
-              <List
-                autoHeight
-                height={height}
-                isScrolling={isScrolling}
-                onScroll={onChildScroll}
-                rowCount={polls.length}
-                rowHeight={550}
-                rowRenderer={RenderItem}
-                scrollTop={scrollTop}
-                width={width}
-                containerStyle={{ pointerEvents: 'auto' }}
-                overscanRowCount={1}
-              />
-            </div>
-          )}
-        </AutoSizer>
-      )}
-    </WindowScroller>
-  );
-};
-
-export default Feed;
-
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/PollsList/PollsList.tsx b/src/components/PollsList/PollsList.tsx
new file mode 100644
index 0000000..0fd8fa4
--- /dev/null
+++ b/src/components/PollsList/PollsList.tsx
@@ -0,0 +1,75 @@
+import React from 'react';
+import { Poll } from 'which-types';
+import { WindowScroller, AutoSizer, List } from 'react-virtualized';
+import PollCard from '../PollCard/PollCard';
+
+
+interface PropTypes {
+  polls: Poll[];
+  mutate: (polls: Poll[], refetch: boolean) => void;
+}
+
+interface RenderPropTypes {
+  index: number;
+  key: string;
+  style: React.CSSProperties;
+}
+
+
+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}-${poll._id}-${polls.length}`} style={style}>
+        <PollCard poll={poll} setPoll={setPoll} />
+      </div>
+    );
+  };
+
+  return (
+    <WindowScroller>
+      {({
+        height,
+        isScrolling,
+        registerChild,
+        onChildScroll,
+        scrollTop
+      }) => (
+        <AutoSizer disableHeight>
+          {({ width }) => (
+            <div ref={registerChild}>
+              <List
+                autoHeight
+                height={height}
+                isScrolling={isScrolling}
+                onScroll={onChildScroll}
+                rowCount={polls.length}
+                rowHeight={550}
+                rowRenderer={RenderItem}
+                scrollTop={scrollTop}
+                width={width}
+                containerStyle={{ pointerEvents: 'auto' }}
+                overscanRowCount={1}
+              />
+            </div>
+          )}
+        </AutoSizer>
+      )}
+    </WindowScroller>
+  );
+};
+
+export default PollsList;
+
-- 
cgit v1.2.3