ProjectProfile

import React, { Component } from "react";
import { RouteComponentProps, withRouter } from "react-router-dom";
import Folder from "./Folder/index";
import File from "./File/index";
import { Card, CardBody } from "reactstrap";
import "./styles.scss";

type FileInfo = {
  name: string;
  modified: string;
  size: string;
};
type FolderInfo = FileInfo & { files: FileInfo[] };

type Props = RouteComponentProps<MyRouteParams> & {
  folders: FolderInfo;
  name: string;
  files: FolderInfo;
  client: string;
  type: string;
};
type MyRouteParams = {
  name: string;
  client: string;
};

class ProjectProfile extends Component<Props> {
  constructor(props: Props) {
    super(props);
    this.state = {
      name: this.props.match.params.name,
      folders: this.props.folders,
      files: this.props.files,
      client: this.props.match.params.client,
      type: this.props.type
    };
  }

  render() {
    const { folders, files } = this.props.location.state;
    console.log("noidea", this.props.location.pathname);
    console.log("PATHNAME", this.props.match.path);
    return (
      <>
        <span onClick={() => this.props.history.goBack()}>Back</span>
        <table className="table-header" width="100%">
          <tr className="gray">
            <td className="header forty">
              Name <i class="fas fa-sort" />
            </td>
            <td className="header thirty">
              Modified <i class="fas fa-sort" />
            </td>
            <td className="header ten">
              Size <i class="fas fa-sort" />
            </td>
            <td className="header twenty"> </td>
          </tr>
        </table>

        <Card>
          <CardBody className="card-height">
            {folders.map(f:any => (
              <Folder folder={f} />
            ))}
            {files.map(f => (
              <File file={f} />
            ))}
          </CardBody>
        </Card>
      </>
    );
  }
}

export default withRouter(ProjectProfile);