React Class Component : src/pages/heroes/Heroes.tsx

Heroes.tsx

import * as React from "react";
import { inject, observer } from "mobx-react";
import HeroStore from "./../../stores/HeroStore";
import { HeroModel } from "../../models/hero.model";
import { Link } from "react-router-dom";
import { toJS } from "mobx";
import NewItemForm from "../../common-components/NewItemForm";

export interface Props {
  HeroStore: typeof HeroStore;
}

export interface State {
  hero: HeroModel;
  isShowNewItemForm: boolean;
}

class Heroes extends React.Component<Props, State> {
  state = {
    isShowNewItemForm: false,
    hero: {
      id: "",
      firstName: "",
      lastName: "",
      house: "",
      knownAs: ""
    } as HeroModel
  };
  async componentDidMount() {
    const { HeroStore } = this.props;
    await HeroStore.loadHeroes();  // using the HeroStore's function loadHeroes. The HeroStore can be found at the bottom of this file.
  }

  removeItem = async (hero: HeroModel) => {
    const isConfirmed = window.confirm(`Delete ${hero.name}?`);
    if (!isConfirmed) return;
    await HeroStore.deleteHero(hero); // using HeroStore's function deleteHero. The HeroStore can be found at the bottom of this file.
  };

  onChange = ({ currentTarget: input }: React.FormEvent<HTMLInputElement>) => {
    const { name, value } = input;
    this.setState({
      hero: {
        ...this.state.hero,
        [name]: value
      }
    });

    // OR
    // const newHero = { ...this.state.hero };
    // const { name, value } = input;
    // newHero[name] = value;
    // this.setState({ hero: newHero });
  };

  onSubmit = async (event: React.SyntheticEvent) => {
    event.preventDefault();
    await HeroStore.postHero(this.state.hero)
      /* .then(() => HeroStore.loadHeroes());
       is not necessary if you don't care about the id of the new created item
       An id is required when deleting or getting an item */
      .then(() => HeroStore.loadHeroes());

    const { isShowNewItemForm } = this.state;
    this.setState({ isShowNewItemForm: !isShowNewItemForm });
  };

  showNewItemForm = () => {
    const { isShowNewItemForm } = this.state;
    this.setState({ isShowNewItemForm: !isShowNewItemForm });
  };

  public render() {
        /* using the 2 states Hero[] heroes and the string error.
           The HeroStore can be found at the bottom of this file. */
    const { error, allHeroes } = HeroStore;
    return (
      <>
        <NewItemForm
          isShowNewItemForm={this.state.isShowNewItemForm}
          handleOnChange={this.onChange}
          handleOnSubmit={this.onSubmit}
          handleShowNewItemForm={this.showNewItemForm}
        />
        {error && (
          <div
            className="col-3 col-md-3 offset-9 alert alert-info"
            role="alert"
          >
            Something wrong happened: {toJS(error)}
          </div>
        )}
        {allHeroes.map(item => (
          <div key={item.id} className="card mt-3" style={{ width: "auto" }}>
            <div className="card-header">
              <h3 className="card-title">
                {item.firstName} {item.lastName}
              </h3>
              <h5 className="card-subtitle mb-2 text-muted">{item.house}</h5>
              <p className="card-text">{item.knownAs}</p>
            </div>
            <section className="card-body">
              <div className="row">
                <button
                  onClick={() => this.removeItem(item)}
                  className="btn btn-outline-danger card-link col text-center"
                >
                  <span className="fas fa-eraser  mr-2" />
                  Delete
                </button>
                <Link
                  to={`/edit-hero/${item.id}`}
                  className="btn btn-outline-primary card-link col text-center"
                >
                  <span className="fas fa-edit  mr-2" />
                  Edit
                </Link>
              </div>
            </section>
          </div>
        ))}
      </>
    );
  }
}

 /* this is how you use the HeroStore by
    injecting it to your component. 
    The HeroStore can be found in the Provider */
export default inject("HeroStore")(observer(Heroes));