Source

Home.js

//React
import React from "react";
import { Link, useNavigate } from "@reach/router";

//Components
import PreventUnload from "./PreventUnload";

//Redux
import { connect } from "react-redux";
import { startApp } from "../redux/UI/ui-actions";

//Styles
import { Button } from "react-bootstrap";

//Other
import PropTypes from "prop-types";

/**
 * Provides an introduction or instructions for the user depending on appStarted.
 * 
 * @component
 */
const Home = ({ loadedContract, appStarted, startApp }) => {
  return (
    <div>
      {appStarted && <PreventUnload />}
      {appStarted || loadedContract ? (
        <Instructions />
      ) : (
        <Introduction startApp={startApp} />
      )}
    </div>
  );
};

const mapStateToProps = (state) => {
  return {
    appStarted: state.ui.appStarted,
    loadedContract: state.contracts.loadedContract,
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    startApp: () => dispatch(startApp()),
  };
};

Home.propTypes = {
  /**
   * Loaded contract JSON.
   */
  loadedContract: PropTypes.object,

  /**
   * App started indicator.
   */
  appStarted: PropTypes.bool.isRequired,

  /**
   * Action to set appStarted === true
   */
  startApp: PropTypes.func.isRequired,
};

/**
 *  Instructions for the user.
 *
 * @component
 */
const Instructions = () => {
  const navigate = useNavigate();

  return (
    <div className="px-4 my-4">
      <div className="col-lg-6 mx-auto">
        <h3 className="instructions-title">Instructions</h3>
        <div className="my-4">
          <ul className="lead">
            <li>
              <p>
                Model the contract process at the{" "}
                <Link to={"/process-editor"}>process editor.</Link>
              </p>
              <p className="instructions-description">
                Edit process model elements and their properties. Check model
                errors and warnings. Export the model.
              </p>
            </li>
            <li>
              <p>
                Edit{" "}
                <Link to={"/activity-properties"}>activity properties</Link>.
              </p>
              <p className="instructions-description">
                Edit form fields, a DMN model or script depending on the
                activity type.
              </p>
            </li>
            <li>
              <p>
                Edit <Link to={"/data-model"}>data model</Link>.
              </p>
              <p className="instructions-description">
                Edit entities and its primitive properties and reference
                properties.
              </p>
            </li>
            <li>
              <p>
                Export .dascontract file (XML) or image (SVG) at the{" "}
                <Link to={"/process-editor"}>process editor</Link>.
              </p>
            </li>
          </ul>
        </div>

        <div className="d-grid gap-2 d-sm-flex justify-content-sm-center">
          <Button
            onClick={() => navigate("process-editor")}
            className="px-4 mt-2"
            variant="outline-primary"
            size="lg"
          >
            Edit process
          </Button>
        </div>
      </div>
    </div>
  );
};

/**
 *  Introduction for the user.
 *
 * @component
 */
const Introduction = ({ startApp }) => {
  return (
    <div className="px-4 py-5 my-5 text-center">
      <div className="col-lg-6 mx-auto">
        <p className="lead mb-4">
          A visual editor to design and generate model-driven smart contracts
          via the DasContract v2.0 visual domain specific language. Currently
          supports the Solidity programming language.
        </p>
        <div className="d-grid gap-2 d-sm-flex justify-content-sm-center">
          <Button
            onClick={() => startApp()}
            className="px-4"
            variant="outline-primary"
            size="lg"
          >
            Start
          </Button>
        </div>
      </div>
    </div>
  );
};

Introduction.propTypes = {
  /**
   * Action to set appStarted === true
   */
  startApp: PropTypes.func.isRequired,
};
export default connect(mapStateToProps, mapDispatchToProps)(Home);