sdnr/wt-odlux/odlux/apps/demoApp/src/views/authorsList.tsx

   1 /**
   2  * ============LICENSE_START========================================================================
   3  * ONAP : ccsdk feature sdnr wt odlux
   4  * =================================================================================================
   5  * Copyright (C) 2019 highstreet technologies GmbH Intellectual Property. All rights reserved.
   6  * =================================================================================================
   7  * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
   8  * in compliance with the License. You may obtain a copy of the License at
   9  *
  10  * http://www.apache.org/licenses/LICENSE-2.0
  11  *
  12  * Unless required by applicable law or agreed to in writing, software distributed under the License
  13  * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
  14  * or implied. See the License for the specific language governing permissions and limitations under
  15  * the License.
  16  * ============LICENSE_END==========================================================================
  17  */
  18 import React from 'react';
  19 import { withRouter, RouteComponentProps } from 'react-router-dom';
  20
  21 import Table from '@mui/material/Table';
  22 import TableBody from '@mui/material/TableBody';
  23 import TableCell from '@mui/material/TableCell';
  24 import TableHead from '@mui/material/TableHead';
  25 import TableRow from '@mui/material/TableRow';
  26 import Paper from '@mui/material/Paper'; // means border
  27
  28 import { connect } from '../../../../framework/src/flux/connect';
  29
  30 import { loadAllAuthorsAsync } from '../actions/authorActions';
  31 import { IAuthor } from '../models/author';
  32
  33 interface IAuthorsListProps {
  34   authors: IAuthor[];
  35   busy: boolean;
  36   onLoadAllAuthors: () => void;
  37 }
  38
  39 class AuthorsListComponent extends React.Component<RouteComponentProps & IAuthorsListProps> {
  40
  41   render(): JSX.Element {
  42     const { authors, busy } = this.props;
  43     return busy
  44       ? (
  45         <Paper>
  46           Loading
  47         </Paper>
  48       )
  49       : (
  50       <Paper>
  51         <Table padding="normal" >
  52           <TableHead>
  53             <TableRow>
  54               <TableCell align="right">Id</TableCell>
  55               <TableCell >First Name</TableCell>
  56               <TableCell >Last Name</TableCell>
  57             </TableRow>
  58           </TableHead>
  59           <TableBody>
  60             {authors.map(author => (
  61               <TableRow key={author.id} onClick={(_e) => this.editAuthor(author)}>
  62                 <TableCell>{author.id}</TableCell>
  63                 <TableCell>{author.firstName}</TableCell>
  64                 <TableCell>{author.lastName}</TableCell>
  65               </TableRow>
  66             ))}
  67           </TableBody>
  68         </Table>
  69       </Paper>
  70       );
  71   }
  72
  73   public componentDidMount() {
  74     this.props.onLoadAllAuthors();
  75   }
  76
  77   private editAuthor = (author: IAuthor) => {
  78     if (author) this.props.history.push(this.props.match.path + '/' + author.id);
  79   };
  80 }
  81
  82 export const AuthorsList = withRouter(
  83   connect(
  84     ({ demo: state }) => ({
  85       authors: state.listAuthors.authors,
  86       busy: state.listAuthors.busy,
  87     }),
  88     (dispatcher) => ({
  89       onLoadAllAuthors: () => {
  90         dispatcher.dispatch(loadAllAuthorsAsync);
  91       },
  92     }))(AuthorsListComponent));
  93 export default AuthorsList;