README

React-es

Codecov npm npm NPM

Library of common React components used on the front-end applications developed for eSpeakers.

When developing on a local machine run this

$ yarn run test

When ready to publish a new version. Use Semantic Versioning to determine the version number. i.e.

$ yarn run prod-patch  #for bug fixes, cleanup or other backwards-compatible changes
$ yarn run prod-minor  #adding new features in a backwards compatable way
$ yarn run prod-major  #breaking changes, including things like updating to a react version that has breaking changes

Installation

To install, use yarn or npm

yarn install espeakers

Then you can use the various components in your projects

import { 
  actions,
  reducers,
  redux,
  components,
  exceptions,
  forms,
  utils 
} from 'espeakers';

import { Text } from 'espeakers/forms';
import { Constants } from 'espeakers/utils';
import { Balboa } from 'espeakers/actions';
import { BalboaReducer } from 'espeakers/reducers';
import { AsyncComponent } from 'espeakers/components';

Components

AsyncComponent

Loads the component only when it is requested. Useful when building with modules so the browser doesn't have to load every component/page in a single file.

import { AsyncComponent } from 'espeakers/components';

const AsyncHomePage = AsyncComponent(<HomePage />);

Calendar

Displays the date in a calendar icon. Useful for events and calendar items.

import { Calendar } from 'espeakers/components';

<Calendar date={"2019-01-15"} format={"YYYY-MM-DD"} />

LoadingEllipsis

Displays an animated ellipses, useful when loading content on a page

import { LoadingEllipsis } from 'espeakers/components';

<LoadingEllipsis />

LoadingIndicator

Displays an animated loading circle similar to Google

LoadingIndicator

import { LoadingIndicator } from 'espeakers/components';

<LoadingIndicator />

OauthButtons

Implementation of signon buttons for Google, Facebook, LinkedIn, and Mpi. Used to sign on through Oauth

import { Oauth } from 'espeakers/components';

// Define the callback function that will receive the state from the Oauth service
const callback = (service) => (
  window.location.protocol + "//" + window.location.host + "/oauth-callback/" + service + "/"
);
...
// Render the buttons on the page
<Oauth.Google onSuccess={"/home"} redirect={callback}><div className={"btn btn-danger"}>Google</div></Oauth.Google>
<Oauth.Facebook onSuccess={"/home"} redirect={callback}><div className={"btn btn-primary"}>Facebook</div></Oauth.Facebook>
<Oauth.LinkedIn onSuccess={"/home"} redirect={callback}><div className={"btn btn-warning"}>LinkedIn</div></Oauth.Google>
<Oauth.Mpi onSuccess={"/home"} redirect={callback}><div className={"btn btn-default"}>Mpi</div></Oauth.Google>

PopoverMenu

Displays a menu inside a Bootstrap popover. Very useful to show a form field inside a popover

import { PopoverMenu } from 'espeakers/components';

// Render the buttons on the page
<OverlayTrigger trigger="click" placement="bottom" overlay={
    <PopoverMenu>
        <Dropdown.Item>Item #1</Dropdown.Item>
        <Dropdown.Item>Item #2</Dropdown.Item>
        <Dropdown.Item>Item #3</Dropdown.Item>
    </PopoverMenu>
}>
    <Button>Click me</Button>
</OverlayTrigger>

Exceptions

AuthenticationException

Thrown when a username or password is incorrect

import { AuthenticationException } from 'espeakers/exceptions';

throw new AuthenticationException('Invalid username or password');

AuthorizationException

Thrown when a user does not have access to a resource

import { AuthorizationException } from 'espeakers/exceptions';

throw new AuthorizationException('Not authorized');

SpeakerMissingException

Thrown when a speaker is loaded but they do not exist, or their profile is private, or their profile is not linked to the bureau.
It's recommended to show a 404 page or suggestsions for other speakers if this is thrown.

