content: import React, { Component } from 'react';
  import { Breadcrumb, BreadcrumbItem } from 'reactstrap';
  import { Link } from 'react-router-dom';
  import { inject, observer } from 'mobx-react';
  
  import Loading from '../../../components/loading';
  
  @inject('alertStore', 'projectStore')
  @observer
  export default class ProjectList extends Component {
      componentDidMount() {
          const { alertStore, projectStore } = this.props;
  
          projectStore
              .then(response => alertStore.showSuccess(response.message))
              .catch(err => alertStore.showDanger(err.message));
      }
  
      async handleRemove(project) {
          const { alertStore, projectStore } = this.props;
  
          let response = {};
  
          if (confirm('Remove this project?')) {
              response = await projectStore.removeProject(project._id);
          }
  
          if (response.success) {
              alertStore.showSuccess(response.message);
          } else {
              alertStore.showDanger(response.message);
          }
      }
  
      render() {
          const { projectStore } = this.props;
          const { isLoading, projects } = projectStore;
  
          if (isLoading) {
              return <Loading/>;
          }
  
          return (
              <div className="project-list-component">
                  <Breadcrumb>
                      <BreadcrumbItem>
                          <Link to="/">Dashboard</Link>
                      </BreadcrumbItem>
                      <BreadcrumbItem active>Projects</BreadcrumbItem>
                  </Breadcrumb>
  
                  <div className="row mb-3">
                      <div className="col-md-8">
                          <div className="py-2" style={{ lineHeight: '1.3rem' }}>
                              <small className="text-muted">Projects found: {projects.length}</small>
                          </div>
                      </div>
                      <div className="col-md-4">
                          <Link className="btn btn-block btn-success" to="/project/new"><i className="fa fa-fw fa-plus"/> Create</Link>
                      </div>
                  </div>
  
                  <div className="row">
                      {projects.map(project =>
                          <div key={project._id} className="col-md-6">
                              <div className="card mb-3">
                                  {/*
                                  <div className="card-img-top" style={{
                                      height: '35vh',
                                      background: `url('${project.image.url}') 50% 50% / cover no-repeat`
                                  }}/>
                                  */}
  
                                  <img className="card-img-top" src={`/uploads/projects/${project._id}/${project.image.filename}`} alt=""/>
  
                                  <div className="card-body">
                                      <h4 className="card-title">{project.title}</h4>
  
                                      <p className="card-text">{project.description}</p>
                                  </div>
  
                                  <div className="card-footer bg-white">
                                      <div className="row">
                                          <div className="col-lg-6 mb-2 mb-lg-0 pt-lg-1-9">
                                              <small className="text-muted">{project.updatedAt}</small>
                                          </div>
                                          <div className="col-lg-6 text-lg-right">
                                              <Link className="btn btn-primary mr-1 mb-1 mb-lg-0" to={`/project/edit/${project._id}`}>
                                                  <i className="fa fa-fw fa-edit"/> </Link>
                                              <button className="btn btn-danger mb-1 mb-lg-0" onClick={() => this.handleRemove(project)}>
                                                  <i className="fa fa-fw fa-trash"/>
                                              </button>
                                          </div>
                                      </div>
                                  </div>
                              </div>
                          </div>,
                      )}
                  </div>
              </div>
          );
      }
  }
  