book/9-begin, book/9-end

book/9-begin/.ebextensions/environment.config

@@ -0,0 +1,3 @@
+option_settings:
+  - option_name: NODE_ENV
+    value: production

book/9-begin/.ebextensions/git.config

@@ -0,0 +1,3 @@
+packages:
+  yum:
+      git: []

book/9-begin/.elasticbeanstalk/config.yml

@@ -0,0 +1,22 @@
+branch-defaults:
+  default:
+    environment: builderbook-8-end
+environment-defaults:
+  async-github1-env:
+    branch: null
+    repository: null
+  builderbook-app:
+    branch: null
+    repository: null
+global:
+  application_name: book
+  default_ec2_keyname: null
+  default_platform: Node.js
+  default_region: us-east-1
+  include_git_submodules: true
+  instance_profile: null
+  platform_name: null
+  platform_version: null
+  profile: null
+  sc: null
+  workspace_type: Application

book/9-begin/.eslintrc.js

@@ -0,0 +1,55 @@
+module.exports = {
+  parser: 'babel-eslint',
+  extends: ['airbnb', 'plugin:prettier/recommended'],
+  env: {
+    browser: true,
+    jest: true,
+  },
+  plugins: ['react', 'jsx-a11y', 'import', 'prettier'],
+  rules: {
+    'prettier/prettier': [
+      'error',
+      {
+        singleQuote: true,
+        trailingComma: 'all',
+        arrowParens: 'always',
+        printWidth: 100,
+        semi: true
+      },
+    ],
+    'camelcase': 'off',
+    'max-len': ['error', 100],
+    'no-underscore-dangle': ['error', { allow: ['_id'] }],
+    'no-mixed-operators': 'off',
+    'prefer-destructuring': [
+      'error',
+      {
+        VariableDeclarator: {
+          array: false,
+          object: true,
+        },
+        AssignmentExpression: {
+          array: true,
+          object: false,
+        },
+      },
+      {
+        enforceForRenamedProperties: false,
+      },
+    ],
+    'import/prefer-default-export': 'off',
+    'jsx-a11y/anchor-is-valid': 'off',
+    'react/jsx-wrap-multilines': 'off',
+    'react/destructuring-assignment': 'off',
+    'react/no-danger': 'off',
+    'react/jsx-one-expression-per-line': 'off',
+    'react/jsx-props-no-spreading': 'off',
+    'react/react-in-jsx-scope': 'off',
+    'react/jsx-filename-extension': [
+      'error',
+      {
+        extensions: ['.js'],
+      },
+    ],
+  },
+};

book/9-begin/.gitignore

