Added initial solution

package.json

@@ -4,8 +4,8 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "start": "concurrently -p [{name}] -c bgBlue.bold,bgGreen.bold -n api,ui 'cd api && yarn start' 'cd ui && yarn start'",
-    "install": "concurrently -p [{name}] -c bgBlue.bold,bgGreen.bold -n api,ui 'cd api && yarn' 'cd ui && yarn'",
+    "start": "concurrently -p [{name}] -c bgBlue.bold,bgGreen.bold -n API,UI 'cd api && yarn start' 'cd ui && yarn start'",
+    "install": "concurrently -p [{name}] -c bgBlue.bold,bgGreen.bold -n API,UI 'cd api && yarn' 'cd ui && yarn'",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],

ui/package.json

@@ -3,12 +3,13 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "axios": "^0.19.0",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
     "react-scripts": "3.1.2"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "BROWSER=none react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"

ui/src/App.js

@@ -1,10 +1,11 @@
 import React from 'react';
 import './App.css';
+import PeopleList from './components/PeopleList';
 
 function App() {
   return (
     <div>
-      Hej
+      <PeopleList />
     </div>
   );
 }

ui/src/api/client.js

@@ -0,0 +1,5 @@
+import axios from "axios";
+
+export const client = axios.create({
+  baseURL: "http://localhost:8000/"
+});

ui/src/components/PeopleForm.jsx

@@ -0,0 +1,87 @@
+import React, { useState } from "react";
+import { client } from '../api/client';
+
+const PeopleForm = (props) => {
+  const { person } = props;
+
+  const initialState = {
+    firstName: person.firstName || '',
+    lastName: person.lastName || '',
+    username: person.username || '',
+    age: person.age || ''
+  };
+
+  const [formState, setFormState] = useState(initialState);
+
+  const onSubmit = async (e) => {
+    e.preventDefault();
+
+    if(person) {
+      await client.patch("/people/" + person._id, formState);
+    } else {
+      await client.post("/people", formState);
+      setFormState(initialState);
+    }
+
+    // Check if the onSubmit function was passed as a property
+    // to this component, if so call it!
+    // && typeof props.getPeople === "function" for full sanity-check
+    if(props.getPeople) props.getPeople();
+
+  }
+  const handleChange = (e) => {
+    setFormState({
+      ...formState,
+      [e.target.name]: e.target.value
+    });
+  }
+
+  return (
+    <form onSubmit={onSubmit}>
+      <div>
+        <label>First Name:</label>
+        <input
+          type="text"
+          name="firstName"
+          value={formState.firstName}
+          onChange={handleChange} 
+        />
+      </div>
+      <div>
+        <label>Last Name:</label>
+        <input
+          type="text"
+          name="lastName"
+          value={formState.lastName}
+          onChange={handleChange} 
+        />
+      </div>
+      <div>
+        <label>Username:</label>
+        <input
+          type="text"
+          name="username"
+          value={formState.username}
+          onChange={handleChange} 
+        />
+      </div>
+      <div>
+        <label>Age:</label>
+        <input
+          type="number"
+          name="age"
+          value={formState.age}
+          onChange={handleChange} 
+        />
+      </div>
+      <div>
+        <button>Submit</button>
+      </div>
+    </form>
+  )
+}
+PeopleForm.defaultProps = {
+  person: {},
+}
+
+export default PeopleForm;

ui/src/components/PeopleList.jsx

@@ -0,0 +1,47 @@
+import React, { useState, useEffect } from "react";
+import { client } from '../api/client';
+import PeopleForm from "./PeopleForm";
+import Person from './Person';
+
+
+const PeopleList = () => {
+  const [people, setPeople] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  const getPeople = async () => {
+    setLoading(true);
+    const { data } = await client.get("/people");
+    setPeople(data);
+    setLoading(false);
+  }
+
+  useEffect(() => {
+    getPeople();
+  }, []);
+
+  return (
+    <div>
+      <h2>People</h2>
+      <PeopleForm getPeople={getPeople}/>
+      {loading && (<div>Loading...</div>)}
+      {!loading && (
+        <>
+          {!people.length && (
+            <div>No people <span role="img" aria-label="sad face">😢</span></div>
+          )}
+          {people.map((person) => (
+            <Person 
+              key={person._id} 
+              getPeople={getPeople}
+              person={person}
+            />
+          ))}
+        </>
+      )}
+    </div>
+  )
+}
+
+// Same!
+// module.exports = PeopleList;
+export default PeopleList;

