create fetch wrapper

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",

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",

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 () {
       </div>
     </div>
   )
-}
+})
 
 export default Verify;

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: '',
+};