eureka-modx-loader.js

import React from 'react';
import ReactDOM from 'react-dom';

import { EurekaMediaBrowser, actions } from 'eureka-browser';

import decoratedActions from './modxactions';

module.exports = function(opts = window.EUREKA_CONFIG) {
  const config = opts,
  props = Object.assign({}, {
    target: 'eureka-root'
  }, config);

  // decorate the component so it has a props.decoratedActions of our custom actions (to make it not use REST)
  const DecoratedEurekaMediaBrowser = withDecoratedActions(EurekaMediaBrowser);

  ReactDOM.render(
    <DecoratedEurekaMediaBrowser {...props} />,
    document.getElementById(props.target)
  );
}

function withDecoratedActions(WrapperComponent = EurekaMediaBrowser, overrides = {}) {
  return class extends React.Component {
    constructor(props) {
      super(props);
    }
    render() {
      return (
        <WrapperComponent {...this.props} decoratedActions={Object.assign({}, decoratedActions, overrides)} />
      )
    }
  }
}

modxactions.js

import { utility, actions } from 'eureka-browser';

const {
  updateSourceTreeSuccess,
  updateSourceTreeError,
  fetchDirectoryContentsSuccess,
  fetchDirectoryContentsError,
  fetchMediaSourcesSuccess,
  fetchMediaSourcesError,
  deleteMediaItemSuccess,
  deleteMediaItemError,
  uploadFilesSuccess,
  uploadFilesError,
  createDirectorySuccess,
  createDirectoryError,
  renameItemSuccess,
  renameItemError
} = actions;

require('isomorphic-fetch');

const { makeURL } = utility;

const eurekaConnector = '/assets/components/eureka/media.php';

const updateSourceTree = (source) => (
  (dispatch) => (
    fetch(makeURL(eurekaConnector, {
      a: `media/sources/${source}`
    }), {
      method: 'GET',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      }
    }).then((response) => {
      if(response.state < 200 || response.state >= 300) {
        var error = new Error(response.statusText)
        error.response = response
        throw error;
      }
      return response;
    }).then((response) => (
      response.json()
    )).then((contents) => (
      dispatch(
        updateSourceTreeSuccess(contents)
      )
    )).catch((error) => (
      dispatch(
        updateSourceTreeError(error)
      )
    ))
  )
);

const fetchDirectoryContents = (source, params) => (
  (dispatch) => (
    fetch(utility.makeURL(eurekaConnector, Object.assign({}, params, {
      a: `media/sources/${source}`
    })), {
      method: 'GET',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      }
    }).then((response) => {
      if(response.state < 200 || response.state >= 300) {
        var error = new Error(response.statusText)
        error.response = response
        throw error;
      }
      return response;
    }).then((response) => (
      response.json()
    )).then((contents) => (
      dispatch(
        fetchDirectoryContentsSuccess(contents)
      )
    )).catch((error) => (
      dispatch(
        fetchDirectoryContentsError(error)
      )
    ))
  )
);

const fetchMediaSources = () => (
  (dispatch) => (
    fetch(utility.makeURL(eurekaConnector, {
      a: 'media/sources'
    }), {
      method: 'GET',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      }
    }).then((response) => {
      if(response.state < 200 || response.state >= 300) {
        var error = new Error(response.statusText)
        error.response = response
        throw error;
      }
      return response;
    }).then((sources) => (
      sources.json()
    )).then((sources) => (
      dispatch(
        fetchMediaSourcesSuccess(sources)
      )
    )).catch((error) => (
      dispatch(
        fetchMediaSourcesError(error)
      )
    ))
  )
);

const deleteMediaItem = (source, absolutePath) => (
  (dispatch) => (
    fetch(utility.makeURL(eurekaConnector, {
      absolutePath: absolutePath,
      a: `media/sources/${source}`
    }), {
      method: 'DELETE',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      }
    }).then((response) => {
      if(response.state < 200 || response.state >= 300) {
        var error = new Error(response.statusText)
        error.response = response
        throw error;
      }
      return response;
    }).then((response) => (
      response.json()
    )).then((contents) => {
      if(contents === false) throw new Error(`Unable to delete directory ${absolutePath}`)
      return contents;
    }).then((contents) => (
      dispatch(
        deleteMediaItemSuccess(source, absolutePath)
      )
    )).catch((error) => (
      dispatch(
        deleteMediaItemError(error)
      )
    ))
  )
);

