-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #97 from OudomMunint/dev
Dev => Maun
- Loading branch information
Showing
7 changed files
with
135 additions
and
82 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -27,7 +27,7 @@ jobs: | |
| run: npx eslint --no-error-on-unmatched-pattern. | ||
|
|
||
| - name: Run all tests | ||
| run: npm run test | ||
| run: npm test | ||
|
|
||
| - name: Generate build | ||
| env: | ||
|
|
@@ -45,4 +45,4 @@ jobs: | |
| uses: ncipollo/[email protected] | ||
| with: | ||
| artifacts: "react-github-actions-build" | ||
| tag: v1.5.5.1 | ||
| tag: v1.5.5.2 | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| import React, { useState, useEffect, useCallback } from "react"; | ||
|
|
||
| const hideAlert = () => { | ||
| const alertElement = document.querySelector(".alert-container"); | ||
| if (alertElement) { | ||
| alertElement.classList.add("hidden"); | ||
| } | ||
| }; | ||
|
|
||
| const AlertComponent = ({ message, animateAlert }) => { | ||
| return ( | ||
| <div className={`alert-container ${animateAlert ? "" : "hidden"}`} id="alert"> | ||
| <p style={{ margin: "0" }}> | ||
| {message} | ||
| </p> | ||
| <button | ||
| onClick={hideAlert} | ||
| style={{ | ||
| backgroundColor: "transparent", | ||
| border: "none", | ||
| color: "#721c24", | ||
| cursor: "pointer", | ||
| float: "right", | ||
| }} | ||
| > | ||
| ✕ | ||
| </button> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default AlertComponent; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,31 +1,42 @@ | ||
| import React, { useState, useEffect, useCallback } from "react"; | ||
| import AlertComponent from "./AlertComponent"; | ||
|
|
||
| function ContactForm() { | ||
| const isDevelopment = process.env.NODE_ENV === "development"; | ||
| const [name, setName] = useState(""); | ||
| const [email, setEmail] = useState(""); | ||
| const [message, setMessage] = useState(""); | ||
| const handleSubmit = useCallback(async (event) => { | ||
| event.preventDefault(); | ||
| let data = { name, email, message }; | ||
| try { | ||
| // clear form | ||
| setName(''); | ||
| setEmail(''); | ||
| setMessage(''); | ||
| if (isDevelopment) { | ||
| data = { | ||
| name: "testUser1", | ||
| email: "[email protected]", | ||
| message: "Hello, this is a test message." | ||
| }; | ||
| const [animateAlert, setAnimateAlert] = useState(false); | ||
|
|
||
| useEffect(() => { | ||
| const timer = setTimeout(() => { | ||
| setAnimateAlert(true); | ||
| }, 500); | ||
| return () => clearTimeout(timer); | ||
| }, []); | ||
|
|
||
| const handleSubmit = useCallback( | ||
| async (event) => { | ||
| event.preventDefault(); | ||
| let data = { name, email, message }; | ||
| try { | ||
| setName(""); | ||
| setEmail(""); | ||
| setMessage(""); | ||
| if (isDevelopment) { | ||
| data = { | ||
| name: "testUser1", | ||
| email: "[email protected]", | ||
| message: "Hello, this is a test message.", | ||
| }; | ||
| } | ||
| console.log("Form submission successful:", data); | ||
| } catch (error) { | ||
| console.error("Form submission error:", error); | ||
| } | ||
| console.log('Form submission successful:', data); | ||
| } catch (error) { | ||
| console.error('Form submission error:', error); | ||
| console.log('Error caught'); | ||
| } | ||
| }, [name, email, message, isDevelopment]); | ||
| }, | ||
| [name, email, message, isDevelopment] | ||
| ); | ||
|
|
||
| useEffect(() => { | ||
| if (isDevelopment) { | ||
|
|
@@ -43,13 +54,26 @@ function ContactForm() { | |
|
|
||
| return ( | ||
| <> | ||
| <form name="contact" netlify="true" netlify-honeypot="bot-field" data-netlify-recaptcha="true" hidden> | ||
| <form name="contact" netlify="true" netlify-honeypot="bot-field" data-netlify-recaptcha="true" hidden> | ||
| <input type="text" name="name" /> | ||
| <input type="email" name="email" /> | ||
| <textarea name="message"></textarea> | ||
| </form> | ||
|
|
||
| <div className="formFlex"> | ||
|
|
||
| {/* Alert Message */} | ||
| <AlertComponent message={ | ||
| <> | ||
| This website serves as a showcase of my development work. The source code is hosted on GitHub and deployed via my personal Netlify account. | ||
| Therefore, all emails sent through this form will be directed to me. For inquiries related to | ||
| <strong className="purple"> Studio Zed</strong>, please contact | ||
| <a href="https://www.newcastle.edu.au/profile/simone-ocallaghan"> Dr. Simone O'Callaghan</a>. | ||
| </> | ||
| } | ||
| animateAlert={animateAlert} /> | ||
|
|
||
| {/* Form */} | ||
| <div className="form"> | ||
| <div className="top-bar"> | ||
| <span></span> | ||
|
|
@@ -59,35 +83,21 @@ function ContactForm() { | |
| <div className="title">Get in touch!</div> | ||
| <form name="contact" method="POST" data-netlify-recaptcha="true"> | ||
| <input type="hidden" name="form-name" value="contact" /> | ||
|
|
||
| {/* Name */} | ||
| <div className="input-container ic1"> | ||
| <label className="form-label" htmlFor="name"></label> | ||
| <input className="form-control input" type="text" id="name" name="name" value={name} onChange={(e) => setName(e.target.value)} | ||
| placeholder="Name" | ||
| required /> | ||
| <input className="form-control input" type="text" id="name" name="name" value={name} | ||
| onChange={(e) => setName(e.target.value)} placeholder="Name" required/> | ||
| </div> | ||
|
|
||
| {/* Email */} | ||
| <div className="input-container ic2"> | ||
| <label className="form-label" htmlFor="email"></label> | ||
| <input className="form-control input" type="email" id="email" name="email" value={email} onChange={(e) => setEmail(e.target.value)} | ||
| placeholder="Email" | ||
| required | ||
| pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}" | ||
| title="Please enter a valid email address" | ||
| /> | ||
| <input className="form-control input" type="email" id="email" name="email" value={email} | ||
| onChange={(e) => setEmail(e.target.value)} placeholder="Email" | ||
| required pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}" | ||
| title="Please enter a valid email address"/> | ||
| </div> | ||
|
|
||
| {/* Message */} | ||
| <div className="input-container ic2"> | ||
| <label className="form-label" htmlFor="message"></label> | ||
| <textarea className="form-control input from-textarea" id="message" name="message" value={message} onChange={(e) => setMessage(e.target.value)} | ||
| placeholder="Message" | ||
| required /> | ||
| <textarea className="form-control input from-textarea" id="message" name="message" | ||
| value={message} onChange={(e) => setMessage(e.target.value)} placeholder="Message" required/> | ||
| </div> | ||
| <div data-netlify-recaptcha="true" className="reCaptcha"></div> | ||
| {/* Submit */} | ||
| <button title="submit" className="btn btn-danger submit" type="submit" style={{ position: "relative", marginTop: "68px" }}> | ||
| Submit | ||
| </button> | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters