Permissions HOC

actions--admin.js

export const setAdmin = admin => ({
  type: 'SET_ADMIN',
  admin,
});

Actions.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import withPermissions from './withPermissions';
import Permissions from './Permissions';

class Actions extends Component {
  render() {
    const { user: { name, id }, permissions } = this.props;

    return (
      <section>
        <h2>Things {name} can do:</h2>
        <ul>
          <li>
            <button disabled={!permissions.canAddNote()}>
              Add a note
            </button>
          </li>
          <li>
            <button disabled={!permissions.canDeleteNote({ ownerId: id })}>
              Delete a note
            </button>
          </li>
          <li>
            <button disabled={!permissions.canDeleteNote({ ownerId: id + 1 })}>
              Delete somebody else’s note
            </button>
          </li>
          <li>
            <button disabled={!permissions.canWipeProductionDatabase()}>
              Wipe the production database
            </button>
          </li>
        </ul>
      </section>
    );
  }
}

Actions.propTypes = {
  user:
    PropTypes.shape({
      name: PropTypes.string.isRequired,
      id: PropTypes.number.isRequired,
    }).isRequired,
  permissions: PropTypes.instanceOf(Permissions).isRequired,
}

const mapStateToProps = ({ user }) => ({ user })

export default connect(mapStateToProps)(withPermissions(Actions));

AdminToggle.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { setAdmin } from './actions/admin';

class AdminToggle extends Component {
  adminChanged = e => this.props.setAdmin(e.target.checked)

  render() {
    const { admin } = this.props;

    return (
      <label>
        <input type="checkbox" checked={admin} onChange={this.adminChanged} />
        &nbsp;Admin
      </label>
    );
  }
}

const mapStateToProps = ({ user: { admin } }) => ({ admin })

const mapDispatchToProps = dispatch => ({
  setAdmin: admin => dispatch(setAdmin(admin))
});

export default connect(mapStateToProps, mapDispatchToProps)(AdminToggle);

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import rootReducer from './reducers';
import App from './App';
import './index.css';

const store = createStore(
  rootReducer,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

reducers--index.js

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

export default combineReducers({
  user,
});

reducers--user.js

export default (state = { name: 'Powelly', id: 1, admin: false }, action) => {
  switch(action.type) {
    case 'SET_ADMIN':
      return { ...state, admin: action.admin };

    default:
      return state;
  }
}

withPermissions.js

import React from 'react';
import { connect } from 'react-redux';
import Permissions from './Permissions';

const fetchPermissions = ({ user }) => ({
  permissions: new Permissions(user),
});

export default (WrappedComponent) =>
  connect(fetchPermissions)(WrappedComponent)