Refactored common class components into functions (#273)

Changes: - switched `FooterContent`, `UnconnectedNotificationsContainer`, `TimeRange` and `MobileNavbar` into function components to improve their performance and bundle size - changed resource page import of `NotFoundPage` to be in line of other similar imports
City-of-Turku · Sep 21, 2023 · 541ccc4 · 541ccc4
1 parent 4e2b0d1
commit 541ccc4
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 100 deletions.
diff --git a/app/pages/resource/ResourcePage.js b/app/pages/resource/ResourcePage.js
@@ -18,7 +18,7 @@ import { addNotification } from 'actions/notificationsActions';
 import { fetchResource } from 'actions/resourceActions';
 import { clearReservations, toggleResourceMap } from 'actions/uiActions';
 import PageWrapper from 'pages/PageWrapper';
-import NotFoundPage from 'pages/not-found/NotFoundPage';
+import NotFoundPage from 'pages/not-found';
 import ResourceCalendar from 'shared/resource-calendar';
 import ResourceMap from 'shared/resource-map';
 import { injectT } from 'i18n';

diff --git a/app/shared/footer/FooterContent.js b/app/shared/footer/FooterContent.js
@@ -13,45 +13,42 @@ import logoSv from '@city-assets/images/logo_footer_sv.png';
 import { injectT } from 'i18n';
 import { getFeedbackLink } from 'utils/languageUtils';
 
-class FooterContent extends React.Component {
-  static propTypes = {
-    t: PropTypes.func,
-    currentLang: PropTypes.string,
-  };
-
-  render() {
-    const { t, currentLang } = this.props;
-    const currentLogo = (currentLang !== 'sv') ? logoFi : logoSv;
-    const currentLink = getFeedbackLink(currentLang);
-    return (
-      <Grid>
-        <Row>
-          <Col lg={3} md={3}>
-            <div className="brand-link">
-              <img
-                alt={t('Logo.cityAlt')}
-                src={currentLogo}
-                title={t('Logo.cityAlt')}
-              />
-            </div>
-          </Col>
-          <Col lg={6} md={6}>
-            <h2>Varaamo</h2>
-            <p>
-              <FormattedHTMLMessage id="Footer.addressText" />
-              <br />
-              <br />
-              <Link className="accessibility-info-link" to="/accessibility-info">{t('AccessibilityInfo.title')}</Link>
-              <br />
-              <a className="feedback-link" href={currentLink} rel="noopener noreferrer" target="_blank">
-                {t('Footer.feedbackLink')}
-              </a>
-            </p>
-          </Col>
-        </Row>
-      </Grid>
-    );
-  }
+function FooterContent({ t, currentLang }) {
+  const currentLogo = (currentLang !== 'sv') ? logoFi : logoSv;
+  const currentLink = getFeedbackLink(currentLang);
+  return (
+    <Grid>
+      <Row>
+        <Col lg={3} md={3}>
+          <div className="brand-link">
+            <img
+              alt={t('Logo.cityAlt')}
+              src={currentLogo}
+              title={t('Logo.cityAlt')}
+            />
+          </div>
+        </Col>
+        <Col lg={6} md={6}>
+          <h2>Varaamo</h2>
+          <p>
+            <FormattedHTMLMessage id="Footer.addressText" />
+            <br />
+            <br />
+            <Link className="accessibility-info-link" to="/accessibility-info">{t('AccessibilityInfo.title')}</Link>
+            <br />
+            <a className="feedback-link" href={currentLink} rel="noopener noreferrer" target="_blank">
+              {t('Footer.feedbackLink')}
+            </a>
+          </p>
+        </Col>
+      </Row>
+    </Grid>
+  );
 }
 
+FooterContent.propTypes = {
+  t: PropTypes.func.isRequired,
+  currentLang: PropTypes.string.isRequired,
+};
+
 export default injectT(FooterContent);
diff --git a/app/shared/notifications/NotificationsContainer.js b/app/shared/notifications/NotificationsContainer.js
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import React from 'react';
 import ReactNotifications from 'react-notifications';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
@@ -8,20 +8,18 @@ import { hideNotification } from 'actions/notificationsActions';
 import { injectT } from 'i18n';
 import notificationsSelector from './notificationsSelector';
 
-class UnconnectedNotificationsContainer extends Component {
-  render() {
-    const { actions, notifications, t } = this.props;
-    const translatedNotifications = notifications.map(notification => ({
-      ...notification,
-      message: notification.message || t(notification.messageId),
-    }));
-    return (
-      <ReactNotifications
-        notifications={translatedNotifications}
-        onRequestHide={actions.hideNotification}
-      />
-    );
-  }
+function UnconnectedNotificationsContainer(props) {
+  const { actions, notifications, t } = props;
+  const translatedNotifications = notifications.map(notification => ({
+    ...notification,
+    message: notification.message || t(notification.messageId),
+  }));
+  return (
+    <ReactNotifications
+      notifications={translatedNotifications}
+      onRequestHide={actions.hideNotification}
+    />
+  );
 }
 
 UnconnectedNotificationsContainer.propTypes = {

diff --git a/app/shared/time-range/TimeRange.js b/app/shared/time-range/TimeRange.js
@@ -1,28 +1,26 @@
 import upperFirst from 'lodash/upperFirst';
 import moment from 'moment';
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import React from 'react';
 
-class TimeRange extends Component {
-  render() {
-    const {
-      begin,
-      className,
-      beginFormat,
-      end,
-      endFormat,
-    } = this.props;
-    const beginMoment = moment(begin);
-    const endMoment = moment(end);
-    const rangeString = `${beginMoment.format(beginFormat)} \u2013 ${endMoment.format(endFormat)}`;
-    const ISORangeString = `${begin}/${end}`;
+function TimeRange(props) {
+  const {
+    begin,
+    className,
+    beginFormat,
+    end,
+    endFormat,
+  } = props;
+  const beginMoment = moment(begin);
+  const endMoment = moment(end);
+  const rangeString = `${beginMoment.format(beginFormat)} \u2013 ${endMoment.format(endFormat)}`;
+  const ISORangeString = `${begin}/${end}`;
 
-    return (
-      <time className={className} dateTime={ISORangeString}>
-        {upperFirst(rangeString)}
-      </time>
-    );
-  }
+  return (
+    <time className={className} dateTime={ISORangeString}>
+      {upperFirst(rangeString)}
+    </time>
+  );
 }
 
 TimeRange.propTypes = {

diff --git a/app/shared/top-navbar/mobile/MobileNavbar.js b/app/shared/top-navbar/mobile/MobileNavbar.js
@@ -7,33 +7,28 @@ import Row from 'react-bootstrap/lib/Row';
 import FontChanger from 'shared/top-navbar/accessibility/TopNavbarFontContainer';
 import ContrastChanger from 'shared/top-navbar/accessibility/TopNavbarContrastContainer';
 
-class MobileNavbar extends React.Component {
-  static propTypes = {
-    toggle: PropTypes.bool,
-    contrast: PropTypes.string
-  };
-
-
-  getCollapseStatus = () => (this.props.toggle ? '' : 'is-collapsed')
-
-  render() {
-    const element = this.getCollapseStatus();
-    return (
-      <div aria-hidden={!this.props.toggle} aria-live="polite" className={classNames('mobile-Navbar_mobile', element, this.props.contrast)} id="mobileNavbar">
-        <div className="container">
-          <Row>
-            <Col sm={6} smOffset={6} xs={12}>
-              <ul>
-                <ContrastChanger idPrefix="mobile" />
-                <FontChanger />
-              </ul>
-            </Col>
-          </Row>
-        </div>
+function MobileNavbar({ toggle, contrast }) {
+  const getCollapseStatus = () => (toggle ? '' : 'is-collapsed');
+  const element = getCollapseStatus();
+  return (
+    <div aria-hidden={!toggle} aria-live="polite" className={classNames('mobile-Navbar_mobile', element, contrast)} id="mobileNavbar">
+      <div className="container">
+        <Row>
+          <Col sm={6} smOffset={6} xs={12}>
+            <ul>
+              <ContrastChanger idPrefix="mobile" />
+              <FontChanger />
+            </ul>
+          </Col>
+        </Row>
       </div>
-    );
-  }
+    </div>
+  );
 }
 
+MobileNavbar.propTypes = {
+  toggle: PropTypes.bool,
+  contrast: PropTypes.string
+};
 
 export default MobileNavbar;