src/views/project-explorer/project-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 DataExplorer, { DataExplorerProps } from "../../components/data-explorer/data-explorer";
   7 import { RouteComponentProps } from 'react-router';
   8 import { Project } from '../../models/project';
   9 import { ProjectState, findTreeItem } from '../../store/project/project-reducer';
  10 import { RootState } from '../../store/store';
  11 import { connect, DispatchProp } from 'react-redux';
  12 import { push } from 'react-router-redux';
  13 import projectActions from "../../store/project/project-action";
  14 import { Typography } from '@material-ui/core';
  15 import { Column } from '../../components/data-explorer/column';
  16 import ProjectExplorer from '../../components/project-explorer/project-explorer';
  17
  18 interface ProjectExplorerViewDataProps {
  19     projects: ProjectState;
  20 }
  21
  22 type ProjectExplorerViewProps = ProjectExplorerViewDataProps & RouteComponentProps<{ name: string }> & DispatchProp;
  23
  24 type ProjectExplorerViewState = Pick<DataExplorerProps<Project>, "columns">;
  25
  26 class ProjectExplorerView extends React.Component<ProjectExplorerViewProps, ProjectExplorerViewState> {
  27
  28     render() {
  29         const project = findTreeItem(this.props.projects, this.props.match.params.name);
  30         const projectItems = project && project.items || [];
  31         return (
  32             <ProjectExplorer
  33                 projects={projectItems.map(item => item.data)}
  34                 onProjectClick={this.goToProject}
  35             />
  36         );
  37     }
  38
  39     goToProject = (project: Project) => {
  40         this.props.dispatch(push(`/project/${project.uuid}`));
  41         this.props.dispatch(projectActions.TOGGLE_PROJECT_TREE_ITEM(project.uuid));
  42     }
  43
  44 }
  45
  46 export default connect(
  47     (state: RootState) => ({
  48         projects: state.projects
  49     })
  50 )(ProjectExplorerView);