Refactored fetching to use react-query.

components/common/Calendar.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import classNames from 'classnames';
 import {
   startOfWeek,

components/common/CopyButton.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import PropTypes from 'prop-types';
 import { Button } from 'react-basics';
 import { FormattedMessage } from 'react-intl';

components/common/DateFilter.js

@@ -4,7 +4,7 @@ import { endOfYear, isSameDay } from 'date-fns';
 import useLocale from 'hooks/useLocale';
 import { dateFormat } from 'lib/date';
 import PropTypes from 'prop-types';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Icon, Modal } from 'react-basics';
 import { FormattedMessage } from 'react-intl';
 import DropDown from './DropDown';

components/common/Dot.js

@@ -1,26 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import styles from './Dot.module.css';
-
-function Dot({ color, size, className }) {
-  return (
-    <div className={styles.wrapper}>
-      <div
-        style={{ background: color }}
-        className={classNames(styles.dot, className, {
-          [styles.small]: size === 'small',
-          [styles.large]: size === 'large',
-        })}
-      />
-    </div>
-  );
-}
-
-Dot.propTypes = {
-  color: PropTypes.string,
-  size: PropTypes.oneOf(['small', 'large']),
-  className: PropTypes.string,
-};
-
-export default Dot;

components/common/Dot.module.css

@@ -1,22 +0,0 @@
-.wrapper {
-  background: var(--base50);
-  margin-right: 10px;
-  border-radius: 100%;
-}
-
-.dot {
-  background: var(--green400);
-  width: 10px;
-  height: 10px;
-  border-radius: 100%;
-}
-
-.dot.small {
-  width: 8px;
-  height: 8px;
-}
-
-.dot.large {
-  width: 16px;
-  height: 16px;
-}

components/common/DropDown.js

@@ -1,4 +1,4 @@
-import React, { useState, useRef } from 'react';
+import { useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Menu from './Menu';

components/common/EmptyPlaceholder.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import { Icon, Flexbox } from 'react-basics';
 import Logo from 'assets/logo.svg';

components/common/ErrorMessage.js

@@ -1,5 +1,4 @@
 import Exclamation from 'assets/exclamation-triangle.svg';
-import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import styles from './ErrorMessage.module.css';
 import { Icon } from 'react-basics';

components/common/Favicon.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import styles from './Favicon.module.css';
 

components/common/FilterButtons.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import ButtonLayout from 'components/layout/ButtonLayout';
 import { ButtonGroup } from 'react-basics';

components/common/FilterLink.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import classNames from 'classnames';
 import Link from 'next/link';
 import { safeDecodeURI } from 'next-basics';

components/common/Icon.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import styles from './Icon.module.css';

components/common/Link.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import NextLink from 'next/link';

components/common/Loading.js

@@ -1,21 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import styles from './Loading.module.css';
-
-function Loading({ className, overlay = false }) {
-  return (
-    <div className={classNames(styles.loading, { [styles.overlay]: overlay }, className)}>
-      <div />
-      <div />
-      <div />
-    </div>
-  );
-}
-
-Loading.propTypes = {
-  className: PropTypes.string,
-  overlay: PropTypes.bool,
-};
-
-export default Loading;

components/common/Loading.module.css

@@ -1,55 +0,0 @@
-@keyframes blink {
-  0% {
-    opacity: 0.2;
-  }
-  20% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0.2;
-  }
-}
-
-.loading {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  margin: 0;
-}
-
-.loading.overlay {
-  height: 100%;
-  width: 100%;
-  z-index: 10;
-  background: var(--base400);
-  opacity: 0.4;
-}
-
-.loading div {
-  width: 10px;
-  height: 10px;
-  border-radius: 100%;
-  background: var(--base400);
-  animation: blink 1.4s infinite;
-  animation-fill-mode: both;
-}
-
-.loading.overlay div {
-  background: var(--base900);
-}
-
-.loading div + div {
-  margin-left: 10px;
-}
-
-.loading div:nth-child(2) {
-  animation-delay: 0.2s;
-}
-
-.loading div:nth-child(3) {
-  animation-delay: 0.4s;
-}

components/common/Menu.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import styles from './Menu.module.css';

components/common/MenuButton.js

@@ -1,4 +1,4 @@
-import React, { useState, useRef } from 'react';
+import { useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Menu from 'components/common/Menu';

components/common/NavMenu.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import { useRouter } from 'next/router';
 import classNames from 'classnames';

components/common/NoData.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { FormattedMessage } from 'react-intl';

components/common/OverflowText.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import ReactTooltip from 'react-tooltip';
 
 import styles from './OverflowText.module.css';

components/common/RefreshButton.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import useStore from 'store/queries';

components/common/Tag.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import styles from './Tag.module.css';

components/common/WorldMap.js

@@ -1,4 +1,4 @@
-import React, { useState, useMemo } from 'react';
+import { useState, useMemo } from 'react';
 import { useRouter } from 'next/router';
 import PropTypes from 'prop-types';
 import ReactTooltip from 'react-tooltip';