diff --git a/frontend/src/Components/Page/Header/PageHeader.js b/frontend/src/Components/Page/Header/PageHeader.js
index e20f0c119..2ee881f31 100644
--- a/frontend/src/Components/Page/Header/PageHeader.js
+++ b/frontend/src/Components/Page/Header/PageHeader.js
@@ -7,7 +7,7 @@ import { icons } from 'Helpers/Props';
import translate from 'Utilities/String/translate';
import KeyboardShortcutsModal from './KeyboardShortcutsModal';
import MovieSearchInputConnector from './MovieSearchInputConnector';
-import PageHeaderActionsMenuConnector from './PageHeaderActionsMenuConnector';
+import PageHeaderActionsMenu from './PageHeaderActionsMenu';
import styles from './PageHeader.css';
class PageHeader extends Component {
@@ -84,6 +84,7 @@ class PageHeader extends Component {
size={14}
title={translate('Donate')}
/>
+
-
diff --git a/frontend/src/Components/Page/Header/PageHeaderActionsMenu.js b/frontend/src/Components/Page/Header/PageHeaderActionsMenu.js
deleted file mode 100644
index 08fc1e2d5..000000000
--- a/frontend/src/Components/Page/Header/PageHeaderActionsMenu.js
+++ /dev/null
@@ -1,90 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import Icon from 'Components/Icon';
-import Menu from 'Components/Menu/Menu';
-import MenuButton from 'Components/Menu/MenuButton';
-import MenuContent from 'Components/Menu/MenuContent';
-import MenuItem from 'Components/Menu/MenuItem';
-import MenuItemSeparator from 'Components/Menu/MenuItemSeparator';
-import { align, icons, kinds } from 'Helpers/Props';
-import translate from 'Utilities/String/translate';
-import styles from './PageHeaderActionsMenu.css';
-
-function PageHeaderActionsMenu(props) {
- const {
- formsAuth,
- onKeyboardShortcutsPress,
- onRestartPress,
- onShutdownPress
- } = props;
-
- return (
-
-
-
- );
-}
-
-PageHeaderActionsMenu.propTypes = {
- formsAuth: PropTypes.bool.isRequired,
- onKeyboardShortcutsPress: PropTypes.func.isRequired,
- onRestartPress: PropTypes.func.isRequired,
- onShutdownPress: PropTypes.func.isRequired
-};
-
-export default PageHeaderActionsMenu;
diff --git a/frontend/src/Components/Page/Header/PageHeaderActionsMenu.tsx b/frontend/src/Components/Page/Header/PageHeaderActionsMenu.tsx
new file mode 100644
index 000000000..0de636f70
--- /dev/null
+++ b/frontend/src/Components/Page/Header/PageHeaderActionsMenu.tsx
@@ -0,0 +1,87 @@
+import React, { useCallback } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import AppState from 'App/State/AppState';
+import Icon from 'Components/Icon';
+import Menu from 'Components/Menu/Menu';
+import MenuButton from 'Components/Menu/MenuButton';
+import MenuContent from 'Components/Menu/MenuContent';
+import MenuItem from 'Components/Menu/MenuItem';
+import MenuItemSeparator from 'Components/Menu/MenuItemSeparator';
+import { align, icons, kinds } from 'Helpers/Props';
+import { restart, shutdown } from 'Store/Actions/systemActions';
+import translate from 'Utilities/String/translate';
+import styles from './PageHeaderActionsMenu.css';
+
+interface PageHeaderActionsMenuProps {
+ onKeyboardShortcutsPress(): void;
+}
+
+function PageHeaderActionsMenu(props: PageHeaderActionsMenuProps) {
+ const { onKeyboardShortcutsPress } = props;
+
+ const dispatch = useDispatch();
+
+ const { authentication, isDocker } = useSelector(
+ (state: AppState) => state.system.status.item
+ );
+
+ const formsAuth = authentication === 'forms';
+
+ const handleRestartPress = useCallback(() => {
+ dispatch(restart());
+ }, [dispatch]);
+
+ const handleShutdownPress = useCallback(() => {
+ dispatch(shutdown());
+ }, [dispatch]);
+
+ return (
+
+
+
+ );
+}
+
+export default PageHeaderActionsMenu;
diff --git a/frontend/src/Components/Page/Header/PageHeaderActionsMenuConnector.js b/frontend/src/Components/Page/Header/PageHeaderActionsMenuConnector.js
deleted file mode 100644
index 3aba95065..000000000
--- a/frontend/src/Components/Page/Header/PageHeaderActionsMenuConnector.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import { restart, shutdown } from 'Store/Actions/systemActions';
-import PageHeaderActionsMenu from './PageHeaderActionsMenu';
-
-function createMapStateToProps() {
- return createSelector(
- (state) => state.system.status,
- (status) => {
- return {
- formsAuth: status.item.authentication === 'forms'
- };
- }
- );
-}
-
-const mapDispatchToProps = {
- restart,
- shutdown
-};
-
-class PageHeaderActionsMenuConnector extends Component {
-
- //
- // Listeners
-
- onRestartPress = () => {
- this.props.restart();
- };
-
- onShutdownPress = () => {
- this.props.shutdown();
- };
-
- //
- // Render
-
- render() {
- return (
-
- );
- }
-}
-
-PageHeaderActionsMenuConnector.propTypes = {
- restart: PropTypes.func.isRequired,
- shutdown: PropTypes.func.isRequired
-};
-
-export default connect(createMapStateToProps, mapDispatchToProps)(PageHeaderActionsMenuConnector);