#459 updated builderbook/builderbook; README

README.md

@@ -92,8 +92,8 @@ The main use cases for this project, besides learning, are:
   SESSION_SECRET=
 
   # Used in lib/getRootUrl.js
-  URL_APP=
-  PRODUCTION_URL_APP=
+  NEXT_PUBLIC_URL_APP=
+  NEXT_PUBLIC_PRODUCTION_URL_APP="https://heroku.builderbook.org"
 
   # Used in server/google.js
   GOOGLE_CLIENTID=
@@ -117,8 +117,8 @@ The main use cases for this project, besides learning, are:
   GITHUB_LIVE_SECRETKEY=
 
   # Used in server/stripe.js
-  STRIPE_TEST_PUBLISHABLEKEY=
-  STRIPE_LIVE_PUBLISHABLEKEY=
+  NEXT_PUBLIC_STRIPE_TEST_PUBLISHABLEKEY=
+  NEXT_PUBLIC_STRIPE_LIVE_PUBLISHABLEKEY=
   STRIPE_TEST_SECRETKEY=
   STRIPE_LIVE_SECRETKEY=
   STRIPE_TEST_DEMO_BOOK_PRICE_ID=
@@ -133,15 +133,17 @@ The main use cases for this project, besides learning, are:
   MAILCHIMP_SIGNEDUP_LIST_ID=
 
   # Used in pages/_document.js and pages/_app.js
