[Header] Refactoring

Author: Yadro

src/components/Header/Header.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { Layout } from 'antd';
+import { observer } from 'mobx-react';
+
+import HeaderLink from '../HeaderLink/HeaderLink';
+import Profile from '../Profile/Profile';
+import TaskControl from '../TaskControl/TaskControl';
+
+const { Header: HeaderBase } = Layout;
+
+function Header() {
+  return (
+    <HeaderBase>
+      <HeaderLink>
+        <Link to="/hours">Hours</Link>
+      </HeaderLink>
+      <HeaderLink>
+        <Link to="/projects">Projects</Link>
+      </HeaderLink>
+      <HeaderLink>
+        <Link to="/dashboard">Dashboard</Link>
+      </HeaderLink>
+      <span className="flex-1" />
+      <TaskControl />
+      <Profile />
+    </HeaderBase>
+  );
+}
+
+export default observer(Header);

src/components/HeaderMenu/HeaderMenu.tsx src/components/HeaderLink/HeaderLink.tsxsrc/components/HeaderMenu/HeaderMenu.tsx renamed to src/components/HeaderLink/HeaderLink.tsx

@@ -6,7 +6,7 @@ interface HeaderMenuProps {
   children: React.ReactNode;
 }
 
-export default observer(function HeaderMenu({ children }: HeaderMenuProps) {
+export default observer(function HeaderLink({ children }: HeaderMenuProps) {
   const classes = useStyles();
 
   return <span className={classes.root}>{children}</span>;

src/screens/Main.tsx

@@ -1,16 +1,12 @@
 import React, { useEffect } from 'react';
-import { Route, Switch, Link, Redirect, useLocation } from 'react-router-dom';
+import { Route, Switch, Redirect, useLocation } from 'react-router-dom';
 import { Layout } from 'antd';
 
 import ProjectsScreen from './projects/ProjectsScreen';
-import TaskControl from '../components/TaskControl/TaskControl';
-import HeaderMenu from '../components/HeaderMenu/HeaderMenu';
 import HoursScreen from './hours/HoursScreen';
 import Dashboard from './dashboard/Dashboard';
-import Profile from '../components/Profile/Profile';
 import GaService from '../services/gaService/GaService';
-
-const { Header } = Layout;
+import Header from '../components/Header/Header';
 
 const Main = () => {
   const location = useLocation();
@@ -25,20 +21,7 @@ const Main = () => {
 
   return (
     <Layout className="layout">
-      <Header>
-        <HeaderMenu>
-          <Link to="/hours">Hours</Link>
-        </HeaderMenu>
-        <HeaderMenu>
-          <Link to="/projects">Projects</Link>
-        </HeaderMenu>
-        <HeaderMenu>
-          <Link to="/dashboard">Dashboard</Link>
-        </HeaderMenu>
-        <span className="flex-1" />
-        <TaskControl />
-        <Profile />
-      </Header>
+      <Header />
       <Switch>
         <Route path="/hours" component={HoursScreen} />
         <Route path="/projects" component={ProjectsScreen} />