[WIP] Add styling to UI

jabMap/jabmap/src/App.js

@@ -1,29 +1,52 @@
 import React, { Component } from "react";
 //import logo from './logo.svg';
 import "./App.css";
-import References from "./components/References";
+import ReferenceList from "./components/sidebar";
 import { Editor } from "./components/toolbar.jsx";
 
 class App extends Component {
   state = {
-    references: [],
+    references: [
+      {
+        author: "An author",
+        title: "A paper",
+        year: 2010,
+      },
+      {
+        author: "The author",
+        title: "The paper",
+        year: 2011,
+      },
+      {
+        author: "Author 1",
+        title: "A book",
+        year: 2010,
+      },
+      {
+        author: "Famous author",
+        title: "An article",
+        year: 2012,
+      }
+    ],
   };
 
-  componentDidMount() {
-    fetch("/libraries/current/entries")
-      .then((res) => res.json())
-      .then((data) => {
-        this.setState({ references: data });
-      })
-      .catch(console.log);
-  }
+  // componentDidMount() {
+  //   fetch("/libraries/current/entries")
+  //     .then((res) => res.json())
+  //     .then((data) => {
+  //       this.setState({ references: data });
+  //     })
+  //     .catch(console.log);
+  // }
+
+
 
   render() {
     return (
       <div className="App">
         <div className="App-header">
           <div className="Reference-proportions">
-            {this.state.references && <References references={this.state.references} />}
+            {this.state.references && <ReferenceList references={this.state.references} />}
           </div>
           <Editor />
         </div>

jabMap/jabmap/src/components/sidebar.css

@@ -5,6 +5,11 @@
 } 
 .table-striped > tbody > tr:nth-child(odd) > td,
 .table-striped > tbody > tr:nth-child(odd) > th {
-background-color: #f9f9f9;
+	background-color: #f9f9f9;
 }
 
+
+
+
+
+

jabMap/jabmap/src/components/sidebar.jsx

@@ -0,0 +1,76 @@
+import React, { useState } from 'react';
+import { withStyles, makeStyles } from '@material-ui/core/styles';
+import Table from '@material-ui/core/Table';
+import TableBody from '@material-ui/core/TableBody';
+import TableCell from '@material-ui/core/TableCell';
+import TableContainer from '@material-ui/core/TableContainer';
+import TableHead from '@material-ui/core/TableHead';
+import TableRow from '@material-ui/core/TableRow';
+import Paper from '@material-ui/core/Paper';
+import './sidebar.css';
+
+const StyledTableCell = withStyles((theme) => ({
+  head: {
+    fontWeight: 'bold',
+    fontSize: 12,
+  },
+  body: {
+    fontSize: 12,
+    fontFamily: 'Arial',
+    border: 'none',
+  },
+}))(TableCell);
+
+const StyledTableRow = withStyles((theme) => ({
+  root: {
+    height: 25,
+    '&:nth-of-type(even)': {
+      backgroundColor: '#efefef',
+    },
+  },
+}))(TableRow);
+
+const useStyles = makeStyles({
+  table: {
+    minWidth: 100,
+  },
+});
+
+const ReferenceList = ({references}) => {
+  const classes = useStyles();
+  const [numRows, setNumRows] = useState(10);
+
+  return (
+    <TableContainer component={Paper}>
+      <Table className={classes.table} size="small" aria-label="refs table">
+        <TableHead>
+          <TableRow>
+            <StyledTableCell>Author</StyledTableCell>
+            <StyledTableCell>Title</StyledTableCell>
+            <StyledTableCell>Year</StyledTableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+        {references &&
+          references.map((ref) => (
+            <StyledTableRow key={ref.title}>
+              <StyledTableCell component="th" scope="row">{ref.title}</StyledTableCell>
+              <StyledTableCell>{ref.author}</StyledTableCell>
+              <StyledTableCell>{ref.year}</StyledTableCell>
+            </StyledTableRow>
+        ))}
+        {Array(numRows - references.length).fill(
+          <StyledTableRow>
+            <StyledTableCell></StyledTableCell>
+            <StyledTableCell></StyledTableCell>
+            <StyledTableCell></StyledTableCell>
+          </StyledTableRow>
+        )}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+}
+
+export default ReferenceList;
+