Testing env and error handling improved.

Author: DovydasNavickas

src/app.scss

@@ -7,6 +7,38 @@ body,
     flex: 1 0 auto;
 }
 
+.error {
+    background: lighten($color: red, $amount: 45);
+    padding: 15px;
+    margin: 10px;
+    margin-right: 12px;
+    border: 1px solid lighten($color: red, $amount: 25);
+    font-family: "Open Sans", sans-serif;
+    font-size: 18px;
+    width: 100%;
+
+    > * {
+        padding-top: 5px;
+    }
+
+    .disclaimer {
+        font-style: italic;
+        font-size: 16px;
+    }
+
+    .message {
+        font-weight: bold;
+    }
+
+    .component-stack {
+        font-size: 16px;
+
+        pre {
+            padding-top: 3px;
+        }
+    }
+}
+
 .forms,
 .store,
 .store-result {
@@ -16,9 +48,28 @@ body,
 .forms {
     flex: 1 0 auto;
     font-family: "Open Sans", sans-serif;
+    font-size: 16px;
 
     input {
+        font-size: 16px;
         font-family: "Open Sans", sans-serif;
+        padding-left: 4px;
+        width: 98%;
+    }
+
+    button {
+        font-size: 16px;
+        background: lightgrey;
+        border: 1px solid #ccc;
+        color: black;
+        padding: 5px 10px;
+        border-radius: 5px;
+        width: 100%;
+        margin-top: 5px;
+
+        &:hover {
+            background: lighten($color: lightgrey, $amount: 5);
+        }
     }
 }
 

src/app.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, ErrorInfo } from "react";
 import ReactDOM from "react-dom";
 import { Test } from "./components";
 import { TextField } from "./components/text-field";
@@ -10,7 +10,7 @@ import "./reset.scss";
 import "./app.scss";
 
 const store = new GroupStoreMutable();
-const App = () => {
+const Test = () => {
     const forceUpdate = useForceUpdate();
     useEffect(() => {
         const listener = () => {
@@ -34,18 +34,22 @@ const App = () => {
             <div className="forms">
                 <GroupContext.Provider value={groupContext}>
                     <div>
+                        <button onClick={() => setShow(!show)}>
+                            {!show ? "Mount" : "Unmount"}
+                        </button>
                         <label>
-                            Imported:
+                            Last name
                             {show ? (
                                 <TextField
-                                    name="firstName"
-                                    initialValue="Test"
+                                    name="lastName"
+                                    initialValue="Smith"
                                 />
                             ) : null}
                         </label>
-                        <button onClick={() => setShow(!show)}>
-                            {!show ? "Mount" : "Unmount"}
-                        </button>
+                        <label>
+                            First name
+                            <TextField name="firstName" initialValue="John" />
+                        </label>
                     </div>
                 </GroupContext.Provider>
             </div>
@@ -72,4 +76,43 @@ const App = () => {
     );
 };
 
+interface State {
+    error?: Error;
+    info?: ErrorInfo;
+}
+
+class App extends React.Component {
+    public state: State = {};
+
+    public componentDidCatch(error: Error, info: ErrorInfo) {
+        this.setState(() => ({
+            error: error,
+            info: info
+        }));
+    }
+
+    public render(): JSX.Element {
+        const { error } = this.state;
+        if (error != null) {
+            const info = this.state.info!;
+            console.warn(error.message);
+            console.log(info);
+            return (
+                <div className="error">
+                    <p className="disclaimer">
+                        Oops! An error has occurred! Here’s what we know…
+                    </p>
+                    <p className="message">{error.message}</p>
+                    <p className="component-stack">
+                        Component stack:
+                        <pre>{info.componentStack.substr(1)}</pre>
+                    </p>
+                </div>
+            );
+        }
+
+        return <Test />;
+    }
+}
+
 ReactDOM.render(<App />, document.getElementById("root"));

src/stores/group-store.ts

@@ -32,7 +32,7 @@ export class GroupStoreMutable extends TinyEmitter<Callback> {
         initialValue: string
     ): void {
         if (this.fields[id] != null) {
-            throw new Error(`Field with id ${id} is already registered.`);
+            throw new Error(`Field with an id '${id}' is already registered.`);
         }
 
         const newField: Field = {