chore: 🔧 transaction polling

apotdevin · Aug 20, 2020 · fa56089 · fa56089
1 parent 9de0c31
commit fa56089
Showing 1 changed file with 55 additions and 2 deletions.
diff --git a/pages/transactions.tsx b/pages/transactions.tsx
@@ -11,22 +11,53 @@ import { NextPageContext } from 'next';
 import { getProps } from 'src/utils/ssr';
 import { GET_RESUME } from 'src/graphql/queries/getResume';
 import { GET_IN_OUT } from 'src/graphql/queries/getInOut';
+import { RefreshCw } from 'react-feather';
+import styled, { css } from 'styled-components';
 import {
   Card,
   CardWithTitle,
   SubTitle,
+  SingleLine,
 } from '../src/components/generic/Styled';
 import { getErrorContent } from '../src/utils/error';
 import { PaymentsCard } from '../src/views/transactions/PaymentsCards';
 import { LoadingCard } from '../src/components/loading/LoadingCard';
 import { ColorButton } from '../src/components/buttons/colorButton/ColorButton';
 import { FlowBox } from '../src/views/home/reports/flow';
 
+type RotationProps = {
+  withRotation: boolean;
+};
+
+const Rotation = styled.div<RotationProps>`
+  ${({ withRotation }) =>
+    withRotation &&
+    css`
+      animation: rotation 2s infinite linear;
+    `}
+
+  @keyframes rotation {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(359deg);
+    }
+  }
+`;
+
 const TransactionsView = () => {
+  const [isPolling, setIsPolling] = useState(false);
   const [indexOpen, setIndexOpen] = useState(0);
   const [token, setToken] = useState('');
 
-  const { loading, data, fetchMore } = useGetResumeQuery({
+  const {
+    loading,
+    data,
+    fetchMore,
+    startPolling,
+    stopPolling,
+  } = useGetResumeQuery({
     variables: { token: '' },
     onError: error => toast.error(getErrorContent(error)),
   });
@@ -37,6 +68,10 @@ const TransactionsView = () => {
     }
   }, [data, loading]);
 
+  useEffect(() => {
+    return () => stopPolling();
+  }, [stopPolling]);
+
   if (loading || !data || !data.getResume) {
     return <LoadingCard title={'Transactions'} />;
   }
@@ -47,7 +82,25 @@ const TransactionsView = () => {
     <>
       <FlowBox />
       <CardWithTitle>
-        <SubTitle>Transactions</SubTitle>
+        <SingleLine>
+          <SubTitle>Transactions</SubTitle>
+          <ColorButton
+            withMargin={'0 0 8px'}
+            onClick={() => {
+              if (isPolling) {
+                setIsPolling(false);
+                stopPolling();
+              } else {
+                setIsPolling(true);
+                startPolling(1000);
+              }
+            }}
+          >
+            <Rotation withRotation={isPolling}>
+              <RefreshCw size={18} />
+            </Rotation>
+          </ColorButton>
+        </SingleLine>
         <Card bottom={'8px'} mobileCardPadding={'0'} mobileNoBackground={true}>
           {resumeList?.map((entry, index: number) => {
             if (!entry) {