jake/jarv.is
jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-04-27 17:30:28 -04:00
Code Issues

update octicons on /contact

Browse Source
This commit is contained in:
Jake Jarvis 2021-12-07 08:40:36 -05:00
parent 6d64ea647e
commit 57ad6c1fd2
Signed by: jake
GPG Key ID: 2B0C9CF251E69A39
1 changed files with 12 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
assets/js/src/contact.js
View File

@ -4,6 +4,9 @@ import { useState } from "preact/hooks";
import fetch from "unfetch"; import fetch from "unfetch";
import parseEmoji from "./emoji.js"; import parseEmoji from "./emoji.js";
// shared react components:
import { CheckIcon, XIcon } from "@primer/octicons-react";
const CONTACT_ENDPOINT = "/api/contact/"; const CONTACT_ENDPOINT = "/api/contact/";
const ContactForm = () => { const ContactForm = () => {
@ -31,7 +34,7 @@ const ContactForm = () => {
// TODO: change border color of the specific empty/missing field(s) to red // TODO: change border color of the specific empty/missing field(s) to red
if (!(formData.name && formData.email && formData.message && formData["h-captcha-response"])) { if (!(formData.name && formData.email && formData.message && formData["h-captcha-response"])) {
setSending(false); setSending(false);
setStatus({ success: false, message: "❗ Please make sure that all fields are filled in." }); setStatus({ success: false, message: "Please make sure that all fields are filled in." });
// remove focus from the submit button // remove focus from the submit button
document.activeElement.blur(); document.activeElement.blur();
@ -55,7 +58,7 @@ const ContactForm = () => {
if (data.success === true) { if (data.success === true) {
// handle successful submission // handle successful submission
// disable submissions, hide the send button, and let user know we were successful // disable submissions, hide the send button, and let user know we were successful
setStatus({ success: true, message: "Thanks! You should hear from me soon. 😊" }); setStatus({ success: true, message: "Thanks! You should hear from me soon." });
} else { } else {
// pass on any error sent by the server // pass on any error sent by the server
throw new Error(data.message); throw new Error(data.message);
@ -70,16 +73,16 @@ const ContactForm = () => {
if (message === "USER_INVALID_CAPTCHA") { if (message === "USER_INVALID_CAPTCHA") {
setStatus({ setStatus({
success: false, success: false,
message: "❗ Did you complete the CAPTCHA? (If you're human, that is...)", message: "Did you complete the CAPTCHA? (If you're human, that is...)",
}); });
} else if (message === "USER_MISSING_DATA") { } else if (message === "USER_MISSING_DATA") {
setStatus({ setStatus({
success: false, success: false,
message: "❗ Please make sure that all fields are filled in.", message: "Please make sure that all fields are filled in.",
}); });
} else { } else {
// something else went wrong, and it's probably my fault... // something else went wrong, and it's probably my fault...
setStatus({ success: false, message: "❗ Internal server error. Try again later?" }); setStatus({ success: false, message: "Internal server error. Try again later?" });
} }
// remove focus from the submit button // remove focus from the submit button
@ -128,9 +131,10 @@ const ContactForm = () => {
<span <span
class="contact-form-result" class="contact-form-result"
id={status.success ? "contact-form-result-success" : "contact-form-result-error"} id={status.success ? "contact-form-result-success" : "contact-form-result-error"}
// eslint-disable-next-line react/no-danger style={{ display: !status.message || sending ? "none" : null }}
dangerouslySetInnerHTML={{ __html: parseEmoji(status.message) }} >
/> {status.success ? <CheckIcon size={16} /> : <XIcon size={16} />} {status.message}
</span>
</div> </div>
</form> </form>
); );