parent.tsx

import React from "react";
// reactstrap components
import ReactTable from "../Tables/ReactTable.jsx";
import { Card, CardBody, Row, Col } from "reactstrap";
import SingleProject from "../../components/Project";
import ProjectProfile from "../../components/ProjectProfile";
import { Route } from "react-router-dom";

import "./styles.scss";
import { connect } from "react-redux";
import { DispatchProject, IProjectActions } from "@base/Projects";
import { projectSelector } from "@base/Projects/Selectors";
import { RouteComponentProps } from "react-router-dom";
import { AuthorizedProjectViewModel, Project, Folder } from "@api-portal";
import CreateProject from "./CreateProject";
import CreateFolder from "./CreateFolder";
import SubHeader from "./SubHeader";
type RouteProps = RouteComponentProps;

interface Props extends RouteProps, IProjectActions {
  props: AuthorizedProjectViewModel;
  projects: AuthorizedProjectViewModel[];
}

class Projects extends React.Component<Props> {
  componentDidMount() {
    this.props.fetchProjects();
  }

  newProject = (e: string) => {
    const project: Project = { name: e };
    this.props.createProject(project);
  };

  newFolder = (id: string, name: string) => {
    console.log("new  folder id and name", id, name);
    const folder: Folder = { projectId: id, name: name };
    this.props.createFolder(folder);
  };

  // onDrop = files => {
  //   files.map(file => {
  //     //initialize Filereader browser API
  //     const reader = new FileReader();
  //     reader.onload = e => {
  //       // this.setState(prevState => ({
  //       //   ...prevState,
  //       //   files: [...prevState.files, { id: cuid(), src: e.target.result }]
  //       // }));
  //     };

  //     reader.readAsDataURL(file);
  //     return file;
  //   });
  // };

  render() {
    const path = this.props.location.pathname;
    const split = path.split("/");
    const { projects } = this.props;
    const root = this.props.match.path;

    return (
      <>
        <div className="content">
          <div className="subHeader">
            <SubHeader />>
            <div className="two">
              {path === "/admin/projects" ? (
                <>
                  <CreateProject create={this.newProject} />
                  <button className="btn-round btn btn-primary">UPLOAD</button>
                </>
              ) : (
                <>
                  <CreateFolder create={this.newFolder} />
                  <button className="btn-round btn btn-primary">UPLOAD</button>
                </>
              )}
            </div>
          </div>

          <Row>
            <Col xs={12} md={12}>
              {this.props.location.pathname === "/admin/projects" && (
                <>
                  <table className="table-header">
                    <tr className="gray">
                      <td className="header forty">
                        Project <i className="fas fa-sort" />
                      </td>
                      <td className="header thirty">
                        Client <i className="fas fa-sort" />
                      </td>
                      <td className="header ten">
                        Type <i className="fas fa-sort" />
                      </td>
                      <td className="header twenty"> </td>
                    </tr>
                  </table>
                  <Card>
                    <CardBody className="card-height">
                      {projects.map(project => (
                        <SingleProject project={project} />
                      ))}
                    </CardBody>
                  </Card>
                </>
              )}

              <Route path={`${root}/:id/:folder`} component={ProjectProfile} />
              <Route exact path={`${root}/:id/`} component={ProjectProfile} />
            </Col>
          </Row>
        </div>
      </>
    );
  }
}

export default connect(
  projectSelector,
  DispatchProject
)(Projects);