github.com/muhammedhassanm/blockchain@v0.0.0-20200120143007-697261defd4d/blockapps-ba-master/ui/src/scenes/Projects/components/ProjectList/index.js (about)

     1  import React, { Component } from 'react';
     2  import { connect } from 'react-redux';
     3  import { browserHistory } from 'react-router';
     4  import { FormattedNumber, FormattedDate } from 'react-intl';
     5  
     6  import Card from 'react-md/lib/Cards/Card';
     7  import CardTitle from 'react-md/lib/Cards/CardTitle';
     8  import DataTable from 'react-md/lib/DataTables/DataTable';
     9  import TableHeader from 'react-md/lib/DataTables/TableHeader';
    10  import TableBody from 'react-md/lib/DataTables/TableBody';
    11  import TableRow from 'react-md/lib/DataTables/TableRow';
    12  import TableColumn from 'react-md/lib/DataTables/TableColumn';
    13  import mixpanel from 'mixpanel-browser';
    14  import { STATES } from '../../../../constants';
    15  import { fetchProjectList } from './project-list.actions';
    16  import '../../Responsive-Grid.css'
    17  
    18  class ProjectList extends Component {
    19  
    20    componentWillMount() {
    21      const listType = this.props['listType'];
    22      this.props.fetchProjectList(listType, this.props.login['username']);
    23    }
    24  
    25    handleProjectClick = function (e, projectName) {
    26      e.stopPropagation();
    27      mixpanel.track('project_click');
    28      browserHistory.push(`/projects/${encodeURI(projectName)}`);
    29    };
    30  
    31    render() {
    32  
    33      const projects = this.props.projects;
    34      const projectRows = projects.length !== 0 ? projects.map(
    35        (project, index) =>
    36          <TableRow
    37            key={index}
    38            onClick={(e) => this.handleProjectClick(e, project.name)}
    39            style={{ cursor: 'pointer' }}
    40          >
    41            <TableColumn data-th="Created">
    42              {
    43                project.created
    44                  ? <FormattedDate
    45                    value={new Date(project.created)}
    46                    day="numeric"
    47                    month="long"
    48                    year="numeric" />
    49                  : ''
    50              }
    51            </TableColumn>
    52            <TableColumn data-th="Name">
    53              <span>{project.name ? project.name : ''}</span>
    54            </TableColumn>
    55            <TableColumn data-th="Desired Price">
    56              {project.price
    57                ? <FormattedNumber
    58                  value={project.price}
    59                  style="currency" //eslint-disable-line
    60                  currency="USD" />
    61                : ''
    62              }
    63  
    64            </TableColumn>
    65            <TableColumn data-th="Deliver by">
    66              {
    67                project.targetDelivery
    68                  ? <FormattedDate
    69                    value={new Date(project.targetDelivery)}
    70                    day="numeric"
    71                    month="long"
    72                    year="numeric" />
    73                  : ''
    74              }
    75            </TableColumn>
    76            {/*<TableColumn>*/}
    77            {/*{*/}
    78            {/*project.deliveryAddress && project.deliveryAddress.city && project.deliveryAddress.state*/}
    79            {/*? project.deliveryAddress.city + ', ' + project.deliveryAddress.state*/}
    80            {/*: ''*/}
    81            {/*}*/}
    82            {/*</TableColumn>*/}
    83            <TableColumn data-th="Status">
    84              <span>{parseInt(project.state, 10) ? STATES[parseInt(project.state, 10)].state : ''}</span>
    85            </TableColumn>
    86          </TableRow>
    87      ) :
    88        <TableRow>
    89          <TableColumn>
    90            <i> No projects to show! </i>
    91          </TableColumn>
    92        </TableRow>
    93        ;
    94  
    95      const projectsTable =
    96        <Card tableCard className="md-cell md-cell--12">
    97          <CardTitle title={this.props.listTitle} />
    98          <DataTable className="rwd-table" plain>
    99            <TableHeader>
   100              <TableRow autoAdjust={false}>
   101                <TableColumn>Created</TableColumn>
   102                <TableColumn>Name</TableColumn>
   103                <TableColumn>Desired Price</TableColumn>
   104                <TableColumn>Deliver by</TableColumn>
   105                {/*<TableColumn>Location</TableColumn>*/}
   106                <TableColumn>Status</TableColumn>
   107              </TableRow>
   108            </TableHeader>
   109            <TableBody>
   110              {projectRows}
   111            </TableBody>
   112          </DataTable>
   113        </Card>
   114  
   115      return (
   116        <div>
   117          {projectsTable}
   118        </div>
   119      )
   120    }
   121  }
   122  
   123  function mapStateToProps(state, ownProps) {
   124    return {
   125      projects: state.projects.projects[ownProps.listType],
   126      login: state.login,
   127    };
   128  }
   129  
   130  export default connect(mapStateToProps, { fetchProjectList })(ProjectList);