Bootzooka frontend - the more functional way

ui/package.json

@@ -19,7 +19,10 @@
     "axios": "^0.20.0",
     "bootstrap": "^4.5.2",
     "formik": "^2.2.0",
+    "fp-ts": "^2.9.5",
     "immer": "^7.0.9",
+    "io-ts": "^2.2.14",
+    "io-ts-reporters": "^1.2.2",
     "jest-environment-jsdom-sixteen": "^1.0.3",
     "noop-ts": "^1.0.3",
     "react": "^16.13.1",

ui/src/services/AxiosService/AxiosService.ts

@@ -0,0 +1,69 @@
+import { Errors, Type } from "io-ts";
+import * as E from 'fp-ts/Either';
+import { pipe } from "fp-ts/pipeable";
+import reporter from 'io-ts-reporters';
+import axios, { AxiosRequestConfig } from "axios";
+
+export async function fetchJson<T, O, I>(
+  url: string,
+  validator: Type<T, O, I>,
+  config: AxiosSecuredRequestConfig = { securedRequest: true },
+): Promise<E.Either<Error, T>> {
+  try {
+    const response = await axios.get(`${url}`, config);
+    const json: I = await response.data;
+    const result: E.Either<Errors, T> = validator.decode(json);
+
+    return pipe(
+      result,
+      E.fold(
+        () => {
+          const messages = reporter.report(result);
+          return E.left(new Error(messages.join('\n')));
+        },
+        (value: T) => E.right(value)),
+    )
+  } catch (err) {
+    return Promise.resolve(E.left(err))
+  }
+}
+
+export async function sendJson<T, U, O, I>(
+  url: string,
+  validator: Type<U, O, I>,
+  data: T,
+  config: AxiosSecuredRequestConfig = { securedRequest: true },
+): Promise<E.Either<Error, U>> {
+  try {
+    const response = await axios.post(`${url}`, data, config);
+    const json: I = await response.data;
+    const result: E.Either<Errors, U> = validator.decode(json);
+
+    return pipe(
+      result,
+      E.fold(
+        () => {
+          const messages = reporter.report(result);
+          return E.left(new Error(messages.join('\n')));
+        },
+        (value: U) => E.right(value)
+      )
+    )
+  } catch (err) {
+    return Promise.resolve(E.left(err))
+  }
+}
+
+type AxiosSecuredRequestConfig = AxiosRequestConfig & { securedRequest?: boolean };
+
+const _securedRequest = (config: AxiosSecuredRequestConfig) => config.securedRequest;
+
+const requestHandler = (request: AxiosRequestConfig) => {
+  if (_securedRequest(request)) {
+    const apiKey = localStorage.getItem('apiKey');
+    request.headers['Authorization'] = `Bearer ${apiKey}`;
+  }
+  return request;
+};
+
+axios.interceptors.request.use(request => requestHandler(request));

ui/yarn.lock

@@ -4934,6 +4934,11 @@ forwarded@~0.1.2:
   resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84"
   integrity sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ=
 
+fp-ts@^2.9.5:
+  version "2.9.5"
+  resolved "https://registry.yarnpkg.com/fp-ts/-/fp-ts-2.9.5.tgz#6690cd8b76b84214a38fc77cbbbd04a38f86ea90"
+  integrity sha512-MiHrA5teO6t8zKArE3DdMPT/Db6v2GUt5yfWnhBTrrsVfeCJUUnV6sgFvjGNBKDmEMqVwRFkEePL7wPwqrLKKA==
+
 fragment-cache@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/fragment-cache/-/fragment-cache-0.2.1.tgz#4290fad27f13e89be7f33799c6bc5a0abfff0d19"
@@ -5670,6 +5675,16 @@ invert-kv@^2.0.0:
   resolved "https://registry.yarnpkg.com/invert-kv/-/invert-kv-2.0.0.tgz#7393f5afa59ec9ff5f67a27620d11c226e3eec02"
   integrity sha512-wPVv/y/QQ/Uiirj/vh3oP+1Ww+AWehmi1g5fFWGPF6IpCBCDVrhgHRMvrLfdYcwDh3QJbGXDW4JAuzxElLSqKA==
 
+io-ts-reporters@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/io-ts-reporters/-/io-ts-reporters-1.2.2.tgz#4d3219777ea5219c7d8f6ffac01fd68e72426dd1"
+  integrity sha512-igASwWWkDY757OutNcM6zTtdJf/eTZYkoe2ymsX2qpm5bKZLo74FJYjsCtMQOEdY7dRHLLEulCyFQwdN69GBCg==
+
+io-ts@^2.2.14:
+  version "2.2.14"
+  resolved "https://registry.yarnpkg.com/io-ts/-/io-ts-2.2.14.tgz#99405fab547690784d70c54a3048a44711237316"
+  integrity sha512-UWL1mdDe5YI4+/7YlrbsSwKmsECFFlWcVHT2CPGzeNODHj2qY0cibjulYfrfz5SCPoDAsjVP7vFKGcF+L10+SQ==
+
 ip-regex@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/ip-regex/-/ip-regex-2.1.0.tgz#fa78bf5d2e6913c911ce9f819ee5146bb6d844e9"