import { SpeakerMissingException } from 'espeakers/exceptions';

throw new SpeakerMissingException('Speaker not found');

TokenException

Thrown when an api token is invalid or expired. It's recommended to have the user login again or refresh their token.

import { TokenException } from 'espeakers/exceptions';

throw new TokenException('Token expired');

Forms

Many redux-forms components that can be used when building forms

Amount

Displays an amount with a $. Also validates that only numbers are entered

import { Amount } from 'espeakers/forms';

<Field
  name="name"
  component={Amount} 
/>

Checkbox

Displays an chekbox

import { Checkbox } from 'espeakers/forms';

<Field
  name="name"
  component={Checkbox} 
/>

CheckboxDropdown

Displays an list of checkboxes using PopoverMenu

import { CheckboxDropdown } from 'espeakers/forms';

<Field
  name="name"
  component={CheckboxDropdown} 
/>

ColorPicker

Displays a button that opens the system color picker

import { ColorPicker } from 'espeakers/forms';

<Field
  name="name"
  component={ColorPicker} 
/>

DateRangePickerField

Displays an instance of the bootstrap-daterangepicker component

import { DateRangePickerField } from 'espeakers/forms';

<Field
  name="name"
  type={text|button}
  startDate={"01/01/2019"}
  format={"MM/DD/YYYY"}
  component={DateRangePickerField} 
/>

EmailConsent

Displays checkbox agreeing to receive emails

import { EmailConsent } from 'espeakers/forms';

<Field
  name="name"
  component={EmailConsent} 
/>

FileUpoad

Displays file upload control using react-dropzone

import { FileUpoad } from 'espeakers/forms';

<Field
  name="name"
  component={FileUpoad} 
/>

Initials

Displays a textbox for user initials, along with their name and date

import { Initials } from 'espeakers/forms';

<Field
  name="name"
  component={Initials} 
/>

Message

Displays a textarea

import { Message } from 'espeakers/forms';

<Field
  name="name"
  rows={5}
  component={Message} 
/>

OfferAmount

Displays an <Amount /> with $ USD in the input-group-addon

import { OfferAmount } from 'espeakers/forms';

<Field
  name="name"
  component={OfferAmount} 
/>

Password

Displays a password field

import { Password } from 'espeakers/forms';

<Field
  name="name"
  component={Password} 
/>

Phone

Displays a phone nubmer field that automatically formats domestic and international phone numbers

import { Phone } from 'espeakers/forms';

<Field
  name="name"
  component={Phone} 
/>

Radio

Displays a radio button field

import { Radio } from 'espeakers/forms';

<Field
  name="name"
  component={Radio} 
/>

Rating

Displays multiple stars for saving a rating

import { Rating } from 'espeakers/forms';

<Field
    placeholder="Select a rating"
    label="Rate me"
    count={7}
    value={5}
    help_text="Click on a star to rate"
    component={Rating}
    size={"5x"}
    name="rating"
/>

Reason

Displays radio buttons in a group

import { Reason } from 'espeakers/forms';

<Field
  name="color" 
  component={Reason} 
  label="Red" 
/>
<Field 
  name="color"
  component={Reason} 
  label="Green" 
/>
<Field 
  name="color"
  component={Reason}  
  label="Blue" 
/>

SearchSort

Displays a dropdown to select sorting

import { SearchSort } from 'espeakers/forms';

<Field
  name="sort"
  component={SearchSort} 
/>

Selectize

Displays a select component using react-select

import { Selectize } from 'espeakers/forms';

const countries = [
  {label: "United States", value: "US"},
  {label: "Canada", value: "CA"},
  {label: "Mexico", value: "MX"},
];

...

<Field
  name="country"
  component={Selectize} 
  options={countries}
  normalize={(value) => (_.get(value, ["value"], value))}
  format={(value) => ({
    label: _.get(_.keyBy(countries, "value"), [value, "label"], value),
    value: value
  })}
