feat: pull down to refresh (#2908)

* feat: pull down to refresh functionality

Custom pull down to refresh added to replace the default browser pull down to refresh. This will
allow you to manually reload the page if you are using it as a PWA.

* test: update test to check api call correctly

changed api call for test and made sure it pulls down all the way to trigger refresh

* fix: changed positioning of pull to refresh

Refresh indicator now has absolute positioning and will prevent the top edge from pulling down.

src/components/PullToRefresh/index.tsx

@@ -0,0 +1,36 @@
+import { RefreshIcon } from '@heroicons/react/outline';
+import Router from 'next/router';
+import PR from 'pulltorefreshjs';
+import { useEffect } from 'react';
+import ReactDOMServer from 'react-dom/server';
+
+const PullToRefresh: React.FC = () => {
+  useEffect(() => {
+    PR.init({
+      mainElement: '#pull-to-refresh',
+      onRefresh() {
+        Router.reload();
+      },
+      iconArrow: ReactDOMServer.renderToString(
+        <RefreshIcon className="z-50 m-auto h-9 w-9 rounded-full border-4 border-gray-800 bg-gray-800 text-indigo-500 ring-1 ring-gray-700" />
+      ),
+      iconRefreshing: ReactDOMServer.renderToString(
+        <RefreshIcon
+          className="z-50 m-auto h-9 w-9 animate-spin rounded-full border-4 border-gray-800 bg-gray-800 text-indigo-500 ring-1 ring-gray-700"
+          style={{ animationDirection: 'reverse' }}
+        />
+      ),
+      instructionsPullToRefresh: ReactDOMServer.renderToString(<div />),
+      instructionsReleaseToRefresh: ReactDOMServer.renderToString(<div />),
+      instructionsRefreshing: ReactDOMServer.renderToString(<div />),
+      distReload: 55,
+    });
+    return () => {
+      PR.destroyAll();
+    };
+  }, []);
+
+  return <div id="pull-to-refresh"></div>;
+};
+
+export default PullToRefresh;