rtk_buttons_subdirs

src/Components/CategoryTree.js

@@ -47,8 +47,16 @@ const CategoryTree = ({ elements, saveCategory }) => {
             throw new Error("No source");
 
         if (sourceCat.parent?._id !== targetCat?._id) {
-            sourceCat.parent = targetCat ? { _id: targetCat._id, name: targetCat.name } : null;
-            saveCategory(sourceCat);
+            let parentCat = params.dragSource.parentCat;
+            if (parentCat)
+                parentCat.subCategories = parentCat.subCategories.filter(sc => sc?.cat._id !== sourceCat._id);
+            if (!params.dropTarget.subCategories)
+                params.dropTarget.subCategories = [];
+            params.dropTarget.subCategories.push(params.dragSource);
+            sourceCat.parentCat = params.dropTarget;
+
+            sourceCat.parent = targetCat ?? null;
+            //saveCategory(sourceCat);
             setTreeData(newTree);
         }
     }
@@ -61,6 +69,7 @@ const CategoryTree = ({ elements, saveCategory }) => {
                         style={{ listStyleType: 'none', paddingLeft: '0px', height: 240, flexGrow: 1, maxWidth: 400, overflowY: 'auto' }}
                         tree={treeData}
                         rootId={0}
+                        initialOpen={[1]}
                         render={(node, { depth, isOpen, onToggle }) => (
                             <CategoryTreeItem
                                 node={node}
@@ -99,10 +108,14 @@ function wrapToTreeItems(cats, parentCat = null, catTreeItems = undefined) {
             let catTreeItem = {
                 "id": index++,
                 "parent": parentCat?.id ?? 1,
+                "parentCat": parentCat,
                 "droppable": true,
                 "text": cat.name,
-                "cat": { _id: cat._id, name: cat.name, parent: parentCat?.cat ?? null }
+                "cat": { _id: cat._id, name: cat.name, parent: parentCat?.cat ?? null },
             };
+            if (!parentCat.subCategories)
+                parentCat.subCategories = [];
+            parentCat.subCategories.push(catTreeItem);
             catTreeItems.push(catTreeItem);
             wrapToTreeItems(cat.subCategories, catTreeItem, catTreeItems)
         }

src/Components/CategoryTreeItem.js

@@ -3,9 +3,10 @@ import { TextField } from "@mui/material";
 import ArrowRightIcon from "@mui/icons-material/ArrowRight";
 import styles from "./CategoryTreeItem.module.css";
 import ListAltIcon from "@mui/icons-material/ListAlt";
+import { useDragOver } from "@minoru/react-dnd-treeview";
 
 export const CategoryTreeItem = (props) => {
-    const { droppable, data } = props.node;
+    const { id, droppable, data } = props.node;
     const indent = props.depth * 40;
 
     const handleToggle = (e) => {
@@ -13,16 +14,19 @@ export const CategoryTreeItem = (props) => {
         props.onToggle(props.node.id);
     };
 
+    const dragOverProps = useDragOver(id, props.isOpen, props.onToggle);
+
     return (
         <div
             className={`tree-node ${styles.root}`}
             style={{ paddingInlineStart: indent }}
+            {...dragOverProps}
         >
             <div
                 className={`${styles.expandIconWrapper} ${props.isOpen ? styles.isOpen : ""
                     }`}
             >
-                {props.node.droppable && (
+                {props.node.droppable && props.node.subCategories?.length > 0 && (
                     <div onClick={handleToggle}>
                         <ArrowRightIcon color="secondary" />
                     </div>

src/Components/LoginForm.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
-import { Container, CssBaseline, TextField, Avatar, Typography, FormControlLabel, Checkbox, Grid, Link } from '@mui/material';
+import { Container, CssBaseline, TextField, Avatar, Typography, FormControlLabel, Checkbox, Grid, Link, Button } from '@mui/material';
 import { Box } from '@mui/system';
 import { connect, useDispatch } from 'react-redux';
 import { MyLink } from './MyLink';
@@ -56,7 +56,7 @@ const LoginForm = () => {
                     control={<Checkbox value="remember" color="primary" />}
                     label="Remember me"
                 />
-                <MyLink
+                <Button
                     component="button"
                     variant="contained"
                     sx={{ mt: 3, mb: 2 }}
@@ -65,7 +65,7 @@ const LoginForm = () => {
                     disabled={!isButtonActive}
                     onClick={() => onLogin({ login, password }).then(() => dispatch(actionAboutMe()))}>
                     Login...
-                </MyLink>
+                </Button>
                 <Grid container>
                     <Grid item xs>
                         <Link href="#" variant='body2'>

src/Components/RegisterForm.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
-import { Container, CssBaseline, TextField, Avatar, Typography, FormControlLabel, Checkbox } from '@mui/material';
+import { Container, CssBaseline, TextField, Avatar, Typography, FormControlLabel, Checkbox, Button } from '@mui/material';
 import { Box } from '@mui/system';
 import { connect, useDispatch } from 'react-redux';
 import { MyLink } from './MyLink';
@@ -85,7 +85,7 @@ const RegisterForm = () => {
                     control={<Checkbox value="remember" color="primary" />}
                     label="Remember me"
                 />
-                <MyLink
+                <Button
                     component="button"
                     variant="contained"
                     sx={{ mt: 3, mb: 2 }}
@@ -98,7 +98,7 @@ const RegisterForm = () => {
                             .then(() => dispatch(actionAboutMe()))
                     )}>
                     Register...
-                </MyLink>
+                </Button>
             </Box>
         </Container >
     )