HomeWork1/React/CodePen/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">
                    <span>&#8617;</span>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" style = {{boxShadow:'0px 5px 10px 2px rgba(34, 60, 80, 0.2)'}}>
                        <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">
                    <span>&#8617;</span>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;