Home > Software engineering >  How to refactor this Angular/TS code into few lines for better performance & readability?
How to refactor this Angular/TS code into few lines for better performance & readability?

Time:01-02

I have a getBaseUrl() method which assigns a string value to this.baseURL depending on the serviceType value.

getBaseUrl(serviceType: string, network?: string) {
    this.network = network;

    const PROXY_13541_NEEDED_SERVICE_TYPES = ["pipInventory"];
    const PROXY_13561_NEEDED_SERVICE_TYPES = [
      "pipChangeManager",
      "pubChangeManagerdbw",
      "pubChangeManager",
      "pubChangeManager alert",
      "pipChangeManagerBulkvalidate",
    ];
    const PROXY_13651_NEEDED_SERVICE_TYPES = [
      "elineChangeManagerSubscribe",
      "elineChangeManager",
      "elanChangeManager",
      "elanChangeManagerBulkvalidate",
    ];
    const PROXY_13661_NEEDED_SERVICE_TYPES = [
      "enum-values-by-pagetype",
      "dnmCommon",
      "self-service",
      "dnmEline",
      "dnm",
      "dnmDelphiTestResult",
      "chatbot",
    ];
    const PROXY_13396_NEEDED_SERVICE_TYPES = ["pnp"];
    const PROXY_13621_NEEDED_SERVICE_TYPES = [
      "utilizationExportController",
      "utilizationExportController_pub",
      "bulkUtilizationPub",
    ];
    const PROXY_13751_NEEDED_SERVICE_TYPES = ["ccds"];
    const PROXY_13551_NEEDED_SERVICE_TYPES = ["routerservice"];
    const PROXY_13571_NEEDED_SERVICE_TYPES = [
      "pipAnalyticscheduled",
      "pipAnalytics",
      "pipAnalyticsNTD",
      "pipAnalyticsBulk",
    ];
    const PROXY_14150_NEEDED_SERVICE_TYPES = [
      "12and13workflow",
      "12and13workflowstatus",
      "dnmworkflow",
    ];
    const PROXY_14160_NEEDED_SERVICE_TYPES = ["errorManagement"];
    const PROXY_13601_NEEDED_SERVICE_TYPES = [
      "dnmActivationSupport",
      "activation",
    ];
    const PROXY_13631_NEEDED_SERVICE_TYPES = [
      "pubInventory",
      "pubInventorySubInprogress",
      "pubInventoryAccessSpeed",
    ];
    const PROXY_7303_NEEDED_SERVICE_TYPES = ["provRestBridge"];
    const PROXY_13271_NEEDED_SERVICE_TYPES = ["vams"];
    const PROXY_13822_NEEDED_SERVICE_TYPES = ["ucpe"];
    const PROXY_13641_NEEDED_SERVICE_TYPES = [
      "ethernetEline",
      "ethernetElineBulk",
      "ethernetAccess",
      "ethernetElan",
      "ethernetTest",
    ];
    const PROXY_13721_NEEDED_SERVICE_TYPES = ["sciChangeManager"];
    const PROXY_13711_NEEDED_SERVICE_TYPES = ["scicatalog"];
    const PROXY_13784_NEEDED_SERVICE_TYPES = ["livedashboard"];
    const PROXY_13182_NEEDED_SERVICE_TYPES = ["1mmsService"];
    const PROXY_13171_NEEDED_SERVICE_TYPES = [
      "pipVNS",
      "upiServices",
      "webComponent",
      "",
    ];

    this.options = this.getOptions();

    if (PROXY_13541_NEEDED_SERVICE_TYPES.includes(serviceType)) {
      this.baseURL = "/PROXY_13541/";
    } else if (PROXY_13561_NEEDED_SERVICE_TYPES.includes(serviceType)) {
      this.baseURL = "/PROXY_13561/";
    } else if (PROXY_13651_NEEDED_SERVICE_TYPES.includes(serviceType)) {
      this.baseURL = "/PROXY_13651/";
    } else if (PROXY_13661_NEEDED_SERVICE_TYPES.includes(serviceType)) {
      this.baseURL = "/PROXY_13661/";
    } else if (PROXY_13396_NEEDED_SERVICE_TYPES.includes(serviceType)) {
      this.baseURL = "/PROXY_13396/";
      this.options = this.getVnsOptions();
    } else if (PROXY_13621_NEEDED_SERVICE_TYPES.includes(serviceType)) {
      this.baseURL = "/PROXY_13621/";
    } else if (PROXY_13751_NEEDED_SERVICE_TYPES.includes(serviceType)) {
      this.baseURL = "/PROXY_13751/";
    } else if (PROXY_13551_NEEDED_SERVICE_TYPES.includes(serviceType)) {
      this.baseURL = "/PROXY_13551/";
    } else if (PROXY_13571_NEEDED_SERVICE_TYPES.includes(serviceType)) {
      this.baseURL = "/PROXY_13571/";
    } else if (PROXY_14150_NEEDED_SERVICE_TYPES.includes(serviceType)) {
      this.baseURL = "/PROXY_14158/";
    } else if (PROXY_14160_NEEDED_SERVICE_TYPES.includes(serviceType)) {
      this.baseURL = "/PROXY_14160/";
    } else if (PROXY_13601_NEEDED_SERVICE_TYPES.includes(serviceType)) {
      this.baseURL = "/PROXY_13601/";
    } else if (PROXY_13631_NEEDED_SERVICE_TYPES.includes(serviceType)) {
      this.baseURL = "/PROXY_13631/";
    } else if (PROXY_7303_NEEDED_SERVICE_TYPES.includes(serviceType)) {
      this.baseURL = "/PROXY_7303/";
    } else if (PROXY_13271_NEEDED_SERVICE_TYPES.includes(serviceType)) {
      this.baseURL = "/PROXY_13271/";
      this.options = this.getVnsOptions();
    } else if (PROXY_13822_NEEDED_SERVICE_TYPES.includes(serviceType)) {
      this.baseURL = "/PROXY_13641/";
    } else if (PROXY_13641_NEEDED_SERVICE_TYPES.includes(serviceType)) {
      this.baseURL = "/PROXY_13721";
    } else if (PROXY_13721_NEEDED_SERVICE_TYPES.includes(serviceType)) {
      this.baseURL = "/PROXY_13721/";
    } else if (PROXY_13711_NEEDED_SERVICE_TYPES.includes(serviceType)) {
      this.baseURL = "/PROXY_13711/";
    } else if (PROXY_13784_NEEDED_SERVICE_TYPES.includes(serviceType)) {
      this.baseURL = "/PROXY_13784/";
    } else if (PROXY_13182_NEEDED_SERVICE_TYPES.includes(serviceType)) {
      this.baseURL = "/PROXY_13182/";
    } else if (PROXY_13171_NEEDED_SERVICE_TYPES.includes(serviceType)) {
      this.baseURL = "/PROXY_13171/";
      this.options = this.getVnsOptions();
    } else {
      this.baseURL = "/PROXY_UNDEFINED/";
      this.options = this.getVnsOptions();
    }
  }

