for manan

import Slider from "react-slick";
import Layout from "../components/Layout";
import Loader from "../components/Loader"
import UserAvatar from "../components/UserAvatar"
import Popover from "../components/Popover"
import { Doughnut } from 'react-chartjs-2';
import Router from "next/router"
import axios from 'axios'
import Link from 'next/link';

import {
    post,
    get
} from '../common/_async'
import {
    isIos
} from '../common/_device'

function defineChart() {
    var originalDoughnutDraw = Chart.controllers.doughnut.prototype.draw;
    Chart.helpers.extend(Chart.controllers.doughnut.prototype, {
        draw: function () {
            originalDoughnutDraw.apply(this, arguments);

            var chart = this.chart.chart;
            var ctx = chart.ctx;
            var width = chart.width;
            var height = chart.height;

            var fontSize = (height / 114).toFixed(2);
            ctx.font = fontSize + "em Poppins";
            ctx.textBaseline = "middle";

            var text = chart.config.data.text,
                textX = Math.round((width - ctx.measureText(text).width) / 2),
                textY = height / 1.85;

            ctx.fillText(text, textX, textY);
        }
    });
}

const settings = {
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
    // centerMode: true,
    infinite: false,
    arrows: false,
    variableWidth: true
};
const data = {
    datasets: [{
        data: [75, 25],
        backgroundColor: [
            '#F9CDA8',
            '#FEEFE0',
        ],
        hoverBackgroundColor: [
            '#F9CDA8',
            '#FEEFE0',
        ]
    }],
    text: '75%'
};
const options = {
    legend: {
        labels: {
            // This more specific font property overrides the global property
            fontColor: '#333333'
        }
    },
    tooltips: {
         enabled: false
    },
    maintainAspectRatio: false,
    cutoutPercentage: 70
}

function minTommss(minutes){
 var sign = minutes < 0 ? "-" : "";
 var min = Math.floor(Math.abs(minutes));
 var sec = Math.floor((Math.abs(minutes) * 60) % 60);
 return sign + (min < 10 ? "" : "") + min + ":" + (sec < 10 ? "0" : "") + sec;
}

