From 2ef59e1574f514645c03b902b6fc0184d639abc1 Mon Sep 17 00:00:00 2001 From: William Vo Date: Sun, 23 Nov 2025 18:35:37 -0500 Subject: [PATCH 01/11] update --- src/App.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/App.tsx b/src/App.tsx index d7a72df3..14386222 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -9,7 +9,7 @@ function App() { useEffect(() => { client.models.Todo.observeQuery().subscribe({ - next: (data) => setTodos([...data.items]), + next: (data: { items: Array }) => setTodos([...data.items]), }); }, []); From 4dcb0fc4e2e53cb0dfbc1c8585e44dedab84e300 Mon Sep 17 00:00:00 2001 From: William Vo Date: Sun, 23 Nov 2025 18:37:13 -0500 Subject: [PATCH 02/11] add form --- src/App.tsx | 158 ++++++++++++++++++++++++++++++++++++++++++---------- 1 file changed, 130 insertions(+), 28 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 14386222..48f48897 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,38 +1,140 @@ -import { useEffect, useState } from "react"; -import type { Schema } from "../amplify/data/resource"; -import { generateClient } from "aws-amplify/data"; +import { useState } from "react"; -const client = generateClient(); +interface FormData { + firstName: string; + lastName: string; + email: string; + number: string; +} function App() { - const [todos, setTodos] = useState>([]); + const [formData, setFormData] = useState({ + firstName: "", + lastName: "", + email: "", + number: "" + }); + const [isSubmitting, setIsSubmitting] = useState(false); + const [message, setMessage] = useState(""); - useEffect(() => { - client.models.Todo.observeQuery().subscribe({ - next: (data: { items: Array }) => setTodos([...data.items]), - }); - }, []); + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault(); + setIsSubmitting(true); + setMessage(""); + + try { + // Fake API call + const response = await fetch("https://jsonplaceholder.typicode.com/posts", { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify(formData), + }); - function createTodo() { - client.models.Todo.create({ content: window.prompt("Todo content") }); - } + if (response.ok) { + setMessage("Form submitted successfully!"); + setFormData({ firstName: "", lastName: "", email: "", number: "" }); + } else { + setMessage("Error submitting form"); + } + } catch (error) { + setMessage("Error submitting form"); + } finally { + setIsSubmitting(false); + } + }; + + const handleChange = (e: React.ChangeEvent) => { + setFormData({ + ...formData, + [e.target.name]: e.target.value + }); + }; return ( -
-

My todos

- -
    - {todos.map((todo) => ( -
  • {todo.content}
    • - ))} -
-
- 🥳 App successfully hosted. Try creating a new todo. -
- - Review next step of this tutorial. - -
+
+

Contact Form

+
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ + +
+ + {message && ( +
+ {message} +
+ )}
); } From 20ac0091a18c5448f7620363f78280d19613a07f Mon Sep 17 00:00:00 2001 From: William Vo Date: Sun, 23 Nov 2025 21:23:31 -0500 Subject: [PATCH 03/11] updated fetch api --- src/App.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/App.tsx b/src/App.tsx index 48f48897..49e4d607 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -24,7 +24,7 @@ function App() { try { // Fake API call - const response = await fetch("https://jsonplaceholder.typicode.com/posts", { + const response = await fetch("https://0ovbdtb93d.execute-api.us-east-1.amazonaws.com/SignUpForm", { method: "POST", headers: { "Content-Type": "application/json", From 6cd8cc55df45e10464a05ba05bf3c7d5292a027a Mon Sep 17 00:00:00 2001 From: William Vo Date: Sun, 23 Nov 2025 21:42:10 -0500 Subject: [PATCH 04/11] update variable phone --- src/App.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 49e4d607..dae48fca 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -4,7 +4,7 @@ interface FormData { firstName: string; lastName: string; email: string; - number: string; + phone: string; } function App() { @@ -12,7 +12,7 @@ function App() { firstName: "", lastName: "", email: "", - number: "" + phone: "" }); const [isSubmitting, setIsSubmitting] = useState(false); const [message, setMessage] = useState(""); @@ -34,7 +34,7 @@ function App() { if (response.ok) { setMessage("Form submitted successfully!"); - setFormData({ firstName: "", lastName: "", email: "", number: "" }); + setFormData({ firstName: "", lastName: "", email: "", phone: "" }); } else { setMessage("Error submitting form"); } @@ -96,12 +96,12 @@ function App() {
- + Date: Sun, 23 Nov 2025 22:20:43 -0500 Subject: [PATCH 05/11] update api --- src/App.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/App.tsx b/src/App.tsx index dae48fca..371aa7e7 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -24,7 +24,7 @@ function App() { try { // Fake API call - const response = await fetch("https://0ovbdtb93d.execute-api.us-east-1.amazonaws.com/SignUpForm", { + const response = await fetch("https://0ovbdtb93d.execute-api.us-east-1.amazonaws.com/prod/SignUpForm", { method: "POST", headers: { "Content-Type": "application/json", From f47ecb6a5960ac0b9b1ee862003f50e646389ea3 Mon Sep 17 00:00:00 2001 From: William Vo Date: Sun, 23 Nov 2025 22:45:21 -0500 Subject: [PATCH 06/11] update --- src/App.tsx | 29 +++++++++++++++++------------ 1 file changed, 17 insertions(+), 12 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 371aa7e7..ffb68901 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -23,15 +23,21 @@ function App() { setMessage(""); try { - // Fake API call - const response = await fetch("https://0ovbdtb93d.execute-api.us-east-1.amazonaws.com/prod/SignUpForm", { - method: "POST", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify(formData), - }); - + const response = await fetch( + "https://0ovbdtb93d.execute-api.us-east-1.amazonaws.com/SignUpForm", + { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify(formData), + } + ); + + console.log("Status:", response.status); + const text = await response.text(); + console.log("Response body:", text); + if (response.ok) { setMessage("Form submitted successfully!"); setFormData({ firstName: "", lastName: "", email: "", phone: "" }); @@ -39,10 +45,9 @@ function App() { setMessage("Error submitting form"); } } catch (error) { + console.error("Fetch error:", error); setMessage("Error submitting form"); - } finally { - setIsSubmitting(false); - } + } }; const handleChange = (e: React.ChangeEvent) => { From a45bd93ae991bdf4a643765a44871f01fa41d2db Mon Sep 17 00:00:00 2001 From: William Vo Date: Sun, 23 Nov 2025 22:53:09 -0500 Subject: [PATCH 07/11] update --- src/App.css | 58 +++++++++++++++++++++++++++-------------------------- src/App.tsx | 38 ++++++++++++----------------------- 2 files changed, 43 insertions(+), 53 deletions(-) diff --git a/src/App.css b/src/App.css index b9d355df..0835ea28 100644 --- a/src/App.css +++ b/src/App.css @@ -1,42 +1,44 @@ -#root { - max-width: 1280px; +.form-container { + padding: 20px; + max-width: 400px; margin: 0 auto; - padding: 2rem; - text-align: center; } -.logo { - height: 6em; - padding: 1.5em; - will-change: filter; - transition: filter 300ms; +.form-group { + margin-bottom: 15px; } -.logo:hover { - filter: drop-shadow(0 0 2em #646cffaa); + +.form-input { + width: 100%; + padding: 8px; + margin-top: 5px; } -.logo.react:hover { - filter: drop-shadow(0 0 2em #61dafbaa); + +.submit-button { + padding: 10px 20px; + background-color: #007bff; + color: white; + border: none; + border-radius: 4px; + cursor: pointer; } -@keyframes logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } +.submit-button:disabled { + cursor: not-allowed; } -@media (prefers-reduced-motion: no-preference) { - a:nth-of-type(2) .logo { - animation: logo-spin infinite 20s linear; - } +.message { + margin-top: 15px; + padding: 10px; + border-radius: 4px; } -.card { - padding: 2em; +.message.success { + background-color: #d4edda; + color: #155724; } -.read-the-docs { - color: #888; +.message.error { + background-color: #f8d7da; + color: #721c24; } diff --git a/src/App.tsx b/src/App.tsx index ffb68901..ea724738 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,4 +1,5 @@ import { useState } from "react"; +import "./App.css"; interface FormData { firstName: string; @@ -24,7 +25,7 @@ function App() { try { const response = await fetch( - "https://0ovbdtb93d.execute-api.us-east-1.amazonaws.com/SignUpForm", + "https://0ovbdtb93d.execute-api.us-east-1.amazonaws.com/prod/SignUpForm", { method: "POST", headers: { @@ -58,10 +59,10 @@ function App() { }; return ( -
+

Contact Form

-
+
-
+
-
+
-
+
{message && ( -
+
{message}
)} From 3b7e7408fb75bbfcdec9325d251da89321b45825 Mon Sep 17 00:00:00 2001 From: William Vo Date: Sun, 23 Nov 2025 23:01:58 -0500 Subject: [PATCH 08/11] update --- src/App.tsx | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index ea724738..b1126e52 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -24,6 +24,8 @@ function App() { setMessage(""); try { + console.log("Sending data:", formData); + const response = await fetch( "https://0ovbdtb93d.execute-api.us-east-1.amazonaws.com/prod/SignUpForm", { @@ -36,6 +38,8 @@ function App() { ); console.log("Status:", response.status); + console.log("Headers:", response.headers); + const text = await response.text(); console.log("Response body:", text); @@ -43,12 +47,14 @@ function App() { setMessage("Form submitted successfully!"); setFormData({ firstName: "", lastName: "", email: "", phone: "" }); } else { - setMessage("Error submitting form"); + setMessage(`Error: ${response.status} - ${text}`); } } catch (error) { console.error("Fetch error:", error); - setMessage("Error submitting form"); - } + setMessage(`Network error: ${error}`); + } finally { + setIsSubmitting(false); + } }; const handleChange = (e: React.ChangeEvent) => { From e0dae2d0f9db95bd85ac079f98ca4a174ddd1795 Mon Sep 17 00:00:00 2001 From: William Vo Date: Sun, 23 Nov 2025 23:11:56 -0500 Subject: [PATCH 09/11] update --- src/App.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/App.tsx b/src/App.tsx index b1126e52..1f8d1cc0 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -30,8 +30,10 @@ function App() { "https://0ovbdtb93d.execute-api.us-east-1.amazonaws.com/prod/SignUpForm", { method: "POST", + mode: "cors", headers: { "Content-Type": "application/json", + "Accept": "application/json", }, body: JSON.stringify(formData), } From 0f95dc3b970de9573124f9a7262b21cf9818d5ac Mon Sep 17 00:00:00 2001 From: William Vo Date: Sun, 23 Nov 2025 23:17:09 -0500 Subject: [PATCH 10/11] update --- src/App.tsx | 23 +++++++++++++++++++---- 1 file changed, 19 insertions(+), 4 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 1f8d1cc0..11d9ac9e 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -26,21 +26,36 @@ function App() { try { console.log("Sending data:", formData); + // First try OPTIONS request to test CORS + const optionsResponse = await fetch( + "https://0ovbdtb93d.execute-api.us-east-1.amazonaws.com/prod/SignUpForm", + { + method: "OPTIONS", + headers: { + "Origin": window.location.origin, + "Access-Control-Request-Method": "POST", + "Access-Control-Request-Headers": "Content-Type", + }, + } + ); + + console.log("OPTIONS Status:", optionsResponse.status); + console.log("OPTIONS Headers:", [...optionsResponse.headers.entries()]); + + // Now try the actual POST request const response = await fetch( "https://0ovbdtb93d.execute-api.us-east-1.amazonaws.com/prod/SignUpForm", { method: "POST", - mode: "cors", headers: { "Content-Type": "application/json", - "Accept": "application/json", }, body: JSON.stringify(formData), } ); - console.log("Status:", response.status); - console.log("Headers:", response.headers); + console.log("POST Status:", response.status); + console.log("POST Headers:", [...response.headers.entries()]); const text = await response.text(); console.log("Response body:", text); From 06f9b62270ec03a2ddf8e9c52a57b15de3943ceb Mon Sep 17 00:00:00 2001 From: William Vo Date: Sun, 23 Nov 2025 23:30:23 -0500 Subject: [PATCH 11/11] update --- src/App.tsx | 28 +--------------------------- 1 file changed, 1 insertion(+), 27 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 11d9ac9e..ab2bccfc 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -24,25 +24,6 @@ function App() { setMessage(""); try { - console.log("Sending data:", formData); - - // First try OPTIONS request to test CORS - const optionsResponse = await fetch( - "https://0ovbdtb93d.execute-api.us-east-1.amazonaws.com/prod/SignUpForm", - { - method: "OPTIONS", - headers: { - "Origin": window.location.origin, - "Access-Control-Request-Method": "POST", - "Access-Control-Request-Headers": "Content-Type", - }, - } - ); - - console.log("OPTIONS Status:", optionsResponse.status); - console.log("OPTIONS Headers:", [...optionsResponse.headers.entries()]); - - // Now try the actual POST request const response = await fetch( "https://0ovbdtb93d.execute-api.us-east-1.amazonaws.com/prod/SignUpForm", { @@ -54,20 +35,13 @@ function App() { } ); - console.log("POST Status:", response.status); - console.log("POST Headers:", [...response.headers.entries()]); - - const text = await response.text(); - console.log("Response body:", text); - if (response.ok) { setMessage("Form submitted successfully!"); setFormData({ firstName: "", lastName: "", email: "", phone: "" }); } else { - setMessage(`Error: ${response.status} - ${text}`); + setMessage(`Error: ${response.status}`); } } catch (error) { - console.error("Fetch error:", error); setMessage(`Network error: ${error}`); } finally { setIsSubmitting(false);