I am expecting the method to be refactored in such a way that the method has

  1. Few number of lines
  2. Best performance and
  3. Good readability

Please help me on this...

CodePudding user response:

I replaced the long list of constants and if-else statements with an object serviceTypeMap that maps base URLs to arrays of service types. Then, I used a for-of loop to iterate over the entries in serviceTypeMap and check if the service type passed to the function is included in the array of needed service types. If it is, the corresponding base URL is assigned to this.baseURL and the loop is exited early using the break statement.

This reduces the number of lines and also improves performance because the loop will exit as soon as a match is found, rather than continuing to check all of the service types. Hope this helps!

getBaseUrl(serviceType: string, network?: string) {
  this.network = network;

  const serviceTypeMap = {
    PROXY_13541: ["pipInventory"],
    PROXY_13561: [
      "pipChangeManager",
      "pubChangeManagerdbw",
      "pubChangeManager",
      "pubChangeManager alert",
      "pipChangeManagerBulkvalidate"
    ],
    PROXY_13651: [
      "elineChangeManagerSubscribe",
      "elineChangeManager",
      "elanChangeManager",
      "elanChangeManagerBulkvalidate"
    ],
    PROXY_13661: [
      "enum-values-by-pagetype",
      "dnmCommon",
      "self-service",
      "dnmEline",
      "dnm",
      "dnmDelphiTestResult",
      "chatbot"
    ],
    PROXY_13396: ["pnp"],
    PROXY_13621: [
      "utilizationExportController",
      "utilizationExportController_pub",
      "bulkUtilizationPub"
    ],
    PROXY_13751: ["ccds"],
    PROXY_13551: ["routerservice"],
    PROXY_13571: [
      "pipAnalyticscheduled",
      "pipAnalytics",
      "pipAnalyticsNTD",
      "pipAnalyticsBulk"
    ],
    PROXY_14150: [
      "12and13workflow",
      "12and13workflowstatus",
      "dnmworkflow"
    ],
    PROXY_14160: ["errorManagement"],
    PROXY_13601: [
      "dnmActivationSupport",
      "activation"
    ],
    PROXY_13631: [
      "pubInventory",
      "pubInventorySubInprogress",
      "pubInventoryAccessSpeed"
    ],
    PROXY_7303: ["provRestBridge"],
    PROXY_13271: ["vams"],
    PROXY_13822: ["ucpe"],
    PROXY_13641: [
      "ethernetEline",
      "ethernetElineBulk",
      "ethernetAccess",
      "ethernetElan",
      "ethernetTest"
    ],
    PROXY_13721: ["sciChangeManager"],
    PROXY_13711: ["scicatalog"],
    PROXY_13784: ["livedashboard"],
    PROXY_13182: ["1mmsService"],
    PROXY_13171: [
      "pipVNS",
      "upiServices",
      "webComponent",
      ""
    ]
  };

  for (const [baseURL, neededServiceTypes] of Object.entries(serviceTypeMap)) {
    if (neededServiceTypes.includes(serviceType)) {
      this.baseURL = `/${baseURL}/`;
      break;
    }
  }

  this.options = this.getOptions();
}