-  GA_MEASUREMENT_ID=
-  COOKIE_DOMAIN=
+  NEXT_PUBLIC_GA_MEASUREMENT_ID=
+  COOKIE_DOMAIN=".builderbook.org"
 
   ```
 
+  Add your value (domain that you own) for `COOKIE_DOMAIN` and `NEXT_PUBLIC_PRODUCTION_URL_APP`.
+
 - Start the app with `yarn dev`.
-  - To get `GA_MEASUREMENT_ID`, set up Google Analytics and follow [these instructions](https://support.google.com/analytics/answer/1008080?hl=en) to find your tracking ID.
+  - To get `NEXT_PUBLIC_GA_MEASUREMENT_ID`, set up Google Analytics and follow [these instructions](https://support.google.com/analytics/answer/1008080?hl=en) to find your tracking ID.
   - To get Stripe-related API keys, set up or log into your Stripe account and find your key [here](https://dashboard.stripe.com/account/apikeys).
-- Env keys `GA_MEASUREMENT_ID` and `STRIPE_TEST_PUBLISHABLEKEY`/`STRIPE_LIVE_PUBLISHABLEKEY` are universally available (client and server). Env keys inside `.env` file are used in server code only. To make env vars universally available, add them to `next.config.js` file.
+- Env keys `NEXT_PUBLIC_GA_MEASUREMENT_ID` and `NEXT_PUBLIC_STRIPE_TEST_PUBLISHABLEKEY`/`NEXT_PUBLIC_STRIPE_LIVE_PUBLISHABLEKEY` are universally available (client and server). Env keys inside `.env` file are used in server code only unless they have `NEXT_PUBLIC_` prepended to their name. In that case, they are universally available.
 - To make user a book's owner, set `"isAdmin": true` on corresponding MongoDB document in your database (default value is `false` for any new user).
 
 **Important: if you don't add values for environmental variables to `.env` file, corresponding functionality will not work. For example, login with Google account, purchasing book, getting repo information via GitHub API and other third-party API infrastructures.**

builderbook/.elasticbeanstalk/config.yml

@@ -1,17 +1,14 @@
 branch-defaults:
   default:
-    environment: builderbook-public
+    environment: builderbook-9-end-env
 environment-defaults:
-  async-github1-env:
-    branch: null
-    repository: null
-  builderbook-app:
+  builderbook-9-end-env:
     branch: null
     repository: null
 global:
-  application_name: book
+  application_name: builderbook-9-end-app
   default_ec2_keyname: null
-  default_platform: Node.js
+  default_platform: Node.js 14 running on 64bit Amazon Linux 2
   default_region: us-east-1
   include_git_submodules: true
   instance_profile: null

builderbook/.eslintrc.js

@@ -4,7 +4,6 @@ module.exports = {
   env: {
     browser: true,
     jest: true,
-    es6: true,
   },
   plugins: ['react', 'jsx-a11y', 'import', 'prettier'],
   rules: {

builderbook/components/Header.jsx

@@ -1,10 +1,10 @@
 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 Toolbar from '@mui/material/Toolbar';
+import Grid from '@mui/material/Grid';
+import Hidden from '@mui/material/Hidden';
+import Button from '@mui/material/Button';
+import Avatar from '@mui/material/Avatar';
 
 import MenuWithAvatar from './MenuWithAvatar';
 
@@ -61,21 +61,21 @@ function Header({ user, hideHeader, redirectUrl }) {
       }}
     >
       <Toolbar>
-        <Grid container direction="row" justify="space-around" alignItems="center">
+        <Grid container direction="row" justifyContent="space-around" alignItems="center">
           <Grid item sm={8} xs={7} style={{ textAlign: 'left' }}>
-            {!user ? (
+            {user ? null : (
               <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>
+              <Hidden mdDown>
                 <a href="/auth/github">
                   <Button variant="contained" color="primary">
                     Connect Github

builderbook/components/MenuWithAvatar.jsx

@@ -1,8 +1,8 @@
 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';
+import Menu from '@mui/material/Menu';
+import Avatar from '@mui/material/Avatar';
 
 const propTypes = {
   src: PropTypes.string.isRequired,

builderbook/components/Notifier.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Snackbar from '@material-ui/core/Snackbar';
+import Snackbar from '@mui/material/Snackbar';
 
 let openSnackbarFn;
 

builderbook/components/SharedStyles.js

@@ -4,16 +4,6 @@ const styleBigAvatar = {
   margin: '0px auto 15px',
 };
 
-const styleRaisedButton = {
-  font: '16px',
-};
-
-const styleToolbar = {
-  background: '#FFF',
-  height: '64px',
-  paddingRight: '20px',
-};
-
 const styleTextField = {
   font: '15px',
   color: '#222',
@@ -33,8 +23,6 @@ const styleGrid = {
 
 module.exports = {
   styleBigAvatar,
-  styleRaisedButton,
-  styleToolbar,
   styleTextField,
   styleForm,
   styleGrid,

builderbook/components/admin/EditBook.jsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Button from '@material-ui/core/Button';
-import TextField from '@material-ui/core/TextField';
-import Input from '@material-ui/core/Input';
-import Select from '@material-ui/core/Select';
-import MenuItem from '@material-ui/core/MenuItem';
+import Button from '@mui/material/Button';
+import TextField from '@mui/material/TextField';
+import Input from '@mui/material/Input';
+import Select from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
 
 import { getGithubReposApiMethod } from '../../lib/api/admin';
 import { styleTextField } from '../SharedStyles';
@@ -105,6 +105,7 @@ class EditBook extends React.Component {
               value={this.state.book.githubRepo || ''}
               input={<Input />}
               onChange={(event) => {
+                event.stopPropagation();
                 this.setState({
                   // eslint-disable-next-line
                   book: { ...this.state.book, githubRepo: event.target.value },

builderbook/components/customer/BuyButton.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import NProgress from 'nprogress';
-import Button from '@material-ui/core/Button';
+import Button from '@mui/material/Button';
 import { loadStripe } from '@stripe/stripe-js';
 
 import { fetchCheckoutSessionApiMethod } from '../../lib/api/customer';
@@ -13,11 +13,13 @@ const styleBuyButton = {
 };
 
 const dev = process.env.NODE_ENV !== 'production';
-const port = process.env.PORT || 8000;
+const port = process.env.NEXT_PUBLIC_PORT || 8000;
 const ROOT_URL = `http://localhost:${port}`;
 
 const stripePromise = loadStripe(
-  dev ? process.env.STRIPE_TEST_PUBLISHABLEKEY : process.env.STRIPE_LIVE_PUBLISHABLEKEY,
+  dev
+    ? process.env.NEXT_PUBLIC_STRIPE_TEST_PUBLISHABLEKEY
+    : process.env.NEXT_PUBLIC_STRIPE_LIVE_PUBLISHABLEKEY,
 );
 
 const propTypes = {

builderbook/lib/api/getRootUrl.js

@@ -1,6 +1,8 @@
 function getRootUrl() {
   const dev = process.env.NODE_ENV !== 'production';
-  const ROOT_URL = dev ? process.env.URL_APP : process.env.PRODUCTION_URL_APP;
+  const ROOT_URL = dev
+    ? process.env.NEXT_PUBLIC_URL_APP
+    : process.env.NEXT_PUBLIC_PRODUCTION_URL_APP;
 
   return ROOT_URL;
 }

builderbook/lib/theme.js

@@ -1,10 +1,10 @@
-import { createMuiTheme } from '@material-ui/core/styles';
+import { createTheme } from '@mui/material/styles';
 
-const theme = createMuiTheme({
+const theme = createTheme({
   palette: {
     primary: { main: '#238636' },
     secondary: { main: '#b62324' },
-    type: 'light',
+    mode: 'light',
     background: { default: '#fff' },
     text: {
       primary: '#222',

builderbook/lib/withAuth.jsx

@@ -1,23 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Router from 'next/router';
-import * as NProgress from 'nprogress';
-
-Router.events.on('routeChangeStart', () => {
-  NProgress.start();
-});
-
-Router.events.on('routeChangeComplete', (url) => {
-  if (window && process.env.GA_MEASUREMENT_ID) {
-    window.gtag('config', process.env.GA_MEASUREMENT_ID, {
-      page_path: url,
-    });
-  }
-
-  NProgress.done();
-});
-
-Router.events.on('routeChangeError', () => NProgress.done());
 
 let globalUser = null;
 

builderbook/next.config.js

@@ -1,11 +1,4 @@
-require('dotenv').config();
-
 module.exports = {
-  env: {
-    URL_APP: process.env.URL_APP,
-    PRODUCTION_URL_APP: process.env.PRODUCTION_URL_APP,
-    STRIPE_TEST_PUBLISHABLEKEY: process.env.STRIPE_TEST_PUBLISHABLEKEY,
-    STRIPE_LIVE_PUBLISHABLEKEY: process.env.STRIPE_LIVE_PUBLISHABLEKEY,
-    GA_MEASUREMENT_ID: process.env.GA_MEASUREMENT_ID,
-  },
+  poweredByHeader: false,
+  webpack5: true,
 };

builderbook/package.json

@@ -1,10 +1,14 @@
 {
   "name": "builderbook",
-  "version": "2",
+  "version": "0.0.1",
   "license": "MIT",
+  "engines": {
+    "node": "14.18.1",
+    "yarn": "1.22.5"
+  },
   "scripts": {
     "dev": "nodemon server/server.js --watch server",
-    "build": "NODE_ENV=production next build",
+    "build": "next build",
     "start": "node server/server.js",
     "lint": "eslint '**/*.js' '**/*.jsx'",
     "test": "jest --coverage"
@@ -13,44 +17,46 @@
     "coverageDirectory": "./.coverage"
   },
   "dependencies": {
-    "@material-ui/core": "^4.11.4",
-    "@material-ui/icons": "^4.11.2",
-    "@material-ui/styles": "^4.11.4",
+    "@emotion/cache": "^11.6.0",
+    "@emotion/react": "^11.6.0",
+    "@emotion/server": "^11.4.0",
+    "@emotion/styled": "^11.6.0",
+    "@mui/icons-material": "^5.2.0",
+    "@mui/material": "^5.2.0",
     "@octokit/oauth-authorization-url": "^4.1.0",
     "@octokit/rest": "^18.0.3",
-    "@stripe/stripe-js": "^1.9.0",
-    "aws-sdk": "2.737.0",
-    "compression": "1.7.4",
-    "connect-mongo": "3.2.0",
-    "dotenv": "8.2.0",
-    "express": "4.17.1",
-    "express-session": "1.17.1",
-    "front-matter": "4.0.2",
-    "handlebars": "4.7.6",
-    "he": "1.2.0",
-    "helmet": "4.1.0-rc.2",
-    "highlight.js": "10.1.2",
-    "htmlescape": "1.1.1",
+    "@stripe/stripe-js": "^1.21.1",
+    "aws-sdk": "^2.796.0",
+    "compression": "^1.7.4",
+    "connect-mongo": "^3.2.0",
+    "dotenv": "^8.2.0",
+    "express": "^4.17.1",
+    "express-session": "^1.17.1",
+    "front-matter": "^4.0.2",
+    "he": "^1.2.0",
+    "helmet": "^4.1.0-rc.2",
+    "highlight.js": "^10.1.2",
     "isomorphic-unfetch": "^3.0.0",
-    "lodash": "4.17.20",
-    "marked": "1.1.1",
-    "mongoose": "5.10.0",
-    "next": "^10.2.3",
-    "node-fetch": "^2.6.0",
-    "nprogress": "0.2.0",
-    "passport": "0.4.1",
-    "passport-google-oauth": "2.0.0",
-    "prop-types": "15.7.2",
-    "qs": "6.9.4",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "sitemap": "6.2.0",
-    "stripe": "8.89.0",
-    "winston": "3.3.3"
+    "lodash": "^4.17.21",
+    "marked": "^1.2.7",
+    "mongoose": "^5.10.0",
+    "next": "^12.0.3",
+    "node-fetch": "^2.6.1",
+    "nprogress": "^0.2.0",
+    "passport": "^0.4.1",
+    "passport-google-oauth": "^2.0.0",
+    "prop-types": "^15.7.2",
+    "qs": "^6.10.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "sitemap": "^6.2.0",
+    "stripe": "^8.129.0",
+    "winston": "^3.3.3"
   },
   "devDependencies": {
+    "@babel/core": "^7.16.0",
     "babel-eslint": "^10.1.0",
-    "eslint": "^6.7.2",
+    "eslint": "^7.25.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-config-prettier": "^6.15.0",
     "eslint-plugin-import": "^2.22.1",
@@ -59,7 +65,7 @@
     "eslint-plugin-react": "^7.21.5",
     "eslint-plugin-react-hooks": "^4.2.0",
     "jest": "^26.6.3",
-    "nodemon": "2.0.6",
+    "nodemon": "^2.0.15",
     "prettier": "^2.2.1"
   }
 }