src/views/data-explorer/data-explorer.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import * as React from 'react';
   6 import { RouteComponentProps } from 'react-router';
   7 import { Project } from '../../models/project';
   8 import { ProjectState, findTreeItem } from '../../store/project/project-reducer';
   9 import { RootState } from '../../store/store';
  10 import { connect, DispatchProp } from 'react-redux';
  11 import { push } from 'react-router-redux';
  12 import projectActions from "../../store/project/project-action";
  13 import { DataColumns } from "../../components/data-table/data-table";
  14 import DataExplorer, { DataExplorerContextActions } from "../../views-components/data-explorer/data-explorer";
  15 import { mapProjectTreeItem } from "./data-explorer-selectors";
  16 import { DataItem } from "../../views-components/data-explorer/data-item";
  17
  18 interface DataExplorerViewDataProps {
  19     projects: ProjectState;
  20 }
  21
  22 type DataExplorerViewProps = DataExplorerViewDataProps & RouteComponentProps<{ name: string }> & DispatchProp;
  23 type DataExplorerViewState = DataColumns<Project>;
  24
  25 class DataExplorerView extends React.Component<DataExplorerViewProps, DataExplorerViewState> {
  26
  27     render() {
  28         const project = findTreeItem(this.props.projects, this.props.match.params.name);
  29         const projectItems = project && project.items || [];
  30         return (
  31             <DataExplorer
  32                 items={projectItems.map(mapProjectTreeItem)}
  33                 onItemClick={this.goToProject}
  34                 contextActions={this.contextActions}
  35             />
  36         );
  37     }
  38
  39     contextActions: DataExplorerContextActions = {
  40         onAddToFavourite: console.log,
  41         onCopy: console.log,
  42         onDownload: console.log,
  43         onMoveTo: console.log,
  44         onRemove: console.log,
  45         onRename: console.log,
  46         onShare: console.log
  47     };
  48
  49     goToProject = (item: DataItem) => {
  50         this.props.dispatch(push(`/project/${item}`));
  51         this.props.dispatch(projectActions.TOGGLE_PROJECT_TREE_ITEM(item.uuid));
  52     }
  53 }
  54
  55 export default connect(
  56     (state: RootState) => ({
  57         projects: state.projects
  58     })
  59 )(DataExplorerView);