Mapping a response to a model dynamically. (#436)

* Install camel-keys

* Mapping data  by camelcase-keys

* WIP

* WIP

Author: Noah Lee

ui/.eslintrc.js

@@ -6,5 +6,6 @@ module.exports = {
   rules: {
     '@typescript-eslint/no-explicit-any': 'off',
     '@typescript-eslint/no-empty-interface': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
   },
 };

ui/package-lock.json

@@ -9,6 +9,7 @@
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
     "antd": "^4.16.1",
+    "camelcase-keys": "^7.0.2",
     "craco-less": "^1.17.1",
     "follow-redirects": "^1.14.7",
     "http-status-codes": "^2.1.4",

ui/package.json

@@ -1,19 +1,13 @@
+import camelcaseKeys from 'camelcase-keys';
 import { StatusCodes } from 'http-status-codes';
 
 import { instance, headers } from './setting';
 import { _fetch } from './_base';
 import { Branch, HttpNotFoundError } from '../models';
 
-interface BranchData {
-  name: string;
-  commit_sha: string;
-}
-
-const mapDataToBranch = (data: BranchData): Branch => {
-  return {
-    name: data.name,
-    commitSha: data.commit_sha,
-  };
+const mapDataToBranch = (data: any): Branch => {
+  const branch = camelcaseKeys(data, { deep: true });
+  return branch;
 };
 
 export const listBranches = async (
@@ -30,7 +24,7 @@ export const listBranches = async (
     }
   )
     .then((response) => response.json())
-    .then((branches) => branches.map((b: BranchData) => mapDataToBranch(b)));
+    .then((branches) => branches.map((b: any) => mapDataToBranch(b)));
 
   return branches;
 };
@@ -54,7 +48,7 @@ export const getBranch = async (
 
   const ret: Branch = await response
     .json()
-    .then((b: BranchData) => mapDataToBranch(b));
+    .then((b: any) => mapDataToBranch(b));
 
   return ret;
 };

ui/src/apis/branch.ts

@@ -1,61 +1,24 @@
+import camelcaseKeys from 'camelcase-keys';
 import { StatusCodes } from 'http-status-codes';
 
 import { instance, headers } from './setting';
 import { _fetch } from './_base';
-import {
-  Commit,
-  Author,
-  Status,
-  HttpNotFoundError,
-  StatusState,
-} from '../models';
-
-interface CommitData {
-  sha: string;
-  message: string;
-  is_pull_request: boolean;
-  html_url: string;
-  author?: {
-    login: string;
-    avatar_url: string;
-    date: string;
-  };
-}
-
-export const mapDataToCommit = (data: CommitData): Commit => {
-  let author: Author | undefined;
-
-  if (data.author) {
-    author = {
-      login: data.author.login,
-      avatarUrl: data.author.avatar_url,
-      date: new Date(data.author.date),
-    };
+import { Commit, Status, HttpNotFoundError, StatusState } from '../models';
+
+export const mapDataToCommit = (data: any): Commit => {
+  const commit: Commit = camelcaseKeys(data, { deep: true });
+
+  if (commit.author) {
+    // Convert the type of date field.
+    commit.author.date = new Date(data.author.date);
   }
 
-  return {
-    sha: data.sha,
-    message: data.message,
-    isPullRequest: data.is_pull_request,
-    htmlUrl: data.html_url,
-    author,
-  };
+  return commit;
 };
 
-interface StatusData {
-  context: string;
-  avatar_url: string;
-  target_url: string;
-  state: string;
-}
-
-const mapDataToStatus = (data: StatusData): Status => {
-  return {
-    context: data.context,
-    avatarUrl: data.avatar_url,
-    targetUrl: data.target_url,
-    state: mapStatusState(data.state),
-  };
+const mapDataToStatus = (data: any): Status => {
+  const status = camelcaseKeys(data, { deep: true });
+  return status;
 };
 
 const mapStatusState = (state: string): StatusState => {
@@ -90,7 +53,7 @@ export const listCommits = async (
     }
   )
     .then((response) => response.json())
-    .then((commits) => commits.map((c: CommitData) => mapDataToCommit(c)));
+    .then((commits) => commits.map((c: any) => mapDataToCommit(c)));
 
   return commits;
 };
@@ -114,7 +77,7 @@ export const getCommit = async (
 
   const commit: Commit = await response
     .json()
-    .then((c: CommitData) => mapDataToCommit(c));
+    .then((c: any) => mapDataToCommit(c));
 
   return commit;
 };
@@ -138,7 +101,7 @@ export const listStatuses = async (
 
   const result = await response.json().then((d) => {
     let state: StatusState;
-    const statuses: Status[] = d.statuses.map((status: StatusData) =>
+    const statuses: Status[] = d.statuses.map((status: any) =>
       mapDataToStatus(status)
     );
 

ui/src/apis/commit.ts

@@ -1,46 +1,12 @@
+import camelcaseKeys from 'camelcase-keys';
 import { StatusCodes } from 'http-status-codes';
 
 import { instance, headers } from './setting';
 import { _fetch } from './_base';
-import { Config, Env, HttpNotFoundError } from '../models';
+import { Config, HttpNotFoundError } from '../models';
 
-interface ConfigData {
-  envs: EnvData[];
-}
-
-interface EnvData {
-  name: string;
-  required_contexts?: string[];
-  dynamic_payload?: {
-    enabled: boolean;
-    inputs: any;
-  };
-  review?: {
-    enabled: boolean;
-    reviewers: string[];
-  };
-}
-
-const mapDataToConfig = (data: ConfigData): Config => {
-  const envs: Env[] = data.envs.map((e: EnvData) => {
-    const { dynamic_payload, review } = e;
-
-    return {
-      name: e.name,
-      requiredContexts: e.required_contexts,
-      dynamicPayload: dynamic_payload
-        ? {
-            enabled: dynamic_payload?.enabled,
-            inputs: dynamic_payload?.inputs,
-          }
-        : undefined,
-      review,
-    };
-  });
-
-  return {
-    envs,
-  };
+const mapDataToConfig = (data: any): Config => {
+  return camelcaseKeys(data, { deep: true });
 };
 
 export const getConfig = async (