Use API v2 in web client

web/client/package.json

@@ -20,6 +20,8 @@
     "popper.js": "1.16.1",
     "vue": "2.6.12",
     "vue-class-component": "7.2.6",
+    "vue-json-viewer": "2.2.22",
+    "vue-phone-number-input": "1.12.13",
     "vue-property-decorator": "9.1.2",
     "vue-router": "3.5.1",
     "vuex": "3.6.2"

web/client/src/components/Scanner.vue

@@ -0,0 +1,108 @@
+<template>
+  <b-container class="mb-3">
+    <b-row align-h="between" align-v="center">
+      <h3>{{ name }}</h3>
+      <b-button
+        v-if="!error && !loading && !data"
+        @click="runScan"
+        variant="dark"
+        size="lg"
+        >Run</b-button
+      >
+      <b-spinner v-if="loading && !error" type="grow"></b-spinner>
+      <b-row v-if="error && !loading">
+        <b-alert class="m-0" show variant="danger" fade>{{ error }}</b-alert>
+        <b-button
+          v-if="!dryrunError"
+          @click="runScan"
+          variant="danger"
+          size="lg"
+          >Retry</b-button
+        >
+      </b-row>
+    </b-row>
+    <b-collapse :id="collapseId" class="mt-2 text-left">
+      <JsonViewer :value="data"></JsonViewer>
+    </b-collapse>
+  </b-container>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from "vue-property-decorator";
+import axios from "axios";
+import { mapState, mapMutations } from "vuex";
+import JsonViewer from "vue-json-viewer";
+import config from "@/config";
+
+@Component({
+  components: {
+    JsonViewer,
+  },
+})
+export default class Scanner extends Vue {
+  data = null;
+  loading = false;
+  dryrunError = false;
+  error = null;
+  computed = {
+    ...mapState(["number"]),
+    ...mapMutations(["pushError"]),
+  };
+
+  @Prop() scanId!: string;
+  @Prop() name!: string;
+
+  collapseId = "scanner-collapse" + this.scanId;
+
+  mounted(): void {
+    this.dryRun();
+  }
+
+  private async dryRun(): Promise<void> {
+    try {
+      const res = await axios.post(
+        `${config.apiUrl}/v2/scanners/${this.scanId}/dryrun`,
+        {
+          number: this.$store.state.number,
+        },
+        {
+          validateStatus: () => true,
+        }
+      );
+
+      if (!res.data.success && res.data.error) {
+        throw res.data.error;
+      }
+    } catch (error) {
+      this.dryrunError = true;
+      this.error = error;
+    }
+  }
+
+  private async runScan(): Promise<void> {
+    this.error = null;
+    this.loading = true;
+    try {
+      const res = await axios.post(
+        `${config.apiUrl}/v2/scanners/${this.scanId}/run`,
+        {
+          number: this.$store.state.number,
+        },
+        {
+          validateStatus: () => true,
+        }
+      );
+
+      if (!res.data.success && res.data.error) {
+        throw res.data.error;
+      }
+      this.data = res.data.result;
+      this.$root.$emit("bv::toggle::collapse", this.collapseId);
+    } catch (error) {
+      this.error = error;
+    }
+
+    this.loading = false;
+  }
+}
+</script>

web/client/src/router/index.ts

@@ -1,6 +1,7 @@
 import Vue from "vue";
 import VueRouter from "vue-router";
 import Scan from "../views/Scan.vue";
+import Number from "../views/Number.vue";
 import NotFound from "../views/NotFound.vue";
 
 Vue.use(VueRouter);
@@ -11,6 +12,11 @@ const routes = [
     name: "Scan",
     component: Scan,
   },
