text: import React, { useEffect, useState } from "react";
  import "./Dashboard.scss";
  
  import { Col, Row, Spinner } from "react-bootstrap";
  import { useSelector } from "react-redux";
  
  import { ProjectColumn } from "./ProjectColumn/ProjectColumn";
  import { IssueColumn } from "./IssueColumn/IssueColumn";
  import { TimelineColumn } from "components/TimelineColumn/TimelineColumn";
  import { useHistory } from "react-router-dom";
  
  const Dashboard = () => {
    const projects = useSelector((state) => state.projects.data);
    const user = useSelector((state) => state.user);
  
    const [isLoading, setIsLoading] = useState(true);
  
    const history = useHistory();
  
    useEffect(() => {
      if (isLoading) {
        if (user.info.accessToken === "") {
          history.push("/");
        }
      }
      return () => {
        setIsLoading(false);
      };
    });
  
    // Wait if user or projects hasn't finished being fetched from store
    if (user.info.accessToken === "" || projects === undefined) {
      return <Spinner animation="border" variant="primary" />;
    } else {
      // If there are timelines that exist, include timeline column
      if (user.timelines.data.length > 0) {
        return (
          <React.Fragment>
            {/* Wrapper for entire page*/}
            <div className="dashboard">
              <Row style={{ width: "1000px" }}>
                <Col sm={6}>
                  {/* Project column */}
                  <ProjectColumn
                    userProjects={user.projects.data}
                    projects={projects}
                  />
  
                  {/* Assigned to me column*/}
                  <IssueColumn
                    header="Assigned to Me"
                    userIssues={user.assignedIssues.data}
                  />
  
                  {/* Column for watched issues*/}
                  <IssueColumn
                    header="Watched Issues"
                    userIssues={user.watchedIssues.data}
                  />
                </Col>
                <Col sm={6}>
                  <TimelineColumn timelines={user.timelines.data} />
                </Col>
              </Row>
            </div>
          </React.Fragment>
        );
      }
      // Else no timelines exist, don't include timeline column
      else {
        return (
          <React.Fragment>
            {/* Wrapper for entire page*/}
            <div className="dashboard">
              <Row
                style={{
                  display: "flex",
                  justifyContent: "center",
                  width: "1000px",
                }}
              >
                <Col sm={6}>
                  {/* Project column */}
                  <ProjectColumn
                    userProjects={user.projects.data}
                    projects={projects}
                  />
  
                  {/* Assigned to me column*/}
                  <IssueColumn
                    header="Assigned to Me"
                    userIssues={user.assignedIssues.data}
                  />
  
                  {/* Column for watched issues*/}
                  <IssueColumn
                    header="Watched Issues"
                    userIssues={user.watchedIssues.data}
                  />
                </Col>
              </Row>
            </div>
          </React.Fragment>
        );
      }
    }
  };
  
  export default Dashboard;
  