added common settings for links

Author: RizkyRajitha

components/linksform.js

@@ -7,15 +7,22 @@ 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";
 
 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]);
@@ -185,6 +192,66 @@ const LinksForm = ({ pagedataid }) => {
     }
   };
 
+  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,
+      });
+    } catch (error) {
+      console.log(error);
+      toast.error(`Error : ${error.message}`, { autoClose: 5000 });
+    }
+    setloading(false);
+  };
+
   return (
     <>
       <div className={styles.Wrapper}>
@@ -210,6 +277,107 @@ const LinksForm = ({ pagedataid }) => {
           >
             Add new link
           </button>
+          <div>
+            <div className="mt-3 py-2">
+              <div className="accordion">
+                <div className="accordion-item">
+                  <h2 className="accordion-header" id="headingOne">
+                    <button
+                      className={`accordion-button ${
+                        commonSettingsCollapse ? "collapsed" : ""
+                      } `}
+                      type="button"
+                      onClick={(e) => {
+                        setcommonSettingsCollapse(!commonSettingsCollapse);
+                      }}
+                    >
+                      Common Settings
+                    </button>
+                  </h2>{" "}
+                  <div
+                    className={`accordion-collapse collapse ${
+                      commonSettingsCollapse ? "show" : ""
+                    }  `}
+                  >
+                    <div className="accordion-body">
+                      <form onSubmit={handleSubmit(updateCommonSettings)}>
+                        {" "}
+                        <div className="mb-3 ">
+                          <div className="input-group mb-3">
+                            <input
+                              type="number"
+                              className={
+                                errors.borderRadius
+                                  ? "form-control is-invalid"
+                                  : "form-control"
+                              }
+                              placeholder="Enter Border Radius"
+                              {...register("borderRadius", {
+                                min: {
+                                  message: "Border Radius must be above 0px",
+                                  value: 0,
+                                },
+                              })}
+                            />
+                            <span className="input-group-text">px</span>
+                            {errors.borderRadius && (
+                              <div className="invalid-feedback">
+                                {errors.borderRadius.message}
+                              </div>
+                            )}
+                          </div>
+                        </div>
+                        <div className="row">
+                          <div className="col">
+                            <div className="mb-1 small ">
+                              <label className="form-label small ">
+                                Link Display Text Font color
+                              </label>
+                              <input
+                                type="color"
+                                className="form-control form-control-sm mb-2 form-control-color"
+                                title="Choose Link text color"
+                                placeholder="Choose Link text color"
+                                {...register("textColor")}
+                              />
+                            </div>
+                          </div>
+                          <div className="col">
+                            <div className="mb-1 small ">
+                              <label className="form-label small">
+                                Link background color
+                              </label>
+                              <input
+                                type="color"
+                                className="form-control form-control-sm mb-2 form-control-color"
+                                title="Choose Link background color"
+                                placeholder="Choose Link background color"
+                                {...register("bgColor", { required: "" })}
+                              />
+                            </div>
+                          </div>
+                        </div>{" "}
+                        <button
+                          type="submit"
+                          className="btn btn-primary btn-block"
+                          disabled={loading}
+                        >
+                          {loading && (
+                            <span
+                              className="spinner-border spinner-border-sm me-1"
+                              role="status"
+                              aria-hidden="true"
+                            ></span>
+                          )}
+                          Save
+                        </button>
+                      </form>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
           <DragDropContext onDragEnd={dragEndHnadler}>
             <Droppable droppableId="links" isDropDisabled={isNewLinkInList}>
               {(provided) => (

lib/dbfuncprisma.js

@@ -275,6 +275,23 @@ export async function deleteSocialLink({ id }) {
   }
 }
 
+/**
+ * update all links with common data
+ * @param {*} data
+ * @returns
+ */
+export async function updateCommonData(data) {
+  try {
+    await Prisma.linkdata.updateMany({ data: data });
+  } catch (error) {
+    // console.log(error);
+    if (error.code === "P2025") {
+      throw new Error(error.meta.cause);
+    }
+    throw new Error(error.message);
+  }
+}
+
 /**
  * change Password
  * @param {*} param0

pages/api/pages/applycommonsettigns.js

@@ -0,0 +1,27 @@
+import { jwtAuth, use } from "../../../middleware/middleware";
+import { getLinkData, updateCommonData } from "../../../lib/dbfuncprisma";
+
+async function handler(req, res) {
+  if (req.method !== "POST") {
+    res.status(400).send("method not allowed");
+    return;
+  }
+
+  try {
+    // Run the middleware
+    await use(req, res, jwtAuth);
+
+    await updateCommonData(req.body);
+
+    let updatedLinkData = await getLinkData();
+
+    res.json({ success: true, updatedLinkData: updatedLinkData.linkData });
+  } catch (error) {
+    console.log(error.message);
+    res.status(500).json({ success: false, message: error.message });
+
+    // res.status(500).send(error.message);
+  }
+}
+
+export default handler;