API - Step 2 - CHANGE - client

chrissimon-au · May 22, 2023 · e654f4d · e654f4d
1 parent ef204b3
commit e654f4d
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 14 deletions.
diff --git a/app/src/app/names.tsx b/app/src/app/names.tsx
@@ -2,33 +2,37 @@
 import { useState, useMemo, ChangeEvent, FormEvent } from 'react';
 import dynamic from 'next/dynamic';
 
+type FullName = {firstName: string, lastName: string};
+const DefaultFullName: FullName | null = null;
+const InitialFullName: FullName = { firstName: '', lastName: '' };
+
 function Names() {
-    const [inputName, setInputName] = useState('');
+    const [inputName, setInputName] = useState(DefaultFullName);
     const [loading, setLoading] = useState(false);
-    const [name, setName] = useState('');
+    const [name, setName] = useState(DefaultFullName);
 
     const config = useMemo(() => fetch('config.json')
         .then(response => response.json()), []);
 
     const onChange = (e:ChangeEvent<HTMLInputElement>) => {
-        setInputName(e.target.value);
+        setInputName({ ...(inputName || InitialFullName), [e.target.id]: e.target.value});
     }
 
-    const setNameResult = (name: string) => {
+    const setNameResult = (name: FullName | null) => {
         setLoading(!!!name);
-        setName(name);
+        setName(name || DefaultFullName);
     }
 
     const addPerson = (e: FormEvent<HTMLFormElement>) => {
         e.preventDefault();
-        setNameResult('');
+        setNameResult(null);
 
         config
             .then(c => 
                 fetch(`${c.SERVER_URL}/names`, {
                     method: "POST",
                     body: JSON.stringify({
-                        name: inputName
+                        fullName: inputName
                     }),
                     headers: {
                         'Content-type': 'application/json',
@@ -37,17 +41,23 @@ function Names() {
             .then(response => fetch(response.headers.get("Location")!))
             .then(response => response.json())
             .then(n => {
-                setNameResult(n.name);
+                setNameResult(n.fullName);
             });
     };
 
     return (
         <form className="form" onSubmit={addPerson}>
             <div className="mb-4">
-                <label className="label" htmlFor="name">
-                    Name
+                <label className="label" htmlFor="firstName">
+                    Firstname
+                </label>
+                <input className="input" id="firstName" value={inputName && inputName.firstName || ''} onChange={onChange} type="text" placeholder="Name"/>
+            </div>
+            <div className="mb-4">
+                <label className="label" htmlFor="lastName">
+                    Lastname
                 </label>
-                <input className="input" id="name" value={inputName} onChange={onChange} type="text" placeholder="Name"/>
+                <input className="input" id="lastName" value={inputName && inputName.lastName || ''} onChange={onChange} type="text" placeholder="Name"/>
             </div>
             <div>
                 <button className="btn" type="submit">
@@ -56,7 +66,7 @@ function Names() {
             </div>
             {loading && <div className="result">loading...</div>}
             {name && <div className="result">
-                {name}
+                {name.firstName} {name.lastName}
             </div>}
         </form>
     )

diff --git a/tests/e2e/tests/add-person.spec.ts b/tests/e2e/tests/add-person.spec.ts
@@ -72,5 +72,4 @@ test(`Can add a new person ${repeatCount} times`, async ({ page }) => {
         await testMultipleNames(page, idx);
       }
     }
-}); 
-
+});
-Original file line number
+Diff line change
@@ Expand Up @@
             await testMultipleNames(page, idx);
           }
         }
-    });
+    });