Merge pull request #26 from Jittojoyes98/develop

Animation fixes and click issues.
Jittojoyes98 · Jan 30, 2024 · bd200ab · bd200ab
2 parents 57552ee + 7059455
commit bd200ab
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 24 deletions.
diff --git a/src/Editor/Editor.jsx b/src/Editor/Editor.jsx
@@ -7,6 +7,7 @@ import {
   useSensors,
   useSensor,
   PointerSensor,
+  KeyboardSensor,
 } from "@dnd-kit/core";
 import Playground from "./Playground";
 import Widget from "./Widgets";
@@ -15,6 +16,7 @@ import SortableItems from "./SortableItems";
 import {
   arrayMove,
   SortableContext,
+  sortableKeyboardCoordinates,
   verticalListSortingStrategy,
 } from "@dnd-kit/sortable";
 import { createPortal } from "react-dom";
@@ -24,7 +26,6 @@ import {
 } from "@dnd-kit/modifiers";
 import { editorStore, useDndStore } from "./EditorStore";
 import InputSettings from "./InputSettings";
-import { useCreateFormStore } from "../_services/CreateFormService";
 import { CircularProgressLoader } from "../_ui/Loader/CircularProgress";
 import useInputIcons from "../_hooks/useInputIcons";
 import { useParams } from "react-router-dom";
@@ -84,6 +85,9 @@ const Editor = () => {
       state.deleteQuestionProperties,
     ];
   });
+  const openPropertiesClicking = editorStore(
+    (state) => state.openPropertiesClicking
+  );
   const { formid } = useParams();
   const divs = useInputIcons();
   const setActiveIdOnStart = useDndStore((state) => state.setActiveIdOnStart);
@@ -141,8 +145,6 @@ const Editor = () => {
     }
   }, [questions]);
 
-  // console.log(currentQuestionProperties,"Here you goo :rocket :💘 ",serviceQuestionProperties);
-
   const handleDragStart = (event) => {
     setDragging(true);
     setActiveIdOnStart(event.active.id);
@@ -180,10 +182,12 @@ const Editor = () => {
     const { active, over } = event;
     if (active.id !== over.id) {
       setComponents((inpt) => {
-        const activeIndex = inpt.indexOf(active.id);
-        const overIndex = inpt.indexOf(over.id);
+        const mappedIds = inpt.map((x) => x.id);
+        const activeIndex = mappedIds.indexOf(active.id);
+        const overIndex = mappedIds.indexOf(over.id);
         let currentActiveOrderId = inpt[activeIndex].order_id;
         let currentOverOrderId = inpt[overIndex].order_id;
+
         changeOrderId(
           inpt[activeIndex].id,
           inpt[overIndex].id,
@@ -193,11 +197,24 @@ const Editor = () => {
         inpt = arrayMove(inpt, activeIndex, overIndex);
         inpt[activeIndex].order_id = currentActiveOrderId;
         inpt[overIndex].order_id = currentOverOrderId;
+        // open the current over
+        openPropertiesClicking(currentOverOrderId);
         return inpt;
       });
     }
   };
 
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 10,
+      },
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
+  );
+
   if (!components) {
     return (
       <div className="progress-wrapper">
@@ -206,20 +223,12 @@ const Editor = () => {
     );
   }
 
-  // const sensors = useSensors(
-  //   useSensor(PointerSensor, {
-  //     activationConstraint: {
-  //       distance: 8,
-  //     },
-  //   })
-  // );
-
   return (
     <div className="editor-wrapper">
       <div className="editor-main">
         <div className="editor-order">
           <DndContext
-            // sensors={sensors}
+            sensors={sensors}
             collisionDetection={closestCenter}
             onDragEnd={handleDragSortableEnd}
             modifiers={[restrictToParentElement]}
@@ -231,7 +240,8 @@ const Editor = () => {
               {components?.map((inpt, index) => (
                 <SortableItems
                   key={inpt.id}
-                  id={inpt}
+                  id={inpt.id}
+                  item={inpt}
                   selectedItem={selectedItem}
                 />
               ))}
@@ -257,7 +267,7 @@ const Editor = () => {
                   {divs.map((div, index) => {
                     return (
                       <Widget
-                        key={div.heading}
+                        key={div.id}
                         id={div.id}
                         heading={div.type}
                         svgIcon={div.svgIcon}

diff --git a/src/Editor/SortableItems.jsx b/src/Editor/SortableItems.jsx
@@ -14,25 +14,32 @@ import { editorStore } from "./EditorStore";
 //   return true;
 // }
 
-const SortableItems = ({ id, selectedItem, index }) => {
+const SortableItems = ({ id, selectedItem, item }) => {
   const { attributes, listeners, setNodeRef, transform, transition } =
     useSortable({
       // animateLayoutChanges,
       id: id,
+      data: {
+        item,
+      },
     });
 
   const style = {
     transform: CSS.Transform.toString(transform),
     transition,
     padding: "10px",
-    cursor: "grabbing",
     minHeight: "56px",
   };
 
+  const openPropertiesClicking = editorStore(
+    (state) => state.openPropertiesClicking
+  );
+
   return (
     <div
+      onClick={() => openPropertiesClicking(item?.order_id)}
       className={
-        selectedItem && id.order_id == selectedItem
+        selectedItem && item?.order_id == selectedItem
           ? "sortable change"
           : "sortable"
       }
@@ -41,7 +48,7 @@ const SortableItems = ({ id, selectedItem, index }) => {
       {...attributes}
       {...listeners}
     >
-      <p>{id.question_name}</p>
+      <p>{item.question_name}</p>
     </div>
   );
 };

diff --git a/src/_styles/editor.scss b/src/_styles/editor.scss
@@ -74,7 +74,7 @@
     width: 100%;
   }
   .dropform-name-input {
-    .css-9ddj71-MuiInputBase-root-MuiOutlinedInput-root {
+    .MuiInputBase-root {
       border-radius: 4px;
       height: 32px;
       outline: none;
@@ -103,7 +103,7 @@
         // border: none;
       }
     }
-    .css-9ddj71-MuiInputBase-root-MuiOutlinedInput-root:hover {
+    .MuiInputBase-root:hover {
       fieldset {
         // border: none;
         box-shadow: rgb(187, 187, 187) 0px 0px 0px 1px inset;
@@ -278,4 +278,10 @@
   .change {
     background-color: #f0f0f0;
   }
+  .sortable {
+    cursor: pointer;
+  }
+  .sortable:active {
+    cursor: grabbing;
+  }
 }
diff --git a/src/auth/Authorize.jsx b/src/auth/Authorize.jsx
@@ -27,14 +27,14 @@ const Authorize = ({ children }) => {
       provider: "google",
       options: {
         queryParams: {
-          redirect_to: `${config.url.API_URL}dashboard`,
+          redirect_to: `${window.location.origin}/dashboard`,
         },
       },
     });
   }
   function forgotPassword(email) {
     return supabase.auth.resetPasswordForEmail(email, {
-      redirectTo: `${config.url.API_URL}login/password/update`,
+      redirectTo: `${window.location.origin}login/password/update`,
     });
   }
   function signOut() {