From 214436eb07ac994a996dec9f87c85511d20e182c Mon Sep 17 00:00:00 2001 From: OudomMunint Date: Sun, 12 Jan 2025 00:44:21 +1100 Subject: [PATCH 1/8] chore: Update release tag to v1.5.5.2 and modify test command in workflow --- .github/workflows/main.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 From c6c9083d686268855afb6046a42f2d4d1038d82d Mon Sep 17 00:00:00 2001 From: OudomMunint Date: Sun, 12 Jan 2025 00:45:02 +1100 Subject: [PATCH 2/8] #96 - Implement Alert component (WIP) --- src/components/AlertComponent.js | 39 ++++++++++++++++++++++++++++++++ 1 file changed, 39 insertions(+) create mode 100644 src/components/AlertComponent.js diff --git a/src/components/AlertComponent.js b/src/components/AlertComponent.js new file mode 100644 index 0000000..e900017 --- /dev/null +++ b/src/components/AlertComponent.js @@ -0,0 +1,39 @@ +import React, { useState, useEffect, useCallback } from "react"; + +function AlertComponent() { + + const [animateAlert, setAnimateAlert] = useState(false); + + const hideAlert = () => { + const alertElement = document.querySelector(".alert-container"); + if (alertElement) { + alertElement.classList.add("hidden"); + } + }; + + 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. +

+ +
+ + ); +} + +export default AlertComponent; \ No newline at end of file From 762b4110a512281522b72fd670bdc9612a91a01b Mon Sep 17 00:00:00 2001 From: OudomMunint Date: Sun, 12 Jan 2025 00:45:42 +1100 Subject: [PATCH 3/8] #84 - Add alert message test to ContactForm component --- src/App.test.js | 7 +++++++ 1 file changed, 7 insertions(+) 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(); From 326aac3aedb7798098f4ed577900daed884b45db Mon Sep 17 00:00:00 2001 From: OudomMunint Date: Sun, 12 Jan 2025 00:47:28 +1100 Subject: [PATCH 4/8] #96 - Temporarily implement alert mesege in Contact component. --- src/components/Contact.js | 112 +++++++++++++++++++++++--------------- src/style.css | 24 ++++++++ 2 files changed, 93 insertions(+), 43 deletions(-) diff --git a/src/components/Contact.js b/src/components/Contact.js index c6b0663..c6a7648 100644 --- a/src/components/Contact.js +++ b/src/components/Contact.js @@ -1,31 +1,49 @@ 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." - }; - } - console.log('Form submission successful:', data); - } catch (error) { - console.error('Form submission error:', error); - console.log('Error caught'); + const [animateAlert, setAnimateAlert] = useState(false); + + const hideAlert = () => { + const alertElement = document.querySelector(".alert-container"); + if (alertElement) { + alertElement.classList.add("hidden"); } - }, [name, email, message, isDevelopment]); + }; + + 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); + } + }, + [name, email, message, isDevelopment] + ); useEffect(() => { if (isDevelopment) { @@ -43,13 +61,35 @@ 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. +

+ +
+ + {/* Form */}
@@ -59,35 +99,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 */}
- -