@capillarytech/creatives-library 8.0.136-alpha.4 → 8.0.136-beta.3

package/containers/Assets/Gallery/index.js

@@ -0,0 +1,473 @@
+/*
+ *
+ * Gallery
+ *
+ */
+
+import PropTypes from 'prop-types';
+
+import React from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators, compose } from 'redux';
+import Helmet from 'react-helmet';
+import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
+import { createStructuredSelector } from 'reselect';
+import moment from "moment";
+import _ from "lodash";
+import { CapInput, CapButton } from '@capillarytech/cap-react-ui-library';
+import { Spin, Popover, Select } from 'antd';
+import makeSelectGallery from './selectors';
+import messages from './messages';
+import * as actions from './actions';
+import { UserIsAuthenticated } from '../../../utils/authWrapper';
+import CardGrid from '../../../components/CardGrid';
+import * as globalActions from '../../../containers/Cap/actions';
+import {getMessageObject} from '../../../utils/messageUtils';
+import SlideBox from '../../../components/SlideBox';
+import PageHeader from '../../../components/PageHeader';
+import Pagination from '../../../components/Pagination';
+import * as commonUtil from '../../../utils/common';
+import './_gallery.scss';
+import injectSaga from '../../../utils/injectSaga';
+import injectReducer from '../../../utils/injectReducer';
+import reducer from './reducer';
+import { gallerySaga } from './sagas';
+
+const Option = Select.Option;
+
+export class Gallery extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  constructor(props) {
+    super(props);
+    this.state = {
+      searchText: '',
+      selectedAsset: {},
+      showImagePreviewModal: false,
+      hoveredItem: '',
+      showEmbeddedPreview: false,
+      page: 1,
+      perPageLimit: 25,
+      totalCount: 0,
+    };
+    this.uploadImages = this.uploadImages.bind(this);
+    this.openFileDialog = this.openFileDialog.bind(this);
+    this.searchAsset = this.searchAsset.bind(this);
+    this.openPreviewMode = this.openPreviewMode.bind(this);
+    this.renderAssetPreviewModal = this.renderAssetPreviewModal.bind(this);
+    this.toggleImagePreview = this.toggleImagePreview.bind(this);
+    this.selectAsset = this.selectAsset.bind(this);
+    this.handleGallery = this.handleGallery.bind(this);
+    this.deleteAsset = this.deleteAsset.bind(this);
+    this.handleOnHoverItem = this.handleOnHoverItem.bind(this);
+    this.unmountEvent = this.unmountEvent.bind(this);
+    this.handleSortingChange = this.handleSortingChange.bind(this);
+    this.openEmbeddedPreviewMode = this.openEmbeddedPreviewMode.bind(this);
+    this.hideEmbeddedPreviewMode = this.hideEmbeddedPreviewMode.bind(this);
+    this.delayTimer = 0;
+  }
+
+  componentDidMount() {
+    const params = {
+      name: this.state.searchText,
+      sortBy: 'Most Recent',
+    };
+    this.getAllAssets({params});
+    this.props.actions.getUserList();
+    window.addEventListener("message", this.handleGallery, false);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    
+    if ( !_.isEqual(nextProps.Gallery.uploadAssetSuccess, this.props.Gallery.uploadAssetSuccess) && nextProps.Gallery.uploadAssetSuccess) {
+      if (this.props.location.query.type === 'embedded' && nextProps.Gallery.uploadedAssetData) {
+        
+        const response = {
+          action: "selectAsset",
+          value: JSON.stringify(nextProps.Gallery.uploadedAssetData),
+        };
+        parent.postMessage(JSON.stringify(response), '*');
+      }
+      const message = getMessageObject('success', this.props.intl.formatMessage(messages.assetUploadSuccess), true);
+      this.props.globalActions.addMessageToQueue(message);
+      const params = {
+        name: this.state.searchText,
+      };
+      this.getAllAssets({params});
+    }
+    if (!this.props.Gallery.fetchingAllAssets && !_.isEmpty(this.props.Gallery.assetList) && this.props.Gallery.assetList[0] && this.props.Gallery.assetList[0].totalCount && this.state.totalCount === 0) {
+      this.setState({totalCount: this.props.Gallery.assetList[0].totalCount});
+    }
+    if ( !_.isEqual(nextProps.Gallery.assetUploading, this.props.Gallery.assetUploading) && !nextProps.Gallery.uploadAssetSuccess && !nextProps.Gallery.assetUploading) {
+      const message = getMessageObject('error', this.props.intl.formatMessage(messages.assetUploadFailed), true);
+      this.props.globalActions.addMessageToQueue(message);
+    }
+
+    if (!nextProps.Gallery.deletingAsset && !nextProps.Gallery.assetDeleteError && !_.isEqual(nextProps.Gallery.deletingAsset, this.props.Gallery.deletingAsset)) {
+      const message = getMessageObject('success', this.props.intl.formatMessage(messages.assetDeleteSuccess), true);
+      this.props.globalActions.addMessageToQueue(message);
+      const params = {
+        name: this.state.searchText,
+        sortBy: 'Most Recent',
+      };
+      this.getAllAssets({params});
+    }
+    if (!nextProps.Gallery.deletingAsset && nextProps.Gallery.assetDeleteError && !_.isEqual(nextProps.Gallery.deletingAsset, this.props.Gallery.deletingAsset)) {
+      const message = getMessageObject('error', this.props.intl.formatMessage(messages.assetDeleteFailed), true);
+      this.props.globalActions.addMessageToQueue(message);
+    }
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener("message", this.handleGallery, false);
+  }
+
+  getAllAssets = ({params, getNextPage, resetPage}, isReRender = false) => {
+    let queryParams = params;
+    let page = this.state.page;
+    if (!this.props.Gallery.fetchingAllAssets && ((resetPage || (page === 1 && this.state.totalCount === 0) || page <= (this.state.totalCount / this.state.perPageLimit)) || isReRender )) {
+      if (getNextPage) {
+        page += 1;
+      }
+
+      let totalCount = this.state.totalCount;
+      if (resetPage) {
+        page = 1;
+        totalCount = 0;
+      }
+      if ((!params || _.isEmpty(params))) {
+        queryParams = {
+          sortBy: this.state.sortBy,
+        };
+      }
+      if (this.state.searchText !== "") {
+        queryParams = {...queryParams, name: this.state.searchText};
+      }
+      this.setState({page, totalCount}, () => {
+        queryParams.page = page;
+        queryParams.perPage = this.state.perPageLimit;
+        this.props.actions.getAllAssets('image', queryParams);
+      });
+    }
+  };
+
+  deleteAsset(asset) {
+    this.props.actions.deleteAssetById(asset._id, asset.type);
+  }
+
+  handleGallery = (e) => {
+    const type = e.data;
+    switch (type) {
+      case 'unmount':
+        this.unmountEvent();
+        break;
+      default:
+        break;
+    }
+  };
+
+  handleSortingChange(value) {
+    const params = {
+      name: this.state.searchText,
+      sortBy: value,
+    };
+    this.getAllAssets({params, resetPage: true});
+  }
+  unmountEvent() {
+    window.removeEventListener("message", this.handleGallery, false);
+  }
+
+  handleOnHoverItem(isHovering, id) {
+    if (isHovering) {
+      this.setState({hoveredItem: id});
+    } else {
+      this.setState({hoveredItem: ''});
+    }
+  }
+
+  toggleImagePreview() {
+    this.setState({ showImagePreviewModal: !this.state.showImagePreviewModal });
+  }
+
+  selectAsset() {
+    const response = {
+      action: "selectAsset",
+      value: JSON.stringify(this.state.selectedAsset),
+    };
+    parent.postMessage(JSON.stringify(response), '*');
+  }
+
+  openPreviewMode(selectedAsset) {
+    const asset = selectedAsset;
+    if (this.props.location.query.type !== 'embedded') {
+      this.toggleImagePreview();
+    } else {
+      asset.showButtons = asset.showButtons ? !asset.showButtons : true;
+    }
+    this.setState({selectedAsset: asset});
+  }
+
+  hideEmbeddedPreviewMode() {
+    this.setState({selectedAsset: {}, showEmbeddedPreview: false});
+  }
+
+  openEmbeddedPreviewMode(selectAsset) {
+    this.setState({selectedAsset: selectAsset, showEmbeddedPreview: true});
+  }
+
+  searchAsset(value) {
+    this.setState({searchText: value}, () => {
+      this.delay(() => {
+        const params = {
+          name: this.state.searchText,
+        };
+        if (this.state.sortBy) {
+          params.sortBy = this.state.sortBy;
+        }
+        this.getAllAssets({params, resetPage: true});
+      }, 1000);
+    });
+  }
+
+  delay(callback, ms) {
+    clearTimeout(this.delayTimer);
+    this.delayTimer = setTimeout(callback, ms);
+  }
+
+  uploadImages(e, {files}) {
+    e.preventDefault();
+    const _URL = window.URL || window.webkitURL;
+    for (const file in files) {
+      if (files.hasOwnProperty(file)) {
+        const img = new Image();
+        const that = this;
+        img.src = _URL.createObjectURL(files[file]);
+        img.onload = function () {
+          const fileParams = {
+            width: this.width,
+            height: this.height,
+          };
+          that.props.actions.uploadAsset(files[file], 'image', fileParams);
+        };
+      }
+    }
+  }
+
+  prepareData() {
+    const data = [];
+    const assetList = this.props.Gallery.assetList;
+    _.forEach(assetList, (asset) => {
+      const tmpData = {};
+      tmpData.id = asset._id;
+      const updateDateTime = (moment().format('DD-MM-YYYY') === moment(asset.updatedAt).format('DD-MM-YYYY')) ? moment(asset.updatedAt).format('hh:mma') : moment(asset.updatedAt).format('DD-MM-YYYY');
+      tmpData.content = (
+        <div className="image-container" onClick={() => this.openPreviewMode(asset)}>
+          <img style={{width: '100%'}} src={asset.metaInfo.secure_file_path ? asset.metaInfo.secure_file_path : asset.metaInfo.public_url} alt={asset.name} />
+          <div className={asset.showButtons ? 'overlay show-overlay' : 'overlay hide'}>
+            <div>
+              <CapButton type="secondary" className="select-button" onClick={(e) => this.selectAsset(e)}>
+                <FormattedMessage {...messages.select} />
+              </CapButton>
+            </div>
+            <div>
+              <CapButton type="cancel" className="preview-button" onClick={() => this.openEmbeddedPreviewMode(asset)}>
+                <FormattedMessage {...messages.preview} />
+              </CapButton>
+            </div>
+          </div>
+        </div>
+      );
+      tmpData.footer = (
+        <div className="card-footer-wrapper">
+          <div className="card-title-container">
+            <div className="card-title-wrapper">
+              <p className="card-title" onClick={() => this.openPreviewMode(asset)}>{asset.name}</p>
+            </div>
+            <div className="more-icon-wrapper">
+              <Popover
+                placement="leftTop"
+                content={<div style={{ cursor: 'pointer'}}><p onClick={() => this.deleteAsset(asset)}>
+                  <FormattedMessage {...messages.delete} />
+                </p></div>} trigger="click">
+                <i className="material-icons creative-icons">more_vert</i>
+              </Popover>
+            </div>
+          </div>
+          <p className="card-detail"><FormattedMessage {...messages.uploadedAt} />: {updateDateTime}</p>
+        </div>
+      );
+      data.push(tmpData);
+    });
+    return data;
+  }
+
+  openFileDialog() {
+    document.getElementById("fileName").click();
+  }
+
+  renderAssetPreviewModal() {
+    const slideboxContent = (
+      <div style={{height: "75vh", width: '55vw'}}>
+        <div style={{overflow: 'hidden', textAlign: 'center'}}>
+          <div style={{ display: 'table', height: '75vh', width: '55vw', background: 'url(https://s3.amazonaws.com/test_files_cache_bkp/intouch_creative_assets/1720b7f7e78860c1f905.svg)' }}>
+            <div style={{ display: 'table-cell', height: "75vh", verticalAlign: 'middle' }}>
+              <img style={{maxWidth: '100%', maxHeight: '100%'}} src={this.state.selectedAsset.metaInfo.secure_file_path ? this.state.selectedAsset.metaInfo.secure_file_path : this.state.selectedAsset.metaInfo.public_url} alt={this.state.selectedAsset.name} />
+            </div>
+          </div>
+          <a href={this.state.selectedAsset.metaInfo.public_url} target="_blank" style={{ position: 'fixed', right: '55px', bottom: '18vh' }} ><i className="material-icons" style={{ color: '#2E89DF', cursor: 'pointer' }}>fullscreen</i></a>
+        </div>
+        <div style={{ fontSize: '14px', color: '#333333', lineHeight: '24px', fontFamily: 'OpenSans', textAlign: 'center', paddingTop: '10px'}}>
+          <p style={{marginBottom: '0px'}}><span><FormattedMessage {...messages.dimensions} />: </span> <span>{`${this.state.selectedAsset.metaInfo.width}X${this.state.selectedAsset.metaInfo.height} px`}</span></p>
+          <p style={{marginBottom: '0px'}}><span><FormattedMessage {...messages.size} />: </span> <span>{(!isNaN(this.state.selectedAsset.metaInfo.file_size) ? `${(parseFloat(this.state.selectedAsset.metaInfo.file_size) / 1024).toFixed(2)} KB` : this.state.selectedAsset.metaInfo.file_size )}</span></p>
+          <p style={{marginBottom: '0px'}}><span><FormattedMessage {...messages.uploadedOn} />: </span> <span>{moment(this.state.selectedAsset.updatedAt).format('DD MMM YYYY hh:mm A')}</span></p>
+          <p><span><FormattedMessage {...messages.uploadedBy} />: </span> <span>{commonUtil.getUserNameById(parseInt(this.state.selectedAsset.updatedBy, 10), commonUtil.getMergedUserList(this.props.Gallery.userList))}</span></p>
+          {/* <p><span>URL: </span> <span>{this.state.selectedAsset.metaInfo.publicUrl}</span></p> */}
+        </div>
+      </div>
+    );
+
+    return (
+      <SlideBox
+        header={this.state.selectedAsset.name}
+        content={slideboxContent}
+        show={this.state.showImagePreviewModal}
+        handleClose={this.toggleImagePreview}
+      />
+    );
+  }
+
+  render() {
+    const filterContent = (
+      <div className="action-container" style={{ display: 'inline-flex', width: '100%'}}>
+        <div style={{ marginTop: '8px', width: '50%'}}>
+          <CapInput
+            className="search-text"
+            style={{width: '210px'}}
+            placeholder={this.props.intl.formatMessage(messages.searchText)}
+            prefix={<i className="material-icons" style={{color: '#707070', fontSize: '16px'}}>search</i>}
+            value={this.state.searchText}
+            onChange={(e) => this.searchAsset(e.target.value)}
+          />
+        </div>
+        <div style={{ textAlign: 'right', marginTop: '16px', width: '50%'}}>
+          <span className="select-font">
+            <FormattedMessage {...messages.sortby} />
+          </span>
+          <Select
+            style={{marginLeft: '8px', width: 120, borderLeft: 'none', borderRight: 'none', borderTop: 'none'}}
+            className="select-font"
+            defaultValue="Most Recent"
+            onChange={this.handleSortingChange}
+          >
+            <Option className="select-font" value="Most Recent">
+              <FormattedMessage {...messages.mostRecent} />
+            </Option>
+            <Option className="select-font" value="Alphabetically">
+              <FormattedMessage {...messages.alphabetically} />
+            </Option>
+          </Select>
+        </div>
+      </div>
+    );
+    const actionComponents = (
+      <form encType="multipart/form-data" id="myForm">
+        <input style={{ display: 'none'}} id="fileName" type="file" onClick={(e) => {e.target.value=null}} onChange={(e) => this.uploadImages(e, {files: e.target.files})} accept="image/*" multiple/>
+        <CapButton type={this.props.location.query.type !== 'embedded' ? 'primary' : 'secondary'} onClick={(e) => this.openFileDialog(e)} style={{float: 'right'}}>
+          <FormattedMessage {...messages.upload} />
+        </CapButton>
+      </form>
+    );
+    const pageHeading = (this.props.location.query.type === 'embedded') ? '' : (<FormattedMessage {...messages.gallery} />);
+
+    return (
+      <div>
+        {/*<Spin spinning={this.props.Gallery.assetUploading || this.props.Gallery.fetchingAllAssets}>*/}
+        <Helmet
+          title={this.props.intl.formatMessage(messages.gallery)}
+          />
+        {/* this.props.location.query.type !== 'embedded' && <Row style={{marginBottom: '16px'}}>
+            <Col>
+              <Breadcrumb>
+                <Breadcrumb.Item>Campaigns</Breadcrumb.Item>
+                <Breadcrumb.Item>Creatives</Breadcrumb.Item>
+                <Breadcrumb.Item>Images Gallery</Breadcrumb.Item>
+              </Breadcrumb>
+            </Col>
+          </Row> */}
+
+        {!this.state.showEmbeddedPreview && <PageHeader pageHeading={pageHeading} actionComponents={actionComponents} />}
+
+        {this.state.showEmbeddedPreview ?
+          <div className="embedded-preview-wrapper">
+            <div className="embedded-preview-header" onClick={this.hideEmbeddedPreviewMode}>
+              <p className="embedded-preview-header-wrapper" style={{display: 'inline-flex'}}>
+                <i className="material-icons">arrow_back</i>
+                <span className="embedded-preview-header-text">
+                  <FormattedMessage {...messages.backToGallery} />
+                </span>
+              </p>
+            </div>
+            <div style={{height: "75vh", width: '100%'}}>
+              <div style={{overflow: 'hidden', textAlign: 'center'}}>
+                <div style={{ display: 'table', height: '75vh', width: '85vw', background: 'url(https://s3.amazonaws.com/test_files_cache_bkp/intouch_creative_assets/1720b7f7e78860c1f905.svg)' }}>
+                  <div style={{ height: "75vh", display: 'table-cell', verticalAlign: 'middle' }}>
+                    <img style={{maxWidth: '100%', maxHeight: '100%'}} src={this.state.selectedAsset.metaInfo.secure_file_path ? this.state.selectedAsset.metaInfo.secure_file_path : this.state.selectedAsset.metaInfo.public_url} alt={this.state.selectedAsset.name} />
+                  </div>
+                </div>
+                <a href={this.state.selectedAsset.metaInfo.public_url} target="_blank" style={{ position: 'fixed', right: '24px', bottom: '17vh' }} ><i className="material-icons" style={{ color: '#2E89DF', cursor: 'pointer' }}>fullscreen</i></a>
+              </div>
+              <div style={{ fontSize: '14px', color: '#333333', lineHeight: '24px', fontFamily: 'OpenSans', textAlign: 'center', paddingTop: '10px'}}>
+                <p><span><FormattedMessage {...messages.dimensions} />: </span> <span>{`${this.state.selectedAsset.metaInfo.width}X${this.state.selectedAsset.metaInfo.height} px`}</span></p>
+                <p><span><FormattedMessage {...messages.size} />: </span> <span>{this.state.selectedAsset.metaInfo.file_size}</span></p>
+                <p><span><FormattedMessage {...messages.uploadedOn} />: </span> <span>{moment(this.state.selectedAsset.updatedAt).format('DD MMM YYYY hh:mm A')}</span></p>
+                {/* <p><span>URL: </span> <span>{this.state.selectedAsset.metaInfo.publicUrl}</span></p> */}
+              </div>
+            </div>
+          </div> :
+          <Spin spinning={this.props.Gallery.assetUploading || this.props.Gallery.fetchingAllAssets}>
+            <Pagination onPageChange={() => { this.getAllAssets({getNextPage: true}); }} paginationSelector="pagination-container">
+              <CardGrid
+                listItem={this.prepareData()}
+                filterContent={filterContent}
+                onHoverItem={this.handleOnHoverItem}
+                onItemClick={this.handleOnHoverItem}
+                colNumber={this.props.location.query.type === 'embedded' ? 2 : 4}
+                enablePagination
+                />
+            </Pagination>
+          </Spin>
+          }
+        {this.state.showImagePreviewModal && this.renderAssetPreviewModal()}
+        {/*</Spin>*/}
+      </div>
+    );
+  }
+}
+
+Gallery.propTypes = {
+  actions: PropTypes.object.isRequired,
+  Gallery: PropTypes.object,
+  globalActions: PropTypes.object,
+  location: PropTypes.object,
+  intl: intlShape.isRequired,
+};
+
+const mapStateToProps = createStructuredSelector({
+  Gallery: makeSelectGallery(),
+});
+
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators(actions, dispatch),
+    globalActions: bindActionCreators(globalActions, dispatch),
+  };
+}
+
+const withConnect = connect(mapStateToProps, mapDispatchToProps);
+const withSaga = injectSaga({ key: 'gallery', saga: gallerySaga });
+const withReducer = injectReducer({ key: 'gallery', reducer });
+
+export default compose(
+  UserIsAuthenticated,
+  withSaga,
+  withReducer,
+  withConnect,
+)(injectIntl(Gallery));

