Refactoring duplicated code in Angular typescript

Question

I need to refactor duplicated code but I don't know how I would do it.

I have two methods that basically call the same service (I need to call the same request because of pagination) but now it looks ugly because of duplicated code. How can I make this better?

    getStockData(id: string): Observable<{
    searchResult: IStockResult[];
    searchCount: number;
}> {
    return this.service
        .search(
            id,
            this.service.getSearchMetaDefaults()
        )
        .pipe(
            map(response => {
                return {
                    searchResult: response, 
                    searchCount: response.meta.totalResourceCount
                };
            })
        );

Barremian · Accepted Answer · 2021-08-31 13:24:17Z

There are possibly multiple elegant solutions to the question. I could propose the following quick changes

Define types for the objects used (eg. using TS interface)

export interface ISearch { 
  searchResult: IStockResult[]; 
  searchCount: number; 
}

export interface IMeta {
  pagination: {
    size: number;
    index: number;
  },
  sorting: {
    order: string;
    attribute: string;
  }
}

Define optional parameters using ?: and send the argument as object using the types defined.

getData(id: string, meta?: IMeta): Observable<ISearch>

So the previous calls would change to

getStockData('some id') -> getData('some id')

paginate(1, 3, 'some id', 'some order', 'some attr') ->

const meta: IMeta = {
  pagination: {
    size: 3,
    index: 1
  },
  sorting: {
    order: 'some order',
    attribute: StockMapper.getDataForSorting('some attr')
  }
};

getData('some id', meta);

Check if the optional argument is defined using nullish coalescing operator (??) before using it.

const meta = meta ?? this.service.getSearchMetaDefaults();

Combining everything

getData(id: string, meta?: IMeta): Observable<ISearch> {
  const meta = meta ?? this.service.getSearchMetaDefaults();

  return this.service.search(id, meta).pipe(
    map(response => ({
      searchResult: StockMapper.fromStockResource(response),
      searchCount: response.meta.totalResourceCount
    } as ISearch))
  );
}

Collectives™ on Stack Overflow

Refactoring duplicated code in Angular typescript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related