converting class to functional components

src/modules/Core/App.tsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { FunctionComponent } from 'react';
 import { connect } from 'react-redux';
 
 import Page from '@atlaskit/page';
@@ -8,26 +8,24 @@ import Sidebar from './Component/Layout/Sidebar';
 import Loader from './Component/Loader';
 import Toast from './Component/Layout/Toast';
 
-class App extends Component<any, any> {
-  render() {
-    return (
-      <>
-        { this.props.showLoader ? <Loader /> : ('') }
-        <div style={{ opacity: `${this.props.showLoader ? '.' : ''}1` }}>
-          <Page
-            id={'ak-page-wrapper'}
-            navigationWidth={this.props.isAuthenticated ? 304 : 0}
-            navigation={this.props.isAuthenticated && <Sidebar />}
-          >
-            { this.props.children }
-          </Page>
+const App: FunctionComponent<any> = (props) => {
+  return (
+    <>
+      {props.showLoader ? <Loader /> : ''}
+      <div style={{ opacity: `${props.showLoader ? '.' : ''}1` }}>
+        <Page
+          id={'ak-page-wrapper'}
+          navigationWidth={props.isAuthenticated ? 304 : 0}
+          navigation={props.isAuthenticated && <Sidebar />}
+        >
+          {props.children}
+        </Page>
 
-          <Toast />
-        </div>
-      </>
-    );
-  }
-}
+        <Toast />
+      </div>
+    </>
+  );
+};
 
 const mapStateToProps = (state: any): any => {
   const { isAuthenticated } = state.auth;

src/modules/Core/Component/Form/ButtonBack.tsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { FunctionComponent } from 'react';
 import styled from 'styled-components';
 import { Link } from 'react-router-dom';
 import Button from '@atlaskit/button';
@@ -16,27 +16,23 @@ const StyledButtonWrapper = styled.div`
   font-size: 14px;
 `;
 
-const ButtonWrapper = ({ children }: {
-  children: React.ReactNode;
-}) => (
-  <StyledButtonWrapper>
-    {children}
-  </StyledButtonWrapper>
+const ButtonWrapper = ({ children }: { children: React.ReactNode }) => (
+  <StyledButtonWrapper>{children}</StyledButtonWrapper>
 );
 
-class ButtonBack extends Component<any, any> {
-  render() {
-    return (
-      <ButtonContainer>
-        <h4 style={{display: 'inline-block'}}>{this.props.titleBefore}</h4>
-        <ButtonWrapper>
-          <Link to={this.props.path}>
-            <Button appearance='primary' iconBefore={<ArrowLeftIcon label='Go Back' size='small' />}>Back</Button>
-          </Link>
-        </ButtonWrapper>
-      </ButtonContainer>
-    );
-  }
-}
+const ButtonBack: FunctionComponent<any> = (props) => {
+  return (
+    <ButtonContainer>
+      <h4 style={{ display: 'inline-block' }}>{props.titleBefore}</h4>
+      <ButtonWrapper>
+        <Link to={props.path}>
+          <Button appearance="primary" iconBefore={<ArrowLeftIcon label="Go Back" size="small" />}>
+            Back
+          </Button>
+        </Link>
+      </ButtonWrapper>
+    </ButtonContainer>
+  );
+};
 
 export default connect(null, null)(ButtonBack);

src/modules/Core/Component/Form/Footer.tsx

@@ -1,19 +1,17 @@
-import React, { Component } from 'react';
+import React, { FunctionComponent } from 'react';
 import { connect } from 'react-redux';
 import { FormFooter as AFormFooter } from '@atlaskit/form';
 import Button from '@atlaskit/button';
 import CheckIcon from '@atlaskit/icon/glyph/check';
 
-class FormFooter extends Component<any, any> {
-  render() {
-    return (
-      <AFormFooter>
-        <Button type={'submit'} appearance={'primary'} iconBefore={<CheckIcon label='Submit' size='small'/>}>
-          Submit
-        </Button>
-      </AFormFooter>
-    );
-  }
-}
+const FormFooter: FunctionComponent<any> = () => {
+  return (
+    <AFormFooter>
+      <Button type={'submit'} appearance={'primary'} iconBefore={<CheckIcon label="Submit" size="small" />}>
+        Submit
+      </Button>
+    </AFormFooter>
+  );
+};
 
 export default connect()(FormFooter);

src/modules/Core/Component/Layout/Sidebar/SearchResults.tsx

@@ -1,42 +1,34 @@
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import React, { FunctionComponent } from 'react';
 import { Link } from 'react-router-dom';
 
-export default class SearchResults extends Component<any, any> {
-  static propTypes = {
-    matchingResults: PropTypes.arrayOf(PropTypes.object),
-    onResultClicked: PropTypes.func,
-  };
+const SearchResults: FunctionComponent<any> = (props) => {
+  if (!props.matchingResults.length) {
+    return <p>Nothing found, keep on searching!</p>;
+  }
+  return (
+    <ul
+      style={{
+        listStyleType: 'none',
+        margin: '16px 0',
+        padding: 0,
+      }}
+    >
+      {props.matchingResults.map((result: any) => (
+        <li key={result.name} style={{ padding: 8 }}>
+          <Link to={result.link} onClick={props.onResultClicked}>
+            {result.name}
+          </Link>
+          <span style={{ display: 'block' }}>{result.description}</span>
+        </li>
+      ))}
+    </ul>
+  );
+};
 
-  render() {
-    if (!this.props.matchingResults.length) {
-      return (
-        <p>Nothing found, keep on searching!</p>
-      );
-    }
+SearchResults.propTypes = {
+  matchingResults: PropTypes.arrayOf(PropTypes.object),
+  onResultClicked: PropTypes.func,
+};
 
-    return (
-      <ul
-        style={{
-          listStyleType: 'none',
-          margin: '16px 0',
-          padding: 0,
-        }}
-      >
-        {
-          this.props.matchingResults.map((result: any) => (
-            <li key={result.name} style={{padding: 8}}>
-              <Link
-                to={result.link}
-                onClick={this.props.onResultClicked}
-              >
-                {result.name}
-              </Link>
-              <span style={{display: 'block'}}>{result.description}</span>
-            </li>
-          ))
-        }
-      </ul>
-    );
-  }
-}
+export default SearchResults;

src/modules/Core/Component/Layout/Sidebar/index.tsx

@@ -1,55 +1,49 @@
-import React, { Component } from 'react';
+import React, { FunctionComponent, useState } from 'react';
 
-import {
-  LayoutManager,
-  NavigationProvider,
-  ThemeProvider,
-  dark,
-} from '@atlaskit/navigation-next';
+import { LayoutManager, NavigationProvider, ThemeProvider, dark } from '@atlaskit/navigation-next';
 import GlobalSidebar from 'modules/Core/Component/Layout/Sidebar/GlobalSidebar';
 import ContainerNavigation from 'modules/Core/Component/Layout/Sidebar/ContainerNavigation';
 import Notification from 'modules/Core/Component/Notification';
+import PropTypes from 'prop-types';
 
-class Sidebar extends Component<any, any> {
-  static defaultProps = {
-    navLinks: [],
+const Sidebar: FunctionComponent<any> = (props) => {
+  const [state, setOffset] = useState({ offset: 0 });
+  /*
+  TODO: Could not see where the current setOffset was being used so left this in here in case i missed something
+  setOffset = (value: any) => {
+    state = {
+      ...state,
+      offset: value,
+    };
   };
+*/
+  return (
+    <NavigationProvider>
+      <ThemeProvider
+        theme={(theme: any) => ({
+          ...theme,
+          mode: dark,
+        })}
+      >
+        <LayoutManager
+          globalNavigation={GlobalSidebar}
+          productNavigation={() => <ContainerNavigation {...props.navLinks} />}
+          topOffset={offset}
+        >
+          <div style={{ padding: '32px 40px' }}>{props.children}</div>
+        </LayoutManager>
+        <Notification />
+      </ThemeProvider>
+    </NavigationProvider>
+  );
+};
 
-  constructor(props: any) {
-    super(props);
-    this.state = { offset: 0 };
-    this.setOffset = this.setOffset.bind(this);
-  }
-
-  setOffset(value: any) {
-    this.setState({
-      ...this.state,
-      offset: value,
-    });
-  }
+Sidebar.propTypes = {
+  navLinks: PropTypes.array,
+};
 
-  render() {
-    return (
-      <NavigationProvider>
-        <ThemeProvider theme={(theme: any) => ({
-          ...theme, mode: dark
-        })}>
-          <LayoutManager
-            globalNavigation={GlobalSidebar}
-            productNavigation={
-              () => <ContainerNavigation {...this.props.navLinks} />
-            }
-            topOffset={this.state.offset}
-          >
-            <div style={{ padding: '32px 40px' }}>
-              {this.props.children}
-            </div>
-          </LayoutManager>
-          <Notification/>
-        </ThemeProvider>
-      </NavigationProvider>
-    );
-  }
-}
+Sidebar.defaultProps = {
+  navLinks: [],
+};
 
 export default Sidebar;

src/modules/Core/Component/Layout/Toast.tsx

@@ -1,11 +1,9 @@
-import React, { PureComponent } from 'react';
+import React, { FunctionComponent } from 'react';
 import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 
-class Toast extends PureComponent<any, any> {
-  render() {
-    return <ToastContainer />;
-  }
-}
+const Toast: FunctionComponent<any> = () => {
+  return <ToastContainer />;
+};
 
 export default Toast;

src/modules/Core/Component/Loader.tsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { useState, FunctionComponent } from 'react';
 import { css } from '@emotion/core';
 import GridLoader from 'react-spinners/GridLoader';
 
@@ -11,28 +11,16 @@ const override = css`
   margin: 0px auto;
 `;
 
-class Loader extends Component<any, any> {
-  constructor(props: any) {
-    super(props);
-    this.state = {
-      loading: true,
-    };
-  }
+const Loader: FunctionComponent<any> = () => {
+  const [loading] = useState(true);
 
-  render() {
-    return (
-      <>
-        <div className={'sweet-loading'}>
-          <GridLoader
-            css={override}
-            size={15}
-            color={'#123abc'}
-            loading={this.state.loading}
-          />
-        </div>
-      </>
-    );
-  }
-}
+  return (
+    <>
+      <div className={'sweet-loading'}>
+        <GridLoader css={override} size={15} color={'#123abc'} loading={loading} />
+      </div>
+    </>
+  );
+};
 
 export default Loader;