SHARE
TWEET

Untitled

a guest May 22nd, 2019 53 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. //{ () => this.setState({ activePanel: 'shop' }) }
  2.  
  3. import React from 'react';
  4. import connect from '@vkontakte/vkui-connect';
  5. import PropTypes from 'prop-types';
  6. import {
  7.     View,
  8.     Panel,
  9.     Div,
  10.     Group,
  11.     //Button,
  12.     Cell,
  13.     List,
  14.     Avatar,
  15.     //Input,
  16.     //FormLayout,
  17.     ScreenSpinner,
  18.     //FormLayoutGroup,
  19. //  Link,
  20.     PanelHeader,
  21.     ListItem,
  22. //  Alert,
  23.     osname,
  24.     IOS,
  25.     HeaderButton,
  26. } from '@vkontakte/vkui';
  27. /* VKIcons */
  28. import Icon32Poll from '@vkontakte/icons/dist/32/poll';
  29. //import Icon24Mention from '@vkontakte/icons/dist/24/mention';
  30. //import Icon24Link from '@vkontakte/icons/dist/24/link';
  31. import Icon28ChevronBack from '@vkontakte/icons/dist/24/coins';
  32. import Icon24MarketOutline from '@vkontakte/icons/dist/24/market_outline';
  33. //import Icon24Like from '@vkontakte/icons/dist/24/like';
  34. import Icon24MoreHorizontal from '@vkontakte/icons/dist/24/more_horizontal';
  35. //import Icon24MoneyTransfer from '@vkontakte/icons/dist/24/money_transfer';
  36. import Icon24Back from '@vkontakte/icons/dist/24/replay';
  37. //import Icon24Favorite from '@vkontakte/icons/dist/24/favorite';
  38. //import Icon24Game from '@vkontakte/icons/dist/24/game';
  39. //import Icon24Settings from '@vkontakte/icons/dist/24/settings';
  40. //import Icon24Flash from '@vkontakte/icons/dist/24/flash';
  41. //import Icon24Home from '@vkontakte/icons/dist/24/home';
  42. //import Icon24Market from '@vkontakte/icons/dist/24/market';
  43. //import Icon24Services from '@vkontakte/icons/dist/24/services';
  44.  
  45. import '@vkontakte/vkui/dist/vkui.css';
  46. import './assets/css/bootstrap.css';
  47. import './assets/css/style.css';
  48.  
  49. function mclass(n) {
  50.     n += "";
  51.     n = new Array(4 - n.length % 3).join("U") + n;
  52.     return n.replace(/([0-9U]{3})/g, "$1 ").replace(/U/g, "");
  53. }
  54.  
  55.  
  56. class App extends React.Component {
  57.     constructor(props) {
  58.         super(props);
  59.  
  60.         this.state = {
  61.             activePanel: 'starting',
  62.             popout: null,
  63.             users: [],
  64.             fetchedUser: null
  65.         };
  66.  
  67.  
  68.         //this.openDefault = this.openDefault.bind(this);
  69.  
  70.     }
  71.  
  72.     componentDidMount() {
  73.  
  74.         connect.subscribe((e) => {
  75.             switch (e.detail.type) {
  76.                 case 'VKWebAppGetUserInfoResult':
  77.                     this.setState({ fetchedUser: e.detail.data });
  78.                     break;
  79.  
  80.                 default:
  81.                     console.log(e.detail.type);
  82.             }
  83.  
  84.         });
  85.  
  86.         connect.send('VKWebAppGetUserInfo', {});
  87.  
  88.         this.setState({ popout: <ScreenSpinner /> });
  89.         setTimeout(() => { this.setState({ popout: null, activePanel: 'main' }) }, 1450);
  90.  
  91.         fetch('/top').then(res => res.json()).then(users => this.setState({ users }));
  92.     }
  93.    
  94.     render() {
  95.  
  96.  
  97.         return (
  98.             <View popout={this.state.popout} activePanel={this.state.activePanel}>
  99.  
  100. <Panel id="top">
  101. <PanelHeader
  102.             left={<HeaderButton onClick={() => this.setState({ activePanel: 'main' })}>{osname === IOS ? <Icon28ChevronBack /> : <Icon24Back />}</HeaderButton>}
  103.             addon={<HeaderButton onClick={() => this.setState({ activePanel: 'main' })}>Назад</HeaderButton>}
  104.           >
  105.             Топ
  106.           </PanelHeader>
  107.  
  108. {this.state.users.map(user =>
  109.     <Cell before={<b className="topcolor">{user.id}</b>}>
  110.     <ListItem
  111.     before={<Avatar src={user.avatar}/>}
  112.     description={`${mclass(user.balance)}👌🏻`}>
  113.     {`${user.username}`}
  114. </ListItem>
  115. </Cell>
  116.  
  117.   )}
  118.  
  119. </Panel>
  120.  
  121. <Panel id="main">
  122.                     <Div>
  123.                         <div className="row">
  124.                         <div className="col-md-12">
  125.                                 <div className="text-center text-muted">
  126.                                 <h1><b></b> </h1>
  127.                                 </div>
  128.                                 <div className="text-center buttons">
  129.                                     <div className="d-flex justify-content-around">
  130.                                         <div className="justify-content-around">
  131.                                             <button className="btn btn-rating" onClick={() => this.setState({ activePanel: 'top' })} >
  132.                                                 <Icon32Poll className="buttons_custom" />
  133.                                                
  134.                                             </button>
  135.                                             <p className="text-buttons text-muted text-monospace"></p>
  136.                                         </div>
  137.                                         <div className="justify-content-around">
  138.                                             <button className="btn btn-exchange" onClick={() => this.setState({ activePanel: 'main' })} >
  139.                                                 <Icon24MoreHorizontal className="buttons_custom"/>
  140.                                                
  141.                                             </button>
  142.                                             <p className="text-buttons text-muted text-monospace"></p>
  143.                                         </div>
  144.                                         <div className="justify-content-around">
  145.                                             <button onClick={() => this.setState({ activePanel: 'main' })} className="btn btn-shop" >
  146.                                                 <Icon24MarketOutline className="buttons_custom" />
  147.                                                
  148.                                             </button>
  149.                                             <p className="text-buttons text-muted text-monospace"></p>
  150.                                            
  151.                                            
  152.                                         </div>
  153.                                     </div>
  154.                                 </div>
  155.                             </div>
  156.  
  157.  
  158.                             <div className="container">
  159.  
  160.  
  161.                             <Group title="Информация" description="">
  162.                                     <List>
  163.  
  164.                                    
  165.                                     </List>
  166.  
  167.                                 </Group>
  168.  
  169.                             </div>
  170.                         </div>
  171.                     </Div>
  172.                 </Panel>
  173.             </View>
  174.         );
  175.     }
  176. }
  177.  
  178. App.propTypes = {
  179.     id: PropTypes.string.isRequired,
  180.     go: PropTypes.func.isRequired,
  181.     fetchedUser: PropTypes.shape({
  182.         photo_200: PropTypes.string,
  183.         first_name: PropTypes.string,
  184.         last_name: PropTypes.string,
  185.         city: PropTypes.shape({
  186.             title: PropTypes.string,
  187.         }),
  188.     }),
  189. };
  190.  
  191. export default App;
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top