CODEWITHSUNDEEP
reactjs
FabZbi
FabZbi

Reputation: 538

How to access React Context outside of component?

Im trying to implement a function which gets called from within a functional React Component by a button.

It is supposed to delete a user from my own DB. But I need the access Token from Firebase to make this protected API call to my backend.

Now I'm serving the firebase instance from the Context API but I don't seem to be able to find a way to access this instance outside from a React Component.

I'm getting this error:

Line 10: Expected an assignment or function call and instead saw an expression

Am I aproaching this the wrong way?

import React from 'react';
import axios from 'axios';

import { PasswordForgetForm } from '../PasswordForgetForm/PasswordForgetForm';
import PasswordChangeForm from '../PasswordChangeForm/PasswordChangeForm';
import { AuthUserContext, withAuthorization } from '../../services/Session';
import { FirebaseContext } from '../../services/Firebase';

const deletUser = (authUser) => {
  {
    firebase => {
      const token = firebase.doGetIdToken();
      console.log(token);
      axios.delete('/api/users/' + authUser.uid, {
        headers: {
          authorization: `Bearer ${token}`
        }
      })
        .then(res => {
          //this.props.history.push('/dashboard');
          console.log(res);
        })
    }
  }

}

const AccountPage = () => (
  <AuthUserContext.Consumer>
    {authUser => (
      <div>
        <h1>Account: {authUser.email}</h1>
        <PasswordForgetForm />
        <PasswordChangeForm />
        <button type="button" onClick={() => deletUser(authUser)}>Delete Account</button>
      </div>
    )}
  </AuthUserContext.Consumer>
);

const condition = authUser => !!authUser;

export default withAuthorization(condition)(AccountPage);

Thanks for any help!

Upvotes: 1

Views: 750

Answers (1)

osdamv
osdamv

Reputation: 3583

The code is declaring an anonymous object, the inner syntax is incorrect 

 const deletUser = (authUser) => {
  {//anonymous   object
    firebase => {//There is no key for the member of the object
      const token = firebase.doGetIdToken();
      console.log(token);
      axios.delete('/api/users/' + authUser.uid, {
        headers: {
          authorization: `Bearer ${token}`
        }
      })
        .then(res => {
          //this.props.history.push('/dashboard');
          console.log(res);
        })
    }
  }//You never call or return anything of your object 

}

Upvotes: 2

Related Questions