fix: search useremail with +

openedx · May 25, 2021 · 1cd864a · 1cd864a
1 parent 52dc953
commit 1cd864a
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 8 deletions.
diff --git a/src/users/UserPage.jsx b/src/users/UserPage.jsx
@@ -1,4 +1,4 @@
-import { camelCaseObject, getConfig, history } from '@edx/frontend-platform';
+import { camelCaseObject, history } from '@edx/frontend-platform';
 import PropTypes from 'prop-types';
 import React, {
   useCallback, useContext, useEffect, useState,
@@ -18,8 +18,19 @@ import UserSummary from './UserSummary';
 
 // Supports urls such as /users/?username={username} and /users/?email={email}
 export default function UserPage({ location }) {
-  const url = getConfig().BASE_URL + location.pathname + location.search;
-  const params = new URL(url).searchParams;
+  // converts query params from url into map e.g. ?param1=value1&param2=value2 -> {param1: value1, param2=value2}
+  const params = new Map(
+    location.search
+      .slice(1) // removes '?' mark from start
+      .split('&')
+      .map(queryParams => queryParams.split('=')),
+  );
+
+  if (params.has('email')) {
+    const email = params.get('email');
+    params.set('email', decodeURIComponent(email));
+  }
+
   const [userIdentifier, setUserIdentifier] = useState(
     params.get('username') || params.get('email') || undefined,
   );

diff --git a/src/users/data/api.test.js b/src/users/data/api.test.js
@@ -172,11 +172,21 @@ describe('API', () => {
     });
 
     test.each([successDictResponse, successListResponse])('Successful Fetch by email', async (successResponse) => {
-      mockAdapter.onGet(`${userAccountApiBaseUrl}?email=${testEmail}`).reply(200, successResponse);
+      mockAdapter.onGet(`${userAccountApiBaseUrl}?email=${encodeURIComponent(testEmail)}`).reply(200, successResponse);
       const response = await api.getUser(testEmail);
       expect(response).toEqual(Array.isArray(successResponse) ? successResponse[0] : successResponse);
     });
 
+    test.each([successDictResponse, successListResponse])('Successful Fetch by email with +', async (responseType) => {
+      const testEmailWithPlus = '[email protected]';
+      const successResponse = {
+        ...Array.isArray(responseType) ? responseType[0] : responseType, testEmail: testEmailWithPlus,
+      };
+      mockAdapter.onGet(`${userAccountApiBaseUrl}?email=${encodeURIComponent(testEmailWithPlus)}`).reply(200, successResponse);
+      const response = await api.getUser(testEmailWithPlus);
+      expect(response).toEqual(Array.isArray(successResponse) ? successResponse[0] : successResponse);
+    });
+
     test.each([successDictResponse, successListResponse])('Successful Fetch by username', async (successResponse) => {
       mockAdapter.onGet(`${userAccountApiBaseUrl}/${testUsername}`).reply(200, successResponse);
       const response = await api.getUser(testUsername);
@@ -223,7 +233,7 @@ describe('API', () => {
         type: 'error',
         topic: 'general',
       };
-      mockAdapter.onGet(`${userAccountApiBaseUrl}?email=${testEmail}`).reply(() => throwError(404, ''));
+      mockAdapter.onGet(`${userAccountApiBaseUrl}?email=${encodeURIComponent(testEmail)}`).reply(() => throwError(404, ''));
       try {
         await api.getUser(testEmail);
       } catch (error) {
@@ -239,7 +249,7 @@ describe('API', () => {
         type: 'danger',
         topic: 'general',
       };
-      mockAdapter.onGet(`${userAccountApiBaseUrl}?email=${testEmail}`).reply(() => throwError(500, ''));
+      mockAdapter.onGet(`${userAccountApiBaseUrl}?email=${encodeURIComponent(testEmail)}`).reply(() => throwError(500, ''));
       try {
         await api.getUser(testEmail);
       } catch (error) {
@@ -263,7 +273,7 @@ describe('API', () => {
         type: 'error',
         topic: 'general',
       };
-      mockAdapter.onGet(`${userAccountApiBaseUrl}?email=${testEmail}`).reply(() => throwError(404, ''));
+      mockAdapter.onGet(`${userAccountApiBaseUrl}?email=${encodeURIComponent(testEmail)}`).reply(() => throwError(404, ''));
       try {
         await api.getAllUserData(testEmail);
       } catch (error) {

diff --git a/src/users/data/urls.js b/src/users/data/urls.js
@@ -21,7 +21,7 @@ export const getUserAccountUrl = userIdentifier => {
   }
 
   baseUrl = identifierIsEmail
-    ? (baseUrl += `?email=${userIdentifier}`)
+    ? (baseUrl += `?email=${encodeURIComponent(userIdentifier)}`)
     : (baseUrl += `/${userIdentifier}`);
   return baseUrl;
 };