From 49aff14a803e2f937c51f459905dcfdbbc3e9c7e Mon Sep 17 00:00:00 2001 From: Daria Golova Date: Tue, 14 Jun 2022 13:53:28 +0300 Subject: [PATCH 1/6] create fetch wrapper --- package-lock.json | 75 ++++++++++++++++++++++++++++++++++ package.json | 2 + src/pages/digitalId/Verify.jsx | 6 +-- src/shared/fetchWrapper.js | 50 +++++++++++++++++++++++ 4 files changed, 130 insertions(+), 3 deletions(-) create mode 100644 src/shared/fetchWrapper.js diff --git a/package-lock.json b/package-lock.json index 7b0ffcd..90d9fb1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,8 @@ "@tailwindcss/forms": "^0.4.0", "chart.js": "^3.5.0", "chartjs-adapter-moment": "^1.0.0", + "mobx": "^6.6.0", + "mobx-react": "^7.5.0", "moment": "^2.29.1", "react": "^17.0.2", "react-dom": "^17.0.2", @@ -1400,6 +1402,60 @@ "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz", "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==" }, + "node_modules/mobx": { + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/mobx/-/mobx-6.6.0.tgz", + "integrity": "sha512-MNTKevLH/6DShLZcmSL351+JgiJPO56A4GUpoiDQ3/yZ0mAtclNLdHK9q4BcQhibx8/JSDupfTpbX2NZPemlRg==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mobx" + } + }, + "node_modules/mobx-react": { + "version": "7.5.0", + "resolved": "https://registry.npmjs.org/mobx-react/-/mobx-react-7.5.0.tgz", + "integrity": "sha512-riHu0XZJA6f64L1iXZoAaDjVt6suYoy8I2HIfuz2tX3O4FFaAe4lVA2CoObttmUQTTFPM7j3Df6T4re0cHkghQ==", + "dependencies": { + "mobx-react-lite": "^3.4.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mobx" + }, + "peerDependencies": { + "mobx": "^6.1.0", + "react": "^16.8.0 || ^17 || ^18" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + }, + "react-native": { + "optional": true + } + } + }, + "node_modules/mobx-react-lite": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/mobx-react-lite/-/mobx-react-lite-3.4.0.tgz", + "integrity": "sha512-bRuZp3C0itgLKHu/VNxi66DN/XVkQG7xtoBVWxpvC5FhAqbOCP21+nPhULjnzEqd7xBMybp6KwytdUpZKEgpIQ==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mobx" + }, + "peerDependencies": { + "mobx": "^6.1.0", + "react": "^16.8.0 || ^17 || ^18" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + }, + "react-native": { + "optional": true + } + } + }, "node_modules/moment": { "version": "2.29.1", "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz", @@ -3059,6 +3115,25 @@ "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz", "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==" }, + "mobx": { + "version": "6.6.0", + "resolved": "https://registry.npmjs.org/mobx/-/mobx-6.6.0.tgz", + "integrity": "sha512-MNTKevLH/6DShLZcmSL351+JgiJPO56A4GUpoiDQ3/yZ0mAtclNLdHK9q4BcQhibx8/JSDupfTpbX2NZPemlRg==" + }, + "mobx-react": { + "version": "7.5.0", + "resolved": "https://registry.npmjs.org/mobx-react/-/mobx-react-7.5.0.tgz", + "integrity": "sha512-riHu0XZJA6f64L1iXZoAaDjVt6suYoy8I2HIfuz2tX3O4FFaAe4lVA2CoObttmUQTTFPM7j3Df6T4re0cHkghQ==", + "requires": { + "mobx-react-lite": "^3.4.0" + } + }, + "mobx-react-lite": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/mobx-react-lite/-/mobx-react-lite-3.4.0.tgz", + "integrity": "sha512-bRuZp3C0itgLKHu/VNxi66DN/XVkQG7xtoBVWxpvC5FhAqbOCP21+nPhULjnzEqd7xBMybp6KwytdUpZKEgpIQ==", + "requires": {} + }, "moment": { "version": "2.29.1", "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz", diff --git a/package.json b/package.json index 921c7f7..e76ff62 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,8 @@ "@tailwindcss/forms": "^0.4.0", "chart.js": "^3.5.0", "chartjs-adapter-moment": "^1.0.0", + "mobx": "^6.6.0", + "mobx-react": "^7.5.0", "moment": "^2.29.1", "react": "^17.0.2", "react-dom": "^17.0.2", diff --git a/src/pages/digitalId/Verify.jsx b/src/pages/digitalId/Verify.jsx index a6a4730..570cc64 100644 --- a/src/pages/digitalId/Verify.jsx +++ b/src/pages/digitalId/Verify.jsx @@ -2,7 +2,7 @@ import React, { useState } from 'react'; import Sidebar from '../../partials/Sidebar'; import Header from '../../partials/Header'; -function Verify () { +const Verify = (() => { const [sidebarOpen, setSidebarOpen] = useState(false); const [descriptionOpen, setDescriptionOpen] = useState(false); @@ -165,6 +165,6 @@ function Verify () { ) -} +}) -export default Verify; +export default Verify; \ No newline at end of file diff --git a/src/shared/fetchWrapper.js b/src/shared/fetchWrapper.js new file mode 100644 index 0000000..2cd36ad --- /dev/null +++ b/src/shared/fetchWrapper.js @@ -0,0 +1,50 @@ +function prepareUrl(url) { + if (url.startsWith('http')) return url; + return `/api/${url}`; +} + +function handleRequest(attempts = 3, method, url, body) { + return new Promise((resolve, reject) => { + (function internalRequest() { + return request(method, url, body) + .then(resolve) + .catch(err => --attempts > 0 ? internalRequest() : reject(err)) + })() + }) + .then((res) => res.json()) + .catch(() => []) +}; + +/** + * Request + * @param {string} url - endpoint url. + * @param {object} body - request body. + */ +function request(method, url, body) { + let controller = new AbortController; + let requestOptions = {}; + if (method === 'get' || method === 'del'){ + requestOptions = { + method: `${method.toUpperCase()}`, + signal: controller.signal, + } + }; + if (method === 'post' || method === 'put'){ + requestOptions = { + method: `${method.toUpperCase()}`, + headers: { + Accept: 'application/json', + 'Content-Type': 'application/json', + }, + body: JSON.stringify(body), + signal: controller.signal, + } + }; + setTimeout(() => controller.abort(), 3000); + return fetch(url, requestOptions); +}; + +export const fetchWrapper = { + handleRequest, + baseUrl: '', +}; \ No newline at end of file From 3fcda5407004382abc1a462d44ecfe156ad154d7 Mon Sep 17 00:00:00 2001 From: Daria Golova Date: Wed, 15 Jun 2022 14:21:39 +0300 Subject: [PATCH 2/6] fix wrapper --- src/shared/fetchWrapper.js | 25 ++++++++++++++++++++++--- 1 file changed, 22 insertions(+), 3 deletions(-) diff --git a/src/shared/fetchWrapper.js b/src/shared/fetchWrapper.js index 2cd36ad..3fff02a 100644 --- a/src/shared/fetchWrapper.js +++ b/src/shared/fetchWrapper.js @@ -3,7 +3,7 @@ function prepareUrl(url) { return `/api/${url}`; } -function handleRequest(attempts = 3, method, url, body) { +function handleRequest(method, url, attempts, body) { return new Promise((resolve, reject) => { (function internalRequest() { return request(method, url, body) @@ -44,7 +44,26 @@ function request(method, url, body) { return fetch(url, requestOptions); }; +function get(url, attempts = 1) { + return handleRequest('get', url, attempts); +} + +function del(url, attempts = 1) { + return handleRequest('del', url, attempts); +} + +function post(url, body, attempts = 1) { + return handleRequest('post', url, attempts, body); +} + +function put(url, body, attempts = 1) { + return handleRequest('put', url, attempts, body); +} + export const fetchWrapper = { - handleRequest, - baseUrl: '', + get, + del, + post, + put, + baseUrl: '' }; \ No newline at end of file From 81f5ec274137308598bd85cf6b002eafef4dd208 Mon Sep 17 00:00:00 2001 From: Daria Golova Date: Wed, 15 Jun 2022 14:36:23 +0300 Subject: [PATCH 3/6] fix methods --- src/shared/fetchWrapper.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/shared/fetchWrapper.js b/src/shared/fetchWrapper.js index 3fff02a..d6f420a 100644 --- a/src/shared/fetchWrapper.js +++ b/src/shared/fetchWrapper.js @@ -23,15 +23,15 @@ function handleRequest(method, url, attempts, body) { function request(method, url, body) { let controller = new AbortController; let requestOptions = {}; - if (method === 'get' || method === 'del'){ + if (method === 'GET' || method === 'DELETE'){ requestOptions = { - method: `${method.toUpperCase()}`, + method: method, signal: controller.signal, } }; - if (method === 'post' || method === 'put'){ + if (method === 'POST' || method === 'PUT'){ requestOptions = { - method: `${method.toUpperCase()}`, + method: method, headers: { Accept: 'application/json', 'Content-Type': 'application/json', @@ -45,19 +45,19 @@ function request(method, url, body) { }; function get(url, attempts = 1) { - return handleRequest('get', url, attempts); + return handleRequest('GET', url, attempts); } function del(url, attempts = 1) { - return handleRequest('del', url, attempts); + return handleRequest('DELETE', url, attempts); } function post(url, body, attempts = 1) { - return handleRequest('post', url, attempts, body); + return handleRequest('POST', url, attempts, body); } function put(url, body, attempts = 1) { - return handleRequest('put', url, attempts, body); + return handleRequest('PUT', url, attempts, body); } export const fetchWrapper = { From 632b98a81ab098cbb7bb12192334e048168280bb Mon Sep 17 00:00:00 2001 From: Daria Golova Date: Thu, 16 Jun 2022 14:30:41 +0300 Subject: [PATCH 4/6] added authorization by token --- src/shared/fetchWrapper.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/shared/fetchWrapper.js b/src/shared/fetchWrapper.js index d6f420a..d4c82de 100644 --- a/src/shared/fetchWrapper.js +++ b/src/shared/fetchWrapper.js @@ -11,8 +11,8 @@ function handleRequest(method, url, attempts, body) { .catch(err => --attempts > 0 ? internalRequest() : reject(err)) })() }) - .then((res) => res.json()) - .catch(() => []) + .then((res) => res.json()) + .catch(() => []) }; /** @@ -23,9 +23,13 @@ function handleRequest(method, url, attempts, body) { function request(method, url, body) { let controller = new AbortController; let requestOptions = {}; + if (!registrationStore.tokenKey) return Promise.reject(); if (method === 'GET' || method === 'DELETE'){ requestOptions = { method: method, + headers: { + Authorization: `Token ${registrationStore.tokenKey}`, + }, signal: controller.signal, } }; @@ -33,6 +37,7 @@ function request(method, url, body) { requestOptions = { method: method, headers: { + Authorization: `Token ${registrationStore.tokenKey}`, Accept: 'application/json', 'Content-Type': 'application/json', }, From 9bef3d93116f503e6fb035dcc91199648e7e6005 Mon Sep 17 00:00:00 2001 From: Daria Golova Date: Thu, 16 Jun 2022 15:25:25 +0300 Subject: [PATCH 5/6] fix authorization by token --- src/shared/fetchWrapper.js | 39 ++++++++++++++++++++++++++++---------- 1 file changed, 29 insertions(+), 10 deletions(-) diff --git a/src/shared/fetchWrapper.js b/src/shared/fetchWrapper.js index d4c82de..f3c0bc3 100644 --- a/src/shared/fetchWrapper.js +++ b/src/shared/fetchWrapper.js @@ -3,10 +3,10 @@ function prepareUrl(url) { return `/api/${url}`; } -function handleRequest(method, url, attempts, body) { +function handleRequest(method, url, attempts, token, body) { return new Promise((resolve, reject) => { (function internalRequest() { - return request(method, url, body) + return request(method, url, token, body) .then(resolve) .catch(err => --attempts > 0 ? internalRequest() : reject(err)) })() @@ -20,15 +20,14 @@ function handleRequest(method, url, attempts, body) { * @param {string} url - endpoint url. * @param {object} body - request body. */ -function request(method, url, body) { +function request(method, url, token, body) { let controller = new AbortController; let requestOptions = {}; - if (!registrationStore.tokenKey) return Promise.reject(); if (method === 'GET' || method === 'DELETE'){ requestOptions = { method: method, headers: { - Authorization: `Token ${registrationStore.tokenKey}`, + Authorization: `Token ${token}`, }, signal: controller.signal, } @@ -37,7 +36,7 @@ function request(method, url, body) { requestOptions = { method: method, headers: { - Authorization: `Token ${registrationStore.tokenKey}`, + Authorization: `Token ${token}`, Accept: 'application/json', 'Content-Type': 'application/json', }, @@ -50,19 +49,35 @@ function request(method, url, body) { }; function get(url, attempts = 1) { - return handleRequest('GET', url, attempts); + return handleRequest('GET', url, attempts, null); +} + +function getAuth(url, attempts = 1) { + return handleRequest('GET', url, attempts, registrationStore.tokenKey); } function del(url, attempts = 1) { - return handleRequest('DELETE', url, attempts); + return handleRequest('DELETE', url, attempts, null); +} + +function delAuth(url, attempts = 1) { + return handleRequest('DELETE', url, attempts, registrationStore.tokenKey); } function post(url, body, attempts = 1) { - return handleRequest('POST', url, attempts, body); + return handleRequest('POST', url, attempts, null, body); +} + +function postAuth(url, body, attempts = 1) { + return handleRequest('POST', url, attempts, registrationStore.tokenKey, body); } function put(url, body, attempts = 1) { - return handleRequest('PUT', url, attempts, body); + return handleRequest('PUT', url, attempts, null, body); +} + +function putAuth(url, body, attempts = 1) { + return handleRequest('PUT', url, attempts, registrationStore.tokenKey, body); } export const fetchWrapper = { @@ -70,5 +85,9 @@ export const fetchWrapper = { del, post, put, + getAuth, + delAuth, + postAuth, + putAuth, baseUrl: '' }; \ No newline at end of file From f209ee5f5f6c434ac4279d24eeaae10d1b5b9388 Mon Sep 17 00:00:00 2001 From: Daria Golova Date: Thu, 16 Jun 2022 16:05:48 +0300 Subject: [PATCH 6/6] added token availability check --- src/shared/fetchWrapper.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/shared/fetchWrapper.js b/src/shared/fetchWrapper.js index f3c0bc3..a44f72b 100644 --- a/src/shared/fetchWrapper.js +++ b/src/shared/fetchWrapper.js @@ -44,6 +44,9 @@ function request(method, url, token, body) { signal: controller.signal, } }; + if (!token) { + requestOptions.headers.Authorization = null; + } setTimeout(() => controller.abort(), 3000); return fetch(url, requestOptions); };