Show "My tracks" directly in main menu (fixes #136)

frontend/src/App.tsx

@@ -84,6 +84,10 @@ const App = connect((state) => ({login: state.login}))(function App({login}) {
 
           <Menu.Menu position="right">
             {login ? (
+              <>
+                <Link component={MenuItemForLink} to="/my/tracks" as="a">
+                  My Tracks
+                </Link>
                 <Dropdown item trigger={<Avatar user={login} className={styles.avatar} />}>
                   <Dropdown.Menu>
                     <Link to="/upload" component={DropdownItemForLink} icon="cloud upload" text="Upload tracks" />
@@ -92,6 +96,7 @@ const App = connect((state) => ({login: state.login}))(function App({login}) {
                     <Link to="/logout" component={DropdownItemForLink} icon="sign-out" text="Logout" />
                   </Dropdown.Menu>
                 </Dropdown>
+              </>
             ) : (
               <Menu.Item>
                 <LoginButton compact />

frontend/src/pages/TracksPage.tsx

@@ -1,8 +1,8 @@
-import React from 'react'
+import React, {useCallback} from 'react'
 import {connect} from 'react-redux'
-import {Button, Message, Item, Menu, Loader, Pagination, Icon} from 'semantic-ui-react'
+import {Button, Message, Item, Header, Loader, Pagination, Icon} from 'semantic-ui-react'
 import {useObservable} from 'rxjs-hooks'
-import {Link, useHistory, useRouteMatch} from 'react-router-dom'
+import {Link} from 'react-router-dom'
 import {of, from, concat} from 'rxjs'
 import {map, switchMap, distinctUntilChanged} from 'rxjs/operators'
 import _ from 'lodash'
@@ -12,33 +12,6 @@ import {Avatar, Page, StripMarkdown} from 'components'
 import api from 'api'
 import {useQueryParam} from 'query'
 
-function TracksPageTabs() {
-  const history = useHistory()
-
-  const onClick = React.useCallback(
-    (e, data) => {
-      history.push(data.name)
-    },
-    [history]
-  )
-
-  const isOwnTracksPage = Boolean(useRouteMatch('/my/tracks'))
-
-  return (
-    <Menu pointing secondary>
-      <Menu.Item name="/tracks" active={!isOwnTracksPage} {...{onClick}}>
-        Tracks
-      </Menu.Item>
-      <Menu.Item name="/my/tracks" active={isOwnTracksPage} {...{onClick}} />
-      <Menu.Item name="/upload" position="right" {...{onClick}}>
-        <Button color="green" compact size="small">
-          Upload
-        </Button>
-      </Menu.Item>
-    </Menu>
-  )
-}
-
 function TrackList({privateTracks}: {privateTracks: boolean}) {
   const [page, setPage] = useQueryParam<number>('page', 1, Number)
 
@@ -147,10 +120,26 @@ export function TrackListItem({track, privateTracks = false}) {
   )
 }
 
+function UploadButton({navigate, ...props}) {
+  const onClick = useCallback(
+    (e) => {
+      e.preventDefault()
+      navigate()
+    },
+    [navigate]
+  )
+  return (
+    <Button onClick={onClick} {...props} color="green" style={{float: 'right'}}>
+      Upload
+    </Button>
+  )
+}
+
 const TracksPage = connect((state) => ({login: (state as any).login}))(function TracksPage({login, privateTracks}) {
   return (
     <Page>
-      {login ? <TracksPageTabs /> : null}
+      <Header as='h2'>{privateTracks ? 'My tracks' : 'Public tracks'}</Header>
+      {privateTracks && <Link component={UploadButton} to="/upload" />}
       <TrackList {...{privateTracks}} />
     </Page>
   )