feat(client): remove axios, include credentials (#42531)

* Revert "revert: replace axios with fetch"

This reverts commit 418287f1e8.

* fix: always include credentials

Since www.freecodecamp.org and api.freecodecamp.org are different
origins we have to tell fetch to 'include' the credentials.

client/package-lock.json

@@ -7140,6 +7140,15 @@
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.1.0.tgz",
       "integrity": "sha512-1Yj8h9Q+QDF5FzhMs/c9+6UntbD5MkRfRwac8DoEm9ZfUBZ7tZ55YcGVAzEe4bXsdQHEk+s9S5wsOKVdZrw0tQ=="
     },
+    "bindings": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
+      "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
+      "optional": true,
+      "requires": {
+        "file-uri-to-path": "1.0.0"
+      }
+    },
     "bl": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
@@ -11085,6 +11094,12 @@
         "token-types": "^2.0.0"
       }
     },
+    "file-uri-to-path": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
+      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
+      "optional": true
+    },
     "filesize": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/filesize/-/filesize-6.1.0.tgz",
@@ -16455,6 +16470,12 @@
       "resolved": "https://registry.npmjs.org/name-all-modules-plugin/-/name-all-modules-plugin-1.0.1.tgz",
       "integrity": "sha1-Cr+2rYNXGLn7Te8GdOBmV6lUN1w="
     },
