feature: added a error store

Author: Marcelo

src/client/modules/hello_world/ui/crud/CreateAnimal.tsx

@@ -10,7 +10,8 @@ import "./main.scss";
 import { rootStoreContext } from "../../../../stores/RootStore";
 
 export const CreateAnimal: React.FunctionComponent = observer(() => {
-  const { animalsStore } = React.useContext(rootStoreContext);
+  const [submitting, setSubmitting] = React.useState(false);
+  const { animalsStore, errorStore } = React.useContext(rootStoreContext);
 
   return (
     <Mutation<CreateAnimalMutation, CreateAnimalVariables>
@@ -40,15 +41,20 @@ export const CreateAnimal: React.FunctionComponent = observer(() => {
               <button
                 className="button"
                 onClick={async () => {
+                  setSubmitting(true);
                   await mutate({
                     variables: {
                       species: animalsStore.species,
                       favoriteFood: animalsStore.favoriteFood
                     }
-                  });
+                  })
+                    .catch(error => errorStore.setErrorMessage(error.message))
+                    .finally(() => {
+                      setSubmitting(false);
+                    });
                 }}
               >
-                Submit
+                <span>{submitting ? "Submitting..." : "Submit"}</span>
               </button>
             </div>
           </form>

src/client/modules/hello_world/ui/index.tsx

@@ -1,15 +1,17 @@
 import { inject, observer } from "mobx-react";
 import * as React from "react";
-import { AnimalsStore } from "../../../stores/AnimalsStore";
+import { AnimalsStore, ErrorStore } from "../../../stores";
 import { CreateAnimal } from "./crud/CreateAnimal";
 import { ListAnimals } from "./crud/ListAnimals";
 import "./main.scss";
+import { ErrorMessage } from "./misc/ErrorMessage";
 
 interface Props {
   animalsStore?: AnimalsStore;
+  errorStore?: ErrorStore;
 }
 
-@inject("animalsStore")
+@inject("animalsStore", "errorStore")
 @observer
 export class HelloWorld extends React.Component<Props> {
   private handleCreate = () => {
@@ -27,6 +29,9 @@ export class HelloWorld extends React.Component<Props> {
   public render() {
     return (
       <>
+        {this.props.errorStore.errorMessage && (
+          <ErrorMessage errorMessage={this.props.errorStore.errorMessage} />
+        )}
         {this.props.animalsStore.helloworld && (
           <>
             <div className="hello-world">

src/client/modules/hello_world/ui/misc/ErrorMessage/index.tsx

@@ -0,0 +1,13 @@
+import * as React from "react";
+
+interface Props {
+  errorMessage: string;
+}
+
+export const ErrorMessage: React.FC<Props> = ({ errorMessage }) => {
+  return (
+    <div className="error-wrapper">
+      <span>{errorMessage}</span>
+    </div>
+  );
+};

src/client/modules/hello_world/ui/misc/ErrorMessage/main.scss

@@ -0,0 +1,8 @@
+.error-wrapper {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  text-align: center;
+  height: 40px;
+}

src/client/stores/AnimalsStore.ts

@@ -21,9 +21,7 @@ export class AnimalsStore {
   @observable public delete = false;
 
   @action public handleMutation = () => {
-    if (this.mutation) {
-      this.mutation = true;
-    }
+    this.mutation = true;
   };
   @action public handleCreate = () => {
     this.create = true;

src/client/stores/ErrorStore.ts

@@ -0,0 +1,16 @@
+import { action, observable } from "mobx";
+import { RootStore } from "./RootStore";
+
+export class ErrorStore {
+  protected rootStore: RootStore;
+
+  public constructor(rootStore: RootStore) {
+    this.rootStore = rootStore;
+  }
+
+  @observable public errorMessage = "";
+
+  @action public setErrorMessage = (errorMessage: string) => {
+    this.errorMessage = errorMessage;
+  };
+}

src/client/stores/RootStore.ts

@@ -1,14 +1,17 @@
-import { AnimalsStore } from "./AnimalsStore";
+import { AnimalsStore, ErrorStore } from ".";
 import { createContext } from "react";
 
 export class RootStore {
   public animalsStore: AnimalsStore;
+  public errorStore: ErrorStore;
 
   public constructor() {
     this.animalsStore = new AnimalsStore(this);
+    this.errorStore = new ErrorStore(this);
 
     return {
-      animalsStore: this.animalsStore
+      animalsStore: this.animalsStore,
+      errorStore: this.errorStore
     };
   }
 }

src/client/stores/index.ts

@@ -1,2 +1,3 @@
 export { AnimalsStore } from "./AnimalsStore";
 export { RootStore } from "./RootStore";
+export { ErrorStore } from "./ErrorStore";

yarn.lock

@@ -6793,12 +6793,10 @@ lodash.isequal@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
   integrity sha1-QVxEePK8wwEgwizhDtMib30+GOA=
 
-<<<<<<< HEAD
 lodash.memoize@4.x:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
   integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=
-=======
 lodash.merge@^4.6.1:
   version "4.6.2"
   resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
@@ -6808,7 +6806,6 @@ lodash.mergewith@^4.6.0:
   version "4.6.2"
   resolved "https://registry.yarnpkg.com/lodash.mergewith/-/lodash.mergewith-4.6.2.tgz#617121f89ac55f59047c7aec1ccd6654c6590f55"
   integrity sha512-GK3g5RPZWTRSeLSpgP8Xhra+pnjBC56q9FZYe1d5RN3TJ35dbkGy3YqBSMbyCrlbi+CM9Z3Jk5yTL7RCsqboyQ==
->>>>>>> 6db02bc986617364d3e8b22c134552dcf92841b8
 
 lodash.once@^4.1.1:
   version "4.1.1"
@@ -6820,30 +6817,20 @@ lodash.sortby@^4.7.0:
   resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
   integrity sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=
 
-<<<<<<< HEAD
-=======
 lodash.tail@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/lodash.tail/-/lodash.tail-4.1.1.tgz#d2333a36d9e7717c8ad2f7cacafec7c32b444664"
   integrity sha1-0jM6NtnncXyK0vfKyv7HwytERmQ=
 
->>>>>>> 6db02bc986617364d3e8b22c134552dcf92841b8
 lodash@4.17.11:
   version "4.17.11"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d"
   integrity sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==
 
-<<<<<<< HEAD
 lodash@4.17.15, lodash@^4.0.0, lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.2.0, lodash@~4.17.10:
   version "4.17.15"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
   integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
-=======
-lodash@^4.0.0, lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.3, lodash@^4.17.4, lodash@^4.2.0, lodash@~4.17.10:
-  version "4.17.14"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.14.tgz#9ce487ae66c96254fe20b599f21b6816028078ba"
-  integrity sha512-mmKYbW3GLuJeX+iGP+Y7Gp1AiGHGbXHCOh/jZmrawMmsE7MS4znI3RL2FsjbqOyMayHInjOeykW7PEajUk1/xw==
->>>>>>> 6db02bc986617364d3e8b22c134552dcf92841b8
 
 log-symbols@2.2.0:
   version "2.2.0"