CodePudding user response:

Follow below step and you will find better code structure, easy readability and Best performance.

  1. Create separate file for your serviceTypeMap variable named service-type.enum.ts and put your array there as like below

Enums allow a developer to define a set of named constants. Using enums can make it easier to document intent, or create a set of distinct cases. TypeScript provides both numeric and string-based enums.

export enum ServiceTypeMap  = {
    PROXY_13541: ["pipInventory"],
    PROXY_13561: [
      "pipChangeManager",
      "pubChangeManagerdbw",
      "pubChangeManager",
      "pubChangeManager alert",
      "pipChangeManagerBulkvalidate"
    ],
    PROXY_13651: [
      "elineChangeManagerSubscribe",
      "elineChangeManager",
      "elanChangeManager",
      "elanChangeManagerBulkvalidate"
    ],
    PROXY_13661: [
      "enum-values-by-pagetype",
      "dnmCommon",
      "self-service",
      "dnmEline",
      "dnm",
      "dnmDelphiTestResult",
      "chatbot"
    ],
    PROXY_13396: ["pnp"],
    PROXY_13621: [
      "utilizationExportController",
      "utilizationExportController_pub",
      "bulkUtilizationPub"
    ],
    PROXY_13751: ["ccds"],
    PROXY_13551: ["routerservice"],
    PROXY_13571: [
      "pipAnalyticscheduled",
      "pipAnalytics",
      "pipAnalyticsNTD",
      "pipAnalyticsBulk"
    ],
    PROXY_14150: [
      "12and13workflow",
      "12and13workflowstatus",
      "dnmworkflow"
    ],
    PROXY_14160: ["errorManagement"],
    PROXY_13601: [
      "dnmActivationSupport",
      "activation"
    ],
    PROXY_13631: [
      "pubInventory",
      "pubInventorySubInprogress",
      "pubInventoryAccessSpeed"
    ],
    PROXY_7303: ["provRestBridge"],
    PROXY_13271: ["vams"],
    PROXY_13822: ["ucpe"],
    PROXY_13641: [
      "ethernetEline",
      "ethernetElineBulk",
      "ethernetAccess",
      "ethernetElan",
      "ethernetTest"
    ],
    PROXY_13721: ["sciChangeManager"],
    PROXY_13711: ["scicatalog"],
    PROXY_13784: ["livedashboard"],
    PROXY_13182: ["1mmsService"],
    PROXY_13171: [
      "pipVNS",
      "upiServices",
      "webComponent",
      ""
    ]
  };

  1. Let's define getBaseUrl() method now

/* Import your enum */

public getBaseUrl(serviceType: string, network?: string) {
  this.network = network;

  for (const [baseURL, neededServiceTypes] of Object.entries(ServiceTypeMap)) {
    if (neededServiceTypes.includes(serviceType)) {
      this.baseURL = `/${baseURL}/`;
      break;
    }
  }

  this.options = this.getOptions();
}

Thanks!

  • Related