Project/projectreact/src/pages/projects.js

import { connect } from "react-redux";
import { Link } from "react-router-dom";

const Projects = ({ snippets }) => {
  return snippets ? (
    <div>
      <Link to="/">
        <button className="float-left btn-secondary d-inline-block mt-2 ml-2">
          Back to Main Page
        </button>
      </Link>
      <br /> <br />
      <div style={{ alignItems: "center", textAlign: "center" }}>
        <Link to="/">
          <button className="btn btn-success">New project</button>
        </Link>
      </div>
      {snippets?.map((key, index) => (
        <div style={{ textAlign: "center", alignItems: "center" }}>
          <div className="card w-50 ml-auto mr-auto mt-3 mb-5">
            <div className="card-body" style={{ textAlign: "center" }}>
              <h3 className="card-title mb-4 text-info">
                {snippets?.[index]?.title || "Project without name"}
              </h3>
              <p className="card-text">
                <span className="text-muted">Description</span>&nbsp;
                {snippets?.[index]?.description || ""}
              </p>
              <Link to={"/project/" + snippets?.[index]?._id}>
                <button className="btn btn-primary mt-3">Open project</button>
              </Link>
            </div>
          </div>
        </div>
      ))}
    </div>
  ) : (
    <div>
      <Link to="/">
        <button className="float-left btn-secondary d-inline-block mt-2 ml-2">
          Back to Main Page
        </button>
      </Link>{" "}
      <br /> <br />
      <div className="d-flex justify-content-center">
        <div
          className="spinner-border mt-3"
          style={{ width: "10rem", height: "10rem" }}
          role="status"
        >
          <span className="sr-only">Loading...</span>
        </div>
      </div>
    </div>
  );
};

const CProjects = connect((state) => ({
  snippets: state?.promise?.findSnippet?.payload?.data?.SnippetFind,
}))(Projects);
export default CProjects;