Hash Router Usage and Why?

oauthReactFrontEnd.js

`oAuth Flow Notes for React 

Create Google Developer Account 
Create Project
Get Ouath 2 Credentials 
Must provide redirect to webite (link to home page example http://localhost:3000 
no sub directires* 

  insert this script in Public/html file (inside of Header) 
  
   ` <script src="https://apis.google.com/js/api.js"></script> `
    
   ` When Using this file you can check to see if it is installed by opening the console
      run npm install 
      run npm start and open to current project 
      when the console is open and project is running try
    typing gapi this will return a function if installed. 
    Post Install must name parts of the code you would like to load from the CDN  google.`
   
   DOCUMENTATION LINK - `https://developers.google.com/api-client-library/javascript/reference/referencedocs#gapiauth2getauthinstance`
    gapi.load(<function to load>)
    gapi.load('client: auth2')
    
   // loads the client needed for oauth 2 
    
    //must initalize with 
    
    gapi.client.init({clientId: "<yourclientid>"})
    

  `To Do this in React use the window object`
    
    
    
    `Action Creators for Redux and code below  Using Samantic UI 
        Here are the Action Creators 
          import { SIGN_IN, SIGN_OUT } from './types'

export const signIn = (userId) => {
  return {
    type: SIGN_IN,
    payload: userId
  };
};
export const signOut = () => {
  return {
    type: SIGN_OUT
  };
};
`
Reducer 

import { SIGN_IN, SIGN_OUT } from '../actions/types'

const INITAL_STATE = {
  isSignedIn: null,
  userId: null
};

export default (state = INITAL_STATE, action) => {
  switch (action.type) {
    case SIGN_IN:
      return { ...state, isSignedIn: true, userId: action.payload }
    case SIGN_OUT:
      return { ...state, isSignedIn: false, userId: null }
    default:
      return state
  }
};

`combined reducer `


import { combineReducers } from 'redux';
import authReducer from './authReducer'

const rootReducer = combineReducers({
  auth: authReducer
});

export default rootReducer;

    
    
//Componet to wire up with redux and connect 
import React from 'react';
import { connect } from 'react-redux';
import { signIn, signOut } from '../actions';

class GoogleAuth extends React.Component {
  componentDidMount() {
    window.gapi.load('client:auth2', () => {
      window.gapi.client
        .init({
          clientId:
            '797401886567-9cumct9mrt3v2va409rasa7fa6fq02hh.apps.googleusercontent.com',
          scope: 'email profile'
        })
        .then(() => {
          this.auth = window.gapi.auth2.getAuthInstance();

          this.onAuthChange(this.auth.isSignedIn.get());
          this.auth.isSignedIn.listen(this.onAuthChange);
        });
    });
  }

  onAuthChange = isSignedIn => {
    if (isSignedIn) {
      this.props.signIn(this.auth.currentUser.get().getId());
    } else {
      this.props.signOut();
    }
  };

  onSignInClick = () => {
    this.auth.signIn();
  };

  onSignOutClick = () => {
    this.auth.signOut();
  };

  renderAuthButton() {
    if (this.props.isSignedIn === null) {
      return null;
    } else if (this.props.isSignedIn) {
      return (
        <button onClick={this.onSignOutClick} className="ui red google button">
          <i className="google icon" />
          Sign Out
        </button>
      );
    } else {
      return (
        <button onClick={this.onSignInClick} className="ui red google button">
          <i className="google icon" />
          Sign In with Google
        </button>
      );
    }
  }

  render() {
    return <div>{this.renderAuthButton()}</div>;
  }
}

const mapStateToProps = state => {
  return { isSignedIn: state.auth.isSignedIn };
};

export default connect(
  mapStateToProps,
  { signIn, signOut }
)(GoogleAuth);