Mr0V

Untitled

Jul 13th, 2018
155
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React from 'react';
  2. import Paper from "@material-ui/core/Paper/Paper";
  3. import {Card, CardMedia, CardContent, CardActions, Grid} from "@material-ui/core";
  4. import Typography from "@material-ui/core/Typography/Typography";
  5. import Button from "@material-ui/core/Button/Button";
  6. import InfiniteScroll from 'react-infinite-scroller';
  7. import {BaseUrl, BaseUrlApi} from "../../base/baseurls";
  8. import {withStyles} from "@material-ui/core/styles/index";
  9. import axios from 'axios';
  10. import {Link} from "react-router-dom";
  11. import PropTypes from "prop-types";
  12. import bgLogin from '../../images/bgLogin.jpg';
  13.  
  14.  
  15. const styles = theme => ({
  16.     paper: {
  17.         padding: theme.spacing.unit * 10,
  18.         marginTop: 40,
  19.         textAlign: 'center',
  20.         color: theme.palette.text.secondary,
  21.     },
  22.     card: {
  23.         margin: theme.spacing.unit,
  24.         maxWidth: 225,
  25.     },
  26.     media: {
  27.         height: 0,
  28.         paddingTop: '56.25%', // 16:9
  29.     },
  30.     link: {
  31.         textDecoration: 'none',
  32.         textAlign: 'right',
  33.         color: '#666666',
  34.         '&:hover': {
  35.             webkitTransition: 'transition: all 0.4s',
  36.             textDecoration: 'none',
  37.             color: '#a64bf4',
  38.             border: "1px solid #d0d0d0;",
  39.         },
  40.     },
  41.     root: {
  42.         flexGrow: 1,
  43.         backgroundImage: `url("${bgLogin}")`,
  44.         backgroundPosition: 'center',
  45.         backgroundRepeat: 'no-repeat',
  46.         backgroundSize: 'cover',
  47.         overflow: 'auto',
  48.         width: '100%',
  49.         height: '100%',
  50.     },
  51.     div: {
  52.         margin: '0 auto',
  53.         marginTop: 20,
  54.         width: "90%",
  55.  
  56.     },
  57. });
  58.  
  59. class Cards extends React.Component {
  60.  
  61.     render() {
  62.         const {classes} = this.props;
  63.         const {apks} = this.props;
  64.         const DetailApkFile = props => <Link to={`/Profile/Analyse/${apks.pk}/`} {...props}/>;
  65.  
  66.  
  67.         return (
  68.             <Grid item>
  69.                 <Card className={classes.card}>
  70.                     <CardMedia
  71.                         className={classes.media}
  72.                         image={[BaseUrl, apks.apk_avatar].join('')}
  73.                     />
  74.                     <CardContent>
  75.                         <Typography gutterBottom variant="headline" component="h2">
  76.                             {apks.apk_file}
  77.                         </Typography>
  78.                     </CardContent>
  79.                     <CardActions>
  80.                         <Button color="primary" className={classes.link}  component={DetailApkFile} >
  81.                             Begin
  82.                         </Button>
  83.                     </CardActions>
  84.                 </Card>
  85.             </Grid>
  86.         )
  87.     }
  88.  
  89. }
  90.  
  91. class HomeContext extends React.Component {
  92.  
  93.     constructor(props) {
  94.         super(props);
  95.         this.state = {
  96.             url: `${BaseUrlApi}/ApkFiles/`,
  97.             data: [],
  98.             hasMoreItems: true,
  99.             page: 1,
  100.         };
  101.     }
  102.  
  103.  
  104.     handleLoadMore() {
  105.         axios.get(`${this.state.url}?page=${this.state.page}`, {
  106.             headers: {
  107.                 'Content-Type': 'multipart/form-data',
  108.             }
  109.         })
  110.             .then(response => {
  111.                 this.setState(prevState => ({
  112.                     data: [ ...prevState.data, ...response.data],
  113.                     page: prevState.page+1,
  114.                 }));
  115.                
  116.             })
  117.             .catch(error => {
  118.                 // TODO: Show error message for login fail.
  119.                 console.log(error)
  120.             });
  121.     }
  122.  
  123.     render() {
  124.         const {classes} = this.props;
  125.         const loader = <Grid className="loader" key={0}>Loading ...</Grid>;
  126.  
  127.         return (
  128.                 <Paper className={classes.paper}>
  129.                     <InfiniteScroll
  130.                         pageStart={0}
  131.                         loadMore={this.handleLoadMore.bind(this)}
  132.                         hasMore={this.state.hasMoreItems}
  133.                         loader={loader}>
  134.                         <Grid container>
  135.                             {this.state.data.map((apks , index) => <Cards apks={apks} key={index} {...this.props}/>)}
  136.                         </Grid>
  137.                     </InfiniteScroll>
  138.                 </Paper>
  139.         );
  140.     }
  141. }
  142.  
  143. HomeContext.propTypes = {
  144.     classes: PropTypes.object.isRequired,
  145. };
  146. export default withStyles(styles)(HomeContext);
RAW Paste Data