+  {
+    path: "/numbers/:number",
+    name: "Number",
+    component: Number,
+  },
   {
     path: "*",
     name: "NotFound",

web/client/src/shims-vue.d.ts

@@ -2,3 +2,5 @@ declare module "*.vue" {
   import Vue from "vue";
   export default Vue;
 }
+declare module "vue-json-viewer" {}
+declare module "vue-phone-number-input" {}

web/client/src/utils/index.ts

@@ -1,3 +1,10 @@
+import axios from "axios";
+import config from "../config/index";
+interface ScannerObject {
+  name: string;
+  description: string;
+}
+
 const formatNumber = (number: string): string => {
   return number.replace(/[_\W]+/g, "");
 };
@@ -8,4 +15,17 @@ const isValid = (number: string): boolean => {
   return formatted.match(/^[0-9]+$/) !== null && formatted.length > 2;
 };
 
-export { formatNumber, isValid };
+const formatString = (string: string): string => {
+  return string.replace(/([A-Z])/g, " $1").trim();
+};
+
+const getScanners = async (): Promise<ScannerObject[]> => {
+  const res = await axios.get(`${config.apiUrl}/v2/scanners`);
+
+  // TODO: Remove this filter once the scanner local is remove
+  return res.data.scanners.filter(
+    (scanner: ScannerObject) => scanner.name !== "local"
+  );
+};
+
+export { formatNumber, isValid, formatString, getScanners };

web/client/src/views/Number.vue

@@ -0,0 +1,134 @@
+<template>
+  <div>
+    <b-card
+      v-if="isLookup || showInformations"
+      header="Informations"
+      class="mb-3 mt-3 text-center"
+    >
+      <b-list-group flush>
+        <b-list-group-item
+          v-for="(value, name) in localData"
+          :key="name"
+          class="text-left d-flex"
+        >
+          <h5 class="text-capitalize m-0 mr-4">{{ formatString(name) }}:</h5>
+          <p class="m-0">{{ value }}</p>
+        </b-list-group-item>
+      </b-list-group>
+    </b-card>
+
+    <b-card v-if="isLookup" header="Scanners" class="text-center">
+      <Scanner
+        v-for="(scanner, index) in scanners"
+        :key="index"
+        :name="scanner.name.charAt(0).toUpperCase() + scanner.name.slice(1)"
+        :scanId="scanner.name"
+      />
+    </b-card>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+import { mapMutations, mapState } from "vuex";
+import { formatNumber, isValid, formatString, getScanners } from "../utils";
+import Scanner from "../components/Scanner.vue";
+import axios, { AxiosResponse } from "axios";
+import config from "@/config";
+
+interface ScannerObject {
+  name: string;
+  description: string;
+}
+
+interface Data {
+  loading: boolean;
+  isLookup: boolean;
+  showInformations: boolean;
+  scanners: Array<ScannerObject>;
+  localData: {
+    valid: boolean;
+    raw_local: string;
+    local: string;
+    e164: string;
+    international: string;
+    countryCode: number;
+    country: string;
+    carrier: string;
+  };
+}
+
+export type ScanResponse<T> = AxiosResponse<{
+  success: boolean;
+  result: T;
+  error: string;
+}>;
+
+export default Vue.extend({
+  components: { Scanner },
+  computed: {
+    ...mapState(["number"]),
+    ...mapMutations(["pushError"]),
+  },
+  data(): Data {
+    return {
+      loading: false,
+      isLookup: false,
+      showInformations: false,
+      scanners: [],
+      localData: {
+        valid: false,
+        raw_local: "",
+        local: "",
+        e164: "",
+        international: "",
+        countryCode: 33,
+        country: "",
+        carrier: "",
+      },
+    };
+  },
+  mounted() {
+    this.runScans();
+  },
+  methods: {
+    formatString: formatString,
+    async getScanners() {
+      try {
+        this.scanners = await getScanners();
+      } catch (error) {
+        this.$store.commit("pushError", { message: error });
+      }
+    },
+    async runScans(): Promise<void> {
+      if (!isValid(this.$route.params.number)) {
+        this.$store.commit("pushError", { message: "Number is not valid." });
+        return;
+      }
+
+      this.loading = true;
+
+      this.$store.commit("setNumber", formatNumber(this.$route.params.number));
+
+      try {
+        const res = await axios.post(`${config.apiUrl}/v2/numbers`, {
+          number: this.$store.state.number,
+        });
+
+        this.localData = res.data;
+
+        if (this.localData.valid) {
+          this.getScanners();
+          this.isLookup = true;
+        } else {
+          this.showInformations = true;
+        }
+      } catch (error) {
+        this.$store.commit("pushError", { message: error });
+      }
+
+      this.loading = false;
+    },
+  },
+});
+</script>