rtk_alfa

src/Components/EditableGood.js

@@ -22,7 +22,9 @@ const EditableGood = ({ good: goodExt, maxWidth = 'md', saveGood }) => {
     let [imagesContainer, setImagesContainer] = useState({ images: [...(goodExt.images ?? [])] });
 
     const onSetCategory = (catItem) => {
-        good.categories = catItem.cat ? [{ _id: catItem.cat._id }] : [];
+        if (!catItem.cat.name)
+            throw new Error("Category must have name.");
+        good.categories = catItem.cat ? [{ _id: catItem.cat._id, name: catItem.cat.name }] : [];
     }
     const setGoodData = (data) => {
         let goodData = { ...good, ...data };

src/Test/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} >
-                </Droppable>
-            </div>
-        </DndContext>
-    );
-}
-export { SortedDropZone };

src/Test/drop.js

@@ -1,52 +0,0 @@
-import { useState } from "react"
-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',
-    'https://upload.wikimedia.org/wikipedia/commons/b/b1/Loading_icon.gif?20151024034921'
-]
-
-const getRandomItemFromArr = arr => arr[Math.floor(Math.random() * arr.length)]
-
-const PostImage = ({ image, onDelete }) =>
-    <img src={image.url} key={image._id} onClick={() => onDelete(image)} />
-
-const EditPost = ({ onSave }) => {
-    const [post, setPost] = useState({ title: '', text: '', images: [] })
-    const addImageToState = () => setPost({
-        ...post,
-        images: [...post.images,
-        { _id: Math.random(), url: getRandomItemFromArr(imgSet) }]
-    })
-    const deleteImage = image => setPost({ ...post, images: post.images.filter(i => i !== image) })
-
-    const localPostImage = ({ image }) => <PostImage image={image}
-        onDelete={imgToDelete => deleteImage(imgToDelete)} />
-    console.log(post)
-    return (
-        <div>
-            <input type='text' value={post.title} placeholder="title"
-                onChange={e => setPost({ ...post, title: e.target.value })} />
-            <input type='text' value={post.text} placeholder="text"
-                onChange={e => setPost({ ...post, text: e.target.value })} />
-            <div>
-                <SortedDropZone items={post.images} render={localPostImage} itemProp="image" keyField="_id"
-                    onChange={images => setPost({ ...post, images })}
-                    horizontal
-                />
-                <button onClick={addImageToState}>+</button>
-            </div>
-            <button onClick={() => onSave(post)}>Save</button>
-        </div>
-    )
-}
-
-const data = [{ name: 'aaa', _id: 'a1' }, { name: 'bbb', _id: 'b2' }, { name: 'ccc', _id: 'c3' }]
-
-
-const Item = ({ data: { name } }) =>
-    <div style={{ backgroundColor: 'yellow', fontSize: '2em', padding: '20px', borderRadius: '10px', margin: '10px' }}>
-        {name}
-    </div>
-
-export { EditPost }