- {/*
*/}
-
-
-
px
- {errors.borderRadius && (
-
- {errors.borderRadius.message}
+
+ {(provided) => (
+
+
-
-
-
-
-
-
-
-
-
+
+
+
+
px
+ {errors.borderRadius && (
+
+ {errors.borderRadius.message}
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/*
+
-
+
*/}
+
+
+
+
+
- {/*
-
-
-
*/}
-
-
-
-
-
-
+
+ )}
+
);
}
diff --git a/components/linksform.js b/components/linksform.js
index 02b09f7..47833db 100644
--- a/components/linksform.js
+++ b/components/linksform.js
@@ -1,9 +1,13 @@
-import styles from "../styles/form.module.css";
-import LinkCard from "./linkcard";
-import { useStateValue } from "./context/state";
import { useState } from "react";
-import Swal from "sweetalert2";
import { ToastContainer, toast } from "react-toastify";
+import Swal from "sweetalert2";
+import { DragDropContext, Droppable } from "react-beautiful-dnd";
+
+import { useStateValue } from "./context/state";
+import LinkCard from "./linkcard";
+
+import styles from "../styles/form.module.css";
+import { useForm } from "react-hook-form";
const endpoint =
process.env.NODE_ENV === "production" ? `` : "http://localhost:3000";
@@ -11,10 +15,18 @@ const endpoint =
const LinksForm = ({ pagedataid }) => {
const [{ links }, dispatch] = useStateValue();
const [loading, setloading] = useState(false);
+ const [commonSettingsCollapse, setcommonSettingsCollapse] = useState(false);
+ const [isNewLinkInList, setisNewLinkInList] = useState(false);
+ const {
+ register,
+ handleSubmit,
+ formState: { errors, dirtyFields },
+ } = useForm();
const addNewLink = () => {
// console.log(links.length);
// console.log(links[links.length - 1]);
+ setisNewLinkInList(true);
let newLink = links[links.length - 1];
@@ -44,13 +56,18 @@ const LinksForm = ({ pagedataid }) => {
// console.log(linkdata);
setloading(true);
- let operation = "insertpagelinks";
+ let operation = "insertlinks";
if (linkdata.hasOwnProperty("id")) {
- operation = `updatepagelinks`;
+ operation = `updatelinks`;
+ }
+
+ if (operation === "insertlinks") {
+ setisNewLinkInList(false);
}
+
// console.log(operation);
try {
- let res = await fetch(`${endpoint}/api/${operation}`, {
+ let res = await fetch(`${endpoint}/api/pages/${operation}`, {
method: "POST",
body: JSON.stringify(linkdata),
headers: { "Content-Type": "application/json" },
@@ -59,15 +76,7 @@ const LinksForm = ({ pagedataid }) => {
// console.log(res);
if (!res.success) {
- toast.error(`Error ${res.message}`, {
- position: "bottom-left",
- autoClose: 5000,
- hideProgressBar: false,
- closeOnClick: true,
- pauseOnHover: true,
- draggable: true,
- progress: undefined,
- });
+ toast.error(`Error ${res.message}`, { autoClose: 5000 });
setloading(false);
return;
}
@@ -75,31 +84,15 @@ const LinksForm = ({ pagedataid }) => {
dispatch({ type: "updateLink", linkdata: res.updatedLinkData });
toast.success(
`${
- operation === "insertpagelinks"
+ operation === "insertlinks"
? "Added new page link "
: "Updated page link " + " successfully"
}`,
- {
- position: "bottom-left",
- autoClose: 1000,
- hideProgressBar: false,
- closeOnClick: true,
- pauseOnHover: true,
- draggable: true,
- progress: undefined,
- }
+ { autoClose: 1000 }
);
} catch (error) {
console.log(error);
- toast.error(`Error : ${error.message}`, {
- position: "bottom-left",
- autoClose: 5000,
- hideProgressBar: false,
- closeOnClick: true,
- pauseOnHover: true,
- draggable: true,
- progress: undefined,
- });
+ toast.error(`Error : ${error.message}`, { autoClose: 5000 });
}
setloading(false);
};
@@ -123,7 +116,7 @@ const LinksForm = ({ pagedataid }) => {
setloading(true);
try {
- let res = await fetch(`${endpoint}/api/deletepagelink`, {
+ let res = await fetch(`${endpoint}/api/pages/deletelink`, {
method: "POST",
body: JSON.stringify({ id: id }),
headers: { "Content-Type": "application/json" },
@@ -132,39 +125,129 @@ const LinksForm = ({ pagedataid }) => {
console.log(res);
if (!res.success) {
- toast.error(`Error ${res.message}`, {
- position: "bottom-left",
- autoClose: 5000,
- hideProgressBar: false,
- closeOnClick: true,
- pauseOnHover: true,
- draggable: true,
- progress: undefined,
- });
+ toast.error(`Error ${res.message}`, { autoClose: 5000 });
setloading(false);
return;
}
dispatch({ type: "deleteLink", id: id });
- toast.success(`successfully deleted link`, {
- position: "bottom-left",
+ toast.success(`Successfully deleted link`, { autoClose: 1000 });
+ } catch (error) {
+ console.log(error);
+ toast.error(`Error : ${error.message}`, { autoClose: 5000 });
+ }
+ setloading(false);
+ };
+
+ const dragEndHnadler = async (data) => {
+ // console.log(data);
+ if (!data.destination) {
+ return;
+ }
+
+ if (data.destination.index === data.source.index) {
+ return;
+ }
+
+ setloading(true);
+
+ const items = Array.from(links);
+ const [reorderedItem] = items.splice(data.source.index, 1);
+ items.splice(data.destination.index, 0, reorderedItem);
+
+ let updateditems = items.map((item, index) => {
+ item.orderIndex = index;
+ return item;
+ });
+
+ dispatch({ type: "updateLink", linkdata: updateditems });
+
+ let orderData = updateditems.map((item) => {
+ return {
+ id: item.id,
+ name: item.displayText,
+ orderIndex: item.orderIndex,
+ };
+ });
+
+ // console.log(orderData);
+
+ try {
+ let res = await fetch(`${endpoint}/api/pages/reorderlinks`, {
+ method: "POST",
+ body: JSON.stringify({ orderData }),
+ headers: { "Content-Type": "application/json" },
+ }).then((res) => res.json());
+
+ if (!res.success) {
+ toast.error(`Error ${res.message}`, { autoClose: 5000 });
+ return;
+ }
+
+ toast.success(`Successfully reordered links`, { autoClose: 1000 });
+ setloading(false);
+ } catch (error) {
+ console.log(error);
+ setloading(false);
+ toast.error(`Error : ${error.message}`, { autoClose: 5000 });
+ }
+ };
+
+ const updateCommonSettings = async (data) => {
+ // console.log(data);
+ // console.log(dirtyFields);
+ // only get user changed data
+
+ if (Object.keys(dirtyFields).length === 0) {
+ return;
+ }
+
+ Object.keys(data).forEach((element) => {
+ if (!dirtyFields[element]) {
+ delete data[element];
+ }
+ });
+
+ console.log(data);
+
+ let confirm = await Swal.fire({
+ title: "Apply common settings",
+ text: "All your links will apply these common settings",
+ icon: "warning",
+ showCancelButton: true,
+ confirmButtonColor: "#3085d6",
+ cancelButtonColor: "#d33",
+ confirmButtonText: "Yes, apply it!",
+ });
+
+ if (!confirm.isConfirmed) {
+ return;
+ }
+
+ setloading(true);
+
+ try {
+ let res = await fetch(`${endpoint}/api/pages/applycommonsettigns`, {
+ method: "POST",
+ body: JSON.stringify(data),
+ headers: { "Content-Type": "application/json" },
+ }).then((res) => res.json());
+
+ console.log(res);
+
+ if (!res.success) {
+ toast.error(`Error ${res.message}`, { autoClose: 5000 });
+ setloading(false);
+ return;
+ }
+
+ dispatch({ type: "updateLink", linkdata: res.updatedLinkData });
+
+ toast.success(`Successfully applied common settings`, {
autoClose: 1000,
- hideProgressBar: false,
- closeOnClick: true,
- pauseOnHover: true,
- draggable: true,
- progress: undefined,
});
} catch (error) {
console.log(error);
- toast.error(`Error : ${error.message}`, {
- position: "bottom-left",
- autoClose: 5000,
- hideProgressBar: false,
- closeOnClick: true,
- pauseOnHover: true,
- draggable: true,
- progress: undefined,
- });
+ toast.error(`Error : ${error.message}`, { autoClose: 5000 });
}
setloading(false);
};
@@ -194,22 +277,137 @@ const LinksForm = ({ pagedataid }) => {
>
Add new link
- {links &&
- links.map((item, index) => {
- return (
-
- );
- })}
+
+
+
+
+
+
+
{" "}
+
+
+
+
+
+
+
+ {(provided) => (
+
+ {links.length > 0 &&
+ links.map((item, index) => {
+ return (
+
+ );
+ })}
+ {provided.placeholder}
+
+ )}
+
+