/>

SliderDropdown

Displays a slider within a PopoverMenu

import { SliderDropdown } from 'espeakers/forms';

const marks = {
    0: "Free",
    2: "$1,000",
    5: "$2,500",
    10: "$5,000",
    15: "$7,500",
    20: "$10,000",
    30: "$15,000",
    40: "$20,000",
    50: "$20,000+"
};

...

<Field
  component={SliderDropdown}
  name="budget"
  placeholder="- Any budget -"
  width="medium"
  defaultValue={[10,20]} 
  any_placeholder="Any Budget"
  min={0}
  max={50}
  step={5}
  dots={true}
  marks={marks}
/>

Text

Displays a standard text field

import { Text } from 'espeakers/forms';

<Field
  component={Text}
  name="name"
  label="Name:"
/>

TextWithInputGroup

Displays a standard text field with an input-group-addon before and/or after it

import { TextWithInputGroup } from 'espeakers/forms';

<Field
  component={TextWithInputGroup}
  name="amount"
  label="Amount:"
  input_group_before={<span className="input-group-addon">lt;/span>}
  input_group_after={<span className="input-group-addon">.00</span>}
/>

Toggle

Displays a toggle for on/off fields using react-toggle

import { Toggle } from 'espeakers/forms';

<Field
  component={Toggle}
  name="option"
  label="Enable:"
/>

ToggleJustified

Displays a toggle for on/off fields using react-toggle to the right

import { ToggleJustified } from 'espeakers/forms';

<Field
  component={ToggleJustified}
  name="option"
  label="Enable:"
  help_text="Click to enable this option"
/>

Username

Displays a username field

import { Username } from 'espeakers/forms';

<Field
  component={Username}
  label="Username:"
/>

Redux Actions

Login.OauthSignin

Used to login to eSpeakers using an Oauth token

import { Oauth } from 'espeakers/actions';

handleSubmit(values, dispatch) {
  // values contains:
  // { 
  //   service: "google|facebook|linkedin|mpi",
  //   access_token|code: "",
  //   state: "buyer[$]1375[$]/home" // user type (buyer, speaker, oauth), bureau, redirect url
  // }
  let state_parts = _.split(_.get(values, ["state"]), "[$]");
  let redir = _.last(state_parts);
  
  if (_.get(values, ["service"]) === "google") {
    return dispatch(Oauth.Google.signin(_.get(values, ["access_token"]), _.join(state_parts, "[$]"), Oauth.Google.getCallbackUrl("google")))
      .then((response) => {
        ownProps.history.push(redir);
      })
      .catch((err) => {
        throw err;
      });
  } else if (_.get(values, ["service"]) === "facebook") {
    return dispatch(Oauth.Facebook.signin(_.get(values, ["code"]), _.join(state_parts, "[$]"), Oauth.Facebook.getCallbackUrl("facebook")))
      .then((response) => {
        ownProps.history.push(redir);
      })
      .catch((err) => {
        throw err;
      });
  } else if (_.get(values, ["service"]) === "linkedin") {
    return dispatch(Oauth.LinkedIn.signin(_.get(values, ["code"]), _.join(state_parts, "[$]"), Oauth.LinkedIn.getCallbackUrl("linkedin")))
      .then((response) => {
        ownProps.history.push(redir);
      })
      .catch((err) => {
        throw err;
      });
  } else if (_.get(values, ["service"]) === "mpi") {
    return dispatch(Oauth.Mpi.signin(_.get(values, ["code"]), _.join(state_parts, "[$]"), Oauth.Mpi.getCallbackUrl("mpi")))
      .then((response) => {
        ownProps.history.push(redir);
      })
      .catch((err) => {
        throw err;
      });
    } else {
      return new Promise((resolve, reject) => {
        return reject("Cannot authenticate without a service");
      });
    }
}

Login.Signin

Used to login to eSpeakers using a username and password