+    "nan": {
+      "version": "2.14.2",
+      "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.2.tgz",
+      "integrity": "sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==",
+      "optional": true
+    },
     "nanoid": {
       "version": "3.1.23",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.23.tgz",
@@ -22473,7 +22494,11 @@
           "version": "1.2.13",
           "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
           "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
-          "optional": true
+          "optional": true,
+          "requires": {
+            "bindings": "^1.5.0",
+            "nan": "^2.12.1"
+          }
         },
         "glob-parent": {
           "version": "3.1.0",

client/package.json

@@ -55,7 +55,6 @@
     "@reach/router": "1.3.4",
     "algoliasearch": "4.9.3",
     "assert": "2.0.0",
-    "axios": "0.21.1",
     "babel-plugin-preval": "5.0.0",
     "babel-plugin-prismjs": "2.0.1",
     "bezier-easing": "2.1.0",

client/src/redux/accept-terms-saga.js

@@ -8,7 +8,7 @@ import { putUserAcceptsTerms } from '../utils/ajax';
 
 function* acceptTermsSaga({ payload: quincyEmails }) {
   try {
-    const { data: response } = yield call(putUserAcceptsTerms, quincyEmails);
+    const response = yield call(putUserAcceptsTerms, quincyEmails);
 
     yield put(acceptTermsComplete(quincyEmails));
     yield put(createFlashMessage(response));

client/src/redux/fetch-user-saga.js

@@ -16,7 +16,9 @@ function* fetchSessionUser() {
   }
   try {
     const {
-      data: { user = {}, result = '', sessionMeta = {} }
+      user = {},
+      result = '',
+      sessionMeta = {}
     } = yield call(getSessionUser);
     const appUser = user[result] || {};
     yield put(
@@ -30,9 +32,11 @@ function* fetchSessionUser() {
 function* fetchOtherUser({ payload: maybeUser = '' }) {
   try {
     const maybeUserLC = maybeUser.toLowerCase();
-    const { data } = yield call(getUserProfile, maybeUserLC);
 
-    const { entities: { user = {} } = {}, result = '' } = data;
+    const { entities: { user = {} } = {}, result = '' } = yield call(
+      getUserProfile,
+      maybeUserLC
+    );
     const otherUser = user[result] || {};
     yield put(
       fetchProfileForUserComplete({ user: otherUser, username: result })

client/src/redux/report-user-saga.js

@@ -8,7 +8,7 @@ import { postReportUser } from '../utils/ajax';
 
 function* reportUserSaga({ payload }) {
   try {
-    const { data: response } = yield call(postReportUser, payload);
+    const response = yield call(postReportUser, payload);
 
     yield put(reportUserComplete());
     yield put(createFlashMessage(response));

client/src/redux/settings/settings-sagas.js

@@ -26,7 +26,7 @@ import { createFlashMessage } from '../../components/Flash/redux';
 
 function* submitNewAboutSaga({ payload }) {
   try {
-    const { data: response } = yield call(putUpdateMyAbout, payload);
+    const response = yield call(putUpdateMyAbout, payload);
     yield put(submitNewAboutComplete({ ...response, payload }));
     yield put(createFlashMessage(response));
   } catch (e) {
@@ -36,7 +36,7 @@ function* submitNewAboutSaga({ payload }) {
 
 function* submitNewUsernameSaga({ payload: username }) {
   try {
-    const { data: response } = yield call(putUpdateMyUsername, username);
+    const response = yield call(putUpdateMyUsername, username);
     yield put(submitNewUsernameComplete({ ...response, username }));
     yield put(createFlashMessage(response));
   } catch (e) {
@@ -46,7 +46,7 @@ function* submitNewUsernameSaga({ payload: username }) {
 
 function* submitProfileUISaga({ payload }) {
   try {
-    const { data: response } = yield call(putUpdateMyProfileUI, payload);
+    const response = yield call(putUpdateMyProfileUI, payload);
     yield put(submitProfileUIComplete({ ...response, payload }));
     yield put(createFlashMessage(response));
   } catch (e) {
@@ -56,7 +56,7 @@ function* submitProfileUISaga({ payload }) {
 
 function* updateUserFlagSaga({ payload: update }) {
   try {
-    const { data: response } = yield call(putUpdateUserFlag, update);
+    const response = yield call(putUpdateUserFlag, update);
     yield put(updateUserFlagComplete({ ...response, payload: update }));
     yield put(createFlashMessage(response));
   } catch (e) {
@@ -67,9 +67,7 @@ function* updateUserFlagSaga({ payload: update }) {
 function* validateUsernameSaga({ payload }) {
   try {
     yield delay(500);
-    const {
-      data: { exists }
-    } = yield call(getUsernameExists, payload);
+    const { exists } = yield call(getUsernameExists, payload);
     yield put(validateUsernameComplete(exists));
   } catch (e) {
     yield put(validateUsernameError(e));
@@ -78,9 +76,10 @@ function* validateUsernameSaga({ payload }) {
 
 function* verifyCertificationSaga({ payload }) {
   try {
-    const {
-      data: { response, isCertMap, completedChallenges }
-    } = yield call(putVerifyCert, payload);
+    const { response, isCertMap, completedChallenges } = yield call(
+      putVerifyCert,
+      payload
+    );
     yield put(
       verifyCertComplete({
         ...response,

client/src/redux/settings/update-email-saga.js

@@ -13,7 +13,7 @@ function* updateMyEmailSaga({ payload: email = '' }) {
     return;
   }
   try {
-    const { data: response } = yield call(putUserUpdateEmail, email);
+    const response = yield call(putUserUpdateEmail, email);
     yield put(
       updateMyEmailComplete({
         ...response,

client/src/redux/show-cert-saga.js

@@ -7,7 +7,7 @@ import { showCertComplete, showCertError } from '.';
 
 function* getShowCertSaga({ payload: { username, certSlug } }) {
   try {
-    const { data: response } = yield call(getShowCert, username, certSlug);
+    const response = yield call(getShowCert, username, certSlug);
     const { messages } = response;
     if (messages && messages.length) {
       for (let i = 0; i < messages.length; i++) {

client/src/utils/ajax.js

@@ -1,5 +1,4 @@
 import envData from '../../../config/env.json';
-import axios from 'axios';
 import Tokens from 'csrf';
 import cookies from 'browser-cookies';
 
@@ -8,34 +7,45 @@ const { apiLocation } = envData;
 const base = apiLocation;
 const tokens = new Tokens();
 
-axios.defaults.withCredentials = true;
+const defaultOptions = {
+  credentials: 'include'
+};
 
 // _csrf is passed to the client as a cookie. Tokens are sent back to the server
 // via headers:
-function setCSRFTokens() {
+function getCSRFToken() {
   const _csrf = typeof window !== 'undefined' && cookies.get('_csrf');
-  if (!_csrf) return;
-  axios.defaults.headers.post['CSRF-Token'] = tokens.create(_csrf);
-  axios.defaults.headers.put['CSRF-Token'] = tokens.create(_csrf);
+  if (!_csrf) {
+    return '';
+  } else {
+    return tokens.create(_csrf);
+  }
 }
 
 function get(path) {
-  return axios.get(`${base}${path}`);
+  return fetch(`${base}${path}`, defaultOptions).then(res => res.json());
 }
 
 export function post(path, body) {
-  setCSRFTokens();
-  return axios.post(`${base}${path}`, body);
+  return request('POST', path, body);
 }
 
 function put(path, body) {
-  setCSRFTokens();
-  return axios.put(`${base}${path}`, body);
+  return request('PUT', path, body);
 }
 
-// function del(path) {
-//   return axios.delete(`${base}${path}`);
-// }
+function request(method, path, body) {
+  const options = {
+    ...defaultOptions,
+    method,
+    headers: {
+      'CSRF-Token': getCSRFToken(),
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify(body)
+  };
+  return fetch(`${base}${path}`, options).then(res => res.json());
+}
 
 /** GET **/
 
@@ -106,5 +116,3 @@ export function putUserUpdateEmail(email) {
 export function putVerifyCert(certSlug) {
   return put('/certificate/verify', { certSlug });
 }
-
-/** DELETE **/