class Index extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            isLoading: false,
        };

        this.getMyGoals = this.getMyGoals.bind(this);
    }

    componentDidMount() {
        const { mygoals } = this.props;
        this.getMyGoals()
        defineChart()
    }

    dataSlider(percent_completed){
        let percent_incomplete = 100 - percent_completed
        if (percent_completed == "Nan"){
            let percent_incomplete = 100
        }
        return {
            datasets: [{
                data: [percent_completed, percent_incomplete],
                backgroundColor: [
                    '#F9CDA8',
                    '#FEEFE0',
                ],
                hoverBackgroundColor: [
                    '#F9CDA8',
                    '#FEEFE0',
                ]
            }],
            text: ((percent_completed == "NaN") ? '0' : percent_completed)+"%"
        }
    }

    getMyGoals(){
        get('/mygoals', {
            'x-access-token': localStorage.getItem("token")
        })
        .then(res => {
            if(res.data.status == "error"){
                console.log('error goal');
                if (res.data.message === "jwt malformed") Router.push('/login')
            } else {
                this.props.setMyGoals(res.data)
            }
        })
    }



    render() {
        const user = this.props.users.user
        const mygoals = this.props.mygoals.reverse() // this works giving array data
        const fitbitSynced = typeof localStorage !== 'undefined' && localStorage.getItem("fitbit-sync")
        if (!user || this.state.isLoading) return <Layout { ...this.props }> <Loader /> </Layout>
        return (
            <Layout { ...this.props }>
                {user &&
                    <div className="homepage-top">
                        <div className="container">
                            <div className="row mtb-30">
                                <div className="col-8">
                                    <p className="welcome">Welcome Back, <br /> <span className="welcome-name">{user.name.split(' ')[0]} </span></p>

                                </div>
                                <div className="col-4 text-center" style={{
                                    padding: 0
                                }}>
                                    <UserAvatar user={user} style={{
                                        height: '90px',
                                        width: '90px',
                                        float: 'right'
                                    }}/>
                                </div>
                            </div>

                            {
                                !isIos() && (
                                    <Link href="/goal-set" prefetch><h5 style={{ position: 'relative' }}>
                                    { !fitbitSynced && (
                                        <Popover style={{
                                            right: 0,
                                            bottom: '-70px'
                                        }}>Let’s begin by setting an intention</Popover>
                                    )}
                                    {mygoals.length ? 'My Current Intentions' : 'Add New Intention'} <span style={{
                                        position: 'relative',
                                        background:'#fff',
                                        border: '2px solid #458DEC',
                                        borderRadius: '100%',
                                        width: '25px',
                                        height: '25px',
                                        display: 'inline-flex',
                                        justifyContent: 'center',
                                        color: '#458DEC',
                                        float: 'right',
                                        alignItems: 'center'
                                    }}>+</span></h5></Link>
                                )
                            }
                            <Slider {...settings}>
                                {mygoals && mygoals.map((mygoal, key) => {
                                    if (!mygoal.playlist_data) return null
                                    const totalTracks = Object.keys(mygoal.daytracks).length
                                    const totalTime = Object.keys(mygoal.daytracks).reduce((acc, day) => {
                                        const dayTime = mygoal.daytracks[day].tracks.reduce((acc, track) => {
                                            if (!track.current_track_time) return acc
                                            return acc + track.current_track_time
                                        }, 0)
                                        return acc + dayTime
                                    }, 0) / 60
                                    const formated = totalTime ? `${Math.floor(totalTime / 60)}h ${Math.floor((totalTime) % 60)}m` : '0h 0m'
                                    return (
                                        <Link
                                            key={mygoal.id}
                                            href={`/goal-detail/${mygoal.id}`}
                                            prefetch>
                                            <a key={mygoal.id} style={{
                                                margin: '0 auto',
                                                width: '80vw'
                                            }}>
                                                <div className="card font-light" style={{
                                                    marginRight: '15px',
                                                }}>
                                                    <div className="card-body">
                                                        <div className="invitation mb-15">
                                                            {mygoal.category}
                                                        </div>
                                                        <div className="row">
                                                            <div className="col-7">
                                                                <Doughnut data={this.dataSlider(mygoal.percent_completed)} options={options} width={20} height={20} />
                                                            </div>
                                                            <div className="col-5">
                                                                <div>
                                                                    {formated}
                                                                    </div>
                                                                <div className="text-secondary">
                                                                    Meditated
                                                                    </div>
                                                                <br />

                                                                <div>
                                                                    {totalTracks}
                                                                    </div>
                                                                <div className="text-secondary">
                                                                    Tracks
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </a>
                                        </Link>
                                        )
                                    }
                                 )}
                            </Slider>

                            <Link href='/checkin' prefetch>
                                <div className="card card-two noBorder">
                                    <div className="card-body">
                                        <h5 className="card-title m-0">How are you today?</h5>
                                        <p className="card-text mb-15">Check-in now</p>
                                    </div>
                                    { fitbitSynced && (
                                        <Popover left style={{
                                            right: 0,
                                            bottom: '-70px'
                                        }}>Check in regularly to get more personalized 
recommendations </Popover>
                                    )}
                                </div>
                            </Link>
                        </div>
                    </div>
                }

            </Layout>
        )
    }

}

import WithRedux from '../components/Hoc/WithRedux';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

import { getUsersFromState, setUsers, addUser, removeUsers } from '../store/user.store'
import { getMyGoalsFromState, setMyGoals, addMyGoal, removeMyGoals } from '../store/mygoals.store'

/* redux props for page */
const mapStateToProps = (state) => ({
    users: getUsersFromState(state),
    mygoals: getMyGoalsFromState(state)
})

/* redux actions for page */
const mapDispatchToProps = (dispatch) => bindActionCreators({
    setUsers,
    addUser,
    removeUsers,
    setMyGoals,
    addMyGoal,
    removeMyGoals
}, dispatch)

const ConnectedPage = connect(mapStateToProps, mapDispatchToProps)(Index)

// /* connect page to redux store */
// export default connect(mapStateToProps, mapDispatchToProps)(WithUser)

export default WithRedux(ConnectedPage)