Objectives, notes, code snippets, and video links from each session will be accumulated here.
// The following 2 `app.use`'s MUST follow ALL your routes/middleware
app.use(notFound)
app.use(errorHandler)
function notFound(req, res, next) {
res.status(404).send({error: 'Not found!', status: 404, url: req.originalUrl})
}
// eslint-disable-next-line
function errorHandler(err, req, res, next) {
console.error('ERROR', err)
const stack = process.env.NODE_ENV !== 'production' ? err.stack : undefined
res.status(500).send({error: err.message, stack, url: req.originalUrl})
}Categories table (if you didn’t during class) using sequelize migrations
Products table using sequelize migrations
Product Migration file
category_id: {
type: Sequelize.INTEGER,
references: {
model: 'Categories', // NOTE: this is the table name
key: 'id',
as: 'category_id'
},
allowNull: false
}Category Model file
Category.associate = function(models) {
// associations can be defined here
Category.hasMany(models.Product, {
foreignKey: 'category_id'
})
};Product Model file
Product.associate = function(models) {
// associations can be defined here
Product.belongsTo(models.Category, {
foreignKey: 'category_id'
})
};NOTE: I initially screwed up these directions for those of you using create react app. I have added a video below walking through how to fix and install correctly. If you are starting fresh, you can follow the section below and/or watch the final few minutes of the video.
Applications bootstrapped with the create-react-app tool already have eslint intalled under the hood. The configuration is hidden from us, but you can actually add your own eslint rules quite easily.
.eslintrc.js file in the /src folder of your client.react-app base configuration.Here is an example .eslintrc.js file that you can use as a template:
module.exports = {
'extends': 'react-app',
'rules': {
'indent': [
'error',
2
],
'linebreak-style': [
'error',
'unix'
],
'quotes': [
'error',
'single'
],
'semi': [
'error',
'never'
]
}
}In your client repo, install the eslint and eslint-plugin-react packages as dev dependencies:
$ npm install --save-dev eslint eslint-plugin-react
$ npx eslint —-init
extends section to include the react plugin, ex:"extends": [
"eslint:recommended",
"plugin:react/recommended"
],"parser": "babel-eslint",$ npm install --save-dev babel-eslint
Products:
[
{
"id": 1,
"name": "Awesome Shirt",
"description": "Sapiente ut sed labore. Omnis fuga exercitationem explicabo omnis laboriosam. Minima eum consequuntur et illum.",
"price": 1500,
"img_url": "http://lorempixel.com/640/480",
"category_id": 1
},
{
"id": 2,
"name": "Amazing Shorts",
"description": "Enim voluptatum excepturi laboriosam quis. Consequuntur perferendis consequatur sed corporis. Itaque rerum aliquam ut tempora perferendis.",
"price": 2500,
"img_url": "http://lorempixel.com/640/480",
"category_id": 1
},
{
"id": 3,
"name": "Mousepad",
"description": "Suscipit molestias et nobis quo et voluptatibus voluptatum excepturi. Labore et et. Id aliquam sed sed dolor voluptas nihil accusamus.",
"price": 1000,
"img_url": "http://lorempixel.com/640/480",
"category_id": 2
},
{
"id": 4,
"name": "10 Pack HDMI Cords",
"description": "Vero qui sapiente totam quo voluptatum aut iste odit maiores. Est est dicta. Commodi aperiam rerum vel. Voluptatem itaque tenetur odio voluptate exercitationem eum. Ut minima autem quam minus quasi aperiam.",
"price": 5000,
"img_url": "http://lorempixel.com/640/480",
"category_id": 2
},
{
"id": 5,
"name": "Beautiful Bookshelf",
"description": "Velit temporibus quisquam voluptas reprehenderit et illo qui. Voluptas ad suscipit harum amet sit veritatis tenetur. Eveniet pariatur non consequatur quia id voluptates ad. Quaerat debitis et architecto dolore.",
"price": 7500,
"img_url": "http://lorempixel.com/640/480",
"category_id": 3
},
{
"id": 6,
"name": "Da Best Desk",
"description": "Libero est nisi. Omnis temporibus aliquid ea repudiandae et. Id minima aliquid aliquam eaque sed eos. Sunt blanditiis ducimus praesentium maxime odit. Voluptatum quia non enim unde non illo.",
"price": 10000,
"img_url": "http://lorempixel.com/640/480",
"category_id": 3
}
]Card.js
import styles from './card.module.scss'
const Card = ({ children, className }) => {
return (
<div className={`${styles.card} ${className}`}>
{children}
</div>
)
}
export default Cardcard.module.scss
@import ‘../../styles/variables’;
div.card {
background-color: $some-color;
border-radius: 5px;
padding: 1.5rem;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
& > :first-child {
margin-top: 0;
}
& > :last-child {
margin-bottom: 0;
}
}success and cancel redirectsServer
require('dotenv').config()
const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY)Server
app.post('/api/checkout', async (req, res, next) => {
const lineItems = [{
name: 'T-shirt',
description: 'Comfortable cotton t-shirt',
images: ['http://lorempixel.com/400/200/'],
amount: 500,
currency: 'usd',
quantity: 1,
}]
try {
const session = await stripe.checkout.sessions.create({
payment_method_types: ['card'],
line_items: lineItems,
success_url: 'http://localhost:3000/success',
cancel_url: 'http://localhost:3000/cancel'
})
res.json({ session })
}
catch (error) {
res.status(400).json({ error })
}
})Client
initiateStripeCheckout = async () => {
const stripe = window.Stripe('pk_test_U97OqImzWdzzRotfPzXt3Req00UQtQ1rnD')
try {
// Initiate checkout session to get session id
const response = await fetch('http://localhost:4000/api/checkout', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
}
})
const data = await response.json()
const sessionId = data.session.id
console.log(sessionId)
// Redirect to checkout
const result = await stripe.redirectToCheckout({ sessionId })
} catch (error) {
console.log('STRIPE ERROR', error)
}
}npm install --save @auth0/auth0-spa-jsauth_config.json in src
npm audit fix took care of security vulnerabilitiesnpm install express-jwt jwks-rsaauth_config.jsindex.js ExternalApi.js/profile a protected routedescribesetupTests.js
import Enzyme from ‘enzyme’
import Adapter from ‘enzyme-adapter-react-16’
Enzyme.configure({ adapter: new Adapter() })Mocking Auth0
import * as Auth0 from '../../react-auth0-wrapper'
jest.spyOn(Auth0, ‘useAuth0’).mockImplementation(() => {
return {
isAuthenticated: false
}
})Mocking lifecycle methods
const spyDidMount = jest.spyOn(ProductsList.prototype, ‘componentDidMount’)Mocking fetch requests
window.fetch = jest.fn().mockImplementation(() => {
return Promise.resolve({
status: 200,
json: () => {
return Promise.resolve({
products: [{ id: 1, name: ‘thing’}, { id: 2, name: ‘thing2’}]
})
}
})
})Handling async issues (one way)
it('tests something but must wait for async', (done) => {
process.nextTick(() => {
// Updates to state should be reflected in here
// Write expectations...
done()
})
})describebeforeEachafterEach and afterAll for cleanup & resettingMocking Auth0
import * as Auth0 from '../../react-auth0-wrapper'
jest.spyOn(Auth0, ‘useAuth0’).mockImplementation(() => {
return {
isAuthenticated: false
}
})Mocking lifecycle methods
const spyDidMount = jest.spyOn(ProductsList.prototype, ‘componentDidMount’)Mocking fetch requests
window.fetch = jest.fn().mockImplementation(() => {
return Promise.resolve({
status: 200,
json: () => {
return Promise.resolve({
products: [{ id: 1, name: ‘thing’}, { id: 2, name: ‘thing2’}]
})
}
})
})Handling async issues (one way)
it('tests something but must wait for async', (done) => {
process.nextTick(() => {
// Updates to state should be reflected in here
// Write expectations...
done()
})
})View system wide info about docker installation:
docker infoRun an image (create a container):
docker run <image-name>Run an image and give it a name:
docker run --name <name> <image-name>View images cached on local machine:
docker imagesView all images (including ones used as dependencies):
docker images -aDelete an image
docker rmi <image-name>Pull an image from docker hub:
docker pull <image-name> : <version>View build/command history of an image:
docker history <image-name>View all containers on local machine (running or not):
docker ps -aView currently running containers:
docker psStop a currently running container:
docker stop <container-name>Start a container on local machine:
docker start <container-name>Remove a container from local machine:
docker rm <container-name>Force remove a container:
docker rm -f <container-name>Build from a docker file in current directory
docker build -t <tag-name> .Sample full run command:
docker run -d -p 1000:3000 —name slytherin_rulez nodeserverAdd a flag to run command to have an auto-stopping container: --rm
docker run -d -p 1000:3000 —name slytherin_rulez --rm nodeserverView docker networks:
docker network lsView connections to specific network:
docker network inspect <network-name>Start mongo container:
docker run -d --name mongo mongo:latest