ui/src/components/Person.jsx

@@ -0,0 +1,40 @@
+import React, { useState } from "react";
+import { client } from '../api/client';
+import PeopleForm from './PeopleForm';
+
+const Person = (props) => {
+  const { person } = props;
+  const [editing, setEditing] = useState(false);
+
+  const handleDelete = async () => {
+    await client.delete("/people/" + person._id);
+
+    if(props.getPeople) props.getPeople();
+  }
+
+  const handleEdit = () => {
+    if(props.getPeople) props.getPeople();
+    setEditing(!editing);
+  }
+
+  return (
+    <div>
+      {editing && (
+        <PeopleForm person={person} getPeople={handleEdit} />
+      )}
+      {!editing && (
+        <>
+          <div>{person.firstName} {person.lastName}</div>
+          <div>Age: {person.age || "N/A"}</div>
+          <div>Username: {person.username}</div>
+        </>
+      )}
+      <div>
+        <button onClick={() => setEditing(!editing)}>Edit</button>
+        <button onClick={handleDelete}>X</button>
+      </div>
+    </div>
+  )
+}
+
+export default Person;

ui/yarn.lock

@@ -1943,6 +1943,14 @@ aws4@^1.8.0:
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.8.0.tgz#f0e003d9ca9e7f59c7a508945d7b2ef9a04a542f"
   integrity sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==
 
+axios@^0.19.0:
+  version "0.19.0"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.19.0.tgz#8e09bff3d9122e133f7b8101c8fbdd00ed3d2ab8"
+  integrity sha512-1uvKqKQta3KBxIz14F2v06AEHZ/dIoeKfbTRkK1E5oqjDnuEerLmYTgJB5AiQZHJcljpg1TuRzdjDR06qNk0DQ==
+  dependencies:
+    follow-redirects "1.5.10"
+    is-buffer "^2.0.2"
+
 axobject-query@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.0.2.tgz#ea187abe5b9002b377f925d8bf7d1c561adf38f9"
@@ -4278,6 +4286,13 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.1"
     readable-stream "^2.0.4"
 
+[email protected]:
+  version "1.5.10"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.5.10.tgz#7b7a9f9aea2fdff36786a94ff643ed07f4ff5e2a"
+  integrity sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==
+  dependencies:
+    debug "=3.1.0"
+
 follow-redirects@^1.0.0:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.6.1.tgz#514973c44b5757368bad8bddfe52f81f015c94cb"
@@ -5100,6 +5115,11 @@ is-buffer@^1.0.2, is-buffer@^1.1.5:
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
   integrity sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==
 
+is-buffer@^2.0.2:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-2.0.3.tgz#4ecf3fcf749cbd1e472689e109ac66261a25e725"
+  integrity sha512-U15Q7MXTuZlrbymiz95PJpZxu8IlipAp4dtS3wOdgPXx3mqBnslrWU14kxfHB+Py/+2PVKSr37dMAgM2A4uArw==
+
 is-builtin-module@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-builtin-module/-/is-builtin-module-1.0.0.tgz#540572d34f7ac3119f8f76c30cbc1b1e037affbe"
@@ -8281,7 +8301,7 @@ react-dev-utils@^9.0.4:
     strip-ansi "5.2.0"
     text-table "0.2.0"
 
-[email protected]:
+react-dom@^16.9.0:
   version "16.9.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.9.0.tgz#5e65527a5e26f22ae3701131bcccaee9fb0d3962"
   integrity sha512-YFT2rxO9hM70ewk9jq0y6sQk8cL02xm4+IzYBz75CQGlClQQ1Bxq0nhHF6OtSbit+AIahujJgb/CPRibFkMNJQ==
@@ -8362,7 +8382,7 @@ [email protected]:
   optionalDependencies:
     fsevents "2.0.7"
 
-[email protected]:
+react@^16.9.0:
   version "16.9.0"
   resolved "https://registry.yarnpkg.com/react/-/react-16.9.0.tgz#40ba2f9af13bc1a38d75dbf2f4359a5185c4f7aa"
   integrity sha512-+7LQnFBwkiw+BobzOF6N//BdoNw0ouwmSJTEm9cglOOmsg/TMiFHZLe2sEoN5M7LgJTj9oHH0gxklfnQe66S1w==