Thomas folbrecht

package.json

@@ -6,9 +6,11 @@
     "@material-ui/core": "^3.9.2",
     "@material-ui/icons": "^3.0.2",
     "axios": "^0.18.0",
+    "css-loader": "^2.1.1",
     "polished": "^3.0.3",
     "react": "^16.8.4",
     "react-dom": "^16.8.4",
+    "react-quill": "^1.3.3",
     "react-redux": "^6.0.1",
     "react-router-dom": "^4.3.1",
     "react-scripts": "2.1.8",

src/components/App.js

@@ -0,0 +1,50 @@
+import React, { Component } from 'react';
+// import { Provider } from 'react-redux';
+// import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
+// import { createGlobalStyle } from 'styled-components';
+// import theme from '../theme';
+import Paper from '@material-ui/core/Paper';
+import AppBar from './AppBar';
+import TodoCard from './TodoCard';
+import Grid from '@material-ui/core/Grid';
+import Editor from './Editor';
+
+class App extends Component {
+render() {
+  return (
+    <div className="app">
+    <AppBar/>
+    <h1>Make A How-To</h1>
+    <div className="community">
+    <div className="cardcontainer">
+    <h1>Card</h1>
+    <div className="editor">
+    <Paper>
+    <Editor/>
+    </Paper>
+    </div>
+    <h4>How To</h4>
+    <Grid container spacing={24}>
+    <Grid item xs>
+    <TodoCard/>
+      </Grid>
+    <Grid item xs>
+    <TodoCard/>
+      </Grid>
+    <Grid item xs>
+    <TodoCard/>
+      </Grid>
+    </Grid>
+    </div>
+    <h1>Community</h1>
+    </div>
+    <h1>How to</h1>
+    <TodoCard/>
+    <TodoCard/>
+    <TodoCard/>
+    </div>
+    )
+}
+}
+
+export default App;

src/components/AppBar.js

