Convert some components to functional components

__tests__/src/components/AccessTokenSender.test.js

@@ -1,5 +1,5 @@
 import { render } from 'test-utils';
-import { AccessTokenSender } from '../../../src/components/AccessTokenSender';
+import AccessTokenSender from '../../../src/components/AccessTokenSender';
 
 /**
  * Helper function to create a shallow wrapper around ErrorDialog

__tests__/src/components/AnnotationSettings.test.js

@@ -1,6 +1,6 @@
 import { render, screen } from 'test-utils';
 import userEvent from '@testing-library/user-event';
-import { AnnotationSettings } from '../../../src/components/AnnotationSettings';
+import AnnotationSettings from '../../../src/components/AnnotationSettings';
 
 /** */
 function createWrapper(props) {

__tests__/src/components/App.test.js

@@ -1,6 +1,6 @@
 import { render, screen } from 'test-utils';
 
-import { App } from '../../../src/components/App';
+import App from '../../../src/components/App';
 
 /** */
 function createWrapper(props) {

__tests__/src/components/Branding.test.js

@@ -1,5 +1,5 @@
 import { render, screen, within } from 'test-utils';
-import { Branding } from '../../../src/components/Branding';
+import Branding from '../../../src/components/Branding';
 
 describe('Branding', () => {
   it('renders', () => {

src/components/AccessTokenSender.js

@@ -1,48 +1,28 @@
-import { Component } from 'react';
-import PropTypes from 'prop-types';
+import { useCallback } from 'react';
 import { IIIFIFrameCommunication } from './IIIFIFrameCommunication';
+/* eslint-disable react/prop-types */
 
 /**
  * Opens a new window for click
  */
-export class AccessTokenSender extends Component {
-  /** */
-  constructor(props) {
-    super(props);
+export default function AccessTokenSender({ handleAccessTokenMessage, url }) {
+  const onReceiveAccessTokenMessage = useCallback((e) => {
+    if (e.data && e.data.messageId && e.data.messageId === url) {
+      handleAccessTokenMessage(e.data);
+    }
+  }, [handleAccessTokenMessage, url]);
 
-    this.onReceiveAccessTokenMessage = this.onReceiveAccessTokenMessage.bind(this);
-  }
+  if (!url) return null;
 
-  /** @private */
-  onReceiveAccessTokenMessage(e) {
-    const { handleAccessTokenMessage, url } = this.props;
-    if (e.data && e.data.messageId && e.data.messageId === url) handleAccessTokenMessage(e.data);
-  }
-
-  /** */
-  render() {
-    const { url } = this.props;
-    if (!url) return null;
-
-    /**
-    login, clickthrough/kiosk open @id, wait for close
-    external, no-op
-    */
-    return (
-      <IIIFIFrameCommunication
-        src={`${url}?origin=${window.origin}&messageId=${url}`}
-        title="AccessTokenSender"
-        handleReceiveMessage={this.onReceiveAccessTokenMessage}
-      />
-    );
-  }
+  /**
+  login, clickthrough/kiosk open @id, wait for close
+  external, no-op
+  */
+  return (
+    <IIIFIFrameCommunication
+      src={`${url}?origin=${window.origin}&messageId=${url}`}
+      title="AccessTokenSender"
+      handleReceiveMessage={onReceiveAccessTokenMessage}
+    />
+  );
 }
-
-AccessTokenSender.propTypes = {
-  handleAccessTokenMessage: PropTypes.func.isRequired,
-  url: PropTypes.string,
-};
-
-AccessTokenSender.defaultProps = {
-  url: undefined,
-};

src/components/AnnotationSettings.js

@@ -1,39 +1,26 @@
-import { Component } from 'react';
-import PropTypes from 'prop-types';
 import VisibilityIcon from '@mui/icons-material/VisibilitySharp';
 import VisibilityOffIcon from '@mui/icons-material/VisibilityOffSharp';
 import MiradorMenuButton from '../containers/MiradorMenuButton';
+/* eslint-disable react/prop-types */
 
 /**
  * AnnotationSettings is a component to handle various annotation
  * display settings in the Annotation companion window
-*/
-export class AnnotationSettings extends Component {
-  /**
-   * Returns the rendered component
-  */
-  render() {
-    const {
-      displayAll, displayAllDisabled, t, toggleAnnotationDisplay,
-    } = this.props;
-
-    return (
-      <MiradorMenuButton
-        aria-label={t(displayAll ? 'displayNoAnnotations' : 'highlightAllAnnotations')}
-        onClick={toggleAnnotationDisplay}
-        disabled={displayAllDisabled}
-        size="small"
-      >
-        { displayAll ? <VisibilityIcon /> : <VisibilityOffIcon /> }
-      </MiradorMenuButton>
-    );
-  }
+ */
+export default function AnnotationSettings({
+  displayAll,
+  displayAllDisabled,
+  t,
+  toggleAnnotationDisplay,
+}) {
+  return (
+    <MiradorMenuButton
+      aria-label={t(displayAll ? 'displayNoAnnotations' : 'highlightAllAnnotations')}
+      onClick={toggleAnnotationDisplay}
+      disabled={displayAllDisabled}
+      size="small"
+    >
+      {displayAll ? <VisibilityIcon /> : <VisibilityOffIcon />}
+    </MiradorMenuButton>
+  );
 }
-
-AnnotationSettings.propTypes = {
-  displayAll: PropTypes.bool.isRequired,
-  displayAllDisabled: PropTypes.bool.isRequired,
-  t: PropTypes.func.isRequired,
-  toggleAnnotationDisplay: PropTypes.func.isRequired,
-  windowId: PropTypes.string.isRequired, // eslint-disable-line react/no-unused-prop-types
-};

src/components/App.js

@@ -1,56 +1,29 @@
 import {
-  createRef, Component, lazy, Suspense,
+  createRef, lazy, Suspense,
 } from 'react';
-import PropTypes from 'prop-types';
 import PluginProvider from '../extend/PluginProvider';
 import AppProviders from '../containers/AppProviders';
 import WorkspaceContext from '../contexts/WorkspaceContext';
 
 const WorkspaceArea = lazy(() => import('../containers/WorkspaceArea'));
+/* eslint-disable react/prop-types */
 
 /**
  * This is the top level Mirador component.
  * @prop {Object} manifests
  */
-export class App extends Component {
-  /** */
-  constructor(props) {
-    super(props);
-
-    this.areaRef = createRef();
-  }
-
-  /**
-   * render
-   * @return {String} - HTML markup for the component
-   */
-  render() {
-    const { dndManager, plugins } = this.props;
-
-    return (
-      <PluginProvider plugins={plugins}>
-        <AppProviders dndManager={dndManager}>
-          <WorkspaceContext.Provider value={this.areaRef}>
-            <Suspense
-              fallback={<div />}
-            >
-              <WorkspaceArea areaRef={this.areaRef} />
-            </Suspense>
-          </WorkspaceContext.Provider>
-        </AppProviders>
-      </PluginProvider>
-    );
-  }
+export default function App({ dndManager, plugins = [] }) {
+  const areaRef = createRef();
+
+  return (
+    <PluginProvider plugins={plugins}>
+      <AppProviders dndManager={dndManager}>
+        <WorkspaceContext.Provider value={areaRef}>
+          <Suspense fallback={<div />}>
+            <WorkspaceArea areaRef={areaRef} />
+          </Suspense>
+        </WorkspaceContext.Provider>
+      </AppProviders>
+    </PluginProvider>
+  );
 }
-
-App.propTypes = {
-  dndManager: PropTypes.object, // eslint-disable-line react/forbid-prop-types
-  plugins: PropTypes.array, // eslint-disable-line react/forbid-prop-types
-};
-
-App.defaultProps = {
-  dndManager: undefined,
-  plugins: [],
-};
-
-export default App;

src/components/Branding.js

@@ -1,47 +1,37 @@
-import { Component } from 'react';
-import PropTypes from 'prop-types';
 import IconButton from '@mui/material/IconButton';
 import Typography from '@mui/material/Typography';
 import Stack from '@mui/material/Stack';
 import MiradorIcon from './icons/MiradorIcon';
 
+/* eslint-disable react/prop-types */
 /**
  * Display a branding icon
  */
-export class Branding extends Component {
-  /** */
-  render() {
-    const { t, variant, ...ContainerProps } = this.props;
-
-    return (
-      <Stack alignItems="center" {...ContainerProps}>
-        { variant === 'wide' && (
+export default function Branding({ t = (k) => k, variant = 'default', ...ContainerProps }) {
+  return (
+    <Stack alignItems="center" {...ContainerProps}>
+      {variant === 'wide' && (
         <div>
-          <Typography align="center" component="p" variant="h3">{t('mirador')}</Typography>
+          <Typography align="center" component="p" variant="h3">
+            {t('mirador')}
+          </Typography>
         </div>
-        )}
-        <Typography align="center">
-          <IconButton
-            component="a"
-            href="https://projectmirador.org"
-            target="_blank"
-            rel="noopener"
-            size="large"
-          >
-            <MiradorIcon aria-label={t('aboutMirador')} titleAccess={t('aboutMirador')} fontSize="large" />
-          </IconButton>
-        </Typography>
-      </Stack>
-    );
-  }
+      )}
+      <Typography align="center">
+        <IconButton
+          component="a"
+          href="https://projectmirador.org"
+          target="_blank"
+          rel="noopener"
+          size="large"
+        >
+          <MiradorIcon
+            aria-label={t('aboutMirador')}
+            titleAccess={t('aboutMirador')}
+            fontSize="large"
+          />
+        </IconButton>
+      </Typography>
+    </Stack>
+  );
 }
-
-Branding.propTypes = {
-  t: PropTypes.func,
-  variant: PropTypes.oneOf(['default', 'wide']),
-};
-
-Branding.defaultProps = {
-  t: k => k,
-  variant: 'default',
-};

src/components/IIIFAuthentication.js

@@ -1,6 +1,6 @@
 import { Component } from 'react';
 import PropTypes from 'prop-types';
-import { AccessTokenSender } from './AccessTokenSender';
+import AccessTokenSender from './AccessTokenSender';
 import { NewWindow } from './NewWindow';
 import WindowAuthenticationBar from '../containers/WindowAuthenticationBar';
 

src/containers/AnnotationSettings.js

@@ -7,7 +7,7 @@ import {
   getAnnotationResourcesByMotivation,
   getWindow,
 } from '../state/selectors';
-import { AnnotationSettings } from '../components/AnnotationSettings';
+import AnnotationSettings from '../components/AnnotationSettings';
 
 /**
  * Mapping redux state to component props using connect

src/containers/Branding.js

@@ -1,4 +1,4 @@
 import { withPlugins } from '../extend/withPlugins';
-import { Branding } from '../components/Branding';
+import Branding from '../components/Branding';
 
 export default withPlugins('Branding')(Branding);