import React, { Component } from 'react';
import { connect } from 'react-redux';
import classNames from 'classnames';
import { updateProfileAssetFileIndex } from '../../actions/profile';
import { isConflicts } from '../../utils/conflicts';

const Arrow = (
  ({ dispatch, assets, profile, type }) => {
      const url = `/i/arrow_${type}.svg`;
      const offset = type !== 'left' ? 1 : -1;

      const conflict = isConflicts(assets, profile);

      return (
        <div className={classNames('arrow', { disabled: conflict })} onClick={() => conflict || dispatch(updateProfileAssetFileIndex(offset))}>
          <img src={url} />
        </div>
      );  
  }
);

export default connect(({ profile, assets }) => ({ profile, assets }))(Arrow);


@@ -232,16 +232,117 @@
 flicts';
+%0Aimport %7B Link %7D from 'react-router';%0Aimport %7B getIndexByOffset, getFiles %7D from '../../utils/files';
 %0A%0Aconst 
@@ -396,26 +396,24 @@
 %7D) =%3E %7B%0A    
- 
- 
 const url = 
@@ -436,18 +436,16 @@
 %7D.svg%60;%0A
-  
     cons
@@ -486,18 +486,16 @@
 1;%0A%0A    
-  
 const co
@@ -542,31 +542,269 @@
     
-  return (%0A        %3Cdiv
+const files = getFiles(assets);%0A    const fileIndex = profile%5Bassets.current.asset%5D.fileIndex;%0A    const file = files%5BgetIndexByOffset(files.length, fileIndex, offset)%5D;%0A%0A    return (%0A      %3CLink to=%7B%60/assets/$%7Bassets.current.asset%7D/$%7Bfile.type%7D/$%7Bfile.color%7D%60%7D
  cla
@@ -939,18 +939,16 @@
         
-  
 %3Cimg src
@@ -967,19 +967,16 @@
     
-  %3C/div%3E%0A  
+%3C/Link%3E%0A
     

Use urls for arrows