package/containers/Assets/Gallery/messages.js

@@ -0,0 +1,93 @@
+/*
+ * Gallery Messages
+ *
+ * This contains all the text for the Gallery component.
+ */
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  uploadedAt: {
+    id: 'creatives.containers.Assets.Gallery.uploadedAt',
+    defaultMessage: 'Uploaded at ',
+  },
+  uploadedOn: {
+    id: 'creatives.containers.Assets.Gallery.uploadedOn',
+    defaultMessage: 'Uploaded on ',
+  },
+  uploadedBy: {
+    id: 'creatives.containers.Assets.Gallery.uploadedBy',
+    defaultMessage: 'Uploaded by ',
+  },
+  upload: {
+    id: 'creatives.containers.Assets.Gallery.upload',
+    defaultMessage: 'Upload image',
+  },
+  imagePreview: {
+    id: 'creatives.containers.Assets.Gallery.imagePreview',
+    defaultMessage: 'Image preview',
+  },
+  size: {
+    id: 'creatives.containers.Assets.Gallery.size',
+    defaultMessage: 'Size',
+  },
+  dimensions: {
+    id: 'creatives.containers.Assets.Gallery.dimensions',
+    defaultMessage: 'Dimensions',
+  },
+  gallery: {
+    id: 'creatives.containers.Assets.Gallery.gallery',
+    defaultMessage: 'Gallery',
+  },
+  backToGallery: {
+    id: 'creatives.containers.Assets.Gallery.backToGallery',
+    defaultMessage: 'Back to image gallery',
+  },
+  mostRecent: {
+    id: 'creatives.containers.Assets.Gallery.mostRecent',
+    defaultMessage: 'Most recent',
+  },
+  alphabetically: {
+    id: 'creatives.containers.Assets.Gallery.alphabetically',
+    defaultMessage: 'Alphabetically',
+  },
+  sortby: {
+    id: 'creatives.containers.Assets.Gallery.sortby',
+    defaultMessage: 'Sort by',
+  },
+  delete: {
+    id: 'creatives.containers.Assets.Gallery.delete',
+    defaultMessage: 'Delete',
+  },
+  search: {
+    id: 'creatives.containers.Assets.Gallery.search',
+    defaultMessage: 'Search',
+  },
+  select: {
+    id: 'creatives.containers.Assets.Gallery.select',
+    defaultMessage: 'Select',
+  },
+  preview: {
+    id: 'creatives.containers.Assets.Gallery.preview',
+    defaultMessage: 'Preview',
+  },
+  assetUploadSuccess: {
+    id: 'creatives.containers.Assets.Gallery.assetUploadSuccess',
+    defaultMessage: 'Image uploaded successfully',
+  },
+  assetUploadFailed: {
+    id: 'creatives.containers.Assets.Gallery.assetUploadFailed',
+    defaultMessage: 'Image uploaded failed',
+  },
+  assetDeleteSuccess: {
+    id: 'creatives.containers.Assets.Gallery.assetDeleteSuccess',
+    defaultMessage: 'Image deleted successfully.',
+  },
+  assetDeleteFailed: {
+    id: 'creatives.containers.Assets.Gallery.assetDeleteFailed',
+    defaultMessage: 'Image deletion failed.',
+  },
+  searchText: {
+    id: 'creatives.components.CapTagList.searchText',
+    defaultMessage: 'Search',
+  },
+});

