Refactoring

Refactoring

Here we would find all the things that currently are in the project and are necessary to be improved in order to get code quality, maintainability, scalability, avoid unexpected behavior and increase team value.

Environment

We should change all the places where we are defining environment values that could be redefined depending on what environment we are building or could be doit in runtime. This lets us apply better ways to add unit test and find easily

Example

Move this

assetsService.ts

this.imageAssets = {
    addContact: 'https://bliinx-assets.firebaseapp.com/images/Bliinx_Icon_AddContact.png'
}
this.logoAssets = {
      bliinxLogo: 'https://bliinx-assets.firebaseapp.com/logos/Bliinx_Logo.png'
}

emailService.ts

const BASE_API_URL = 'https://us-central1-bliinx-ae0e1.cloudfunctions.net/apiDev/public/emails/v1?platform=outlook';

groupService.ts

const BASE_API_URL = 'https://us-central1-bliinx-ae0e1.cloudfunctions.net/apiDev/public/groups/v1?platform=outlook';

to

environment.ts

const BASE_API_URL = https://us-central1-bliinx-ae0e1.cloudfunctions.net/apiDev/public

export const environment = {
  production: false,
  assets: {
      images: 'https://bliinx-assets.firebaseapp.com/images',
      logos: 'https://bliinx-assets.firebaseapp.com/logos'
  },
  apis: {
      emails: `${BASE_API_URL}emails/v1`,
      groups: `${BASE_API_URL}groups/v1`
  }
  platform: 'outlook' // 'outlook', 'gmail', 'etc'
};

assetsService.ts

this.imageAssets = {
    addContact: `${environment.assets.images}/Bliinx_Icon_AddContact.png`
}
this.logoAssets = {
    bliinxLogo: `${environment.assets.logos}/Bliinx_Logo.png`
}

emailService.ts

const BASE_API_URL = `${environment.assets.emails}?platform=outlook`;

groupService.ts

const BASE_API_URL = `${environment.assets.groups}?platform=outlook`;

API refactoring

• In all the APIS services there are a lot of methods doing a call for authentification and after that doing the api call. Get token authentification should be separated from all service in order that we will have a class that we have the auth strategy of all our code. This could be doit with the httpClient from Angular and httpInterceptor, or we could create abstracts service.

• We should avoid callback hell. Use "fn.bind(this)"

firstFunction(args, function() {
  secondFunction(args, function() {
    thirdFunction(args, function() {
      // And so on…
    });
  });
});

• Arrow function don't create a new scope, so "self = this" is not necessary

Components refactoring

• We should have a smaller component that we can reuse (filterComponent is huge)
• NgIf or another condition binding should be easy to read don't should to depend more than one condition
• Input and Output should describe the action into the component, for instance remplace "sendInfoToParent" for "onCloseEmail"
• We need to have classes whit single responsibility (there are a lot of place where we are mapping date time, could we use moment?)
• Use Angular convention (add all interfaces to component depending on which life cycle we use, all components should finish with the word Component)

Miscellaneous Errors

• We dont need ngIf, because if array is empty should not appierce nothings

<div *ngIf='conversationEmails.length > 0'>
      <div *ngFor="let email of conversationEmails">

• @Inject is only needed for injecting primitives. TypeScript's types let Angular know what to do in most cases

   constructor(
    private microsoftService: MicrosoftService,
    private analyticsService: AnalyticsService,
    private usersService: UsersService,
    private contactsService: ContactsService,
    private conversationsService: ConversationsService,
    private routingService: RoutingService,
    private router: Router,
    private emailService: EmailService,
    private route: ActivatedRoute,
    private domainsService: DomainsService,
  ) {
    this.routingService.loadRouting();
  }

CSS

• We should choose some css architecture and separate files and check why not use sass to reuse code
• We would have different style mode? dark mode, ligth mode?
• We should have different layout for diferent screen size? responsive design?