diff --git a/src/users/UserPage.jsx b/src/users/UserPage.jsx index a92dd1d84..605bfd834 100644 --- 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¶m2=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 index 86018f5b0..a0e90464c 100644 --- 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+1@example.com'; + 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 index 904665d1c..bbedee93d 100644 --- 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; };