rtk_dnd_wo gql

src/App.js

@@ -76,7 +76,6 @@ const Main = () =>
   </div>
 
 //<EditPost onSave={post => console.log(post)}/>
-//<SortedDropZone />
 function App() {
 
   return (

src/Components/EditableGood.js

@@ -103,7 +103,7 @@ const EditableGood = ({ good: goodExt, maxWidth = 'md', saveGood }) => {
                         </Grid>
                     </Grid>
                     <Grid>
-                        <CSortedFileDropZone/>
+                        <CSortedFileDropZone items={good.images}/>
                     </Grid>
                 </Grid>
                 <CardActions>

src/Components/SortedDropZone.js

@@ -1,109 +0,0 @@
-import { DndContext, KeyboardSensor, PointerSensor, useDroppable, useSensor, useSensors } from "@dnd-kit/core";
-import { rectSortingStrategy, SortableContext, sortableKeyboardCoordinates, useSortable } from "@dnd-kit/sortable";
-import { arrayMoveImmutable } from "array-move";
-import { useEffect, useState } from "react";
-import { CSS } from "@dnd-kit/utilities";
-
-const SortableItem = (props) => {
-    const {
-        attributes,
-        listeners,
-        setNodeRef,
-        transform,
-        transition
-    } = useSortable({ id: props.id });
-
-    const itemStyle = {
-        transform: CSS.Transform.toString(transform),
-        transition,
-        //width: 110,
-        //height: 30,
-        //display: "flex",
-        //alignItems: "center",
-        //paddingLeft: 5,
-        //border: "1px solid gray",
-        //borderRadius: 5,
-        //marginBottom: 5,
-        //userSelect: "none",
-        cursor: "grab",
-        //boxSizing: "border-box"
-    };
-
-    const Render = props.render
-
-    return (
-        <div style={itemStyle} ref={setNodeRef} {...attributes} {...listeners}>
-            <Render {...{ [props.itemProp]: props.item }} />
-        </div>
-    );
-};
-
-
-const Droppable = ({ id, items = [], itemProp, keyField, render }) => {
-    const { setNodeRef } = useDroppable({ id });
-
-    const droppableStyle = {
-        //padding: "20px 10px",
-        //border: "1px solid black",
-        //borderRadius: "5px",
-        //minWidth: 110
-    };
-
-    return (
-        <SortableContext id={id} items={items} strategy={rectSortingStrategy}>
-            {items.map((item) => (
-                <SortableItem render={render} key={item[keyField]} id={item}
-                    itemProp={itemProp} item={item} />
-            ))}
-        </SortableContext>
-    );
-};
-
-
-function SortedDropZone({ items: startItems, render, itemProp, keyField, onChange, horizontal }) {
-    const [items, setItems] = useState(
-        startItems
-    );
-    useEffect(() => setItems(startItems), [startItems])
-
-    useEffect(() => {
-        if (typeof onChange === 'function') {
-            onChange(items)
-        }
-    }, [items])
-
-    const sensors = useSensors(
-        useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
-        useSensor(KeyboardSensor, {
-            coordinateGetter: sortableKeyboardCoordinates
-        })
-    );
-
-    const handleDragEnd = ({ active, over }) => {
-        const activeIndex = active.data.current.sortable.index;
-        const overIndex = over.data.current?.sortable.index || 0;
-
-        setItems((items) => {
-            return arrayMoveImmutable(items, activeIndex, overIndex)
-        });
-    }
-
-    const containerStyle = { display: horizontal ? "flex" : '' };
-
-    return (
-        <DndContext
-            sensors={sensors}
-            onDragEnd={handleDragEnd}
-        >
-            <div style={containerStyle}>
-                <Droppable id="aaa"
-                    items={items}
-                    itemProp={itemProp}
-                    keyField={keyField}
-                    render={render}
-                />
-            </div>
-        </DndContext>
-    );
-}
-export { SortedDropZone };

src/Components/SortedFileDropZone.js

@@ -4,6 +4,7 @@ import { arrayMoveImmutable } from "array-move";
 import { useEffect, useState } from "react";
 import { CSS } from "@dnd-kit/utilities";
 import { FileDropZone } from "./FileDropZone";
+import { getFullImageUrl } from "../utills";
 
 const SortableItem = (props) => {
     const {
@@ -62,14 +63,14 @@ const Droppable = ({ id, items = [], itemProp, keyField, render }) => {
 
 function CSortedFileDropZone(props) {
     let render = file => {
-        file = file.item;
+        file = file.item ?? file;
         return (
             <div>
-                <img key={file.name} src={file.url} {...props.itemProp}/>
+                <img key={file.name} src={file._id ? getFullImageUrl(file) : file.url} {...props.itemProp} />
             </div>
         );
     }
-    props = { ...props, render: render, keyField: "name", itemProp: {width: "100px"} }
+    props = { ...props, render: render, keyField: "name", itemProp: { width: "100px" } }
     return <SortedFileDropZone {...props} />
 }
 

src/Components/index.js

@@ -10,6 +10,5 @@ export { MyLink } from './MyLink';
 export { CLogout } from './Logout';
 export { CMainAppBar } from './MainAppBar';
 export { CRootCats } from './RootCats';
-export { SortedDropZone } from './SortedDropZone';
 export { CSortedFileDropZone } from './SortedFileDropZone';
 export { CEditableGood } from './EditableGood'

src/Test/drop.js

@@ -1,5 +1,5 @@
 import { useState } from "react"
-import { SortedDropZone } from "../Components"
+import { SortedDropZone } from "./SortedDropZone"
 
 const imgSet = ['https://mir-s3-cdn-cf.behance.net/project_modules/disp/8a1f1813765711.56277edb36b94.gif',
     'http://shop.asmer.fe.a-level.com.ua/loading.gif',