johntran

import React, { Component } from 'react';
import {isEqual} from 'lodash';
import ProductDetails from 'client/ProductDetails';

// Product Details is a React Component
            
function optimizeRendering(keys: Array<string>, Wrapped: React<Element>) {
  return class OptimizedComponent extends Component {
    shouldComponentUpdate(nextProps) {
      const changedKeys = keys.filter(key => !isEqual(nextProps[key], this.props[key]));

johntran

{
  "extends": ["airbnb", "plugin:flowtype/recommended"],
  "parser": "babel-eslint",
  "plugins": [
    "react",
    "flowtype",
  ],
  "rules": {
    "arrow-parens": 0,
    "arrow-spacing": 0,

johntran

// You can write an array in two ways.

var x = [1, 2, 3]

var y = [
  1,
  2,
  3
];

johntran

Install VS Code: https://code.visualstudio.com/

In terminal: npm install -g flow-bin eslint prettier

Install the following extensions:

1. ESLint
2. GraphQL for VSCode
3. vscode-flow-ide
4. Prettier - ESLint

johntran

/*
  Given a graph of nodes, find the shortest path.
  The nodes can potentially be circular.
*/

const visitedNodeBefore = (visitedList, currentNode) =>
  visitedList.find(visitedNode => visitedNode.value === currentNode.value);

const getDestinationNode = (currentNode, nodeDestination) =>
  currentNode.nextNodes.find(({ node }) => node === nodeDestination);

johntran

import Relay from 'react-relay/classic';

export default class ProductReviewAddMutation extends Relay.Mutation {
  static fragments = {
    user: () => Relay.QL`
      fragment on User {
        id,
        role,
      }
    `,

johntran

import { commitMutation, graphql } from 'react-relay';
import { ConnectionHandler } from 'relay-runtime';

const mutation = graphql`
  mutation ProductReviewAddMutation($input: CreateProductReviewInput!) {
    productReviewAdd(input: $input) {
      user {
        id
        role
        productReviews {

johntran

/**
 * Can you explain splice for me? I know what it is, 
 * but there aren't many example to use it so I don't understand 
 * everything that goes inside the parentheses
 */

/**
  * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice
  * Array.splice(x,y)

johntran

alias bashdir='cd ~'
alias prof='code ~/.bash_profile'
alias cassandra='cd ~/Documents/apache-cassandra-3.11.3/bin && ./cassandra'
alias ms='cd ~/ONEHOPEWINE/microservice'
alias hc='cd ~/ONEHOPEWINE/hopecommerce'

alias devWatch='hc && npm run relayWatch'
alias devApp='hc && npm run dev-a'
alias devGQL='hc && npm run dev-g'
alias msDev='ms && npm run dev'

johntran

class Form extends React.Component {
  state = {
    addressLineOne: '',
  };
  addressLineOneOnChange = addressLineOne => this.setState({ addressLineOne });
  addressLineOneOnBlur = () => console.log('on blur');
  render() {
    const { addressLineOne } = this.state;
    return (
      <TextValidator