Fixing Reorder issues and Style fixes .

src/App/App.jsx

@@ -1,19 +1,20 @@
-import React, { Suspense } from 'react'
-import { Layout } from '../_layout'
-import { BrowserRouter, Route, Routes } from 'react-router-dom'
-import LoginPage from '../LoginPage'
-import HomePage from '../HomePage'
-import SignupPage from '../SignupPage'
-import { Authorize } from '../auth'
-import { Dashboard } from '../Dashboard'
-import { ForgotPassword } from '../ForgotPassword'
-import { PrivateRoute } from '../_components/PrivateRoute'
-import SignUpEmail from '../SignupPage/SignUpEmail'
-import NewPassword from '../ForgotPassword/NewPassword'
-import Editor from '../Editor/Editor'
-import { ToastContainer } from 'react-toastify';
-import 'react-toastify/dist/ReactToastify.css'
-import '@/_styles/theme.scss'
+import React, { Suspense } from "react";
+import { Layout } from "../_layout";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import LoginPage from "../LoginPage";
+import HomePage from "../HomePage";
+import SignupPage from "../SignupPage";
+import { Authorize } from "../auth";
+import { Dashboard } from "../Dashboard";
+import { ForgotPassword } from "../ForgotPassword";
+import { PrivateRoute } from "../_components/PrivateRoute";
+import SignUpEmail from "../SignupPage/SignUpEmail";
+import NewPassword from "../ForgotPassword/NewPassword";
+import Editor from "../Editor/Editor";
+import { ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+import "@/_styles/theme.scss";
+import Result from "../Results/Result";
 
 const App = () => {
   return (
@@ -30,11 +31,14 @@ const App = () => {
               <Route path="/dashboard" element={<Layout layout="dashboard" />}>
                 <Route index element={<Dashboard />} />
               </Route>
+              <Route path="/:formid/edit" element={<Layout layout="editor" />}>
+                <Route index element={<Editor />} />
+              </Route>
               <Route
-                path="/editor/:formid"
-                element={<Layout layout="editor" />}
+                path="/:formid/results"
+                element={<Layout layout="results" />}
               >
-                <Route index element={<Editor />} />
+                <Route index element={<Result />} />
               </Route>
             </Route>
 
@@ -54,7 +58,7 @@ const App = () => {
         </Authorize>
       </Suspense>
     </BrowserRouter>
-  )
-}
+  );
+};
 
-export default App
+export default App;

src/Dashboard/DashboardCard.jsx

@@ -12,12 +12,12 @@ const DashboardCard = ({ formData }) => {
   const currentFormDetails = useFormDetails(
     (state) => state.currentFormDetails
   );
-  const [deleteForms,error] = useCreateFormStore((state) => {
-    return [state.deleteForms,state.error];
+  const [deleteForms, error] = useCreateFormStore((state) => {
+    return [state.deleteForms, state.error];
   });
   const [anchorEl, setAnchorEl] = React.useState(null);
   const open = Boolean(anchorEl);
-  
+
   const handleClick = (event) => {
     setAnchorEl(event.currentTarget);
   };
@@ -33,7 +33,7 @@ const DashboardCard = ({ formData }) => {
     <Box className="form-card">
       <Link
         className="form-card-link"
-        to={`/editor/${formData.id}`}
+        to={`/${formData.id}/edit`}
         // onClick={() => currentFormDetails(formData)}
       >
         <div className="form-name">

src/Editor/Editor.jsx

@@ -8,6 +8,7 @@ import {
   useSensor,
   PointerSensor,
   KeyboardSensor,
+  TouchSensor,
 } from "@dnd-kit/core";
 import Playground from "./Playground";
 import Widget from "./Widgets";
@@ -187,18 +188,23 @@ const Editor = () => {
         const overIndex = mappedIds.indexOf(over.id);
         let currentActiveOrderId = inpt[activeIndex].order_id;
         let currentOverOrderId = inpt[overIndex].order_id;
+        const moveDirection = activeIndex > overIndex ? 1 : -1;
 
         changeOrderId(
           inpt[activeIndex].id,
-          inpt[overIndex].id,
+          currentOverOrderId,
           currentActiveOrderId,
-          currentOverOrderId
+          moveDirection,
+          formid
         );
         inpt = arrayMove(inpt, activeIndex, overIndex);
-        inpt[activeIndex].order_id = currentActiveOrderId;
-        inpt[overIndex].order_id = currentOverOrderId;
-        // open the current over
+
+        inpt = inpt.map((x, index) => {
+          x.order_id = index + 1;
+          return x;
+        });
         openPropertiesClicking(currentOverOrderId);
+
         return inpt;
       });
     }
@@ -212,6 +218,12 @@ const Editor = () => {
     }),
     useSensor(KeyboardSensor, {
       coordinateGetter: sortableKeyboardCoordinates,
+    }),
+    useSensor(TouchSensor, {
+      activationConstraint: {
+        delay: 300,
+        tolerance: 5,
+      },
     })
   );
 

src/Editor/SortableItems.jsx

@@ -1,6 +1,10 @@
+import React from "react";
+import Menu from "@mui/material/Menu";
+import MenuItem from "@mui/material/MenuItem";
+import Box from "@mui/material/Box";
+import dropDownSvg from "../../assets/dropdown.svg";
 import { useSortable, defaultAnimateLayoutChanges } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
-import React from "react";
 import { editorStore } from "./EditorStore";
 
 // function animateLayoutChanges(args) {
@@ -31,13 +35,40 @@ const SortableItems = ({ id, selectedItem, item }) => {
     minHeight: "56px",
   };
 
+  const [anchorEl, setAnchorEl] = React.useState(null);
+  const open = Boolean(anchorEl);
+
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+  const handleDelete = () => {
+    setAnchorEl(null);
+    deleteForms(formData.id);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const [isHovered, setIsHovered] = React.useState(false);
+
   const openPropertiesClicking = editorStore(
     (state) => state.openPropertiesClicking
   );
+  const handleHoverOver = React.useCallback(() => {
+    setIsHovered(true);
+  }, []);
+  const handleHoverLeave = React.useCallback(() => {
+    setIsHovered(false);
+    handleClose();
+  }, []);
+
+  // console.log("HERE", item?.order_id, "====", selectedItem);
 
   return (
     <div
-      onClick={() => openPropertiesClicking(item?.order_id)}
+      onClick={() => openPropertiesClicking(item.order_id)}
+      onMouseOver={handleHoverOver}
+      onMouseLeave={handleHoverLeave}
       className={
         selectedItem && item?.order_id == selectedItem
           ? "sortable change"
@@ -49,6 +80,38 @@ const SortableItems = ({ id, selectedItem, item }) => {
       {...listeners}
     >
       <p>{item.question_name}</p>
+      {
+        <>
+          <Box
+            className="form-details-dropdown"
+            id="basic-button"
+            aria-controls={open ? "basic-menu" : undefined}
+            aria-haspopup="true"
+            aria-expanded={open ? "true" : undefined}
+            onClick={handleClick}
+          >
+            <span>
+              <img
+                src={dropDownSvg}
+                alt="select"
+                className="rotated-dropdown"
+              />
+            </span>
+          </Box>
+          <Menu
+            id="basic-menu"
+            anchorEl={anchorEl}
+            open={open}
+            onClose={handleClose}
+            MenuListProps={{
+              "aria-labelledby": "basic-button",
+            }}
+          >
+            <MenuItem onClick={handleClose}>Profile</MenuItem>
+            <MenuItem onClick={handleClose}>My account</MenuItem>
+          </Menu>
+        </>
+      }
     </div>
   );
 };

src/Preview/Preview.jsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const Preview = () => {
+  return <div>Preview</div>;
+};
+
+export default Preview;

src/Results/Result.jsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const Result = () => {
+  return <div>Result</div>;
+};
+
+export default Result;

src/_layout/Header.jsx

@@ -135,6 +135,15 @@ const Header = ({ layout }) => {
           </div>
           <div>options</div>
           <div className="auth-content">
+            <div>
+              <div>
+                <Button>Preview</Button>
+              </div>
+              <div>
+                <Button>Publish</Button>
+              </div>
+            </div>
+
             <ProfileIcon />
           </div>
         </div>