Create Private Route in React

const PrivateRoute = ({ component: Component, ...rest }) => (

  <Route
    {...rest}
    render={(props) =>
      getToken() !== null ? (
        <Component {...props} />
      ) : (
        <Redirect
          to={{
            pathname: '/signin',
            state: { from: props.location }
          }}
        />
      )}
  />
);

const Root = () => (
  <Router>
    <React.Fragment>
      <Navbar />
      <Switch>
        <Route component={...} path='/...' /> // public
        <PrivateRoute component={...} path='/...' /> // private
      </Switch>
    </React.Fragment>
  </Router>
);

ReactDOM.render(<Root />, document.getElementById('root'));
registerServiceWorker();

Sample React Context: Provider/Consumer

index.js 

import React from "react";

import ReactDOM from "react-dom";

import Provider, {Context} from '../context'

function App() {

   return (

      <Provider>

         <div className="App">

         <h1>This is the heading</h1>

         <Context.Consumer>

             {ctx => ctx.number}

         </Context.Consumer>

         <Context.Consumer>

               {ctx => <button onClick={ctx.inc}>inc</button>}

         </Context.Consumer>

         </div>

      </Provider>

   );

}

const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

context.js (or store.js)

import React from "react";

import ReactDOM from "react-dom";

export const Context = React.createContext();

class Provider extends React.Component {

   state = {

      number: 0,

      inc: () => this.setState({ number: this.state.number + 1 })

   };

   render() {

      return (

          <Context.Provider value={this.state}>

              {this.props.children}

          </Context.Provider>

      );

   }

}

export default Provider;

React, Apollo Boost, GraphQL, Flux, Mangoos Required Packages for a new Project

Package.json

{
  "name": "react-recipes",
  "version": "1.0.0",
  "description": "A starter for React-Apollo-GraphQL projects",
  "main": "server.js",
  "scripts": {
    "server": "nodemon server.js",
    "client": "cd client && npm start",
    "dev": "concurrently --names \"server,client\" \"npm run server --silent\" \"npm run client --silent\""
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "apollo-server-express": "^1.3.6",
    "bcrypt": "^2.0.1",
    "body-parser": "^1.18.3",
    "concurrently": "^3.5.1",
    "cors": "^2.8.4",
    "dotenv": "^5.0.1",
    "express": "^4.16.3",
    "graphql": "^0.13.2",
    "graphql-tools": "^3.0.2",
    "jsonwebtoken": "^8.2.1",
    "mongoose": "^5.1.3"
  },
  "devDependencies": {
    "nodemon": "^1.17.5"
  }
}

PS > npm install

Node port blocked - Listen EADDRINUSE: address already in use :::4000

Windows:    taskkill /F /IM node.exe
Linux:          killall node

Prisma Deploy Docker error “Could not connect to server”

Make sure Docket Quick Start Terminal is running and IP address is set to a known IP (e.g. 192.168.x.x), then change the endpoint in prisma.yml to http:192.168.x.x:4466

Docker Error Getting IP Address

Docker Error getting IP address: ssh command error

Resolution

• $ docker-machine rm default
• $ docker-machine create --driver virtualbox default