package/containers/Assets/Gallery/reducer.js

@@ -0,0 +1,81 @@
+/*
+ *
+ * Gallery reducer
+ *
+ */
+
+import { fromJS } from 'immutable';
+import * as types from './constants';
+
+const initialState = fromJS({
+  assetList: [],
+  assetUploading: false,
+  fetchingAllAssets: false,
+});
+
+function galleryReducer(state = initialState, action) {
+  switch (action.type) {
+    case types.GET_ALL_ASSETS_REQUEST:
+      return state
+        .set('fetchingAllAssets', true)
+        .set('fetchAllAssetSuccess', false);
+    case types.GET_ALL_ASSETS_SUCCESS:
+      if (action.isReset) {
+        return state
+          .set('assetList', fromJS(action.data.assets))
+          .set('fetchingAllAssets', false)
+          .set('fetchAllAssetSuccess', true);
+      }
+      return state
+        .set('assetList', fromJS(state.get('assetList').toJS().concat(action.data.assets)))
+        .set('fetchingAllAssets', false)
+        .set('fetchAllAssetSuccess', true);
+    case types.GET_ALL_ASSETS_FAILURE:
+      return state
+      .set('fetchingAllAssets', false)
+      .set('fetchAllAssetSuccess', false);
+    case types.UPLOAD_ASSET_REQUEST:
+      return state
+        .set('uploadAssetSuccess', false)
+        .set('assetUploading', true);
+    case types.UPLOAD_ASSET_SUCCESS:
+      return state
+      .set('uploadAssetSuccess', (action.statusCode !== undefined && action.statusCode !== '' && action.statusCode < 300))
+      .set('assetUploading', false)
+      .set('uploadedAssetData', action.data);
+    case types.UPLOAD_ASSET_FAILURE:
+      return state
+        .set('uploadAssetSuccess', false)
+        .set('assetUploading', false);
+    case types.DELETE_ASSET_REQUEST:
+      return state
+        .set('deletingAsset', true)
+        .set('assetDeleteError', false).set("itemDeleted", false);
+    case types.DELETE_ASSET_SUCCESS:
+      return state
+        .set('deletingAsset', false).set("itemDeleted", true);
+    case types.DELETE_ASSET_FAILURE:
+      return state
+        .set('deletingAsset', false)
+        .set('assetDeleteError', true).set("itemDeleted", false);
+    case types.GET_USER_LIST_REQUEST:
+      return state
+        .set('fetchingUserList', true)
+        .set('userList', fromJS({}))
+        .set('userListFetchError', false);
+    case types.GET_USER_LIST_SUCCESS:
+      return state
+        .set('fetchingUserList', false)
+        .set('userList', fromJS(action.data))
+        .set('userListFetchError', false);
+    case types.GET_USER_LIST_FAILURE:
+      return state
+        .set('fetchingUserList', false)
+        .set('userList', fromJS({}))
+        .set('userListFetchError', true);
+    default:
+      return state;
+  }
+}
+
+export default galleryReducer;