diff --git a/pages/infoperusahaan/create.jsx b/pages/infoperusahaan/create.jsx index b4b1c4746d25a20cf7bed76bc3aea77481ab02a8..1f1e839d431ce527cb9d37d788680620ad846ff6 100644 --- a/pages/infoperusahaan/create.jsx +++ b/pages/infoperusahaan/create.jsx @@ -4,7 +4,10 @@ import { toast } from "react-toastify" import { useRouter } from "next/router" const Create = ({ propertyWebsite }) => { const router = useRouter() - const[faq, setFaq] = useState([]) + const [faq, setFaq] = useState({ + question: "", + answer: "" + }) const handleUpdate = async () => { @@ -14,7 +17,8 @@ const Create = ({ propertyWebsite }) => { return } const body = JSON.stringify({ - faq + question: faq.question, + answer: faq.answer }) const updateQuery = await fetch("https://rpl-backend-production.up.railway.app/v1/property/faq", { method: "PUT", @@ -33,7 +37,7 @@ const Create = ({ propertyWebsite }) => { return } toast.success("Successfully created!") - router.push("/info") + router.push("/infoperusahaan") return; } return <> @@ -42,7 +46,7 @@ const Create = ({ propertyWebsite }) => { <div className="w-full mb-2"> <span className="text-[#F875AA] font-bold text-2xl hover:cursor-pointer" onClick={(e) => { e.preventDefault() - router.push("/info") + router.push("/infoperusahaan") }}>Back</span> </div> <h1 className="text-[#F875AA] font-extrabold text-5xl mb-20 text-center">Tambah Data FAQ</h1> @@ -54,13 +58,19 @@ const Create = ({ propertyWebsite }) => { <div className="flex flex-row align-middle justify-between"> <span className="h-min my-auto font-bold text-lg">Question</span> <input value={faq.question} onChange={(e) => { - setFaq(e.target.value) + setFaq({ + question: e.target.value, + answer: faq.answer + }) }} type="tel" required className="drop-shadow-xl w-2/3 p-2 rounded-xl" /> </div> <div className="flex flex-row align-middle justify-between"> <span className="h-min my-auto font-bold text-lg">Answer</span> <input value={faq.answer} onChange={(e) => { - setFaq(e.target.value) + setFaq({ + question: faq.question, + answer: e.target.value + }) }} type="text" required className="drop-shadow-xl w-2/3 p-2 rounded-xl" /> </div> <input type="submit" className="bg-[#F875AA] px-8 py-3 text-xl font-bold text-white rounded-xl mx-auto" value={"Simpan"} /> diff --git a/pages/infoperusahaan/edit/_id_.jsx b/pages/infoperusahaan/edit/[id].jsx similarity index 78% rename from pages/infoperusahaan/edit/_id_.jsx rename to pages/infoperusahaan/edit/[id].jsx index 2c8bce3f928daf79343856cbcc9a2c5e52828896..d084c978ac632da470ba60cdca4d5d9e2ebdab97 100644 --- a/pages/infoperusahaan/edit/_id_.jsx +++ b/pages/infoperusahaan/edit/[id].jsx @@ -4,7 +4,10 @@ import { toast } from "react-toastify" import { useRouter } from "next/router" const Edit = () => { const router = useRouter() - const[faq, setFaq] = useState([]) + const [faq, setFaq] = useState({ + question: "", + answer: "" + }) const handleUpdate = async () => { const token = window.localStorage.getItem("token") @@ -13,7 +16,8 @@ const Edit = () => { return } const body = JSON.stringify({ - faq + question: faq.question, + answer: faq.answer }) const updateQuery = await fetch("https://rpl-backend-production.up.railway.app/v1/property/faq/update/" + router.query.id, { method: "PATCH", @@ -24,7 +28,7 @@ const Edit = () => { body }).then(response => response).catch(() => null) if (updateQuery === null) { - toast.error("Something went wrong..") + toast.error("Something went wrong when trying to save...") return } if (updateQuery.status !== 200) { @@ -32,11 +36,13 @@ const Edit = () => { return } toast.success("Successfully updated!") - router.push("/info") + router.push("/infoperusahaan") return; } useEffect(() => { + if (!router.isReady) return; + const index = router.query.id; const token = window.localStorage.getItem("token") if (token === undefined || token === null) { window.location.replace("/auth/login") @@ -53,16 +59,20 @@ const Edit = () => { return } const responsejson = await response.json() - setFaq(responsejson.data.faq) + setFaq(responsejson.data.faq[index]) + }).catch((err) => { + toast.error("Something went wrong when trying to retrieve the items..") + return; }) - }, []) + //eslint-disable-next-line + }, [router.isReady]) return <> <Template> <main className="min-h-screen px-14 py-5 bg-[#FFF6F6]"> <div className="w-full mb-2"> <span className="text-[#F875AA] font-bold text-2xl hover:cursor-pointer" onClick={(e) => { e.preventDefault() - router.push("/info") + router.push("/infoperusahaan") }}>Back</span> </div> <h1 className="text-[#F875AA] font-extrabold text-5xl mb-20 text-center">Update Data FAQ</h1> @@ -74,13 +84,19 @@ const Edit = () => { <div className="flex flex-row align-middle justify-between"> <span className="h-min my-auto font-bold text-lg">Question</span> <input value={faq.question} onChange={(e) => { - setFaq(e.target.value) + setFaq({ + question: e.target.value, + answer: faq.answer + }) }} type="text" required className="drop-shadow-xl w-2/3 p-2 rounded-xl" /> </div> <div className="flex flex-row align-middle justify-between"> <span className="h-min my-auto font-bold text-lg">Answer</span> <input value={faq.answer} onChange={(e) => { - setFaq(e.target.value) + setFaq({ + question: faq.question, + answer: e.target.value + }) }} type="text" required className="drop-shadow-xl w-2/3 p-2 rounded-xl" /> </div> <input type="submit" className="bg-[#F875AA] px-8 py-3 text-xl font-bold text-white rounded-xl mx-auto" value={"Simpan"} /> diff --git a/pages/infoperusahaan/index.jsx b/pages/infoperusahaan/index.jsx index 5a3af88e28852101b7d1555ece889c2df23c664c..44f1a39be0de9370d5d5a52f34a1d4d463e14ccd 100644 --- a/pages/infoperusahaan/index.jsx +++ b/pages/infoperusahaan/index.jsx @@ -4,116 +4,135 @@ import { toast } from "react-toastify" import { useEffect, useState } from "react" export default function InformasiPerusahaan({ propertyWebsite }) { - const[deskripsi, setDeskripsi] = useState("") - const[faq, setFaq] = useState([]) - const [deleteToggle, setDeleteToggle] = useState(null) + const [deskripsi, setDeskripsi] = useState("") + const [faq, setFaq] = useState([]) + const [deleteToggle, setDeleteToggle] = useState(null) - const router = useRouter(); - const saveDeskripsi = () => { - fetch("https://rpl-backend-production.up.railway.app/v1/property/description", { - method: "PATCH", - body: JSON.stringify({ - deskripsi - }) - }) + const router = useRouter(); + const saveDeskripsi = () => { + const token = window.localStorage.getItem("token") + if (token === undefined || token === null) { + window.location.replace("/") + return; } - - const handleDelete = async () => { - const token = window.localStorage.getItem("token") - if (token === undefined || token === null) { - window.location.replace("/auth/login") - return + fetch("https://rpl-backend-production.up.railway.app/v1/property/description", { + method: "PATCH", + body: JSON.stringify({ + description: deskripsi + }), + headers: { + Authorization: token, + "Content-Type": "application/json" } - const deleteRequest = await fetch("https://rpl-backend-production.up.railway.app/v1/property/faq/delete/" + deleteToggle, { - method: "DELETE", - headers: { - Authorization: token - } - }).then(response => response).catch(() => null) - setDeleteToggle(null) - if (deleteRequest === null) { - toast.error("Something went wrong..."); - return; + }).then((response) => { + if (response.status !== 200) { + toast.error("Failed to update description") + return } - if (deleteRequest.status !== 200) { - toast.error("Failed to delete.."); - return; + toast.success("Successfully saved description") + return + }).catch((err) => { + toast.error("Something went wrong when trying to save the description") + return + }) + } + + const handleDelete = async () => { + const token = window.localStorage.getItem("token") + if (token === undefined || token === null) { + window.location.replace("/auth/login") + return + } + const deleteRequest = await fetch("https://rpl-backend-production.up.railway.app/v1/property/faq/delete/" + deleteToggle, { + method: "DELETE", + headers: { + Authorization: token, } - toast.success("Successfully deleted!"); - router.reload(); + }).then(response => response).catch(() => null) + setDeleteToggle(null) + if (deleteRequest === null) { + toast.error("Something went wrong..."); + return; + } + if (deleteRequest.status !== 200) { + toast.error("Failed to delete.."); return; } + toast.success("Successfully deleted!"); + router.reload(); + return; + } - useEffect(() => { - fetch("https://rpl-backend-production.up.railway.app/v1/property").then(async(response) => { - const responsejson = await response.json() - setDeskripsi(responsejson.data.description) - setFaq(responsejson.data.faq) - }) + useEffect(() => { + fetch("https://rpl-backend-production.up.railway.app/v1/property").then(async (response) => { + const responsejson = await response.json() + setDeskripsi(responsejson.data.description) + setFaq(responsejson.data.faq) }) - - return <> + }, []) + + return <> <Template> - <main className="min-h-screen px-14 py-5 bg-[#FFF6F6]"> - <div className="w-full mb-2"> - <span className="text-[#F875AA] font-bold text-2xl hover:cursor-pointer" onClick={(e) => { - e.preventDefault() - router.push("/dashboard/owner") - }}>Back</span> - </div> - <div> - <h1 className="text-[#F875AA] font-extrabold text-5xl mt-10 mb-10 text-center">Informasi Perusahaan</h1> - </div> - <div> - <h1 className="text-[#F875AA] font-extrabold text-3xl mt-10 mb-10 text-lef ml-3">Deskripsi Perusahaan</h1> - </div> - <div className="flex flex-row align-middle justify-between"> - <input value={deskripsi} onChange={(e) => { - setDeskripsi(e.target.value) - }} type="text" required className="drop-shadow-xl w-5/6 p-2 rounded-xl" rows="4" /> - <button className="px-9 h-12 rounded bg-[#FFDFDF] border-2 border-[#F875AA]" onClick={() => { - saveDeskripsi() - }}>Simpan</button> - </div> - <div className="flex flex-row items-center align-middle justify-between"> - <h1 className="text-[#F875AA] font-extrabold text-3xl mt-10 mb-10 ml-3">Frequently Asked Questions</h1> - <div> - <button onClick={(e) => { + <main className="min-h-screen px-14 py-5 bg-[#FFF6F6]"> + <div className="w-full mb-2"> + <span className="text-[#F875AA] font-bold text-2xl hover:cursor-pointer" onClick={(e) => { + e.preventDefault() + router.push("/dashboard/owner") + }}>Back</span> + </div> + <div> + <h1 className="text-[#F875AA] font-extrabold text-5xl mt-10 mb-10 text-center">Informasi Perusahaan</h1> + </div> + <div> + <h1 className="text-[#F875AA] font-extrabold text-3xl mt-10 mb-10 text-lef ml-3">Deskripsi Perusahaan</h1> + </div> + <div className="flex flex-row align-middle justify-between"> + <input value={deskripsi} onChange={(e) => { + setDeskripsi(e.target.value) + }} type="text" required className="drop-shadow-xl w-5/6 p-2 rounded-xl" rows="4" /> + <button className="px-9 h-12 rounded bg-[#FFDFDF] border-2 border-[#F875AA]" onClick={() => { + saveDeskripsi() + }}>Simpan</button> + </div> + <div className="flex flex-row items-center align-middle justify-between"> + <h1 className="text-[#F875AA] font-extrabold text-3xl mt-10 mb-10 ml-3">Frequently Asked Questions</h1> + <div> + <button onClick={(e) => { + e.preventDefault(); + router.push("/infoperusahaan/create") + }} className="bg-[#F875AA] p-3 text-lg font-bold text-white rounded-2xl">Tambah FAQ</button> + </div> + </div> + <table className="w-full text-center items-center border-spacing-3 border-separate"> + <thead> + <tr> + <th className="bg-[#F875AA] p-2 border border-[#F875AA]">Question</th> + <th className="bg-[#F875AA] p-2 border border-[#F875AA]">Answer</th> + <th className=""></th> + </tr> + </thead> + <tbody> + {faq.map((item, index) => { + return <tr key={index} className="items-center"> + <td className="p-6 border border-[#F875AA] bg-white">{item.question}</td> + <td className="p-6 border border-[#F875AA] bg-white">{item.answer}</td> + <td className="px-2 flex flex-col align-middle justify-center space-y-2 "> + <button className="bg-[#AEDEFC] p-1 rounded-lg" onClick={(e) => { e.preventDefault(); - router.push("/info/create") - }} className="bg-[#F875AA] p-3 text-lg font-bold text-white rounded-2xl">Tambah FAQ</button> - </div> - </div> - <table className="w-full text-center items-center border-spacing-3 border-separate"> - <thead> - <tr> - <th className="bg-[#F875AA] p-2 border border-[#F875AA]">Question</th> - <th className="bg-[#F875AA] p-2 border border-[#F875AA]">Answer</th> - <th className=""></th> - </tr> - </thead> - <tbody> - {propertyWebsite.faq.map((item, index) => { - return <tr key={index} className="items-center"> - <td className="p-6 border border-[#F875AA] bg-white">{item.question}</td> - <td className="p-6 border border-[#F875AA] bg-white">{item.answer}</td> - <td className="px-2 flex flex-col align-middle justify-center space-y-2 "> - <button className="bg-[#AEDEFC] p-1 rounded-lg" onClick={(e) => { - e.preventDefault(); - router.push("/info/edit/" + index) - return; - }}>Update</button> - <button data-modal-target="popup-modal" data-modal-toggle="popup-modal" className="bg-[#FFDFDF] p-1 rounded-lg" onClick={(e) => { - e.preventDefault() - setDeleteToggle(index) - }}>Delete</button> - </td> - </tr> - })} - </tbody> - </table> - </main> - {deleteToggle !== null && <div className="left-0 top-0 fixed w-screen h-screen bg-white bg-opacity-80 p-20 flex flex-col align-middle justify-center"> + router.push("/infoperusahaan/edit/" + index) + return; + }}>Update</button> + <button data-modal-target="popup-modal" data-modal-toggle="popup-modal" className="bg-[#FFDFDF] p-1 rounded-lg" onClick={(e) => { + e.preventDefault() + setDeleteToggle(index) + }}>Delete</button> + </td> + </tr> + })} + </tbody> + </table> + </main> + {deleteToggle !== null && <div className="left-0 top-0 fixed w-screen h-screen bg-white bg-opacity-80 p-20 flex flex-col align-middle justify-center"> <div className="w-1/2 mx-auto space-y-5"> <h1 className="text-center p-10 bg-[#FFDFDF] border-2 border-[#F875AA] rounded-xl font-bold text-xl">Apakah anda yakin akan menghapus data Frequently Asked Questions?</h1> <div className="space-x-5 flex flex-row align-middle justify"> @@ -129,27 +148,5 @@ export default function InformasiPerusahaan({ propertyWebsite }) { </div> </div>} </Template> - </> + </> } -export const getServerSideProps = async () => { - const propertyQuery = await fetch("https://rpl-backend-production.up.railway.app/v1/property", { - method: "GET", - }).catch(error => { - return null - }) - let propertyWebsite; - if (propertyQuery === null) propertyWebsite = { - description: "", - faq: [] - } - else { - const propertyJson = await propertyQuery.json(); - propertyWebsite = propertyJson.data - } - return { - props: { - propertyWebsite - } - } - -} \ No newline at end of file