From 62a90c892d144ad1131b16967e85ef18e8041fbd Mon Sep 17 00:00:00 2001 From: Alexis Colin Date: Tue, 23 Apr 2024 13:56:30 +0200 Subject: [PATCH] feat: feedback form (#16) * feat: add feedback form * style: update colors * feat: feedback responsive * style: font colors * feat: add fetch method * feat: add last commit field * feat: add fields guards * Update index.js Co-authored-by: Leon Hudak <33522493+leohhhn@users.noreply.github.com> Signed-off-by: Alexis Colin * Update index.js Co-authored-by: Leon Hudak <33522493+leohhhn@users.noreply.github.com> Signed-off-by: Alexis Colin --------- Signed-off-by: Alexis Colin Co-authored-by: Leon Hudak <33522493+leohhhn@users.noreply.github.com> --- docusaurus/docusaurus.config.js | 6 +- docusaurus/src/components/Feedback/index.js | 113 ++++++++++++++++++ docusaurus/src/css/custom.css | 105 +++++++++++++++- .../theme/Footer/Links/MultiColumn/index.js | 12 ++ 4 files changed, 232 insertions(+), 4 deletions(-) create mode 100644 docusaurus/src/components/Feedback/index.js create mode 100644 docusaurus/src/theme/Footer/Links/MultiColumn/index.js diff --git a/docusaurus/docusaurus.config.js b/docusaurus/docusaurus.config.js index eb80093..1183eae 100644 --- a/docusaurus/docusaurus.config.js +++ b/docusaurus/docusaurus.config.js @@ -23,9 +23,9 @@ const config = { }, customFields: { - meilisearchURL: process.env.MEILISEARCH_URL || 'localhost:7700', - meilisearchApiKey: process.env.MEILISEARCH_API_KEY || 'masterKey', - meilisearchIndexUid: process.env.MEILISEARCH_INDEX_UID || 'dev' + meilisearchURL: process.env.MEILISEARCH_URL || "localhost:7700", + meilisearchApiKey: process.env.MEILISEARCH_API_KEY || "masterKey", + meilisearchIndexUid: process.env.MEILISEARCH_INDEX_UID || "dev", }, scripts: [ diff --git a/docusaurus/src/components/Feedback/index.js b/docusaurus/src/components/Feedback/index.js new file mode 100644 index 0000000..2a2e860 --- /dev/null +++ b/docusaurus/src/components/Feedback/index.js @@ -0,0 +1,113 @@ +import React, { useState } from "react"; + +export default function Feedback() { + const [isOpen, setIsOpen] = useState(false); + const [isFormCallback, setIsFormCallback] = useState(false); + const toggle = (e) => { + e.preventDefault(); + setIsOpen(!isOpen); + }; + + const [formData, setFormData] = useState({ + email: "", + feedback: "", + }); + + const feedbackMsg = { + info: "Leave feedback", + callback: "Thank you for your feedback! ❤️", + }; + + const handleInputChange = (event) => { + event.preventDefault(); + const { name, value } = event.target; + setFormData((prevProps) => ({ + ...prevProps, + [name]: value, + })); + }; + + const sendData = async (e) => { + e.preventDefault(); + + if (formData.email === "" || formData.feedback === "") return; + + const formURL = `https://docs.google.com/forms/d/188U6r1PL0zvwo5nrBwpIh8CVtgvOMdvst2YM3PWT7hw/formResponse`; + const inputsName = { + email: "entry.331557816", + feedback: "entry.1077515444", + pageId: "entry.420531539", + pageCommit: "entry.159427272", + }; + + const formParams = new URLSearchParams(); + for (const field in inputsName) { + if (formData[field]) formParams.append(inputsName[field], formData[field]); + } + + formParams.append(inputsName.pageId, window.location.pathname); + + const editLink = document.querySelector(".theme-edit-this-page").getAttribute("href"); + const filePath = editLink.split("master/")[1]; + + await fetch(`https://api.github.com/repos/gnolang/gno/commits?path=/${filePath}`) + .then((res) => res.json()) + .then((data) => { + formParams.append(inputsName.pageCommit, data[0].sha); + }) + .catch((error) => { + formParams.append(inputsName.pageCommit, `error: ${error}`); + console.error("Last page commit error :", error); + }); + + const url = formURL + "?" + formParams + "&submit=Submit"; + + fetch(url, { + method: "GET", + headers: { + "Content-Type": "application/x-www-form-urlencoded", + }, + mode: "no-cors", // this line is required for CORS policy reasons -> no usefull response available + }) + .then((_) => { + setFormData({ email: "", feedback: "" }); + setIsOpen(false); + + setIsFormCallback(true); + setTimeout(() => setIsFormCallback(false), 2000); + }) + .catch((error) => { + console.error("Error submitting form data:", error); + }); + }; + + return ( +
+
Was this page helpful?
+ {isOpen ? ( +
+ +
+
+ + +
+
+ +