Images Reloading/Flashing about react-reorder HOT 9 CLOSED

/* eslint new-cap: 0 */
import React from 'react'
import { connect } from 'react-redux'
import { graphql, compose } from 'react-apollo'

// Components
import { SortableContainer, SortableElement } from 'react-sortable-hoc'
import Link from 'next/link'
import File from 'components/file'

// GraphQL
import { requestQuery } from 'lib/apollo/queries'
import { createDocumentMutation } from 'lib/apollo/mutations'

// HOCs
import withLoading from 'hocs/withLoading'

// Redux
import * as msg from 'lib/redux/actions'

const mapStateToProps = state => ({
   description: state.upload.description,
   files: state.upload.files,
   loading: state.upload.uploading,
   uploaded: state.upload.uploaded,
   error: state.upload.error
})

const mapDispatchToProps = dispatch => ({
   changeDescription: e => dispatch(msg.changeDescription(e.target.value)),
   uploadFiles: e => dispatch(msg.uploadFiles([...e.target.files])),
   removeFile: file => dispatch(msg.removeFile(file)),
   reorderFiles: ({ oldIndex, newIndex }) => dispatch(msg.reorderFiles(oldIndex, newIndex)),
   upload: payload => dispatch(msg.uploadDocument(payload))
})

// Helpers
const getFileKey = file => `${file.name}-${file.lastModified}`

// Helper components
const Request = withLoading(({ description, request, onChange }) => (
   <div className="container">
      <div className="row justify-content-center">
         <div className="col-10 col-md-8">
            <blockquote>
               <p className="blockquote blockquote-primary">
                  <p>
                   Opis naj vsebuje celotno ime profesorja ali profesorice, letnik,
                   predmet, test v letu in kakršne koli posebnosti.
                  </p>
                  <b className="h4">
                  Sestavi opis tako kot boš ti iskal druge teste!
                  </b>
               </p>
            </blockquote>
         </div>
      </div>
      <br/>
      <div className="row justify-content-center">
         <div className="col-11">
            <textarea className="form-control h2" rows={3} value={description || (request && request.description) || description} onChange={onChange} placeholder="Opiši... (1. letnik, 2.test, Prof Šefe, Matematika)"/>
         </div>
      </div>
   </div>
))

const SortableFile = SortableElement(({ file }) => (
   <div className="col-12 col-md-6 col-lg-4 align-items-center square cursor-pointer">
      <div className="square-content">
         <File contentType={file.contentType} src={file.url} loading={!file.url} error={file.error}/>
      </div>
   </div>
))
const SortableList = SortableContainer(({ files, onRemove }) => (
   <div className="row">
      { files.sort((a, b) => a.order - b.order).map(file => (
         <SortableFile key={getFileKey(file)} index={file.order} file={file} onRemove={onRemove}/>
      ))}
   </div>
))

// Container
const UploadForm = ({ request, loadingRequest, loadingError, description, changeDescription, files, uploadFiles, removeFile, reorderFiles, submit, uploaded }) => {
   const hasFiles = files.length > 0 && files.every(file => file.url !== undefined)
   const hasDescription = (request && request.description) || description.trim().length > 10
   const isValid = hasFiles && hasDescription

   return (
      <section>
         <header className="container">
            <div className="row justify-content-center">
               <div className="col-11">
                  <br/>
                  <h2 className="title">Naloži</h2>
               </div>
            </div>
         </header>

         <br/>

         { !uploaded && <Request description={description} request={request} onChange={changeDescription} loading={loadingRequest} error={loadingError}/> }
         { uploaded && (
         <div className="container">
            <div className="row justify-content-center">
               <h3>Uspešno naloženo!</h3>
            </div>
            <div className="row justify-content-center">
               <Link href="/" prefetch>
                  <a className="col-8 col-md-3 col-lg-2 btn btn-lg btn-round btn-success h4">Domov</a>
               </Link>
            </div>
         </div>
         )}

         <br/>

         { !loadingRequest && !uploaded && (
         <div className="container">
            <div className="row justify-content-center">
               <div className="col-10 col-md-8">
                  <blockquote>
                     <p className="blockquote blockquote-primary title">
                        <p>
                          Uredi slike v pravilen vrstni red!
                        </p>
                        <b>
                          Slike urediš tako da <b>podržiš prst</b> in jih pomakneš na pravo mesto.
                        </b>
                     </p>
                  </blockquote>
               </div>
            </div>
            <br/>
            <SortableList files={files} onRemove={removeFile} onSortEnd={reorderFiles} axis="xy" pressDelay={200}/>
            <br/>
            <div className="row justify-content-center">
               <label className="btn btn-icon btn-lg btn-primary btn-round btn-file mx-2">
                  <input type="file" onChange={uploadFiles} multiple accept="image/*"/>
                  <i className="fa fa-plus"/>
               </label>
               { isValid && (
               <label className="btn btn-icon btn-lg btn-success btn-round mx-2" onClick={submit}>
                  <i className="fa fa-check"/>
               </label>
               )}
            </div>

            <br/>
            <br/>
         </div>
         )}

      </section>
   )
}

export default compose(
  connect(mapStateToProps, mapDispatchToProps),
  graphql(requestQuery, {
     skip: ({ requestId }) => !requestId,
     options: ({ requestId }) => ({ variables: { requestId } }),
     props: ({ data: { loading, error, Request } }) => ({
        loadingRequest: loading,
        request: Request,
        loadingError: error
     })
  }),
  graphql(createDocumentMutation, {
     name: 'createDocumentMutation',
     props: ({ createDocumentMutation, ownProps }) => ({
        submit: () => {
           console.log(ownProps)
           const { description, request, requestId, userId: authorId, upload } = ownProps
           const files = ownProps.files.map(file => ({
              fileId: file.id,
              order: file.order
           }))

           const description_ = description.trim() || request.description

           const payload = createDocumentMutation({ variables: { description: description_, requestId, authorId, files } })

           return upload(payload)
        }
     })
  })

)(withLoading(UploadForm))