Techniques - TecProg-2018-2/TecProg-VoxPop-WebApp GitHub Wiki
Examples
Example 1 - Prioritize clarity (T22) and Default Behavior (T23)
Before
errorHandler(statusRequest: any) {
if (statusRequest === 401) {
document.getElementById('contactFail').style.display = 'block';
return true;
}
if (statusRequest === 500) {
document.getElementById('contactFail').style.display = 'block';
return true;
}
if (statusRequest === 400) {
document.getElementById('contactFail').style.display = 'block';
return true;
}
return false;
}
After
errorHandler(statusRequest: any) {
let statusError;
if (statusRequest === 401 || statusRequest === 500 || statusRequest === 400) {
document.getElementById('contactFail').style.display = 'block';
statusError = true;
} else {
statusError = false;
}
return statusError;
}
Example 2 - Prioritize clarity (T22) and Default Behavior (T23)
Before
if (this.requester.didSucceed(statusMsg)) {
document.getElementById('contactSuccess').style.display = 'block';
}
After
if (this.requester.didSucceed(statusMsg)) {
document.getElementById('contactSuccess').style.display = 'block';
} else {
document.getElementById('contactSuccess').style.display = 'none';
}
Example 3 - Prioritize clarity (T22) and Default Behavior (T23)
Before
filterRestrictPage(token: any) {
if (token === '') {
this.router.navigate(['login']);
return true;
}
}
filterLoginPage(token: any) {
if (token !== '') {
this.router.navigate(['']);
return true;
}
}
After
filterRestrictPage(token: any) {
if (token === '') {
this.router.navigate(['login']);
return true;
}else {
// Nothing to do
}
filterLoginPage(token: any) {
if (token !== '') {
this.router.navigate(['']);
return true;
}else {
// Nothing to do
}
}
Example 4 - Prioritize clarity (T22) and Default behavior (T23)
input-validator.service.ts Before
if (!validPassword) {
this.valueInvalidPassword = 'Sua senha deve ter no mínimo 6 caracteres';
document.getElementById('alert-invalid-password').style.display = 'block';
this.statusValidPassword = false;
this.borderColor('password', this.colorDanger);
} else {
document.getElementById('alert-invalid-password').style.display = 'none';
this.statusValidPassword = true;
this.borderColor('password', this.colorSucess);
}
After
if(validPassword) {
document.getElementById('alert-invalid-password').style.display = 'none';
this.statusValidPassword = true;
this.borderColor('password', this.colorSucess);
} else {
this.valueInvalidPassword = 'Sua senha deve ter no mínimo 6 caracteres';
document.getElementById('alert-invalid-password').style.display = 'block';
this.statusValidPassword = false;
this.borderColor('password', this.colorDanger);
}
Example 5 - Use standard language constructs (T27)
Before
input = {
topic: '',
email: '',
contactReason: '',
text: ''
};
After
input: MessageModel;
export class MessageModel {
constructor(
public topic: string,
public email: string,
public contactReason: string,
public text: string,
) { }
}
Example 6 - Use standard language constructs (T27)
Before
parlimentarian: any = {
name: '',
gender: '',
partido: '',
federal_unit: '',
photo: '',
birth_date: '',
education: '',
email: '',
compatibility: '',
};
After
parlimentarian: ParlimentarianCompModel;
export class ParlimentarianCompModel {
constructor(
public id: number = 0,
public name: string = '',
public gender: string = '',
public political_party: string = '',
public federal_unit: string = '',
public photo: string = '',
public birth_date: string = '',
public education: string = '',
public email: string = '',
public compatibility: string = '',
) {}
}
Example 7 - Don't let others touch where they should not (T24)
input-validator.service.ts
Before
valueErrorHandler: string = '';
valuePassword: string = '';
valueInvalidPassword: string = '';
valueUsername: string = '';
valueEmail: string = '';
valueInvalidInput: string = '';
password: string = '';
confirmPassword: string = '';
username: string = '';
statusPassword: boolean = false;
statusValidPassword: boolean = false;
statusUsername: boolean = false;
statusEmail: boolean = false;
colorDanger: string = '#d9534f';
colorSucess: string = '#5cb85c';
assert = require('assert');
After
public valueErrorHandler: string = '';
public valuePassword: string = '';
public valueInvalidPassword: string = '';
public valueUsername: string = '';
public valueEmail: string = '';
public valueInvalidInput: string = '';
private password: string = '';
private confirmPassword: string = '';
public username: string = '';
private statusPassword: boolean = false;
private statusValidPassword: boolean = false;
private statusUsername: boolean = false;
private statusEmail: boolean = false;
private colorDanger: string = '#d9534f';
private colorSucess: string = '#5cb85c';
private assert = require('assert');
Example 8 - Simple code and good presentation(T21) and Do not let others touch where they should not(T24)
login.component.ts
Before
valueInvalidMsg: string = 'Usuário ou senha inválida';
tokenValue: string = '';
registerSuccess: string = '';
logging: boolean = false;
After
//Técinica: Código simples e boa apresentação
private logging: boolean = false; //Técnica: Não deixe que os outros mexam onde não devem. Private
private assert = require('assert'); //Técnica: Não deixe que os outros mexam onde não devem. Private
Example 9 - Resource Manipulation (T26)
After
ngOnDestroy() {
this.user.destroy();
}
Example 10 - Simple code and good presentation(T21) and Do not let others touch where they should not(T24)
my-pls.component.ts
Before
term: string = '';
tokenValue: string = '';
showEditButtons: boolean = false;
pages: number = 1;
offset: number = 0;
itemsPerPage: number = 10;
votePosition: number;
userId: number;
numberPLsVoted: number;
propositionVote: any;
loading = true;
proposition: any = [
{
option: null,
proposition_id: null,
proposition_type: '',
proposition_type_initials: '',
number: null,
year: null,
abstract: '',
processing: '',
situation: '',
url_full: ''
}
];
After
//Técnica: Código organizado.
public showEditButtons: boolean = false;
public pages: number = 1;
public offset: number = 0;
public votePosition: number;
public propositionVote: any;
public loading = true;
//Técnica: Não deixe que os outros mexam onde não devem.
private itemsPerPage: number = 10;
private userId: number;
private assert = require('assert');
public proposition: any = [
{
option: null,
proposition_id: null,
proposition_type: '',
proposition_type_initials: '',
number: null,
year: null,
abstract: '',
processing: '',
situation: '',
url_full: ''
}
];
Example 11 - Simple code and good presentation(T21)
login.component.ts
Before
errorHandler(status) {
if (status === 400) {
document.getElementById('alert-invalid').style.display = 'block';
return false;
}
}
After
errorHandler(status) {
if (status === 400) {
document.getElementById('alert-invalid').style.display = 'block';
//Técnica: Código simples.
}
}
Example 12 - Simple code and good presentation(T21)
login.component.ts
Before
handleLoginResponse(request) {
request.subscribe(response => {
if (this.requester.didSucceed(response.status)) {
this.cookieService.set('basic_token', response.body['token']);
this.cookieService.set('userID', response.body['id']);
this.cookieService.set('userUsername', response.body['username']);
this.cookieService.set('userFirstName', response.body['first_name']);
this.cookieService.set('userLastName', response.body['last_name']);
this.router.navigate(['']);
this.logging = false;
}
},
error => {
console.log(error);
const statusAuth = error.status;
this.errorHandler(statusAuth);
this.logging = false;
});
}
After
handleLoginResponse(request) {
request.subscribe(success=> {
if (this.requester.didSucceed(success.status)) { // Técnica: Deixa o caminho feliz claro
this.cookieService.set('basic_token', success.body['token']);
this.cookieService.set('userID', success.body['id']);
this.cookieService.set('userUsername', success.body['username']);
this.cookieService.set('userFirstName', success.body['first_name']);
this.cookieService.set('userLastName', success.body['last_name']);
this.router.navigate(['']);
this.logging = false;
}
},
error => {
console.log(error);
const statusAuth = error.status;
this.errorHandler(statusAuth);
this.logging = false;
});
}