Modularize code and added NavBar component

twistter-frontend/src/components/ChipsArray.js

@@ -1,52 +0,0 @@
-import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import Chip from '@material-ui/core/Chip';
-import Paper from '@material-ui/core/Paper';
-
-const useStyles = makeStyles(theme => ({
-  root: {
-    display: 'flex',
-    justifyContent: 'center',
-    flexWrap: 'wrap',
-    padding: theme.spacing(0.5),
-  },
-  chip: {
-    margin: theme.spacing(0.5),
-  },
-}));
-
-export default function ChipsArray() {
-  const classes = useStyles();
-  const [chipData, setChipData] = React.useState([
-    { key: 0, label: 'Angular' },
-    { key: 1, label: 'jQuery' },
-    { key: 2, label: 'Polymer' },
-    { key: 3, label: 'React' },
-    { key: 4, label: 'Vue.js' },
-  ]);
-
-  const handleDelete = chipToDelete => () => {
-    if (chipToDelete.label === 'React') {
-      alert('Why would you want to delete React?! :)');
-      return;
-    }
-
-    setChipData(chips => chips.filter(chip => chip.key !== chipToDelete.key));
-  };
-
-  return (
-    <Paper className={classes.root}>
-      {chipData.map(data => {
-
-        return (
-          <Chip
-            key={data.key}
-            label={data.label}
-            onDelete={handleDelete(data)}
-            className={classes.chip}
-          />
-        );
-      })}
-    </Paper>
-  );
-}

twistter-frontend/src/components/NavBar.js

@@ -1,19 +0,0 @@
-import React, { Component } from 'react';
-
-import AppBar from '@material-ui/core/AppBar';
-import ToolBar from '@material-ui/core/Toolbar';
-import Button from '@material-ui/core/Button';
-
-export class Navbar extends Component {
-    render() {
-        return (
-            <AppBar>
-                <ToolBar>
-                    <Button>Home</Button>
-                </ToolBar>
-            </AppBar>
-        )
-    }
-}
-
-export default Navbar;