diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index 9e4836d..798f092 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -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/release-action@v1.14.0 with: artifacts: "react-github-actions-build" - tag: v1.5.5.1 \ No newline at end of file + tag: v1.5.5.2 \ No newline at end of file diff --git a/src/App.test.js b/src/App.test.js index dd7260b..855fb75 100644 --- a/src/App.test.js +++ b/src/App.test.js @@ -30,6 +30,13 @@ test('Find contact form', async () => { expect(formFieldMessage).toBeInTheDocument(); }); +// Test Alert message +test('Find alert message', () => { + render(); + const alertMessage = screen.getByText(/This website serves as a showcase of my development work/i); + expect(alertMessage).toBeInTheDocument(); +}); + // Test form submit button test('Find form submit button', () => { render(); diff --git a/src/components/AlertComponent.js b/src/components/AlertComponent.js new file mode 100644 index 0000000..fb7d779 --- /dev/null +++ b/src/components/AlertComponent.js @@ -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 ( +
+

+ {message} +

+ +
+ ); +}; + +export default AlertComponent; \ No newline at end of file diff --git a/src/components/Contact.js b/src/components/Contact.js index c6b0663..ec685ef 100644 --- a/src/components/Contact.js +++ b/src/components/Contact.js @@ -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: "test@test.com", - 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: "test@test.com", + 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 ( <> -
+ + {/* Alert 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 + Studio Zed, please contact + Dr. Simone O'Callaghan. + + } + animateAlert={animateAlert} /> + + {/* Form */}
@@ -59,35 +83,21 @@ function ContactForm() {
Get in touch!
- - {/* Name */}
- - setName(e.target.value)} - placeholder="Name" - required /> + setName(e.target.value)} placeholder="Name" required/>
- - {/* Email */}
- - 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" - /> + 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"/>
- - {/* Message */}
- -