Make ui improvements, separate to components

src/App.tsx

@@ -1,32 +1,24 @@
 import React from 'react'
-import { BrowserRouter, Route, Link } from 'react-router-dom'
-import { Container, Menu } from 'semantic-ui-react'
-
-import './App.css'
-import 'semantic-ui-css/semantic.css'
-import 'react-toastify/dist/ReactToastify.css'
-
+import { BrowserRouter, Route } from 'react-router-dom'
+import { Container } from 'semantic-ui-react'
+import TopMenu from './components/TopMenu'
 import FileChooser from './components/FileChooser'
 import Jobs from './components/Jobs'
 import AnnotationNew from './components/AnnotationNew'
 import AnnotationEdit from './components/AnnotationEdit'
+import './App.css'
+import 'semantic-ui-css/semantic.css'
+import 'react-toastify/dist/ReactToastify.css'
 
 import { ToastContainer } from 'react-toastify'
 
 const App: React.FC = () => {
   return (
     <BrowserRouter>
       <Container fluid>
-        <Menu>
-          <Menu.Item>
-            <b>Annotator</b>
-          </Menu.Item>
-          <Menu.Item as={Link} to="/">
-            Jobs
-          </Menu.Item>
-        </Menu>
-        <Route exact path="/" component={Jobs} />
-        <Route exact path="/jobs/:jobId" component={FileChooser} />
+        <TopMenu />
+        <Route exact path="/" component={Jobs}></Route>
+        <Route exact path="/jobs/:jobId" component={FileChooser}></Route>
         <Route
           exact
           path="/jobs/:jobId/annotate/:fileId"

src/components/Annotator.scss

@@ -4,6 +4,10 @@ img.hidden {
     visibility: hidden;
 }
 
+.ui.large.breadcrumb {
+    margin-left: 1%;
+}
+
 
 .annotator {
     flex-grow: 1;

src/components/Annotator.tsx

@@ -4,12 +4,12 @@ import axios from 'axios'
 import './Annotator.scss'
 import AnnotatorImage from './AnnotatorImage'
 import { IFile } from './FileChooser'
-import { Breadcrumb, Dimmer, Loader } from 'semantic-ui-react'
-import { Link } from 'react-router-dom'
+import { Dimmer, Loader } from 'semantic-ui-react'
 import { showError } from '../utils/Helpers'
 import config from '../config'
 import Tools from './Tools'
-import { useDispatch, useSelector } from 'react-redux'
+import { useDispatch } from 'react-redux'
+import AnnotatorBreadcrumb from './AnnotatorBreadcrumb'
 
 const filesUrl = `${config.API_URL}${config.FILES}`
 const categoriesUrl = `${config.API_URL}${config.CATEGORIES}`
@@ -115,17 +115,7 @@ const Annotator = ({ fileId, jobId, baseFileUrl }: IAnnotatorProps) => {
 
   return (
     <React.Fragment>
-      <Breadcrumb size={'large'}>
-        <Breadcrumb.Section link as={Link} to={'/'}>
-          Jobs
-        </Breadcrumb.Section>
-        <Breadcrumb.Divider icon={'right angle'} />
-        <Breadcrumb.Section link as={Link} to={'/jobs/' + jobId}>
-          Files
-        </Breadcrumb.Section>
-        <Breadcrumb.Divider icon={'right angle'} />
-        <Breadcrumb.Section active>Annotate</Breadcrumb.Section>
-      </Breadcrumb>
+      <AnnotatorBreadcrumb jobId={jobId} />
       <div className={'annotator'}>
         {file === undefined ? (
           <div className={'my-annotator-segment'}>
@@ -135,9 +125,7 @@ const Annotator = ({ fileId, jobId, baseFileUrl }: IAnnotatorProps) => {
           </div>
         ) : (
           <React.Fragment>
-            <div
-              className={'accordion-container active'}
-            >
+            <div className={'accordion-container active'}>
               <Tools
                 categoryChoice={categoryChoice}
                 categoryChoices={categoryChoices}

src/components/AnnotatorBreadcrumb.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import { Breadcrumb, Image } from 'semantic-ui-react'
+import { Link } from 'react-router-dom'
+
+interface IBreadcrumbProps {
+  jobId: string
+}
+
+const AnnotatorBreadcrumb = ({ jobId }: IBreadcrumbProps) => {
+  return (
+    <Breadcrumb size={'large'}>
+      <Breadcrumb.Section link as={Link} to={'/'}>
+        Jobs
+      </Breadcrumb.Section>
+      <Breadcrumb.Divider icon={'right angle'} />
+      <Breadcrumb.Section link as={Link} to={'/jobs/' + jobId}>
+        Files
+      </Breadcrumb.Section>
+      <Breadcrumb.Divider icon={'right angle'} />
+      <Breadcrumb.Section active>Annotate</Breadcrumb.Section>
+    </Breadcrumb>
+  )
+}
+
+export default AnnotatorBreadcrumb

src/components/FileChooser.tsx

@@ -8,6 +8,7 @@ import {
   List,
   Loader,
   Table,
+  Header,
 } from 'semantic-ui-react'
 import moment from 'moment'
 import { showError } from '../utils/Helpers'
@@ -233,7 +234,7 @@ const FileChooser = ({ match }: RouteComponentProps<IFileChooserProps>) => {
           </Dimmer>
         </div>
       ) : files.length === 0 ? (
-        <p>Nothing here</p>
+        <Header size="small">Nothing here</Header>
       ) : (
         <Table celled>
           <Table.Header>
@@ -264,7 +265,7 @@ const FileChooser = ({ match }: RouteComponentProps<IFileChooserProps>) => {
           </Table.Body>
           <Table.Footer>
             <Table.Row>
-              <Table.HeaderCell colSpan="3">Footer</Table.HeaderCell>
+              <Table.HeaderCell colSpan="3"></Table.HeaderCell>
             </Table.Row>
           </Table.Footer>
         </Table>

src/components/TopMenu.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import { Menu } from 'semantic-ui-react'
+import { Link } from 'react-router-dom'
+
+const TopMenu = () => {
+  return (
+    <Menu>
+      <Menu.Item as={Link} to="/">
+        <b>Annotator</b>
+      </Menu.Item>
+      <Menu.Item as={Link} to="/">
+        Jobs
+      </Menu.Item>
+    </Menu>
+  )
+}
+
+export default TopMenu