bucket policy

actions\index.js

import * as types from '../constants/ActionTypes'

export function addPolicy(bucket, prefix, policy) {
  return { type: types.ADD_POLICY, bucket, prefix, policy }
}

export function removePolicy(bucket, prefix) {
  return { type: types.REMOVE_POLICY, bucket, prefix }
}

export function updatePolicy(bucket, prefix, policy) {
  return { type: types.UPDATE_POLICY, bucket, prefix, policy }
}

components\Policy.js

import { READ_ONLY, WRITE_ONLY, READ_WRITE } from '../constants/BucketPolicy'

import React, { Component, PropTypes } from 'react'
import classnames from 'classnames'

class Policy extends Component {
  constructor(props, context) {
    super(props, context)
    this.state = {}
  }

  handlePolicyChange(e) {
    this.setState({ policy: e.target.value })
  }

  render() {
    const { policy, actions } = this.props

    let element = (
      <div className="view">
        <label>
          {policy.prefix}
        </label>

        <select className="form-control" 
                value={policy.policy} 
                onChange={this.handlePolicyChange.bind(this)}>
          <option value={READ_ONLY}>Read Only</option>
          <option value={WRITE_ONLY}>Write Only</option>
          <option value={READ_WRITE}>Read and Write</option>
        </select>

        <button className="destroy" 
                onClick={() => actions.removePolicy(policy.bucket, policy.prefix)}>
          Remove
        </button>

      </div>
    )

      return (
        <li className={classnames()}>
         {element}
        </li>
      )
  }
}


Policy.propTypes = {
  policy: PropTypes.object.isRequired,
  actions: PropTypes.object.isRequired
}

export default Policy

components\PolicyInput.js

import { READ_ONLY, WRITE_ONLY, READ_WRITE } from '../constants/BucketPolicy'
import React, { Component, PropTypes } from 'react'
import classnames from 'classnames'

class PolicyInput extends Component {
  constructor(props, context) {
    super(props, context)
      this.state = {
	  bucket: this.props.bucket || '',
	  prefix: '',
	  policy: WRITE_ONLY
      }
  }

  handleBucketPrefixChange(e) {
    this.setState({ prefix: e.target.value.trim() })
  }

  handlePolicyChange(e) {
    this.setState({ policy: e.target.value })
  }

  handlePolicySubmit() {
    if (this.state.prefix.length > 0) {
      alert("bucket=" + this.state.bucket + " prefix=" + this.state.prefix + " policy=" + this.state.policy)
      this.props.addPolicy(this.state.bucket, this.state.prefix, this.state.policy)
    }

    this.setState({ bucket: this.props.bucket, prefix: '', policy: READ_WRITE })
  }

  render() {
    return (
      <div className="edit">

        <input type="text" 
               editable={true} 
               defaultValue={this.state.bucket} 
               onChange={this.handleBucketPrefixChange.bind(this)} />

        <select value={this.state.policy} 
                onChange={this.handlePolicyChange.bind(this)}>
          <option value={READ_ONLY}>Read Only</option>
          <option value={WRITE_ONLY}>Write Only</option>
          <option value={READ_WRITE}>Read and Write</option>
        </select>

        <button onClick={() => this.handlePolicySubmit()}>
          Add
        </button>

      </div>
    )
  }
}

PolicyInput.propTypes = {
  bucket: PropTypes.string,
  addPolicy: PropTypes.func.isRequired
}

export default PolicyInput

constants\ActionTypes.js

export const ADD_POLICY = 'ADD_POLICY'
export const REMOVE_POLICY = 'REMOVE_POLICY'
export const UPDATE_POLICY = 'UPDATE_POLICY'

constants\BucketPolicy.js

export const READ_ONLY = 'readonly'
export const WRITE_ONLY = 'writeonly'
export const READ_WRITE = 'readwrite'

containers\App.js

import React, { Component, PropTypes } from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import PolicyInput from '../components/PolicyInput'
import Policy from '../components/Policy'
import * as PolicyActions from '../actions'

class App extends Component {
  render() {
    const { policies, actions } = this.props
    return (
      <div>
        <PolicyInput bucket={'mytestbucket'} addPolicy={actions.addPolicy} />

        <ul className="policy-list">
          {policies.map(policy =>
            <Policy policy={policy} {...actions} />
          )}
        </ul>
      </div>
    )
  }
}

App.propTypes = {
  policies: PropTypes.array.isRequired,
  actions: PropTypes.object.isRequired
}

function mapStateToProps(state) {
  return {
    policies: state.policies
  }
}

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(PolicyActions, dispatch)
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(App)

index.js

import React from 'react'
import { render } from 'react-dom'
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import App from './containers/App'
import reducer from './reducers'

const store = createStore(reducer)

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

reducers\index.js

import { combineReducers } from 'redux'
import policies from './policies'

const rootReducer = combineReducers({
  policies
})

export default rootReducer

reducers\policies.js

import { ADD_POLICY, REMOVE_POLICY, UPDATE_POLICY } from '../constants/ActionTypes'

const initialState = []

export default function policies(state = initialState, action) {
  switch (action.type) {
    case ADD_POLICY:
      let bucketName = action.bucket.trim()
      if (bucketName.length > 0 && action.prefix.startsWith(bucketName + "/")) {
        let updated = false
        for (var i = 0; i < state.length; i++) {
          if (state[i].prefix === action.prefix) {
            state[i].policy = action.policy
            updated = true
          }
        }

        if (!updated) {
          return [
            {
              bucket: action.bucket,
              prefix: action.prefix,
              policy: action.policy,
            },
            ...state
          ]
        }
      }
      return state

    case REMOVE_POLICY:
      return state.filter(policy =>
         policy.bucket !== action.bucket && policy.prefix !== action.prefix
      )

    case UPDATE_POLICY:
      return state.map(policy =>
        policy.bucket === action.bucket && policy.prefix === action.prefix ?
          { ...policy, bucket: action.bucket, prefix: action.prefix, policy: action.policy } :
          policy
      )

    default:
      return state
  }
}