Update name files

src/components/Sortable.js

@@ -0,0 +1,43 @@
+import { sortableContainer, SortableElement, sortableElement, SortableHandle } from 'react-sortable-hoc'
+import { Button,Image } from 'antd'
+
+export const SortableItem = SortableElement(({ url, onRemoveImage, _id }) => {
+    return (
+      <>
+      <img
+        style={{
+          // margin: '20px',
+          maxWidth: '300px',
+            minWidth: '100px',
+            objectFit: 'cover',
+          boxShadow: '0 5px 10px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)',
+          maxHeight: '300px',
+          minHeight:'100px'
+        }}
+        src={'/' + url}
+      />
+          <Button
+      type="primary"
+      danger
+      size="small"
+          style={{
+            float: 'right',
+          margin:'5px'
+          }}
+      onClick={() => onRemoveImage(_id)}
+    >
+      {' '}
+      x{' '}
+        </Button>
+      </>
+    )
+  })
+  export const SortableContainer = sortableContainer(({ children ,checkLength}) => {
+  
+    return (
+      <>
+            <ul style={{ display: 'flex', flexDirection: 'row', margin: '5px' }}>{children}</ul>
+      </>
+    )
+  })
+  

src/components/DropZone.js

@@ -8,7 +8,7 @@ import { Upload } from "antd";
 import { uploadFileType } from '../actions'
 import { Row, Col } from 'antd'
 
-export function Basic({ onLoad }) {
+export function Dropzone({ onLoad }) {
   const { acceptedFiles, getRootProps, getInputProps } = useDropzone()
   const files = acceptedFiles.map((file) => (
     <li key={file.path}>
@@ -31,42 +31,3 @@ export function Basic({ onLoad }) {
     </section>
   )
 }
-export const SortableItem = SortableElement(({ url, onRemoveImage, _id}) => {
-  return (
-    <>
-    <img
-      style={{
-        // margin: '20px',
-        maxWidth: '300px',
-          minWidth: '100px',
-          objectFit: 'cover',
-        boxShadow: '0 5px 10px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)',
-        maxHeight: '300px',
-        minHeight:'100px'
-      }}
-      src={'/' + url}
-    />
-        <Button
-    type="primary"
-    danger
-    size="small"
-        style={{
-          float: 'right',
-        margin:'5px'
-        }}
-    onClick={() => onRemoveImage(_id)}
-  >
-    {' '}
-    x{' '}
-      </Button>
-    </>
-  )
-})
-export const SortableContainer = sortableContainer(({ children ,checkLength}) => {
-
-  return (
-    <>
-          <ul style={{ display: 'flex', flexDirection: 'row', margin: '5px' }}>{children}</ul>
-    </>
-  )
-})

src/pages/createAndEditPost/index.js

@@ -9,10 +9,12 @@ import {
 import { actionClearPostsOne } from '../../redux/reducers/post/postReducer'
 import { Button, message } from 'antd'
 import {
-  Basic,
+  Dropzone
+} from '../../components/UploadFiles'
+import {
   SortableContainer,
-  SortableItem,
-} from '../../components/Dropzone'
+  SortableItem
+} from '../../components/Sortable'
 import { arrayMoveImmutable } from 'array-move'
 import { Row, Col } from 'antd'
 import { history } from '../../helpers'
@@ -115,7 +117,7 @@ const PostEditor = ({
   const checkLength = () => {
     if (state?.images?.length > 8) {
       console.log('state?.images?.length', state?.images?.length)
-      message.error('Error, upload Max 8 elements')
+      message.error('Error, please, upload maximum 8 elements')
       state['images'] = []
       return false
     } else {
@@ -127,7 +129,7 @@ const PostEditor = ({
     <section className="Post">
       <Row>
         <Col span={12} offset={6}>
-          <Basic onLoad={onFileDrop} />
+          <Dropzone onLoad={onFileDrop} />
           <Col offset={1}>
          
               <SortableContainer