import React, { Component } from 'react'
import axios from 'axios'
import socketIOClient from "socket.io-client";
import config from '../config/config'

export const myContext = React.createContext();

export default class AuthenticationProvider extends Component {

    state = {
        data: []
    }

    async componentDidMount() {
        const auth_token = localStorage.getItem('jwt token')
        const header = 'Bearer ' + auth_token;
        const res = await axios.get(config.API_URL+'/api/account', {headers: {Authorization:header}});
        const blob = await axios.get(config.API_URL+'/' + res.data.image, {headers: {Authorization:header}, responseType: "blob"});
        var user = res.data;
        user["image"] = URL.createObjectURL(blob.data);

        this.setState({
            data: {user}
        });

        const io = socketIOClient(config.REDIS_URL, { query: {jwt: localStorage.getItem('jwt token')} });

        io.on("event", data => {
            if (data !== this.state.notifications){
                var curr_data = this.state.data;
                curr_data["notifications"] = data;
                this.setState({data: curr_data});
            }
        });

        io.on("reconnect", () => {
            io.emit("jwt", localStorage.getItem('jwt token'));
        })
    }


    render() {
        return (
            <myContext.Provider value={this.state.data}>
                {this.props.children}
            </myContext.Provider>
        )
    }
}

<AccountProvider>
    <Route
      path="/dashboard"
      render={({ match: { url } }) => (
                <Dashboard>
                  <Switch>
                    <Route path={`${url}/Account`} component={Account} exact />
                    <Route path={`${url}/Deposits`} component={Deposits} exact />
                    <Route path={`${url}/Notifications`} component={Client} exact />
                    <Route path={`${url}/`} component={Account} exact /> */}
                    <Route component={Page404Dashboard} />
                  </Switch>
                </Dashboard>
      )}/>
  </AccountProvider>

import React, { Component } from 'react'
import AccountContent from './AccountContent';
import PendingCard from '../PendingCard';
import {myContext} from '../../../AccountProvider'

class Dashboard extends Component {
    render() {
        // The following should log notifications after AccountProvider rerenders
        console.log(this.context.notifications && this.context.notifications);
        return (
            <>
                { this.props.hasCard ? <AccountContent/> : <PendingCard/> }
            </>
        )
    }
}

Dashboard.contextType = myContext;
export default Dashboard;