api.js refactor using classes (#250)

Refactor api.js into an api module where endpoint specific models can be imported and used in components.

src/contexts/Config.jsx

@@ -2,6 +2,8 @@ import React, { Component } from 'react';
 
 import { withNetwork } from './Network';
 
+import { ConfigAPI, MeAPI, RootAPI } from '../api';
+
 const ConfigContext = React.createContext({});
 
 class Provider extends Component {
@@ -46,13 +48,13 @@ class Provider extends Component {
   };
 
   async fetchMe () {
-    const { api, handleHttpError } = this.props;
+    const { handleHttpError } = this.props;
     try {
       const {
         data: {
           results: [me]
         }
-      } = await api.getMe();
+      } = await MeAPI.read();
       this.setState(prevState => ({
         value: {
           ...prevState.value,
@@ -75,13 +77,13 @@ class Provider extends Component {
   }
 
   async fetchConfig () {
-    const { api, handleHttpError } = this.props;
+    const { handleHttpError } = this.props;
 
     try {
       const [configRes, rootRes, meRes] = await Promise.all([
-        api.getConfig(),
-        api.getRoot(),
-        api.getMe()
+        ConfigAPI.read(),
+        RootAPI.read(),
+        MeAPI.read()
       ]);
       this.setState({
         value: {

src/contexts/Network.jsx

@@ -1,5 +1,4 @@
 
-import axios from 'axios';
 import React, { Component } from 'react';
 
 import { withRouter } from 'react-router-dom';
@@ -9,8 +8,6 @@ import { t } from '@lingui/macro';
 
 import { withRootDialog } from './RootDialog';
 
-import APIClient from '../api';
-
 const NetworkContext = React.createContext({});
 
 class Provider extends Component {
@@ -19,7 +16,6 @@ class Provider extends Component {
 
     this.state = {
       value: {
-        api: new APIClient(axios.create({ xsrfCookieName: 'csrftoken', xsrfHeaderName: 'X-CSRFToken' })),
         handleHttpError: err => {
           if (err.response.status === 401) {
             this.handle401();