@@ -0,0 +1,14 @@
+*~
+*.swp
+tmp/
+npm-debug.log
+.DS_Store
+
+
+.build/*
+.next
+.vscode/
+node_modules/
+.coverage
+.env
+.next

book/9-begin/components/Header.js

@@ -0,0 +1,132 @@
+import PropTypes from 'prop-types';
+import Link from 'next/link';
+import Toolbar from '@material-ui/core/Toolbar';
+import Grid from '@material-ui/core/Grid';
+import Hidden from '@material-ui/core/Hidden';
+import Button from '@material-ui/core/Button';
+import Avatar from '@material-ui/core/Avatar';
+
+import MenuDrop from './MenuDrop';
+
+import { styleToolbar, styleRaisedButton } from './SharedStyles';
+
+const optionsMenuCustomer = [
+  {
+    text: 'My books',
+    href: '/customer/my-books',
+    as: '/my-books',
+  },
+  {
+    text: 'Log out',
+    href: '/logout',
+  },
+];
+
+const optionsMenuAdmin = [
+  {
+    text: 'Admin',
+    href: '/admin',
+  },
+  {
+    text: 'Log out',
+    href: '/logout',
+  },
+];
+
+
+
+function Header({ user, hideHeader, redirectUrl }) {
+  return (
+    <div
+      style={{
+        overflow: 'hidden',
+        position: 'relative',
+        display: 'block',
+        top: hideHeader ? '-64px' : '0px',
+        transition: 'top 0.5s ease-in',
+      }}
+    >
+      <Toolbar style={styleToolbar}>
+        <Grid container direction="row" justify="space-around" alignItems="center">
+          <Grid item sm={8} xs={7} style={{ textAlign: 'left' }}>
+            {!user ? (
+              <Link href="/">
+                <Avatar
+                  src="https://storage.googleapis.com/builderbook/logo.svg"
+                  alt="Builder Book logo"
+                  style={{ margin: '0px auto 0px 20px', cursor: 'pointer' }}
+                />
+              </Link>
+            ) : null}
+          </Grid>
+          <Grid item sm={2} xs={2} style={{ textAlign: 'right' }}>
+            {user && user.isAdmin && !user.isGithubConnected ? (
+              <Hidden smDown>
+                <a href="/auth/github">
+                  <Button variant="contained" color="primary" style={styleRaisedButton}>
+                    Connect Github
+                  </Button>
+                </a>
+              </Hidden>
+            ) : null}
+          </Grid>
+          <Grid item sm={2} xs={3} style={{ textAlign: 'right' }}>
+            {user ? (
+              <div style={{ whiteSpace: ' nowrap' }}>
+                {!user.isAdmin ? (
+                  <MenuDrop
+                    options={optionsMenuCustomer}
+                    src={user.avatarUrl}
+                    alt={user.displayName}
+                  />
+                ) : null}
+                {user.isAdmin ? (
+                  <MenuDrop
+                    options={optionsMenuAdmin}
+                    src={user.avatarUrl}
+                    alt={user.displayName}
+                  />
+                ) : null}
+              </div>
+            ) : (
+              <Link
+                href={{
+                  pathname: '/public/login',
+                  query: { redirectUrl },
+                }}
+                as={{
+                  pathname: '/login',
+                  query: { redirectUrl },
+                }}
+              >
+                <a style={{ margin: '0px 20px 0px auto' }}>Log in</a>
+              </Link>
+            )}
+          </Grid>
+        </Grid>
+      </Toolbar>
+    </div>
+  );
+}
+
+const propTypes = {
+  user: PropTypes.shape({
+    avatarUrl: PropTypes.string,
+    displayName: PropTypes.string,
+    isAdmin: PropTypes.bool,
+    isGithubConnected: PropTypes.bool,
+  }),
+  hideHeader: PropTypes.bool,
+  redirectUrl: PropTypes.string,
+};
+
+const defaultProps = {
+  user: null,
+  hideHeader: false,
+  redirectUrl: '',
+};
+
+Header.propTypes = propTypes;
+Header.defaultProps = defaultProps;
+
+export default Header;

book/9-begin/components/MenuDrop.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Link from 'next/link';
+import Menu from '@material-ui/core/Menu';
+import Avatar from '@material-ui/core/Avatar';
+
+const propTypes = {
+  src: PropTypes.string.isRequired,
+  alt: PropTypes.string.isRequired,
+  options: PropTypes.arrayOf(String).isRequired,
+};
+
+class MenuDrop extends React.Component {
+  // eslint-disable-next-line
+  state = {
+    open: false,
+    anchorEl: undefined,
+  };
+
+  button = undefined;
+
+  handleClick = (event) => {
+    this.setState({ open: true, anchorEl: event.currentTarget });
+  };
+
+  handleClose = () => {
+    this.setState({ open: false });
+  };
+
+  render() {
+    const { options, src, alt } = this.props;
+
+    return (
+      <div>
+        <Avatar
+          role="presentation"
+          aria-owns="simple-menu"
+          // aria-haspopup="true"
+          onClick={this.handleClick}
+          onKeyPress={this.handleClick}
+          src={src}
+          alt={alt}
+          style={{ margin: '0px 20px 0px auto', cursor: 'pointer' }}
+        />
+        <Menu
+          id="simple-menu"
+          anchorEl={this.state.anchorEl}
+          open={this.state.open}
+          onClose={this.handleClose}
+        >
+          <p />
+          {options.map((option) => (
+            <div id="wrappingLink" key={option.text}>
+              <Link href={option.href} as={option.as || option.href}>
+                <a style={{ padding: '0px 20px' }}>{option.text}</a>
+              </Link>
+              <p />
+            </div>
+          ))}
+        </Menu>
+      </div>
+    );
+  }
+}
+
+MenuDrop.propTypes = propTypes;
+
+export default MenuDrop;

book/9-begin/components/Notifier.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import Snackbar from '@material-ui/core/Snackbar';
+
+let openSnackbarFn;
+
+class Notifier extends React.Component {
+  // eslint-disable-next-line
+  state = {
+    open: false,
+    message: '',
+  };
+
+  componentDidMount() {
+    openSnackbarFn = this.openSnackbar;
+  }
+
+  handleSnackbarRequestClose = () => {
+    this.setState({
+      open: false,
+      message: '',
+    });
+  };
+
+  openSnackbar = ({ message }) => {
+    this.setState({ open: true, message });
+  };
+
+  render() {
+    const message = (
+      <span id="snackbar-message-id" dangerouslySetInnerHTML={{ __html: this.state.message }} />
+    );
+
+    return (
+      <Snackbar
+        anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+        message={message}
+        autoHideDuration={5000}
+        onClose={this.handleSnackbarRequestClose}
+        open={this.state.open}
+        ContentProps={{
+          'aria-describedby': 'snackbar-message-id',
+        }}
+      />
+    );
+  }
+}
+
+export function openSnackbar({ message }) {
+  openSnackbarFn({ message });
+}
+
+export default Notifier;