|
1 |
| -import React, { Component } from 'react'; |
2 |
| -import { Paper, Typography, Table, TableContainer, TableHead, TableBody, TableRow, TableCell, Container} from '@material-ui/core'; |
3 |
| -import { withStyles } from '@material-ui/core/styles'; |
| 1 | +import React, {Component} from 'react'; |
| 2 | +import { |
| 3 | + Paper, |
| 4 | + Typography, |
| 5 | + Table, |
| 6 | + TableContainer, |
| 7 | + TableHead, |
| 8 | + TableBody, |
| 9 | + TableRow, |
| 10 | + TableCell, |
| 11 | + Container |
| 12 | +} from '@material-ui/core'; |
| 13 | +import {withStyles} from '@material-ui/core/styles'; |
4 | 14 | import styles from "./styles/Adoptions.module.css";
|
5 | 15 | import "./styles/table.css";
|
6 | 16 | import _ from 'lodash';
|
| 17 | +import moment from "moment"; |
7 | 18 |
|
8 | 19 | /* I don't khow, how to remove it. So I changed background-color on 'initial' */
|
9 |
| -const StyledTableCell = withStyles((theme)=>({ |
10 |
| - head:{ |
| 20 | +const StyledTableCell = withStyles((theme) => ({ |
| 21 | + head: { |
11 | 22 | backgroundColor: 'initial', // here
|
12 | 23 | fontWeight: 600,
|
13 | 24 | }
|
14 | 25 | }))(TableCell);
|
15 | 26 |
|
16 |
| -const StyledTableRow = withStyles((theme)=>({ |
17 |
| - root:{ |
18 |
| - '&:nth-of-type(even)':{ |
| 27 | +const StyledTableRow = withStyles((theme) => ({ |
| 28 | + root: { |
| 29 | + '&:nth-of-type(even)': { |
19 | 30 | backgroundColor: 'initial', // and here
|
20 | 31 | }
|
21 | 32 | }
|
22 | 33 | }))(TableRow);
|
23 | 34 |
|
24 |
| - |
| 35 | +const PET_COUNT = 3; |
25 | 36 |
|
26 | 37 | class Adoptions extends Component {
|
| 38 | + constructor(props) { |
| 39 | + super(props); |
| 40 | + } |
27 | 41 |
|
28 |
| - getAnimalIds() { |
29 |
| - let result = []; |
| 42 | + getLatestPets(petList) { |
| 43 | + let retVal; |
30 | 44 |
|
31 |
| - let animal_ids = _.get(this.props, 'adoptions[0].animal_ids'); |
32 |
| - if(animal_ids) { |
33 |
| - result = _.filter(animal_ids.split("'"), item => { |
34 |
| - return _.isNaN(_.parseInt(item)) !== true; |
35 |
| - }) |
36 |
| - } |
| 45 | + retVal = petList.slice(0, PET_COUNT); |
| 46 | + |
| 47 | + return retVal; |
| 48 | + } |
37 | 49 |
|
38 |
| - return result; |
| 50 | + getAnimalAge(epochTime) { |
| 51 | + let dateOfBirth = moment(epochTime * 1000); |
| 52 | + return moment().diff(dateOfBirth, 'years'); |
39 | 53 | }
|
40 | 54 |
|
41 | 55 | render() {
|
42 | 56 | // todo: update when we add pet info
|
43 | 57 | // todo: clean array of animal_id
|
44 |
| - const numAdoptions = _.size(this.props.adoptions); |
45 |
| - return (<Container className={styles.adoptions} style={{"marginTop":"1em"}}> |
46 |
| - <Typography className={styles.adoptions_title} variant='h4'>Adoption/Foster Records {(numAdoptions > 3) && "(Showing latest 3 out of " + numAdoptions + ")"}</Typography> |
47 |
| - <TableContainer className="main_table_container" style={{"marginTop":"1em"}} component={Paper} variant='outlined'> |
48 |
| - <Table className="main_table"> |
49 |
| - <TableHead> |
50 |
| - <TableRow> |
51 |
| - <StyledTableCell align="center">Name</StyledTableCell> |
52 |
| - <StyledTableCell align="center">Adoption Type</StyledTableCell> |
53 |
| - <StyledTableCell align="center">Adoption Subtype</StyledTableCell> |
54 |
| - <StyledTableCell align="center">Animal Type</StyledTableCell> |
55 |
| - <StyledTableCell align="center">Breed</StyledTableCell> |
56 |
| - <StyledTableCell align="center">Age</StyledTableCell> |
57 |
| - <StyledTableCell align="center">Photo</StyledTableCell> |
58 |
| - </TableRow> |
59 |
| - </TableHead> |
60 |
| - <TableBody> |
61 |
| - {_.map(this.props.adoptions, (adoptionInfo, index) => { |
62 |
| - const photoLink = adoptionInfo["animal_details"]["Photos"][0] |
63 |
| - const photo = <img src={photoLink} style={{"maxWidth": "100px"}}/>; |
64 |
| - return <StyledTableRow key={adoptionInfo["Time"] + index}> |
65 |
| - <TableCell align="center">{adoptionInfo["animal_details"]["Name"]}</TableCell> |
| 58 | + const numOfPets = _.size(this.props.adoptions); |
| 59 | + const latestPets = this.getLatestPets(this.props.adoptions); |
| 60 | + |
| 61 | + return (<Container className={styles.adoptions} style={{"marginTop": "1em"}}> |
| 62 | + <Typography className={styles.adoptions_title} variant='h4'>Adoption/Foster |
| 63 | + Records {(numOfPets > 3) && "(Showing 3 Pets out of " + numOfPets + ")"}</Typography> |
| 64 | + <TableContainer className="main_table_container" style={{"marginTop": "1em"}} component={Paper} |
| 65 | + variant='outlined'> |
| 66 | + <Table className="main_table"> |
| 67 | + <TableHead> |
| 68 | + <TableRow> |
| 69 | + <StyledTableCell align="center">Name</StyledTableCell> |
| 70 | + <StyledTableCell align="center">Animal Type</StyledTableCell> |
| 71 | + <StyledTableCell align="center">Breed</StyledTableCell> |
| 72 | + <StyledTableCell align="center">Age</StyledTableCell> |
| 73 | + <StyledTableCell align="center">Photo</StyledTableCell> |
| 74 | + </TableRow> |
| 75 | + </TableHead> |
| 76 | + <TableBody> |
| 77 | + {_.map(latestPets, (adoptionInfo, index) => { |
| 78 | + |
| 79 | + const photoLink = _.get(adoptionInfo, "Photos.[0]"); |
| 80 | + const photo = <img src={photoLink} style={{"maxWidth": "100px"}}/> |
| 81 | + |
| 82 | + return <StyledTableRow key={index}> |
| 83 | + <TableCell align="center">{adoptionInfo["Name"]}</TableCell> |
66 | 84 | <TableCell align="center">{adoptionInfo["Type"]}</TableCell>
|
67 |
| - <TableCell align="center">{adoptionInfo["Subtype"]}</TableCell> |
68 |
| - <TableCell align="center">{adoptionInfo["animal_details"]["Type"]}</TableCell> |
69 |
| - <TableCell align="center">{adoptionInfo["animal_details"]["Breed"]}</TableCell> |
70 |
| - <TableCell align="center">{(parseInt(adoptionInfo["animal_details"]["Age"])/12).toFixed(2)}</TableCell> |
| 85 | + <TableCell align="center">{adoptionInfo["Breed"]}</TableCell> |
| 86 | + <TableCell |
| 87 | + align="center">{this.getAnimalAge(adoptionInfo["DOBUnixTime"])}</TableCell> |
71 | 88 | <TableCell align="center">{photo}</TableCell>
|
72 | 89 | </StyledTableRow>
|
73 |
| - })} |
74 |
| - </TableBody> |
75 |
| - </Table> |
76 |
| - </TableContainer> |
77 |
| - </Container> |
| 90 | + })} |
| 91 | + </TableBody> |
| 92 | + </Table> |
| 93 | + </TableContainer> |
| 94 | + </Container> |
78 | 95 | );
|
79 | 96 | }
|
80 | 97 | }
|
|
0 commit comments