index.tsx

import React, { Component } from "react";
import { withRouter, Link, Route } from "react-router-dom";
import share from "../../../assets/img/folderActions/share.svg";
import download from "../../../assets/img/folderActions/download.svg";
import dots from "../../../assets/img/folderActions/dots.svg";
import "./styles.scss";
import folder from "./folder.svg";

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

type Props = {
  folders: FolderProps[];
};

class Folder extends Component<Props> {
  render() {
    const folders = this.props.folders;
    const name = this.props.folders.Name;
    const history = this.props.history.location.pathname;
    // console.log("PARAMSSS", this.props.history.location.pathname);
    // console.log("ccccc", this.props.match.url);
    const p = history;
    return (
      <>
        <table className="table-header" width="100%">
          <tr>
            <td width="40%" className="flex">
              <img className="folder" src={folder} alt="folder" />
              <Link
                to={{
                  pathname: `${this.props.match.url}/${name}`,
                  state: {
                    folders: this.props.folders
                  }
                }}
              >
                <p>{folders.Name}</p>
              </Link>
            </td>
            <td width="30%">
              <p>{folders.modified}</p>
            </td>
            <td width="10%">
              <p>{folders.size}</p>
            </td>
            <td width="20%">
              <div className="flex center">
                <button className="btn-icon btn-round btn btn-info btn-sm">
                  <img src={share} alt="share" />
                </button>
                <button className="iconSpacing btn-icon btn-round btn btn-info btn-sm">
                  <img src={download} alt="download" />
                </button>
                <button className="btn-icon btn-round btn btn-info btn-sm">
                  <img src={dots} alt="dots" />
                </button>
              </div>
            </td>
          </tr>
        </table>
      </>
    );
  }
}

export default withRouter(Folder);