rearrangements and no forms style

package.json

@@ -46,7 +46,6 @@
     "babel-loader": "^9.1.2",
     "css-loader": "^6.7.3",
     "dotenv-webpack": "^8.0.1",
-    "file-loader": "^6.2.0",
     "gh-pages": "^5.0.0",
     "html-webpack-plugin": "^5.5.0",
     "node-sass": "^8.0.0",

src/Dashboard/Dashboard.jsx

@@ -5,6 +5,7 @@ import DashboardCard from "./DashboardCard";
 import CreateForm from "../_ui/CreateFormModal/CreateForm";
 import { useCreateFormStore } from "../_services/CreateFormService";
 import CreateButton from "../_ui/CreateButton/CreateButton";
+import dropDownSvg from "../../assets/empty.svg";
 
 const Dashboard = () => {
   const { currentUser, setCurrentUser, signOut } = useAuthContext();
@@ -73,21 +74,27 @@ const Dashboard = () => {
                 <div>date created</div>
               </div>
             </div>
-            <div className="dashboard-card-wrapper">
-              {data?.length > 0 ? (
+
+            {data?.length > 0 ? (
+              <div className="dashboard-card-wrapper ">
                 <div className="form-cards">
                   {/* show all cards here */}
                   {data.map((form, id) => {
                     return <DashboardCard key={id} formData={form} />;
                   })}
                 </div>
-              ) : (
+              </div>
+            ) : (
+              <div className="dashboard-card-wrapper dashboard-card">
                 <Box className="form-empty">
-                  <p>Nothing here</p>
+                  <img src={dropDownSvg} alt="dog" />
+                  <p className="form-empty-text">
+                    Come on in, {currentUser?.email?.split("@")[0]}
+                  </p>
                   <CreateButton handleOpenCreate={handleOpenCreate} />
                 </Box>
-              )}
-            </div>
+              </div>
+            )}
           </div>
         </div>
       </div>

src/Editor/Editor.jsx

@@ -38,17 +38,25 @@ const Editor = () => {
   });
 
   const closeProperties = editorStore((state) => state.closeProperties);
-  const [loading, error, createQuestion, getQuestion, questions, fetchAgain] =
-    useQuestions((state) => {
-      return [
-        state.loading,
-        state.error,
-        state.createQuestion,
-        state.getQuestion,
-        state.data,
-        state.fetchAgain,
-      ];
-    });
+  const [
+    loading,
+    error,
+    createQuestion,
+    getQuestion,
+    questions,
+    fetchAgain,
+    changeOrderId,
+  ] = useQuestions((state) => {
+    return [
+      state.loading,
+      state.error,
+      state.createQuestion,
+      state.getQuestion,
+      state.data,
+      state.fetchAgain,
+      state.changeOrderId,
+    ];
+  });
   const { formid } = useParams();
   const divs = useInputIcons();
   const setActiveIdOnStart = useDndStore((state) => state.setActiveIdOnStart);
@@ -123,7 +131,18 @@ const Editor = () => {
       setComponents((inpt) => {
         const activeIndex = inpt.indexOf(active.id);
         const overIndex = inpt.indexOf(over.id);
-        return arrayMove(inpt, activeIndex, overIndex);
+        let currentActiveOrderId = inpt[activeIndex].order_id;
+        let currentOverOrderId = inpt[overIndex].order_id;
+        changeOrderId(
+          inpt[activeIndex].id,
+          inpt[overIndex].id,
+          currentActiveOrderId,
+          currentOverOrderId
+        );
+        inpt = arrayMove(inpt, activeIndex, overIndex);
+        inpt[activeIndex].order_id = currentOverOrderId;
+        inpt[overIndex].order_id = currentActiveOrderId;
+        return inpt;
       });
     }
   };

src/HomePage/index.jsx

@@ -1,12 +1,17 @@
 import React from "react";
 
 const HomePage = () => {
-    return (
-        <>
+  return (
+    <div className="home-wrapper">
+      <div className="home-main">
         <h1>Welcome to dropform</h1>
-        <h2>We create form through drag and drop with highly customisable UI for your forms</h2>
-        </>
-    )
+        <h2>
+          We create form through drag and drop with highly customisable UI for
+          your forms
+        </h2>
+      </div>
+    </div>
+  );
 };
 
 export default HomePage;

src/_services/QuestionService.js

@@ -67,4 +67,27 @@ export const useQuestions = create((set, get) => ({
       set(() => ({ error: error.message, loading: false }));
     }
   },
+  changeOrderId: async (
+    question_id_over,
+    question_id_active,
+    order_id_over,
+    order_id_active
+  ) => {
+    set(() => ({ loading: true }));
+    try {
+      const { errorOver } = await supabase
+        .from("question")
+        .update({ order_id: order_id_active })
+        .eq("id", question_id_over);
+      const { errorActive } = await supabase
+        .from("question")
+        .update({ order_id: order_id_over })
+        .eq("id", question_id_active);
+
+      // let currentFetch = get().fetchAgain;
+      set(() => ({ loading: false }));
+    } catch (error) {
+      set(() => ({ error: error.message, loading: false }));
+    }
+  },
 }));

src/_styles/dashboard.scss

@@ -49,6 +49,7 @@
   .right-dashboard {
     padding-left: 32px;
     padding-right: 32px;
+    height: 100%;
   }
   .right-dashboard-menu {
     border-bottom: 1px solid $dashboard-divider;
@@ -70,6 +71,17 @@
   }
   .dashboard-card-wrapper {
     padding: 24px 32px 80px;
+    height: 100%;
+  }
+  .dashboard-card {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .form-empty-text {
+    font-size: 24px;
+    line-height: 32px;
+    // font-family: ;
   }
   .form-cards {
     display: flex;

src/_styles/theme.scss

@@ -142,6 +142,7 @@ img {
 
   .content {
     margin-top: 88px;
+    // height: 100%;
   }
   .content-other {
     margin-top: 24px;
@@ -432,6 +433,16 @@ img {
   .auth-form-wrapper {
     height: 100%;
   }
+  .home-wrapper {
+    .home-main {
+      width: 80%;
+      margin: 0px auto;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: stretch;
+    }
+  }
 }
 
 // screens