Refactored exports.

components/layout/AppLayout.js

@@ -8,7 +8,7 @@ import useConfig from 'hooks/useConfig';
 import { CURRENT_VERSION } from 'lib/constants';
 import styles from './AppLayout.module.css';
 
-export default function AppLayout({ title, children }) {
+export function AppLayout({ title, children }) {
   const { user } = useRequireLogin();
   const config = useConfig();
   const { pathname } = useRouter();
@@ -34,3 +34,5 @@ export default function AppLayout({ title, children }) {
     </div>
   );
 }
+
+export default AppLayout;

components/layout/Footer.js

@@ -4,7 +4,7 @@ import { CURRENT_VERSION, HOMEPAGE_URL, REPO_URL } from 'lib/constants';
 import { labels } from 'components/messages';
 import styles from './Footer.module.css';
 
-export default function Footer() {
+export function Footer() {
   return (
     <footer className={styles.footer}>
       <Row>
@@ -29,3 +29,5 @@ export default function Footer() {
     </footer>
   );
 }
+
+export default Footer;

components/layout/Header.js

@@ -6,7 +6,7 @@ import SettingsButton from 'components/input/SettingsButton';
 import Icons from 'components/icons';
 import styles from './Header.module.css';
 
-export default function Header() {
+export function Header() {
   return (
     <header className={styles.header}>
       <Row>
@@ -27,3 +27,5 @@ export default function Header() {
     </header>
   );
 }
+
+export default Header;

components/layout/NavBar.js

@@ -1,4 +1,3 @@
-import { useState } from 'react';
 import { Icon, Text, Row, Column } from 'react-basics';
 import Link from 'next/link';
 import classNames from 'classnames';
@@ -12,7 +11,7 @@ import useMessages from 'hooks/useMessages';
 import { useRouter } from 'next/router';
 import HamburgerButton from '../common/HamburgerButton';
 
-export default function NavBar() {
+export function NavBar() {
   const { pathname } = useRouter();
   const { cloudMode } = useConfig();
   const { formatMessage, labels } = useMessages();
@@ -61,3 +60,5 @@ export default function NavBar() {
     </div>
   );
 }
+
+export default NavBar;

components/layout/NavGroup.js

@@ -6,7 +6,7 @@ import Link from 'next/link';
 import Icons from 'components/icons';
 import styles from './NavGroup.module.css';
 
-export default function NavGroup({
+export function NavGroup({
   title,
   items,
   defaultExpanded = true,
@@ -54,3 +54,5 @@ export default function NavGroup({
     </div>
   );
 }
+
+export default NavGroup;

components/layout/Page.js

@@ -3,7 +3,7 @@ import { Banner, Loading } from 'react-basics';
 import useMessages from 'hooks/useMessages';
 import styles from './Page.module.css';
 
-export default function Page({ className, error, loading, children }) {
+export function Page({ className, error, loading, children }) {
   const { formatMessage, messages } = useMessages();
 
   if (error) {
@@ -16,3 +16,5 @@ export default function Page({ className, error, loading, children }) {
 
   return <div className={classNames(styles.page, className)}>{children}</div>;
 }
+
+export default Page;

components/layout/PageHeader.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import styles from './PageHeader.module.css';
 
-export default function PageHeader({ title, children }) {
+export function PageHeader({ title, children }) {
   return (
     <div className={styles.header}>
       <div className={styles.title}>{title}</div>
@@ -9,3 +9,5 @@ export default function PageHeader({ title, children }) {
     </div>
   );
 }
+
+export default PageHeader;

components/layout/SettingsLayout.js

@@ -1,5 +1,4 @@
 import { Row, Column } from 'react-basics';
-import classNames from 'classnames';
 import { useRouter } from 'next/router';
 import SideNav from './SideNav';
 import useUser from 'hooks/useUser';
@@ -7,7 +6,7 @@ import useMessages from 'hooks/useMessages';
 import useConfig from 'hooks/useConfig';
 import styles from './SettingsLayout.module.css';
 
-export default function SettingsLayout({ children }) {
+export function SettingsLayout({ children }) {
   const { user } = useUser();
   const { pathname } = useRouter();
   const { formatMessage, labels } = useMessages();
@@ -35,3 +34,5 @@ export default function SettingsLayout({ children }) {
     </Row>
   );
 }
+
+export default SettingsLayout;

components/layout/ShareLayout.js

@@ -2,7 +2,7 @@ import { Container } from 'react-basics';
 import Header from './Header';
 import Footer from './Footer';
 
-export default function ShareLayout({ children }) {
+export function ShareLayout({ children }) {
   return (
     <Container>
       <Header />
@@ -11,3 +11,5 @@ export default function ShareLayout({ children }) {
     </Container>
   );
 }
+
+export default ShareLayout;

components/layout/SideNav.js

@@ -4,7 +4,7 @@ import { useRouter } from 'next/router';
 import Link from 'next/link';
 import styles from './SideNav.module.css';
 
-export default function SideNav({ selectedKey, items, shallow, onSelect = () => {} }) {
+export function SideNav({ selectedKey, items, shallow, onSelect = () => {} }) {
   const { asPath } = useRouter();
   return (
     <Menu items={items} selectedKey={selectedKey} className={styles.menu} onSelect={onSelect}>
@@ -21,3 +21,5 @@ export default function SideNav({ selectedKey, items, shallow, onSelect = () =>
     </Menu>
   );
 }
+
+export default SideNav;