import { Login } from 'espeakers/actions';

handleSubmit(values, dispatch) {
   // values contains:
   // { 
   //   username: "",
   //   password: "",
   //   redir: "/dashboard"
   // }
  return dispatch(Login.Signin(values))
    .catch((err) => {
        throw new SubmissionError({_error: err});
    });
}

Login.TokenSignin

Used to login to eSpeakers using an eSpeakers Authentication token

import { Login } from 'espeakers/actions';

handleSubmit(values, dispatch) {
  // values contains:
  // { 
  //   estoken: "",
  //   redir: "/dashboard"
  // }
  return dispatch(Login.TokenSignin(values))
    .catch((err) => {
        throw new SubmissionError({_error: err});
    });
}

Oauth.Facebook

Used to exchange and Oauth state from Facebook to a profile and later a token for signin into eSpeakers

See Login.OauthSignin above

Oauth.Google

Used to exchange and Oauth state from Google to a profile and later a token for signin into eSpeakers

See Login.OauthSignin above

Oauth.LinkedIn

Used to exchange and Oauth state from LinkedIn to a profile and later a token for signin into eSpeakers

See Login.OauthSignin above

Oauth.Mpi

Used to exchange and Oauth state from Mpi to a profile and later a token for signin into eSpeakers

See Login.OauthSignin above

Balboa

Thunk used in Redux Actions to send an API Request to the Balboa API on eSpeakers

import { Balboa } from "espeakers/actions";

return function(dispatch, getState) {
  return Balboa(dispatch, getState)
    .get(key, "/record/" + id, {})
    .then((response) => {
      dispatch({
        type: RECORD_GET,
        id: id,
        data: _.get(response, ["data"])
      });
      return response;
    });
}

Rest

Implementation of REST actions within an action. You should extend this object in any Redux Actions

import { Rest, Balboa } from "espeakers/actions";

export const RECORD_GET = 'RECORD_GET';
export const RECORD_GET_ALL = 'RECORD_GET_ALL';
export const RECORD_POST = 'RECORD_POST';
export const RECORD_PUT = 'RECORD_PUT';
export const RECORD_DELETE = 'RECORD_DELETE';

export default _.assign({}, Rest, {
  /**
   * Retrieves a single record.
   * @param id
   * @returns {Function}
   */
  get: function(id) {
    let key = [RECORD_GET];
    return (dispatch, getState) => {
      return this.api(
        dispatch,
        key,
        Balboa(dispatch, getState)
          .get(key, "/record/" + id, {})
          .then((response) => {
            dispatch({
              type: RECORD_GET,
              id: id,
              data: _.get(response, ["data"])
            });
            return response;
          })
      );
    };
  },

  /**
   * Retrieves all the records.
   * @param params
   * @returns {Function}
   */
  find: function(params) {
    let key = [RECORD_GET_ALL];
    return (dispatch, getState) => {
      return this.api(
        dispatch,
        key,
        Balboa(dispatch, getState)
          .get(key, "/record", params)
          .then((response) => {
            dispatch({
              type: RECORD_GET_ALL,
              data: _.get(response, ["data"])
            });
            return response;
          })
      );
    };
  },

  /**
   * Inserts a record.  Leave {params.id} 0, otherwise it will be updated
   * @param params
   * @returns {Function}
   */
  add: function(params) {
    let key = [RECORD_POST];
    return (dispatch, getState) => {
      return this.api(
        dispatch,
        key,
        Balboa(dispatch, getState)
          .post(key, "/record", params)
          .then((response) => {
            dispatch({
              type: RECORD_POST,
              data: _.get(response, ["data"])
            });
            return response;
          })
      );
    };
  },

  /**
   * Updates a record.  Pass in {params.id} to specify the record to update, otherwise it will be added
   * @param params
   * @returns {Function}
   */
  update: function(params) {
    let key = [RECORD_PUT];
    return (dispatch, getState) => {
      return this.api(
        dispatch,
        key,
        Balboa(dispatch, getState)
          .put(key, "/record/" + _.get(params, ["id"]), params)
          .then((response) => {
            dispatch({
              type: RECORD_PUT,
              data: _.get(response, ["data"])
            });
            return response;
          })
      );
    };
  },

  /**
   * Removes a record.  Pass in {params.id} to specify the record to remove
   * @param params
   * @returns {Function}
   */
  remove: function(id) {
    let key = [RECORD_DELETE];
    return (dispatch, getState) => {
      return self.api(
        dispatch,
        key,
        Balboa(dispatch, getState)
          .del(key, "/record/" + id, {})
          .then((response) => {
              dispatch({
                type: RECORD_DELETE,
                id: id,
                data: _.get(response, ["data"])
              });
              return response;
          })
      );
    };
  }
});