const uploadFiles = (source, directory, formData) => (
  (dispatch) => (
    fetch(utility.makeURL(eurekaConnector, {
      dir: directory,
      a: `media/sources/${source}`
    }), {
      method: 'POST',
      body: formData,
      headers: {
        //'Accept': 'application/json',
        //'Content-Type': 'application/json'
      }
    }).then((response) => {
      if(response.state < 200 || response.state >= 300) {
        var error = new Error(response.statusText)
        error.response = response
        throw error;
      }
      return response;
    }).then((response) => (
      response.json()
    )).then((contents) => (
      dispatch(
        uploadFilesSuccess(contents)
      )
    )).catch((error) => (
      dispatch(
        uploadFilesError(error)
      )
    ))
  )
);

const createDirectory = (source, dir) => (
  (dispatch) => (
    fetch(utility.makeURL(eurekaConnector,{
      path:dir,
      a: `media/sources/${source}`
    }), {
      method: 'PUT',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      }
    }).then((response) => {
      if(response.state < 200 || response.state >= 300) {
        var error = new Error(response.statusText)
        error.response = response
        throw error;
      }
      return response;
    }).then((response) => (
      response.json()
    )).then((success) => {
      if(!success) {
        var error = new Error(`unable to create ${dir} for media source ${source}`);
        error.response = false;
        throw error;
      }
    }).then((success) => (
      dispatch(
        createDirectorySuccess(success)
      )
    )).catch((error) => (
      dispatch(
        createDirectoryError(error)
      )
    ))
  )
);

/*const renameDirectory = (source, dirPath, name) => (
  (dispatch) => (
    fetch(utility.makeURL(eurekaConnector, {
      path:dirPath,
      a: `media/sources/${source}`
    }), {
      method: 'PUT',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      }
    }).then((response) => {
      if(response.state < 200 || response.state >= 300) {
        var error = new Error(response.statusText)
        error.response = response
        throw error;
      }
      return response;
    }).then((response) => (
      response.json()
    )).then((success) => {
      if(!success) {
        var error = new Error(`unable to create ${dirPath} for media source ${source}`);
        error.response = false;
        throw error;
      }
    }).then((success) => (
      dispatch(
        renameDirectorySuccess(success)
      )
    )).catch((error) => (
      dispatch(
        renameDirectoryError(error)
      )
    ))
  )
);*/

const renameItem = (source, filePath, name) => (
  (dispatch) => (
    fetch(utility.makeURL(eurekaConnector, {
      path:filePath,
      name:name,
      a: `media/sources/${source}`
    }), {
      method: 'PUT',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      }
    }).then((response) => {
      if(response.state < 200 || response.state >= 300) {
        var error = new Error(response.statusText)
        error.response = response
        throw error;
      }
      return response;
    }).then((response) => (
      response.json()
    )).then((response) => {
      if(!response) {
        var error = new Error(`unable to create ${filePath} for media source ${source}`);
        error.response = false;
        throw error;
      }
      //console.log('response',response);
      return response;
    }).then((response) => (
      dispatch(
        renameItemSuccess(response)
      )
    )).catch((error) => (
      dispatch(
        renameItemError(error)
      )
    ))
  )
);

const actionsOverride = {
  updateSourceTree: updateSourceTree,
  fetchDirectoryContents: fetchDirectoryContents,
  fetchMediaSources: fetchMediaSources,
  deleteMediaItem: deleteMediaItem,
  uploadFiles: uploadFiles,
  createDirectory: createDirectory,
  //renameDirectory: renameDirectory,
  renameItem: renameItem
};

const decoratedActions = Object.assign({}, actions, actionsOverride);

module.exports = decoratedActions;