diff --git a/src/App.js b/src/App.js index 4cecebff..fffc6705 100644 --- a/src/App.js +++ b/src/App.js @@ -1,7 +1,8 @@ import React from 'react'; import { Route, Switch } from 'react-router-dom'; -import './App.scss'; import NotFound from './common/NotFound'; +import Settings from './settings/Settings'; +import './App.scss'; const App = (MainHeader, Home, MenuLayout, CreateServer, EditServer) => () => (
@@ -12,6 +13,7 @@ const App = (MainHeader, Home, MenuLayout, CreateServer, EditServer) => () => ( + diff --git a/src/common/MainHeader.js b/src/common/MainHeader.js index 5e582212..eecaf464 100644 --- a/src/common/MainHeader.js +++ b/src/common/MainHeader.js @@ -1,37 +1,28 @@ -import { faPlus as plusIcon, faChevronDown as arrowIcon } from '@fortawesome/free-solid-svg-icons'; +import { faPlus as plusIcon, faChevronDown as arrowIcon, faCogs as cogsIcon } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import React from 'react'; +import React, { useEffect } from 'react'; import { Link } from 'react-router-dom'; import { Collapse, Nav, Navbar, NavbarBrand, NavbarToggler, NavItem, NavLink } from 'reactstrap'; -import classnames from 'classnames'; +import classNames from 'classnames'; import PropTypes from 'prop-types'; +import { useToggle } from '../utils/helpers/hooks'; import shlinkLogo from './shlink-logo-white.png'; import './MainHeader.scss'; -const MainHeader = (ServersDropdown) => class MainHeader extends React.Component { - static propTypes = { - location: PropTypes.object, - }; +const propTypes = { + location: PropTypes.object, +}; - state = { isOpen: false }; - handleToggle = () => { - this.setState(({ isOpen }) => ({ - isOpen: !isOpen, - })); - }; +const MainHeader = (ServersDropdown) => { + const MainHeaderComp = ({ location }) => { + const [ isOpen, toggleOpen, , close ] = useToggle(); + const { pathname } = location; - componentDidUpdate(prevProps) { - if (this.props.location !== prevProps.location) { - this.setState({ isOpen: false }); - } - } + useEffect(close, [ location ]); - render() { - const { location } = this.props; const createServerPath = '/server/create'; - const toggleClass = classnames('main-header__toggle-icon', { - 'main-header__toggle-icon--opened': this.state.isOpen, - }); + const settingsPath = '/settings'; + const toggleClass = classNames('main-header__toggle-icon', { 'main-header__toggle-icon--opened': isOpen }); return ( @@ -39,18 +30,19 @@ const MainHeader = (ServersDropdown) => class MainHeader extends React.Component Shlink Shlink - + - +
)} - + ); }; diff --git a/src/servers/CreateServer.scss b/src/servers/CreateServer.scss index 764520c7..cfba848d 100644 --- a/src/servers/CreateServer.scss +++ b/src/servers/CreateServer.scss @@ -1,9 +1,5 @@ @import '../utils/base'; -.create-server { - padding: 40px 20px; -} - .create-server__label { font-weight: 700; cursor: pointer; diff --git a/src/servers/EditServer.js b/src/servers/EditServer.js index c4d4b0eb..6a6b89b6 100644 --- a/src/servers/EditServer.js +++ b/src/servers/EditServer.js @@ -1,5 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; +import NoMenuLayout from '../common/NoMenuLayout'; import { ServerForm } from './helpers/ServerForm'; import { withSelectedServer } from './helpers/withSelectedServer'; import { serverType } from './prop-types'; @@ -20,11 +21,11 @@ export const EditServer = (ServerError) => { }; return ( -
+ -
+ ); }; diff --git a/src/settings/Settings.js b/src/settings/Settings.js new file mode 100644 index 00000000..cacd8581 --- /dev/null +++ b/src/settings/Settings.js @@ -0,0 +1,6 @@ +import React from 'react'; +import NoMenuLayout from '../common/NoMenuLayout'; + +const Settings = () => Settings; + +export default Settings;