From cab8de5c6b246e1aa1376fa2b8666f09b44b6469 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Mon, 10 Aug 2020 11:12:06 +0300 Subject: refator: Feed -> PollList --- src/components/PollsList/PollsList.tsx | 75 ++++++++++++++++++++++++++++++++++ 1 file changed, 75 insertions(+) create mode 100644 src/components/PollsList/PollsList.tsx (limited to 'src/components/PollsList') 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 = ({ polls, mutate }) => { + + const RenderItem: React.FC = ({ 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 +
+ +
+ ); + }; + + return ( + + {({ + height, + isScrolling, + registerChild, + onChildScroll, + scrollTop + }) => ( + + {({ width }) => ( +
+ +
+ )} +
+ )} +
+ ); +}; + +export default PollsList; + -- cgit v1.2.3 From 78218c0f3427ad79de003ac59cffb99b08f0ae7d Mon Sep 17 00:00:00 2001 From: eug-vs Date: Mon, 10 Aug 2020 13:47:02 +0300 Subject: fix: resolve eslint errors --- src/components/PollsList/PollsList.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) (limited to 'src/components/PollsList') diff --git a/src/components/PollsList/PollsList.tsx b/src/components/PollsList/PollsList.tsx index 0fd8fa4..c95bfde 100644 --- a/src/components/PollsList/PollsList.tsx +++ b/src/components/PollsList/PollsList.tsx @@ -17,13 +17,12 @@ interface RenderPropTypes { const PollsList: React.FC = ({ polls, mutate }) => { - const RenderItem: React.FC = ({ index, style, key }) => { const poll = polls[index]; - const setPoll = (poll: Poll) => { + const setPoll = (newPoll: Poll) => { const newPolls = [...polls]; - newPolls[index] = poll; + newPolls[index] = newPoll; // Force-update list-size so everything re-renders mutate([], false); -- cgit v1.2.3