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,22 +23,20 @@ const GlobalStyle = createGlobalStyle`
 
 import 'semantic-ui-css/semantic.min.css'
 
-class App extends Component {
-  render() {
-    return (
-      <>
-        <Helmet>
-          <meta
-            name="description"
-            content="Simple and User-friendly Photo Gallery for Personal Servers"
-          />
-        </Helmet>
-        <GlobalStyle />
-        <Routes />
-        <Messages />
-      </>
-    )
-  }
+const App = () => {
+  return (
+    <>
+      <Helmet>
+        <meta
+          name="description"
+          content="Simple and User-friendly Photo Gallery for Personal Servers"
+        />
+      </Helmet>
+      <GlobalStyle />
+      <Routes />
+      <Messages />
+    </>
+  )
 }
 
 export default App

ui/src/components/routes/Routes.js

@@ -24,37 +24,35 @@ const SettingsPage = React.lazy(() =>
   import('../../Pages/SettingsPage/SettingsPage')
 )
 
-class Routes extends React.Component {
-  render() {
-    return (
-      <React.Suspense
-        fallback={
-          <Layout>
-            <Loader active>Loading page</Loader>
-          </Layout>
-        }
-      >
-        <Switch>
-          <Route path="/login" component={LoginPage} />
-          <Route path="/logout">
-            {() => {
-              clearTokenCookie()
-              location.href = '/'
-            }}
-          </Route>
-          <Route path="/initialSetup" component={InitialSetupPage} />
-          <Route path="/share" component={SharePage} />
-          <AuthorizedRoute exact path="/albums" component={AlbumsPage} />
-          <AuthorizedRoute path="/album/:id/:subPage?" component={AlbumPage} />
-          <AuthorizedRoute path="/photos/:subPage?" component={PhotosPage} />
-          <AuthorizedRoute path="/places" component={PlacesPage} />
-          <AuthorizedRoute admin path="/settings" component={SettingsPage} />
-          <Route path="/" exact render={() => <Redirect to="/photos" />} />
-          <Route render={() => <div>Page not found</div>} />
-        </Switch>
-      </React.Suspense>
-    )
-  }
+const Routes = () => {
+  return (
+    <React.Suspense
+      fallback={
+        <Layout>
+          <Loader active>Loading page</Loader>
+        </Layout>
+      }
+    >
+      <Switch>
+        <Route path="/login" component={LoginPage} />
+        <Route path="/logout">
+          {() => {
+            clearTokenCookie()
+            location.href = '/'
+          }}
+        </Route>
+        <Route path="/initialSetup" component={InitialSetupPage} />
+        <Route path="/share" component={SharePage} />
+        <AuthorizedRoute exact path="/albums" component={AlbumsPage} />
+        <AuthorizedRoute path="/album/:id/:subPage?" component={AlbumPage} />
+        <AuthorizedRoute path="/photos/:subPage?" component={PhotosPage} />
+        <AuthorizedRoute path="/places" component={PlacesPage} />
+        <AuthorizedRoute admin path="/settings" component={SettingsPage} />
+        <Route path="/" exact render={() => <Redirect to="/photos" />} />
+        <Route render={() => <div>Page not found</div>} />
+      </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,42 +41,36 @@ const SidebarDismissButton = styled(Icon)`
 export const SidebarContext = createContext()
 SidebarContext.displayName = 'SidebarContext'
 
-class Sidebar extends React.Component {
-  constructor(props) {
-    super(props)
+const Sidebar = ({ children }) => {
+  const [state, setState] = useState({
+    content: null,
+  })
 
-    this.state = {
-      content: null,
-    }
-
-    this.update = content => {
-      this.setState({ content })
-    }
+  const update = content => {
+    setState({ content })
   }
 
-  render() {
-    return (
-      <SidebarContext.Provider
-        value={{ updateSidebar: this.update, content: this.state.content }}
-      >
-        {this.props.children}
-        <SidebarContext.Consumer>
-          {value => (
-            <SidebarContainer highlighted={value.content != null}>
-              {value.content}
-              <SidebarDismissButton
-                name="angle double right"
-                size="big"
-                link
-                onClick={() => this.setState({ content: null })}
-              />
-              <div style={{ height: 100 }}></div>
-            </SidebarContainer>
-          )}
-        </SidebarContext.Consumer>
-      </SidebarContext.Provider>
-    )
-  }
+  return (
+    <SidebarContext.Provider
+      value={{ updateSidebar: update, content: state.content }}
+    >
+      {children}
+      <SidebarContext.Consumer>
+        {value => (
+          <SidebarContainer highlighted={value.content != null}>
+            {value.content}
+            <SidebarDismissButton
+              name="angle double right"
+              size="big"
+              link
+              onClick={() => setState({ content: null })}
+            />
+            <div style={{ height: 100 }}></div>
+          </SidebarContainer>
+        )}
+      </SidebarContext.Consumer>
+    </SidebarContext.Provider>
+  )
 }
 
 Sidebar.propTypes = {