Feature/fix data fetch

frontend/src/components/createUser.js

@@ -1,16 +1,16 @@
 export default function CreateUser() {
     function onSubmission(event){
 
-        var firstName = event.target.elements.firstName.value;
-        var lastName = event.target.elements.lastName.value;
-        console.log(firstName);
-        console.log(lastName);
+        var fullName = event.target.elements.fullName.value;
+        var email = event.target.elements.email.value;
+        console.log(fullName);
+        console.log(email);
 
         fetch("https://jsonplaceholder.typicode.com/users", {
             method: "POST",
             body: JSON.stringify({
-                firstName,
-                lastName,
+                fullName,
+                email,
             }),
             headers: {
                 "Content-type": "application/json; charset=UTF-8",
@@ -28,12 +28,12 @@ export default function CreateUser() {
         <br/>
             <form onSubmit={onSubmission}>
                 <div className="mb-3">
-                    <label className="form-label">First Name</label>
-                    <input type="text" className="form-control" id="firstName"/>
+                    <label className="form-label">Full Name</label>
+                    <input type="text" className="form-control" id="fullName"/>
                 </div>
                 <div className="mb-3">
-                    <label className="form-label">Last Name</label>
-                    <input type="text" className="form-control" id="lastName"/>
+                    <label className="form-label">Email</label>
+                    <input type="text" className="form-control" id="email"/>
                 </div>
                 <button type="submit" className="btn btn-primary">Submit</button>
             </form>

frontend/src/components/user.js

@@ -1,9 +1,9 @@
-export default function User({id,firstName,lastName}) {
+export default function User({id,fullName,email}) {
   return (
     <tr>
         <th scope="row">{id}</th>
-        <td>{firstName}</td>
-        <td>{lastName}</td>
+        <td>{fullName}</td>
+        <td>{email}</td>
         <td>
           <span class="badge rounded-pill text-bg-primary">Go</span>
           <span class="badge rounded-pill text-bg-secondary">Python</span>

frontend/src/components/userlist.js

@@ -1,7 +1,10 @@
+import React, { useState, useEffect } from 'react';
 import User from "./user";
 
 export default function UserList() {
 
+  const [data, setData] = useState([]);
+
   function reloadUserList(event){
     console.log(event);
     fetch("https://jsonplaceholder.typicode.com/users", {
@@ -13,41 +16,35 @@ export default function UserList() {
         .then(response => response.json())
         .then(data => {
             console.log(data);
+            setData(data);
             alert(JSON.stringify(data));
         })
   };
 
     return (
-
-
         <div>
           <br/>
             <h3>User List</h3>
-
             <br/>
-
-            <form onSubmit={reloadUserList}>
-                <button type="submit" className="btn btn-dark">Relod Users</button>
-            </form>
-
+            <button type="simpleQuery" className="btn btn-dark" onClick={reloadUserList}>Reload User List</button>
             <br/>
-        <table class="table">
-        <thead>
-          <tr>
-            <th scope="col">#ID</th>
-            <th scope="col">First</th>
-            <th scope="col">Last</th>
-            <th scope="col">Skills</th>
-          </tr>
-        </thead>
-        <tbody>
-          <User id="1" firstName="Tom" lastName="Victor" />
-          {/* <User />
-          <User />
-          <User />
-          <User /> */}
-        </tbody>
-      </table>
+          <table class="table">
+          <thead>
+            <tr>
+              <th scope="col">#ID</th>
+              <th scope="col">Full Name</th>
+              <th scope="col">Email</th>
+              <th scope="col">Skills</th>
+            </tr>
+          </thead>
+          <tbody>
+            {
+              data.map((item)=>(
+                <User id={item.id} fullName={item.name} email={item.email} />
+              ))
+            }
+          </tbody>
+        </table>
         </div>
 
 

main.go

@@ -24,7 +24,7 @@ func main() {
 		})
 	})
 
-	r.Use(static.Serve("/", static.LocalFile("./skillmap/build", true)))
+	r.Use(static.Serve("/", static.LocalFile("./frontend/build", true)))
 
 	r.Run() // listen and serve on 0.0.0.0:8080
 }