App, Routes and Sidebar components are migrated to functional ones

ui/src/App.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import React from 'react'
 import { createGlobalStyle } from 'styled-components'
 import { Helmet } from 'react-helmet'
 import Routes from './components/routes/Routes'
@@ -23,8 +23,7 @@ const GlobalStyle = createGlobalStyle`
 
 import 'semantic-ui-css/semantic.min.css'
 
-class App extends Component {
-  render() {
+const App = () => {
   return (
     <>
       <Helmet>
@@ -38,7 +37,6 @@ class App extends Component {
       <Messages />
     </>
   )
-  }
 }
 
 export default App

ui/src/components/routes/Routes.js

@@ -24,8 +24,7 @@ const SettingsPage = React.lazy(() =>
   import('../../Pages/SettingsPage/SettingsPage')
 )
 
-class Routes extends React.Component {
-  render() {
+const Routes = () => {
   return (
     <React.Suspense
       fallback={
@@ -54,7 +53,6 @@ class Routes extends React.Component {
       </Switch>
     </React.Suspense>
   )
-  }
 }
 
 export default Routes

ui/src/components/sidebar/Sidebar.js

@@ -1,4 +1,4 @@
-import React, { createContext } from 'react'
+import React, { createContext, useState } from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import { Icon } from 'semantic-ui-react'
@@ -41,25 +41,20 @@ const SidebarDismissButton = styled(Icon)`
 export const SidebarContext = createContext()
 SidebarContext.displayName = 'SidebarContext'
 
-class Sidebar extends React.Component {
-  constructor(props) {
-    super(props)
-
-    this.state = {
+const Sidebar = ({ children }) => {
+  const [state, setState] = useState({
     content: null,
+  })
+
+  const update = content => {
+    setState({ content })
   }
 
-    this.update = content => {
-      this.setState({ content })
-    }
-  }
-
-  render() {
   return (
     <SidebarContext.Provider
-        value={{ updateSidebar: this.update, content: this.state.content }}
+      value={{ updateSidebar: update, content: state.content }}
     >
-        {this.props.children}
+      {children}
       <SidebarContext.Consumer>
         {value => (
           <SidebarContainer highlighted={value.content != null}>
@@ -68,7 +63,7 @@ class Sidebar extends React.Component {
               name="angle double right"
               size="big"
               link
-                onClick={() => this.setState({ content: null })}
+              onClick={() => setState({ content: null })}
             />
             <div style={{ height: 100 }}></div>
           </SidebarContainer>
@@ -76,7 +71,6 @@ class Sidebar extends React.Component {
       </SidebarContext.Consumer>
     </SidebarContext.Provider>
   )
-  }
 }
 
 Sidebar.propTypes = {