Add site functionallity

components/dialogues/AddSite.tsx

@@ -1,5 +1,36 @@
+"use client";
+
+import { useState } from "react";
+import axios from "axios";
+import ErrorToast from "@/components/Error";
+import SuccessToast from "@/components/Success";
+
 export default function AddSite() {
+    const [name, setName] = useState("");
+    const [description, setDescription] = useState("");
+    const [error, setError] = useState("");
+    const [success, setSuccess] = useState("");
+
+    const addSite = async () => {
+        try {
+            const response = await axios.post("/api/sites/add", { name, description });
+            if (response.status === 201) {
+                const site = response.data.site;
+                if (site) {
+                    setName("");
+                    setDescription("");
+                    setSuccess("Site added successfully");
+                } else {
+                    setError("No site received");
+                }
+            }
+        } catch (error: any) {
+            setError(error.response.data.error);
+        }
+    };
+
     return (
+        <div>
             <dialog id="add_site" className="modal">
                 <div className="modal-box w-2/3 max-w-2/3">
                     <div className="flex flex-col gap-4">
@@ -17,6 +48,8 @@ export default function AddSite() {
                                     type="text" 
                                     className="input input-bordered w-full focus:ring-2" 
                                     placeholder="e.g. Downtown Office"
+                                    value={name}
+                                    onChange={(e) => setName(e.target.value)}
                                 />
                             </div>
 
@@ -31,6 +64,8 @@ export default function AddSite() {
                                     className="textarea textarea-bordered w-full focus:ring-2" 
                                     placeholder="Enter a brief description..."
                                     rows={4}
+                                    value={description}
+                                    onChange={(e) => setDescription(e.target.value)}
                                 ></textarea>
                             </div>
                         </div>
@@ -38,11 +73,14 @@ export default function AddSite() {
                         <div className="modal-action flex justify-end">
                             <form method="dialog" className="flex gap-3">
                                 <button className="btn btn-ghost">Cancel</button>
-                            <button className="btn btn-primary px-6">Add Site</button>
+                                <button className="btn btn-primary px-6" onClick={addSite}>Add Site</button>
                             </form>
                         </div>
                     </div>
                 </div>
             </dialog>
+            <ErrorToast message={error} show={error !== ''} onClose={() => setError('')} />
+            <SuccessToast message={success} show={success !== ''} onClose={() => setSuccess('')} />
+        </div>
     )
 }