Refactored exports.

components/common/EmptyPlaceholder.js

@@ -1,7 +1,7 @@
 import { Icon, Text, Flexbox } from 'react-basics';
 import Logo from 'assets/logo.svg';
 
-function EmptyPlaceholder({ message, children }) {
+export function EmptyPlaceholder({ message, children }) {
   return (
     <Flexbox direction="column" alignItems="center" justifyContent="center" gap={60} height={600}>
       <Icon size="xl">

components/common/ErrorMessage.js

@@ -2,7 +2,7 @@ import { Icon, Icons, Text } from 'react-basics';
 import styles from './ErrorMessage.module.css';
 import useMessages from 'hooks/useMessages';
 
-export default function ErrorMessage() {
+export function ErrorMessage() {
   const { formatMessage, messages } = useMessages();
 
   return (
@@ -14,3 +14,5 @@ export default function ErrorMessage() {
     </div>
   );
 }
+
+export default ErrorMessage;

components/common/Favicon.js

@@ -5,7 +5,7 @@ function getHostName(url) {
   return match && match.length > 1 ? match[1] : null;
 }
 
-function Favicon({ domain, ...props }) {
+export function Favicon({ domain, ...props }) {
   const hostName = domain ? getHostName(domain) : null;
 
   return hostName ? (

components/common/FilterButtons.js

@@ -1,6 +1,6 @@
 import { ButtonGroup, Button, Flexbox } from 'react-basics';
 
-export default function FilterButtons({ items, selectedKey, onSelect }) {
+export function FilterButtons({ items, selectedKey, onSelect }) {
   return (
     <Flexbox justifyContent="center">
       <ButtonGroup items={items} selectedKey={selectedKey} onSelect={onSelect}>
@@ -9,3 +9,5 @@ export default function FilterButtons({ items, selectedKey, onSelect }) {
     </Flexbox>
   );
 }
+
+export default FilterButtons;

components/common/FilterLink.js

@@ -6,7 +6,7 @@ import usePageQuery from 'hooks/usePageQuery';
 import useMessages from 'hooks/useMessages';
 import styles from './FilterLink.module.css';
 
-export default function FilterLink({ id, value, label, externalUrl }) {
+export function FilterLink({ id, value, label, externalUrl }) {
   const { formatMessage, labels } = useMessages();
   const { resolveUrl, query } = usePageQuery();
   const active = query[id] !== undefined;
@@ -37,3 +37,5 @@ export default function FilterLink({ id, value, label, externalUrl }) {
     </div>
   );
 }
+
+export default FilterLink;

components/common/HamburgerButton.js

@@ -5,7 +5,7 @@ import Icons from 'components/icons';
 import useMessages from 'hooks/useMessages';
 import useConfig from 'hooks/useConfig';
 
-export default function HamburgerButton() {
+export function HamburgerButton() {
   const { formatMessage, labels } = useMessages();
   const [active, setActive] = useState(false);
   const { cloudMode } = useConfig();
@@ -57,3 +57,5 @@ export default function HamburgerButton() {
     </>
   );
 }
+
+export default HamburgerButton;

components/common/HoverTooltip.js

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import { Tooltip } from 'react-basics';
 import styles from './HoverTooltip.module.css';
 
-export default function HoverTooltip({ tooltip }) {
+export function HoverTooltip({ tooltip }) {
   const [position, setPosition] = useState({ x: -1000, y: -1000 });
 
   useEffect(() => {
@@ -23,3 +23,5 @@ export default function HoverTooltip({ tooltip }) {
     </div>
   );
 }
+
+export default HoverTooltip;

components/common/MobileMenu.js

@@ -3,7 +3,7 @@ import { useRouter } from 'next/router';
 import Link from 'next/link';
 import styles from './MobileMenu.module.css';
 
-export default function MobileMenu({ items = [], onClose }) {
+export function MobileMenu({ items = [], onClose }) {
   const { pathname } = useRouter();
 
   const Items = ({ items, className }) => (
@@ -34,3 +34,5 @@ export default function MobileMenu({ items = [], onClose }) {
     </div>
   );
 }
+
+export default MobileMenu;

components/common/NoData.js

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import styles from './NoData.module.css';
 import useMessages from 'hooks/useMessages';
 
-function NoData({ className }) {
+export function NoData({ className }) {
   const { formatMessage, messages } = useMessages();
 
   return (

components/common/SettingsTable.js

@@ -1,7 +1,7 @@
 import { Table, TableHeader, TableBody, TableRow, TableCell, TableColumn } from 'react-basics';
 import styles from './SettingsTable.module.css';
 
-export default function SettingsTable({ columns = [], data = [], children, cellRender }) {
+export function SettingsTable({ columns = [], data = [], children, cellRender }) {
   return (
     <Table columns={columns} rows={data}>
       <TableHeader className={styles.header}>
@@ -34,3 +34,5 @@ export default function SettingsTable({ columns = [], data = [], children, cellR
     </Table>
   );
 }
+
+export default SettingsTable;

components/common/UpdateNotice.js

@@ -6,7 +6,7 @@ import { REPO_URL, VERSION_CHECK } from 'lib/constants';
 import styles from './UpdateNotice.module.css';
 import useMessages from 'hooks/useMessages';
 
-export default function UpdateNotice() {
+export function UpdateNotice() {
   const { formatMessage, labels, messages } = useMessages();
   const { latest, checked, hasUpdate, releaseUrl } = useStore();
   const [dismissed, setDismissed] = useState(false);
@@ -50,3 +50,5 @@ export default function UpdateNotice() {
     </Row>
   );
 }
+
+export default UpdateNotice;

components/common/WorldMap.js

@@ -3,16 +3,16 @@ import { useRouter } from 'next/router';
 import { ComposableMap, Geographies, Geography, ZoomableGroup } from 'react-simple-maps';
 import classNames from 'classnames';
 import { colord } from 'colord';
-import useTheme from 'hooks/useTheme';
+import HoverTooltip from 'components/common/HoverTooltip';
 import { ISO_COUNTRIES, THEME_COLORS, MAP_FILE } from 'lib/constants';
-import styles from './WorldMap.module.css';
+import useTheme from 'hooks/useTheme';
 import useCountryNames from 'hooks/useCountryNames';
 import useLocale from 'hooks/useLocale';
-import HoverTooltip from './HoverTooltip';
 import { formatLongNumber } from 'lib/format';
 import { percentFilter } from 'lib/filters';
+import styles from './WorldMap.module.css';
 
-function WorldMap({ data, className }) {
+export function WorldMap({ data, className }) {
   const { basePath } = useRouter();
   const [tooltip, setTooltip] = useState();
   const [theme] = useTheme();