Redux Reducers

BalboaReducer

Adds the appropriate reducers to the Redux Store to be used by the Balboa Redux Action

import { BalboaReducer } from "espeakers/reducers";

export default combineReducers({
  //...
  // Global App reducers
  balboa3: BalboaReducer,
  //...
});

Utils

Balboa3

Wrapper for fetch that connects to the Balboa API used by eSpeakers

import { Balboa3 } from "espeakers/utils";

const balboa3 = new Balboa3({
  default_params: {
    estoken: token // estoken used for authentication, throws TokenException if invalid
  }
});

...

balboa3.ajax(url, params, method)
  .then((response) => {
    // process response here
  });

Constants

Various site constants used within the system

import { Constants } from 'espeakers/utils';

console.log(Constants);
console.log(Constants.TRUNK_BUREAU_ID);

formatCurrency

Formats the text as USD

import { formatCurrency } from 'espeakers/utils';

console.log(formatCurrency(5)); // $5.00

formatNumber

Formats the text as a number

import { formatNumber } from 'espeakers/utils';

console.log(formatNumber(5)); // 5
console.log(formatNumber(5, 2)); // 5.00
console.log(formatNumber(5.275, 1)); // 5.3
console.log(formatNumber("5", 1)); // 5.0
console.log(formatNumber("abc", 1)); // 0.0

formatPhone

Formats the text as a domestic or international phone number

import { formatPhone } from 'espeakers/utils';

console.log(formatPhone("8005551212")); // (800) 555-1212
console.log(formatPhone("18005551212")); // 1 (800) 555-1212
console.log(formatPhone("1425551212")); // 1425551212
console.log(formatPhone("5551212")); // 555-1212

formatPriceRange

Formats a 2-element array as a price range in the format of $min - $max

import { formatPriceRange } from 'espeakers/utils';

console.log(formatPriceRange([0,1000], "Free")); // Free - $1000
console.log(formatPriceRange([1,1000], "Free")); // $1 - $1000
console.log(formatPriceRange([1000,Infinity], "Free")); // More than $1000

Usage no npm install needed!

README

React-es

Installation

Components

AsyncComponent

Calendar

LoadingEllipsis

LoadingIndicator

OauthButtons

PopoverMenu

Exceptions

AuthenticationException

AuthorizationException

SpeakerMissingException

TokenException

Forms

Amount

Checkbox

CheckboxDropdown

ColorPicker

DateRangePickerField

EmailConsent

FileUpoad

Initials

Message

OfferAmount

Password

Phone

Radio

Rating

Reason

SearchSort

Selectize

SliderDropdown

Text

TextWithInputGroup

Toggle

ToggleJustified

Username

Redux Actions

Login.OauthSignin

Login.Signin

Login.TokenSignin

Oauth.Facebook

Oauth.Google

Oauth.LinkedIn

Oauth.Mpi

Balboa

Rest

Redux Reducers

BalboaReducer

Utils

Balboa3

Constants

formatCurrency

formatNumber

formatPhone

formatPriceRange