feat: build basic elements of the UI

closes #7

package.json

@@ -9,8 +9,10 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "prop-types": "15.7.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-router-dom": "5.2.0",
     "react-scripts": "3.4.3"
   },
   "scripts": {

src/components/App.js

@@ -1,11 +1,34 @@
 import React from 'react';
+import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
+import { makeStyles } from '@material-ui/core/styles';
 import Header from './layout/Header';
+import Items from './main/Items';
+import items from '../data/sample';
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    padding: theme.spacing(3),
+  },
+}));
 
 function App() {
+  const classes = useStyles();
   return (
-    <Header>
-      <div>Hello</div>
-    </Header>
+    <Router>
+      <div>
+        <Header />
+        <main className={classes.root}>
+          <Switch>
+            <Route path="/items" exact>
+              <Items items={items} />
+            </Route>
+            <Route path="/items/:itemId">
+              <Items items={items} />
+            </Route>
+          </Switch>
+        </main>
+      </div>
+    </Router>
   );
 }
 

src/components/layout/Header.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 import { makeStyles } from '@material-ui/core/styles';
 import { AppBar, Toolbar, Typography, IconButton } from '@material-ui/core';
 import { AccountCircle } from '@material-ui/icons';
@@ -18,6 +19,10 @@ const useStyles = makeStyles((theme) => ({
     height: '48px',
     marginRight: theme.spacing(2),
   },
+  link: {
+    textDecoration: 'none',
+    color: 'inherit',
+  },
 }));
 
 const Header = () => {
@@ -26,12 +31,14 @@ const Header = () => {
     <header>
       <AppBar position="static">
         <Toolbar className={classes.header}>
-          <div className={classes.headerLeft}>
-            <GraaspLogo className={classes.logo} />
-            <Typography variant="h6" color="inherit">
-              Graasp
-            </Typography>
-          </div>
+          <Link to="/items" className={classes.link}>
+            <div className={classes.headerLeft}>
+              <GraaspLogo className={classes.logo} />
+              <Typography variant="h6" color="inherit">
+                Graasp
+              </Typography>
+            </div>
+          </Link>
           <IconButton color="inherit">
             <AccountCircle />
           </IconButton>

src/components/main/CreateNewItem.js

@@ -0,0 +1,136 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { makeStyles } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+import TextField from '@material-ui/core/TextField';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import InputLabel from '@material-ui/core/InputLabel';
+import MenuItem from '@material-ui/core/MenuItem';
+import Select from '@material-ui/core/Select';
+
+const useStyles = makeStyles((theme) => ({
+  dialogContent: {
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  shortInputField: {
+    width: '50%',
+  },
+  addedMargin: {
+    marginTop: theme.spacing(2),
+  },
+}));
+
+const CreateNewItem = ({ open, handleClose }) => {
+  const classes = useStyles();
+  const [itemName, setItemName] = useState('');
+  const [itemType, setItemType] = useState('');
+  const [itemDescription, setItemDescription] = useState('');
+  const [itemImageUrl, setItemImageUrl] = useState('');
+
+  const handleNameInput = (event) => {
+    setItemName(event.target.value);
+  };
+
+  const handleItemSelect = (event) => {
+    setItemType(event.target.value);
+  };
+
+  const handleDescriptionInput = (event) => {
+    setItemDescription(event.target.value);
+  };
+
+  const handleImageUrlInput = (event) => {
+    setItemImageUrl(event.target.value);
+  };
+
+  const submitNewItem = () => {};
+
+  return (
+    <Dialog
+      open={open}
+      onClose={() => {
+        setItemType('');
+        handleClose();
+      }}
+      maxWidth="sm"
+      fullWidth
+    >
+      <DialogTitle id="create-new-item-form">Create new item</DialogTitle>
+      <DialogContent className={classes.dialogContent}>
+        <TextField
+          autoFocus
+          margin="dense"
+          id="name"
+          label="Name"
+          value={itemName}
+          onChange={handleNameInput}
+          className={classes.shortInputField}
+        />
+        <InputLabel id="item-type" className={classes.addedMargin}>
+          Type
+        </InputLabel>
+        <Select
+          labelId="item-type-select"
+          id="item-type-select"
+          value={itemType}
+          onChange={handleItemSelect}
+          className={classes.shortInputField}
+        >
+          <MenuItem value="Space">Space</MenuItem>
+          <MenuItem value="Application">Application</MenuItem>
+          <MenuItem value="Exercise">Exercise</MenuItem>
+        </Select>
+        <TextField
+          margin="dense"
+          id="description"
+          label="Description"
+          value={itemDescription}
+          onChange={handleDescriptionInput}
+          multiline
+          rows={4}
+          rowsMax={4}
+          fullWidth
+        />
+        <TextField
+          margin="dense"
+          id="imageUrl"
+          label="Image (URL)"
+          value={itemImageUrl}
+          onChange={handleImageUrlInput}
+          fullWidth
+        />
+      </DialogContent>
+      <DialogActions>
+        <Button
+          onClick={() => {
+            setItemType('');
+            handleClose();
+          }}
+          color="primary"
+        >
+          Cancel
+        </Button>
+        <Button
+          onClick={() => {
+            submitNewItem(itemName, itemType, itemDescription, itemImageUrl);
+            handleClose();
+          }}
+          color="primary"
+        >
+          Add item
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+CreateNewItem.propTypes = {
+  open: PropTypes.func.isRequired,
+  handleClose: PropTypes.func.isRequired,
+};
+
+export default CreateNewItem;

src/components/main/CreateNewItemButton.js

@@ -0,0 +1,48 @@
+import React, { useState } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import AddCircleIcon from '@material-ui/icons/AddCircle';
+import Tooltip from '@material-ui/core/Tooltip';
+import CreateNewItem from './CreateNewItem';
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    marginBottom: theme.spacing(2),
+  },
+  createNewButton: {
+    cursor: 'pointer',
+  },
+}));
+
+const CreateNewItemButton = () => {
+  const [open, setOpen] = useState(false);
+  const classes = useStyles();
+
+  const handleClickOpen = () => {
+    setOpen(true);
+  };
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  return (
+    <div className={classes.root}>
+      <Tooltip placement="left" title="Create new item" arrow>
+        <AddCircleIcon
+          color="primary"
+          fontSize="large"
+          className={classes.createNewButton}
+          onClick={handleClickOpen}
+        />
+      </Tooltip>
+      <CreateNewItem
+        open={open}
+        setOpen={setOpen}
+        handleClickOpen={handleClickOpen}
+        handleClose={handleClose}
+      />
+    </div>
+  );
+};
+
+export default CreateNewItemButton;

src/components/main/CustomCardHeader.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+import { makeStyles } from '@material-ui/core/styles';
+import Avatar from '@material-ui/core/Avatar';
+import Typography from '@material-ui/core/Typography';
+import IconButton from '@material-ui/core/IconButton';
+import MoreVertIcon from '@material-ui/icons/MoreVert';
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginTop: theme.spacing(1),
+    marginBottom: theme.spacing(1),
+  },
+  header: {
+    display: 'flex',
+  },
+  avatar: {
+    marginLeft: theme.spacing(1),
+    marginRight: theme.spacing(1),
+  },
+  title: {
+    fontSize: '0.9rem',
+    fontWeight: 'bold',
+  },
+  link: {
+    textDecoration: 'none',
+    color: 'inherit',
+  },
+  subtitle: {
+    fontSize: '0.72rem',
+  },
+}));
+
+const CustomCardHeader = ({ id, creator, title, type }) => {
+  const classes = useStyles();
+  return (
+    <div className={classes.root}>
+      <div className={classes.header}>
+        <Avatar src={creator.avatar} className={classes.avatar} />
+        <div>
+          <Link to={`/items/${id}`} className={classes.link}>
+            <Typography className={classes.title}>{title}</Typography>
+          </Link>
+          <Typography className={classes.subtitle}>
+            {`A ${type.toLowerCase()} by ${creator.name}`}
+          </Typography>
+        </div>
+      </div>
+      <IconButton>
+        <MoreVertIcon />
+      </IconButton>
+    </div>
+  );
+};
+
+CustomCardHeader.propTypes = {
+  id: PropTypes.string.isRequired,
+  creator: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired,
+};
+
+export default CustomCardHeader;