Modularize code and added NavBar component

twistter-frontend/src/App.js

@@ -1,11 +1,14 @@
+/* eslint-disable */
 import React, { Component } from 'react';
 import logo from './images/twistter-logo.png';
-import { BrowserRouter as Router } from 'react-router-dom';
+import { BrowserRouter as Router, Route, Switch} from 'react-router-dom';
-import Route from 'react-router-dom/Route';
 import './App.css';
 
 //TODO: reorganize imports
 
+//components
+import Navbar from './components/layout/NavBar';
+
 // pages
 import user from './pages/user';
 
@@ -95,10 +98,9 @@ class App extends Component {
   render() {
     return (
       <Router>
-        <div className="app">
+        <Navbar />
-          
+        <div className='container'>
-          
+          <Switch>
-
           
           
           <Route path="/" exact render={
@@ -167,8 +169,8 @@ class App extends Component {
             }
           }/>
 
-          <Route exact path="/user" component={user} />
+            <Route path="/user" exact component={user} />
-
+          </Switch>
 
         
         

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;

twistter-frontend/src/pages/user.js

@@ -1,21 +1,40 @@
+/* eslint-disable */
 import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
-import NavBar from '../components/NavBar';
+import StaticProfile from '../components/profile/StaticProfile';
-import ChipsArray from '../components/ChipsArray';
+import Grid from '@material-ui/core/Grid';
+
+import PostSkeleton from '../util/PostSkeleton';
+
+import { connect } from 'react-redux';
+
 
 class user extends Component {
   render() {
-    return (
+    const postMarkup = PostSkeleton;
-      <div className="container">
-        <NavBar>
 
-        </NavBar>
+    return (
-      </div>
+      <b>User page</b>
+      // <Grid container spacing={16}>
+      //   <Grid item sm={8} xs={12}>
+      //     <b>postMarkup</b>
+      //     {postMarkup}
+      //   </Grid>
+      //   {/* <Grid item sm={4} xs={12}>
+      //       <StaticProfile profile={this.state.profile} />
+      //   </Grid> */}
+      // </Grid>
     )
   }
 }
 
-//ReactDOM.render(<user />, node);
+user.propTypes = {
-ReactDOM.render(<ChipsArray />, document.querySelector('#root'));
+  // getUserData: PropTypes.func.isRequired,
+  //data: PropTypes.object.isRequired
+};
 
-export default user
+const mapStateToProps = (state) => ({
+  data: state.data
+});
+
+export default connect(user);

twistter-frontend/src/util/PostSkeleton.js

@@ -1,3 +1,4 @@
+/* eslint-disable */
 import React, { Fragment } from 'react';
 import NoImg from '../images/no-img.png';
 import PropTypes from 'prop-types';
@@ -71,3 +72,6 @@ const PostSkeleton = (props) => {
 PostSkeleton.propTypes = {
   classes: PropTypes.object.isRequired
 };
+
+export default withStyles(styles)(PostSkeleton);
+