From bb09058f3c7ce31368022fde2673e1f6d50757e9 Mon Sep 17 00:00:00 2001 From: Jose Miguel Gallas Olmedo Date: Thu, 16 Sep 2021 09:25:51 +0200 Subject: [PATCH] Simplify AJAX utility module (#2612) simplifies ajax utility module --- .../components/ApplicationPlansTableCard.jsx | 5 ++-- .../components/DefaultPlanSelectCard.jsx | 4 +-- app/javascript/src/utilities/ajax.js | 29 ++++++++++--------- .../components/DefaultPlanSelectCard.spec.jsx | 12 ++++---- 4 files changed, 26 insertions(+), 24 deletions(-) diff --git a/app/javascript/src/Plans/components/ApplicationPlansTableCard.jsx b/app/javascript/src/Plans/components/ApplicationPlansTableCard.jsx index 00da2e1be3..33a5695b55 100644 --- a/app/javascript/src/Plans/components/ApplicationPlansTableCard.jsx +++ b/app/javascript/src/Plans/components/ApplicationPlansTableCard.jsx @@ -6,7 +6,6 @@ import { Card } from '@patternfly/react-core' import { ApplicationPlansTable } from 'Plans' import * as alert from 'utilities/alert' import { - post, ajax, safeFromJsonString, confirm @@ -24,7 +23,7 @@ const ApplicationPlansTableCard = ({ plans: initialPlans, count, searchHref }: P const [plans, setPlans] = React.useState(initialPlans) const [isLoading, setIsLoading] = React.useState(false) - const handleActionCopy = (path) => post(path) + const handleActionCopy = (path) => ajax(path, 'POST') .then(data => data.json() .then(res => { if (data.status === 201) { @@ -62,7 +61,7 @@ const ApplicationPlansTableCard = ({ plans: initialPlans, count, searchHref }: P }) .finally(() => setIsLoading(false)) - const handleActionPublishHide = (path) => post(path) + const handleActionPublishHide = (path) => ajax(path, 'POST') .then(data => data.json() .then(res => { if (data.status === 200) { diff --git a/app/javascript/src/Plans/components/DefaultPlanSelectCard.jsx b/app/javascript/src/Plans/components/DefaultPlanSelectCard.jsx index aee5181b88..200717aec9 100644 --- a/app/javascript/src/Plans/components/DefaultPlanSelectCard.jsx +++ b/app/javascript/src/Plans/components/DefaultPlanSelectCard.jsx @@ -1,7 +1,7 @@ // @flow import * as React from 'react' -import { post, createReactWrapper } from 'utilities' +import { ajax, createReactWrapper } from 'utilities' import { Form, FormGroup, @@ -31,7 +31,7 @@ const DefaultPlanSelectCard = ({ product, initialDefaultPlan, path }: Props): Re const body = plan.id >= 0 ? new URLSearchParams({ id: plan.id.toString() }) : undefined const url = path.replace(':id', String(product.id)) - post(url, body) + ajax(url, 'POST', body) .then(data => { if (data.ok) { alert.notice('Default plan was updated') diff --git a/app/javascript/src/utilities/ajax.js b/app/javascript/src/utilities/ajax.js index 183082626e..4d90f44756 100644 --- a/app/javascript/src/utilities/ajax.js +++ b/app/javascript/src/utilities/ajax.js @@ -2,22 +2,25 @@ export type Method = 'GET' | 'POST' | 'DELETE' -const ajax = (url: string, method: Method, body?: URLSearchParams): Promise => { +type FetchFunction = (url: string, method: Method, body?: URLSearchParams) => Promise + +const _ajax = (headers: Object) => { const meta = document.querySelector('meta[name="csrf-token"]') const token = (meta && meta.getAttribute('content')) || '' - return fetch(url, { - method: method, - headers: { - 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8', - 'X-CSRF-Token': token - }, - body - }) + return function (url, method, body?) { + return fetch(url, { + method: method, + headers: { + 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8', + 'X-CSRF-Token': token + }, + body + }) + } } -const post = (url: string, body?: URLSearchParams): Promise => { - return ajax(url, 'POST', body) -} +const ajax: FetchFunction = _ajax({ 'ContentType': 'application/x-www-form-urlencoded; charset=UTF-8' }) +const ajaxJSON: FetchFunction = _ajax({ 'Content-Type': 'application/json; charset=UTF-8' }) -export { ajax, post } +export { ajax, ajaxJSON } diff --git a/spec/javascripts/Plans/components/DefaultPlanSelectCard.spec.jsx b/spec/javascripts/Plans/components/DefaultPlanSelectCard.spec.jsx index b0898c4e68..7c6cafbc6e 100644 --- a/spec/javascripts/Plans/components/DefaultPlanSelectCard.spec.jsx +++ b/spec/javascripts/Plans/components/DefaultPlanSelectCard.spec.jsx @@ -10,8 +10,8 @@ const noticeSpy = jest.spyOn(alert, 'notice') const errorSpy = jest.spyOn(alert, 'error') jest.mock('utilities/ajax') -import * as ajax from 'utilities/ajax' -const post = (ajax.post: JestMockFn) +import * as AJAX from 'utilities/ajax' +const ajax = (AJAX.ajax: JestMockFn) const plan = { id: 1, name: 'My Plan' } const props = { @@ -26,7 +26,7 @@ it('should render', () => { }) it('should show a success message if request goes well', async () => { - post.mockResolvedValue({ ok: true }) + ajax.mockResolvedValue({ ok: true }) const wrapper = mount() await act(async () => { @@ -37,7 +37,7 @@ it('should show a success message if request goes well', async () => { }) it('should show an error message when selected plan does not exist', async () => { - post.mockResolvedValueOnce({ status: 404 }) + ajax.mockResolvedValueOnce({ status: 404 }) const wrapper = mount() await act(async () => { @@ -48,7 +48,7 @@ it('should show an error message when selected plan does not exist', async () => }) it('should show an error message when server returns an error', async () => { - post.mockResolvedValue({ status: 403 }) + ajax.mockResolvedValue({ status: 403 }) const wrapper = mount() await act(async () => { @@ -62,7 +62,7 @@ it('should show an error message when connection fails', async () => { // $FlowExpectedError[cannot-write] suppress error logs during test console.error = jest.fn() - post.mockRejectedValue() + ajax.mockRejectedValue() const wrapper = mount() await act(async () => {