SHARE
TWEET

for manan

a guest Jul 18th, 2019 70 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import Slider from "react-slick";
  2. import Layout from "../components/Layout";
  3. import Loader from "../components/Loader"
  4. import UserAvatar from "../components/UserAvatar"
  5. import Popover from "../components/Popover"
  6. import { Doughnut } from 'react-chartjs-2';
  7. import Router from "next/router"
  8. import axios from 'axios'
  9. import Link from 'next/link';
  10.  
  11. import {
  12.     post,
  13.     get
  14. } from '../common/_async'
  15. import {
  16.     isIos
  17. } from '../common/_device'
  18.  
  19. function defineChart() {
  20.     var originalDoughnutDraw = Chart.controllers.doughnut.prototype.draw;
  21.     Chart.helpers.extend(Chart.controllers.doughnut.prototype, {
  22.         draw: function () {
  23.             originalDoughnutDraw.apply(this, arguments);
  24.  
  25.             var chart = this.chart.chart;
  26.             var ctx = chart.ctx;
  27.             var width = chart.width;
  28.             var height = chart.height;
  29.  
  30.             var fontSize = (height / 114).toFixed(2);
  31.             ctx.font = fontSize + "em Poppins";
  32.             ctx.textBaseline = "middle";
  33.  
  34.             var text = chart.config.data.text,
  35.                 textX = Math.round((width - ctx.measureText(text).width) / 2),
  36.                 textY = height / 1.85;
  37.  
  38.             ctx.fillText(text, textX, textY);
  39.         }
  40.     });
  41. }
  42.  
  43. const settings = {
  44.     speed: 500,
  45.     slidesToShow: 1,
  46.     slidesToScroll: 1,
  47.     // centerMode: true,
  48.     infinite: false,
  49.     arrows: false,
  50.     variableWidth: true
  51. };
  52. const data = {
  53.     datasets: [{
  54.         data: [75, 25],
  55.         backgroundColor: [
  56.             '#F9CDA8',
  57.             '#FEEFE0',
  58.         ],
  59.         hoverBackgroundColor: [
  60.             '#F9CDA8',
  61.             '#FEEFE0',
  62.         ]
  63.     }],
  64.     text: '75%'
  65. };
  66. const options = {
  67.     legend: {
  68.         labels: {
  69.             // This more specific font property overrides the global property
  70.             fontColor: '#333333'
  71.         }
  72.     },
  73.     tooltips: {
  74.          enabled: false
  75.     },
  76.     maintainAspectRatio: false,
  77.     cutoutPercentage: 70
  78. }
  79.  
  80. function minTommss(minutes){
  81.  var sign = minutes < 0 ? "-" : "";
  82.  var min = Math.floor(Math.abs(minutes));
  83.  var sec = Math.floor((Math.abs(minutes) * 60) % 60);
  84.  return sign + (min < 10 ? "" : "") + min + ":" + (sec < 10 ? "0" : "") + sec;
  85. }
  86.  
  87. class Index extends React.Component {
  88.     constructor(props) {
  89.         super(props);
  90.  
  91.         this.state = {
  92.             isLoading: false,
  93.         };
  94.  
  95.         this.getMyGoals = this.getMyGoals.bind(this);
  96.     }
  97.  
  98.     componentDidMount() {
  99.         const { mygoals } = this.props;
  100.         this.getMyGoals()
  101.         defineChart()
  102.     }
  103.  
  104.     dataSlider(percent_completed){
  105.         let percent_incomplete = 100 - percent_completed
  106.         if (percent_completed == "Nan"){
  107.             let percent_incomplete = 100
  108.         }
  109.         return {
  110.             datasets: [{
  111.                 data: [percent_completed, percent_incomplete],
  112.                 backgroundColor: [
  113.                     '#F9CDA8',
  114.                     '#FEEFE0',
  115.                 ],
  116.                 hoverBackgroundColor: [
  117.                     '#F9CDA8',
  118.                     '#FEEFE0',
  119.                 ]
  120.             }],
  121.             text: ((percent_completed == "NaN") ? '0' : percent_completed)+"%"
  122.         }
  123.     }
  124.  
  125.     getMyGoals(){
  126.         get('/mygoals', {
  127.             'x-access-token': localStorage.getItem("token")
  128.         })
  129.         .then(res => {
  130.             if(res.data.status == "error"){
  131.                 console.log('error goal');
  132.                 if (res.data.message === "jwt malformed") Router.push('/login')
  133.             } else {
  134.                 this.props.setMyGoals(res.data)
  135.             }
  136.         })
  137.     }
  138.  
  139.  
  140.  
  141.     render() {        
  142.         const user = this.props.users.user
  143.         const mygoals = this.props.mygoals.reverse() // this works giving array data
  144.         const fitbitSynced = typeof localStorage !== 'undefined' && localStorage.getItem("fitbit-sync")
  145.         if (!user || this.state.isLoading) return <Layout { ...this.props }> <Loader /> </Layout>
  146.         return (
  147.             <Layout { ...this.props }>
  148.                 {user &&
  149.                     <div className="homepage-top">
  150.                         <div className="container">
  151.                             <div className="row mtb-30">
  152.                                 <div className="col-8">
  153.                                     <p className="welcome">Welcome Back, <br /> <span className="welcome-name">{user.name.split(' ')[0]} </span></p>
  154.                                    
  155.                                 </div>
  156.                                 <div className="col-4 text-center" style={{
  157.                                     padding: 0
  158.                                 }}>
  159.                                     <UserAvatar user={user} style={{
  160.                                         height: '90px',
  161.                                         width: '90px',
  162.                                         float: 'right'
  163.                                     }}/>
  164.                                 </div>
  165.                             </div>
  166.  
  167.                             {
  168.                                 !isIos() && (
  169.                                     <Link href="/goal-set" prefetch><h5 style={{ position: 'relative' }}>
  170.                                     { !fitbitSynced && (
  171.                                         <Popover style={{
  172.                                             right: 0,
  173.                                             bottom: '-70px'
  174.                                         }}>Let’s begin by setting an intention</Popover>
  175.                                     )}
  176.                                     {mygoals.length ? 'My Current Intentions' : 'Add New Intention'} <span style={{
  177.                                         position: 'relative',
  178.                                         background:'#fff',
  179.                                         border: '2px solid #458DEC',
  180.                                         borderRadius: '100%',
  181.                                         width: '25px',
  182.                                         height: '25px',
  183.                                         display: 'inline-flex',
  184.                                         justifyContent: 'center',
  185.                                         color: '#458DEC',
  186.                                         float: 'right',
  187.                                         alignItems: 'center'
  188.                                     }}>+</span></h5></Link>
  189.                                 )
  190.                             }
  191.                             <Slider {...settings}>
  192.                                 {mygoals && mygoals.map((mygoal, key) => {
  193.                                     if (!mygoal.playlist_data) return null
  194.                                     const totalTracks = Object.keys(mygoal.daytracks).length
  195.                                     const totalTime = Object.keys(mygoal.daytracks).reduce((acc, day) => {
  196.                                         const dayTime = mygoal.daytracks[day].tracks.reduce((acc, track) => {
  197.                                             if (!track.current_track_time) return acc
  198.                                             return acc + track.current_track_time
  199.                                         }, 0)
  200.                                         return acc + dayTime
  201.                                     }, 0) / 60
  202.                                     const formated = totalTime ? `${Math.floor(totalTime / 60)}h ${Math.floor((totalTime) % 60)}m` : '0h 0m'
  203.                                     return (
  204.                                         <Link
  205.                                             key={mygoal.id}
  206.                                             href={`/goal-detail/${mygoal.id}`}
  207.                                             prefetch>
  208.                                             <a key={mygoal.id} style={{
  209.                                                 margin: '0 auto',
  210.                                                 width: '80vw'
  211.                                             }}>
  212.                                                 <div className="card font-light" style={{
  213.                                                     marginRight: '15px',
  214.                                                 }}>
  215.                                                     <div className="card-body">
  216.                                                         <div className="invitation mb-15">
  217.                                                             {mygoal.category}
  218.                                                         </div>
  219.                                                         <div className="row">
  220.                                                             <div className="col-7">
  221.                                                                 <Doughnut data={this.dataSlider(mygoal.percent_completed)} options={options} width={20} height={20} />
  222.                                                             </div>
  223.                                                             <div className="col-5">
  224.                                                                 <div>
  225.                                                                     {formated}
  226.                                                                     </div>
  227.                                                                 <div className="text-secondary">
  228.                                                                     Meditated
  229.                                                                     </div>
  230.                                                                 <br />
  231.  
  232.                                                                 <div>
  233.                                                                     {totalTracks}
  234.                                                                     </div>
  235.                                                                 <div className="text-secondary">
  236.                                                                     Tracks
  237.                                                                 </div>
  238.                                                             </div>
  239.                                                         </div>
  240.                                                     </div>
  241.                                                 </div>
  242.                                             </a>
  243.                                         </Link>
  244.                                         )
  245.                                     }
  246.                                  )}
  247.                             </Slider>
  248.  
  249.                             <Link href='/checkin' prefetch>
  250.                                 <div className="card card-two noBorder">
  251.                                     <div className="card-body">
  252.                                         <h5 className="card-title m-0">How are you today?</h5>
  253.                                         <p className="card-text mb-15">Check-in now</p>
  254.                                     </div>
  255.                                     { fitbitSynced && (
  256.                                         <Popover left style={{
  257.                                             right: 0,
  258.                                             bottom: '-70px'
  259.                                         }}>Check in regularly to get more personalized 
recommendations </Popover>
  260.                                     )}
  261.                                 </div>
  262.                             </Link>
  263.                         </div>
  264.                     </div>
  265.                 }
  266.                
  267.             </Layout>
  268.         )
  269.     }
  270.  
  271. }
  272.  
  273. import WithRedux from '../components/Hoc/WithRedux';
  274. import { bindActionCreators } from 'redux';
  275. import { connect } from 'react-redux';
  276.  
  277. import { getUsersFromState, setUsers, addUser, removeUsers } from '../store/user.store'
  278. import { getMyGoalsFromState, setMyGoals, addMyGoal, removeMyGoals } from '../store/mygoals.store'
  279.  
  280. /* redux props for page */
  281. const mapStateToProps = (state) => ({
  282.     users: getUsersFromState(state),
  283.     mygoals: getMyGoalsFromState(state)
  284. })
  285.  
  286. /* redux actions for page */
  287. const mapDispatchToProps = (dispatch) => bindActionCreators({
  288.     setUsers,
  289.     addUser,
  290.     removeUsers,
  291.     setMyGoals,
  292.     addMyGoal,
  293.     removeMyGoals
  294. }, dispatch)
  295.  
  296. const ConnectedPage = connect(mapStateToProps, mapDispatchToProps)(Index)
  297.  
  298. // /* connect page to redux store */
  299. // export default connect(mapStateToProps, mapDispatchToProps)(WithUser)
  300.  
  301. export default WithRedux(ConnectedPage)
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