feat(1530): changed to remote couchdb with caching

package.json

@@ -32,6 +32,7 @@
     "react-hook-form": "^7.10.1",
     "react-router-dom": "^6.0.0-beta.0",
     "react-scripts": "4.0.3",
+    "swr": "^1.0.1",
     "typescript": "^4.3.2",
     "web-vitals": "^2.0.1",
     "yup": "^0.32.9"

src/App.tsx

@@ -1,16 +1,13 @@
 import { BrowserRouter } from 'react-router-dom';
 
-import { PouchDBProvider } from 'context';
 import { Router } from './routes';
 import './App.scss';
 
 const App = (): JSX.Element => {
   return (
-    <PouchDBProvider>
-      <BrowserRouter>
-        <Router />
-      </BrowserRouter>
-    </PouchDBProvider>
+    <BrowserRouter>
+      <Router />
+    </BrowserRouter>
   );
 };
 

src/components/VoteCard/VoteCard.tsx

@@ -1,4 +1,4 @@
-import { FC, Children as ReactChildren, ReactElement, CSSProperties } from 'react';
+import { FC, Children as ReactChildren, ReactElement, CSSProperties, useState } from 'react';
 
 import {
   Button,
@@ -32,6 +32,7 @@ export const VoteCard: FC<Props> & CompoundComponents = ({
   hasVoted,
   children,
 }) => {
+  const [isVoting, setIsVoting] = useState(false);
   const buttonChildren: ReactElement[] = [];
 
   ReactChildren.forEach(children as ReactElement, (child: ReactElement) => {
@@ -40,6 +41,12 @@ export const VoteCard: FC<Props> & CompoundComponents = ({
     }
   });
 
+  const handleVoteClick = async () => {
+    setIsVoting(true);
+    onVoteClick && (await onVoteClick());
+    setIsVoting(false);
+  };
+
   return (
     <Card>
       <CardBody>
@@ -63,12 +70,14 @@ export const VoteCard: FC<Props> & CompoundComponents = ({
           <FlexItem spacer={{ default: 'spacerLg' }}>
             <Button
               variant="secondary"
-              onClick={onVoteClick}
+              onClick={handleVoteClick}
               isDanger={hasVoted}
-              className="pf-u-px-lg pf-u-py-sm"
+              isLoading={isVoting}
+              isDisabled={isVoting}
+              className="pf-u-py-sm"
               style={{ '--pf-c-button--after--BorderRadius': '8px' } as CSSProperties}
             >
-              {hasVoted ? 'VOTED' : 'VOTE'}
+              {isVoting ? 'VOTING' : hasVoted ? 'VOTED' : 'VOTE'}
             </Button>
           </FlexItem>
           <FlexItem spacer={{ default: 'spacerXs' }}>