@@ -0,0 +1,222 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import AppBar from '@material-ui/core/AppBar';
+import Toolbar from '@material-ui/core/Toolbar';
+import IconButton from '@material-ui/core/IconButton';
+import Typography from '@material-ui/core/Typography';
+import InputBase from '@material-ui/core/InputBase';
+import Badge from '@material-ui/core/Badge';
+import MenuItem from '@material-ui/core/MenuItem';
+import Menu from '@material-ui/core/Menu';
+import { fade } from '@material-ui/core/styles/colorManipulator';
+import { withStyles } from '@material-ui/core/styles';
+import SearchIcon from '@material-ui/icons/Search';
+import AccountCircle from '@material-ui/icons/AccountCircle';
+import MailIcon from '@material-ui/icons/Mail';
+import NotificationsIcon from '@material-ui/icons/Notifications';
+import MoreIcon from '@material-ui/icons/MoreVert';
+
+const styles = theme => ({
+  root: {
+    width: '100%',
+  },
+  grow: {
+    flexGrow: 1,
+  },
+  menuButton: {
+    marginLeft: -12,
+    marginRight: 20,
+  },
+  title: {
+    display: 'none',
+    [theme.breakpoints.up('sm')]: {
+      display: 'block',
+    },
+  },
+  search: {
+    position: 'relative',
+    borderRadius: theme.shape.borderRadius,
+    backgroundColor: fade(theme.palette.common.white, 0.15),
+    '&:hover': {
+      backgroundColor: fade(theme.palette.common.white, 0.25),
+    },
+    marginRight: theme.spacing.unit * 2,
+    marginLeft: 0,
+    width: '100%',
+    [theme.breakpoints.up('sm')]: {
+      marginLeft: theme.spacing.unit * 3,
+      width: 'auto',
+    },
+  },
+  searchIcon: {
+    width: theme.spacing.unit * 9,
+    height: '100%',
+    position: 'absolute',
+    pointerEvents: 'none',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  inputRoot: {
+    color: 'inherit',
+    width: '100%',
+  },
+  inputInput: {
+    paddingTop: theme.spacing.unit,
+    paddingRight: theme.spacing.unit,
+    paddingBottom: theme.spacing.unit,
+    paddingLeft: theme.spacing.unit * 10,
+    transition: theme.transitions.create('width'),
+    width: '100%',
+    [theme.breakpoints.up('md')]: {
+      width: 200,
+    },
+  },
+  sectionDesktop: {
+    display: 'none',
+    [theme.breakpoints.up('md')]: {
+      display: 'flex',
+    },
+  },
+  sectionMobile: {
+    display: 'flex',
+    [theme.breakpoints.up('md')]: {
+      display: 'none',
+    },
+  },
+});
+
+class PrimarySearchAppBar extends React.Component {
+  state = {
+    anchorEl: null,
+    mobileMoreAnchorEl: null,
+  };
+
+  handleProfileMenuOpen = event => {
+    this.setState({ anchorEl: event.currentTarget });
+  };
+
+  handleMenuClose = () => {
+    this.setState({ anchorEl: null });
+    this.handleMobileMenuClose();
+  };
+
+  handleMobileMenuOpen = event => {
+    this.setState({ mobileMoreAnchorEl: event.currentTarget });
+  };
+
+  handleMobileMenuClose = () => {
+    this.setState({ mobileMoreAnchorEl: null });
+  };
+
+  render() {
+    const { anchorEl, mobileMoreAnchorEl } = this.state;
+    const { classes } = this.props;
+    const isMenuOpen = Boolean(anchorEl);
+    const isMobileMenuOpen = Boolean(mobileMoreAnchorEl);
+
+    const renderMenu = (
+      <Menu
+        anchorEl={anchorEl}
+        anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+        transformOrigin={{ vertical: 'top', horizontal: 'right' }}
+        open={isMenuOpen}
+        onClose={this.handleMenuClose}
+      >
+        <MenuItem onClick={this.handleMenuClose}>Profile</MenuItem>
+        <MenuItem onClick={this.handleMenuClose}>My account</MenuItem>
+      </Menu>
+    );
+
+    const renderMobileMenu = (
+      <Menu
+        anchorEl={mobileMoreAnchorEl}
+        anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+        transformOrigin={{ vertical: 'top', horizontal: 'right' }}
+        open={isMobileMenuOpen}
+        onClose={this.handleMenuClose}
+      >
+        <MenuItem onClick={this.handleMobileMenuClose}>
+          <IconButton color="inherit">
+            <Badge badgeContent={0} color="secondary">
+              <MailIcon />
+            </Badge>
+          </IconButton>
+          <p>Messages</p>
+        </MenuItem>
+        <MenuItem onClick={this.handleMobileMenuClose}>
+          <IconButton color="inherit">
+            <Badge badgeContent={0} color="secondary">
+              <NotificationsIcon />
+            </Badge>
+          </IconButton>
+          <p>Notifications</p>
+        </MenuItem>
+        <MenuItem onClick={this.handleProfileMenuOpen}>
+          <IconButton color="inherit">
+            <AccountCircle />
+          </IconButton>
+          <p>Profile</p>
+        </MenuItem>
+      </Menu>
+    );
+
+    return (
+      <div className={classes.root}>
+        <AppBar position="static">
+          <Toolbar>
+            <Typography className={classes.title} variant="h6" color="inherit" noWrap>
+            How To
+            </Typography>
+            <div className={classes.search}>
+              <div className={classes.searchIcon}>
+                <SearchIcon />
+              </div>
+              <InputBase
+                placeholder="Search…"
+                classes={{
+                  root: classes.inputRoot,
+                  input: classes.inputInput,
+                }}
+              />
+            </div>
+            <div className={classes.grow} />
+            <div className={classes.sectionDesktop}>
+              {/* <IconButton color="inherit">
+                <Badge badgeContent={0} color="secondary">
+                  <MailIcon />
+                </Badge>
+              </IconButton> */}
+              <IconButton color="inherit">
+                <Badge badgeContent={0} color="secondary">
+                  <NotificationsIcon />
+                </Badge>
+              </IconButton>
+              <IconButton
+                aria-owns={isMenuOpen ? 'material-appbar' : undefined}
+                aria-haspopup="true"
+                onClick={this.handleProfileMenuOpen}
+                color="inherit"
+              >
+                <AccountCircle />
+              </IconButton>
+            </div>
+            <div className={classes.sectionMobile}>
+              <IconButton aria-haspopup="true" onClick={this.handleMobileMenuOpen} color="inherit">
+                <MoreIcon />
+              </IconButton>
+            </div>
+          </Toolbar>
+        </AppBar>
+        {renderMenu}
+        {renderMobileMenu}
+      </div>
+    );
+  }
+}
+
+PrimarySearchAppBar.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(PrimarySearchAppBar);

src/components/Dashboard.js

@@ -0,0 +1,51 @@
+import React, { Component } from 'react';
+// import { Provider } from 'react-redux';
+// import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
+// import { createGlobalStyle } from 'styled-components';
+// import theme from '../theme';
+import Paper from '@material-ui/core/Paper';
+import AppBar from './AppBar';
+import TodoCard from './TodoCard';
+import Grid from '@material-ui/core/Grid';
+import Editor from './Editor';
+import DraftCard from './DraftCard';
+
+class App extends Component {
+render() {
+  return (
+    <div className="app">
+    <AppBar/>
+    <h1>Make A How-To</h1>
+    <div className="community">
+    <div className="cardcontainer">
+    <h1>Card</h1>
+    <div className="editor">
+    <Paper>
+    <Editor/>
+    </Paper>
+    </div>
+    <h4>How To</h4>
+    <Grid container spacing={24}>
+    <Grid item xs>
+    <DraftCard/>
+      </Grid>
+    <Grid item xs>
+    <TodoCard/>
+      </Grid>
+    <Grid item xs>
+    <TodoCard/>
+      </Grid>
+    </Grid>
+    </div>
+    <h1>Community</h1>
+    </div>
+    <h1>How to</h1>
+    <TodoCard/>
+    <TodoCard/>
+    <TodoCard/>
+    </div>
+    )
+}
+}
+
+export default App;

src/components/Editor.js

@@ -0,0 +1,27 @@
+
+import React from 'react';
+import ReactQuill from 'react-quill';
+import 'react-quill/dist/quill.snow.css';
+
+
+
+class Editor extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = { text: '' } // You can also pass a Quill Delta here
+    this.handleChange = this.handleChange.bind(this)
+  }
+
+  handleChange(value) {
+    this.setState({ text: value })
+  }
+
+  render() {
+    return (
+      <ReactQuill value={this.state.text}
+                  onChange={this.handleChange} />
+    )
+  }
+}
+
+export default Editor;