Examples

Decomposition in atomic functions (T36)

Example 1

Before

  setSidebar(sidebarCookie: any) {
    // If sidebar cookie inexists, the sidebar is deactivate
    if (sidebarCookie === 'true') {
      const sidebarStatus: HTMLElement = document.getElementById('sidebar');
      this.assert.ifError(sidebarStatus == null);
      sidebarStatus.classList.toggle('active');
      const contentStatus: HTMLElement = document.getElementById('content');
      contentStatus.classList.toggle('active');
    } else {
       const sidebarStatus: HTMLElement = document.getElementById('sidebar');
       this.assert.ifError(sidebarStatus == null);
       sidebarStatus.classList.toggle('deactive');
       const contentStatus: HTMLElement = document.getElementById('content');
       contentStatus.classList.toggle('deactive');
    }
  }

After

  setSidebar(sidebarCookie: any) {
    // If sidebar cookie inexists, the sidebar is deactivate
    if (sidebarCookie === 'true') {
      this.showStyleSuccess();
    } else {
      this.showStyleFailed();
    }
  }

  showStyleSuccess() {
    const sidebarStatus: HTMLElement = document.getElementById('sidebar');
      this.assert.ifError(sidebarStatus == null);
      sidebarStatus.classList.toggle('active');
    const contentStatus: HTMLElement = document.getElementById('content');
      contentStatus.classList.toggle('active');
  }

  showStyleFailed() {
    const sidebarStatus: HTMLElement = document.getElementById('sidebar');
      this.assert.ifError(sidebarStatus == null);
      sidebarStatus.classList.toggle('deactive');
    const contentStatus: HTMLElement = document.getElementById('content');
      contentStatus.classList.toggle('deactive');
  }

Example 2

Before

getUser(userId) {
    this.tokenValue = this.token.getToken();
    this.tokenHeader = {'Content-Type': 'application/json', 'Authorization': this.tokenValue};
    const endpoint = this.baseURL.concat('users/' + userId.toString() + '/');
    console.log('Making GET REQUEST USER ON URL: ' + endpoint);
    return this.http.get(endpoint,  {headers: this.tokenHeader, observe: 'response'});
  }

  getVotedProposition(offset) {
    this.tokenValue = this.token.getToken();
    this.tokenHeader = {'Content-Type': 'application/json', 'Authorization': this.tokenValue};
    const endpoint = this.baseURL.concat('user_votes/?limit=10&offset=' + offset);
    console.log('Making GET REQUEST VOTED PROPOITION ON URL: ' + endpoint);
    return this.http.get(endpoint, {headers: this.tokenHeader, observe: 'response'});
  }

  getSearchVotedProposition(offset, keyword) {
    this.tokenValue = this.token.getToken();
    this.tokenHeader = {'Content-Type': 'application/json', 'Authorization': this.tokenValue};
    const endpoint = this.baseURL.concat('user_votes/?limit=10&offset=' + offset + '&query=' + keyword);
    console.log('Making GET REQUEST SEARCH VOTED PROPOITION ON URL: ' + endpoint);
    return this.http.get(endpoint, {headers: this.tokenHeader, observe: 'response'});
  }

  getMostCompatible() {
    this.tokenValue = this.token.getToken();
    this.tokenHeader = {'Content-Type': 'application/json', 'Authorization': this.tokenValue};
    const endpoint = this.baseURL.concat('statistics/most_compatible/');
    console.log('Making GET MOST COMPATIBLE REQUEST ON URL: ' + endpoint);
    return this.http.get(endpoint, {headers: this.tokenHeader, observe: 'response'});
  }

  getProjects() {
    this.tokenValue = this.token.getToken();
    this.tokenHeader = {'Content-Type': 'application/json', 'Authorization': this.tokenValue};
    const endpoint = this.baseURL.concat('propositions/non_voted_by_user/');
    console.log('Making GET PROJECTS REQUEST ON URL: ' + endpoint);
    return this.http.get(endpoint, {headers: this.tokenHeader, observe: 'response'});
  }

  getParliamentarian (limit, offset) {
    this.tokenValue = this.token.getToken();
    this.tokenHeader = {'Content-Type': 'application/json', 'Authorization': this.tokenValue};
    const endpoint = this.baseURL.concat('parliamentarians/?limit=' + limit + '&offset=' + offset);
    console.log('Making GET PARLIAMENTERIAN REQUEST ON URL: ' + endpoint);
    return this.http.get(endpoint, {headers: this.tokenHeader, observe: 'response'});
  }

  getSearchedParliamentarian (limit, offset, keyword: string) {
    this.tokenValue = this.token.getToken();
    this.tokenHeader = {'Content-Type': 'application/json', 'Authorization': this.tokenValue};
    const endpoint = this.baseURL.concat('parliamentarians/?limit=' + limit + '&offset=' + offset + '&query=' + keyword);
    console.log('Making QUERY REQUEST USER ON URL: ' + endpoint);
    this.headers = (this.tokenValue === '') ? this.headers : this.tokenHeader;
    return this.http.get(endpoint, {headers: this.headers, observe: 'response'});
  }

  getParlimentarianSpecific(parlimentaryId) {
    this.tokenValue = this.token.getToken();
    this.tokenHeader = {'Content-Type': 'application/json', 'Authorization': this.tokenValue};
    const endpoint = this.baseURL.concat('parliamentarians/' + parlimentaryId + '/');
    this.headers = (this.tokenValue === '') ? this.headers : this.tokenHeader;
    return this.http.get(endpoint, {headers: this.headers, observe: 'response'});
  }

  getPropositionSpecific(propositionId) {
    this.tokenValue = this.token.getToken();
    this.tokenHeader = {'Content-Type': 'application/json', 'Authorization': this.tokenValue};
    const endpoint = this.baseURL.concat('propositions/' + propositionId + '/');
    this.headers = (this.tokenValue === '') ? this.headers : this.tokenHeader;
    return this.http.get(endpoint, {headers: this.headers, observe: 'response'});
  }

  getPropositionSpecificSocialInfo(propositionId) {
    this.tokenValue = this.token.getToken();
    this.tokenHeader = {'Content-Type': 'application/json', 'Authorization': this.tokenValue};
    const endpoint = this.baseURL.concat('propositions/' + propositionId + '/social_information_data/');
    this.headers = (this.tokenValue === '') ? this.headers : this.tokenHeader;
    return this.http.get(endpoint, {headers: this.headers, observe: 'response'});
  }

  getFollow(id) {
    this.tokenValue = this.token.getToken();
    this.tokenHeader = {'Content-Type': 'application/json', 'Authorization': this.tokenValue};
    const endpoint = this.baseURL.concat('user_following/' + id + '/');
    this.headers = (this.tokenValue === '') ? this.headers : this.tokenHeader;
    console.log('Making GET FOLLOW REQUEST ON URL: ' + endpoint);
    return this.http.get(endpoint, {headers: this.headers, observe: 'response'});
  }

  getFollowingParliamentarians(limit, offset) {
    this.tokenValue = this.token.getToken();
    this.tokenHeader = {'Content-Type': 'application/json', 'Authorization': this.tokenValue};
    const endpoint = this.baseURL.concat('user_following/?limit=' + limit + '&offset=' + offset);
    console.log('Making POST REQUEST USER ON URL: ' + endpoint);
    this.headers = (this.tokenValue === '') ? this.headers : this.tokenHeader;
    console.log('Making GET FOLLOWING PARLIAMENTERIANS REQUEST ON URL: ' + endpoint);
    return this.http.get(endpoint, {headers: this.headers, observe: 'response'});
  }

  getSearchFollowingParliamentarians(limit, offset, keyword) {
    this.tokenValue = this.token.getToken();
    this.tokenHeader = {'Content-Type': 'application/json', 'Authorization': this.tokenValue};
    const endpoint = this.baseURL.concat('user_following/?limit=' + limit + '&offset=' + offset + '&query=' + keyword);
    console.log('Making POST REQUEST USER ON URL: ' + endpoint);
    this.headers = (this.tokenValue === '') ? this.headers : this.tokenHeader;
    console.log('Making GET SEARCH FOLLOWING PARLIAMENTARIAN REQUEST ON URL: ' + endpoint);
    return this.http.get(endpoint, {headers: this.headers, observe: 'response'});
  }

  putUser(user: UserModel, userId) {
    const endpoint = this.baseURL.concat('users/' + userId.toString() + '/');
    this.tokenValue = this.token.getToken();
    this.tokenHeader = {'Content-Type': 'application/json', 'Authorization': this.tokenValue};
    console.log('Making PUT REQUEST USER ON URL: ' + endpoint);
    return this.http.patch(endpoint, JSON.stringify(user),  {headers: this.tokenHeader, observe: 'response'});
  }

  postVote(vote: VoteModel) {
    this.tokenValue = this.token.getToken();
    this.tokenHeader = {'Content-Type': 'application/json', 'Authorization': this.tokenValue};
    const endpoint = this.baseURL.concat('user_votes/');
    console.log('Making POST REQUEST VOTE ON URL: ' + endpoint);
    console.log(vote);
    return this.http.post(endpoint, JSON.stringify(vote), {headers: this.tokenHeader, observe: 'response'});
  }

  postFollow(id: Number) {
    const jsonString = '{"parliamentary": ' + id + '}';
    this.tokenValue = this.token.getToken();
    this.tokenHeader = {'Content-Type': 'application/json', 'Authorization': this.tokenValue};
    const endpoint = this.baseURL.concat('user_following/');
    console.log('Making POST REQUEST FOLLOW ON URL: ' + endpoint);
    console.log(jsonString);
    return this.http.post(endpoint, jsonString, {headers: this.tokenHeader, observe: 'response'});
  }

  deleteFollow(id: Number) {
    this.tokenValue = this.token.getToken();
    this.tokenHeader = {'Content-Type': 'application/json', 'Authorization': this.tokenValue};
    const endpoint = this.baseURL.concat('user_following/' + id + '/');
    console.log('Making DELETE FOLLOW REQUEST ON URL: ' + endpoint);
    return this.http.delete(endpoint, {headers: this.tokenHeader, observe: 'response'});
  }

  updateVote(vote: VoteModel, id: number) {
    this.tokenValue = this.token.getToken();
    this.tokenHeader = {'Content-Type': 'application/json', 'Authorization': this.tokenValue};
    const endpoint = this.baseURL.concat('user_votes/' + id + '/');
    console.log('Making PUT REQUEST VOTE ON URL: ' + endpoint);
    console.log(vote);
    return this.http.put(endpoint, JSON.stringify(vote), {headers: this.tokenHeader, observe: 'response'});
  }

After

 // Método Criado
  updateTokenValue(){
    this.tokenValue = this.token.getToken();
    this.tokenHeader = {'Content-Type': 'application/json', 'Authorization': this.tokenValue};
  }
//

  getUser(userId) {
    this.updateTokenValue();
    const endpoint = this.baseURL.concat('users/' + userId.toString() + '/');
    console.log('Making GET REQUEST USER ON URL: ' + endpoint);
    return this.http.get(endpoint,  {headers: this.tokenHeader, observe: 'response'});
  }

  getVotedProposition(offset) {
    this.updateTokenValue();
    const endpoint = this.baseURL.concat('user_votes/?limit=10&offset=' + offset);
    console.log('Making GET REQUEST VOTED PROPOITION ON URL: ' + endpoint);
    return this.http.get(endpoint, {headers: this.tokenHeader, observe: 'response'});
  }

  getSearchVotedProposition(offset, keyword) {
    this.updateTokenValue();
    const endpoint = this.baseURL.concat('user_votes/?limit=10&offset=' + offset + '&query=' + keyword);
    console.log('Making GET REQUEST SEARCH VOTED PROPOITION ON URL: ' + endpoint);
    return this.http.get(endpoint, {headers: this.tokenHeader, observe: 'response'});
  }

getMostCompatible() {
    this.updateTokenValue();
    const endpoint = this.baseURL.concat('statistics/most_compatible/');
    console.log('Making GET MOST COMPATIBLE REQUEST ON URL: ' + endpoint);
    return this.http.get(endpoint, {headers: this.tokenHeader, observe: 'response'});
  }

  getProjects() {
    this.updateTokenValue();
    const endpoint = this.baseURL.concat('propositions/non_voted_by_user/');
    console.log('Making GET PROJECTS REQUEST ON URL: ' + endpoint);
    return this.http.get(endpoint, {headers: this.tokenHeader, observe: 'response'});
  }

  getParliamentarian (limit, offset) {
    this.updateTokenValue();
    const endpoint = this.baseURL.concat('parliamentarians/?limit=' + limit + '&offset=' + offset);
    console.log('Making GET PARLIAMENTERIAN REQUEST ON URL: ' + endpoint);
    return this.http.get(endpoint, {headers: this.tokenHeader, observe: 'response'});
  }

  getSearchedParliamentarian (limit, offset, keyword: string) {
    this.updateTokenValue();
    const endpoint = this.baseURL.concat('parliamentarians/?limit=' + limit + '&offset=' + offset + '&query=' + keyword);
    console.log('Making QUERY REQUEST USER ON URL: ' + endpoint);
    this.headers = (this.tokenValue === '') ? this.headers : this.tokenHeader;
    return this.http.get(endpoint, {headers: this.headers, observe: 'response'});
  }

  getParlimentarianSpecific(parlimentaryId) {
    this.updateTokenValue();
    const endpoint = this.baseURL.concat('parliamentarians/' + parlimentaryId + '/');
    this.headers = (this.tokenValue === '') ? this.headers : this.tokenHeader;
    return this.http.get(endpoint, {headers: this.headers, observe: 'response'});
  }

  getPropositionSpecific(propositionId) {
    this.updateTokenValue();
    const endpoint = this.baseURL.concat('propositions/' + propositionId + '/');
    this.headers = (this.tokenValue === '') ? this.headers : this.tokenHeader;
    return this.http.get(endpoint, {headers: this.headers, observe: 'response'});
  }

  getPropositionSpecificSocialInfo(propositionId) {
    this.updateTokenValue();
    const endpoint = this.baseURL.concat('propositions/' + propositionId + '/social_information_data/');
    this.headers = (this.tokenValue === '') ? this.headers : this.tokenHeader;
    return this.http.get(endpoint, {headers: this.headers, observe: 'response'});
  }

  getFollow(id) {
    this.updateTokenValue();
    const endpoint = this.baseURL.concat('user_following/' + id + '/');
    this.headers = (this.tokenValue === '') ? this.headers : this.tokenHeader;
    console.log('Making GET FOLLOW REQUEST ON URL: ' + endpoint);
    return this.http.get(endpoint, {headers: this.headers, observe: 'response'});
  }

  getFollowingParliamentarians(limit, offset) {
    this.updateTokenValue();
    const endpoint = this.baseURL.concat('user_following/?limit=' + limit + '&offset=' + offset);
    console.log('Making POST REQUEST USER ON URL: ' + endpoint);
    this.headers = (this.tokenValue === '') ? this.headers : this.tokenHeader;
    console.log('Making GET FOLLOWING PARLIAMENTERIANS REQUEST ON URL: ' + endpoint);
    return this.http.get(endpoint, {headers: this.headers, observe: 'response'});
  }

  getSearchFollowingParliamentarians(limit, offset, keyword) {
    this.updateTokenValue();
    const endpoint = this.baseURL.concat('user_following/?limit=' + limit + '&offset=' + offset + '&query=' + keyword);
    console.log('Making POST REQUEST USER ON URL: ' + endpoint);
    this.headers = (this.tokenValue === '') ? this.headers : this.tokenHeader;
    console.log('Making GET SEARCH FOLLOWING PARLIAMENTARIAN REQUEST ON URL: ' + endpoint);
    return this.http.get(endpoint, {headers: this.headers, observe: 'response'});
  }

putUser(user: UserModel, userId) {
    const endpoint = this.baseURL.concat('users/' + userId.toString() + '/');
    this.updateTokenValue();
    console.log('Making PUT REQUEST USER ON URL: ' + endpoint);
    return this.http.patch(endpoint, JSON.stringify(user),  {headers: this.tokenHeader, observe: 'response'});
  }

  postAuthentication(login: LoginModel) {
    const endpoint = this.baseURL.concat('token_auth/');
    console.log('Making POST AUTHENTICATION REQUEST ON URL: ' + endpoint);
    return this.http.post(endpoint, JSON.stringify(login), {headers: this.headers, observe: 'response'});
  }

  postVote(vote: VoteModel) {
    this.updateTokenValue();
    const endpoint = this.baseURL.concat('user_votes/');
    console.log('Making POST REQUEST VOTE ON URL: ' + endpoint);
    console.log(vote);
    return this.http.post(endpoint, JSON.stringify(vote), {headers: this.tokenHeader, observe: 'response'});
  }

  postFollow(id: Number) {
    const jsonString = '{"parliamentary": ' + id + '}';
    this.updateTokenValue();
    const endpoint = this.baseURL.concat('user_following/');
    console.log('Making POST REQUEST FOLLOW ON URL: ' + endpoint);
    console.log(jsonString);
    return this.http.post(endpoint, jsonString, {headers: this.tokenHeader, observe: 'response'});
  }
updateVote(vote: VoteModel, id: number) {
    this.updateTokenValue();
    const endpoint = this.baseURL.concat('user_votes/' + id + '/');
    console.log('Making PUT REQUEST VOTE ON URL: ' + endpoint);
    console.log(vote);
    return this.http.put(endpoint, JSON.stringify(vote), {headers: this.tokenHeader, observe: 'response'});
  }

Example 3

Before

  onKeyEmail(eventEmail: any) {

    this.assert.ok(eventEmail === null || eventEmail === undefined, 'Dado inválido inserido' );
    const email = eventEmail.target.value;
    if (this.isEmailValid(email)){
      document.getElementById('alert-email').style.display = 'none';
      this.valueEmail = '';
      this.statusEmail = true;
      this.borderColor('email', this.colorSucess);
    } else {
      document.getElementById('alert-email').style.display = 'block';
      this.valueEmail = 'Formato do E-mail está incorreto';
      this.statusEmail = false;
      this.borderColor('email', this.colorDanger);
    } if (email.length < 4) {
      document.getElementById('alert-email').style.display = 'block';
      this.valueEmail = 'Formato do E-mail está incorreto';
      this.statusEmail = false;
      this.borderColor('email', this.colorDanger);
    }
  }

After

onKeyEmail(eventEmail: any) {

    this.assert.ok(eventEmail === null || eventEmail === undefined, 'Dado inválido inserido');
    const email = eventEmail.target.value;
    if (this.isEmailValid(email) && email.length >= 4) {
        alertEmail('none', '', true);
        this.borderColor('email', this.colorSucess);
    } else {
        alertEmail('block', 'Formato do E-mail está incorreto', false);
        this.borderColor('email', this.colorDanger);
    }
}

alertEmail(style: string, valueEmailMsg: string, statusEmail: boolean){
    document.getElementById('alert-email').style.display = style;
    this.valueEmail = valueEmailMsg;
    this.statusEmail = statusEmail;
}

Example 4

Before

  onKeyUsername(eventUsername: any) {
    this.assert.ok(eventUsername === null || eventUsername === undefined, 'O dado obtido é nulo.');
    let username = eventUsername.target.value;

    const validUsername = this.isUsernameValid(username);

      if (validUsername) {
        document.getElementById('alert-username').style.display = 'none';
        this.valueUsername = '';
        this.statusUsername = true;
        this.borderColor('username', this.colorSucess);
      } else {
        document.getElementById('alert-username').style.display = 'block';
        this.valueUsername = 'Nome de usuário inválido';
        this.statusUsername = false;
        this.borderColor('username', this.colorDanger);
      } if (!this.isUsernameSizeValid(username)) {
        document.getElementById('alert-username').style.display = 'block';
        this.valueUsername = 'Nome de usuário deve ter entre 4 e 20 caracteres';
        this.statusUsername = false;
        this.borderColor('username', this.colorDanger);
      }

  }

After

onKeyUsername(eventUsername: any) {
    this.assert.ok(eventUsername === null || eventUsername === undefined, 'O dado obtido é nulo.');
    let username = eventUsername.target.value;

    const validUsername = this.isUsernameValid(username);

    if (validUsername) {
        this.setUserAlert('none', '', true);
        this.borderColor('username', this.colorSucess);
    } else {
        this.setUserAlert('block', 'Nome de usuário inválido', false);
        this.borderColor('username', this.colorDanger);
    } if (!this.isUsernameSizeValid(username)) {
        this.setUserAlert('block', 'Nome de usuário deve ter entre 4 e 20 caracteres', false);
        this.borderColor('username', this.colorDanger);
    }
}

setUserAlert(style: string, alertMsg: string, statusUserName: boolean){
    document.getElementById('alert-username').style.display = style;
    this.valueUsername = alertMsg;
    this.statusUsername = statusUserName;
}

Example 5

Before

  checkToken(token: any) {
    if (token === '') {
      return false;
    } else {
      document.getElementById('register').style.display = 'none';
      document.getElementById('login').style.display = 'none';
      document.getElementById('deSuaOpiniao').style.display = 'block';
      document.getElementById('profile').style.display = 'block';
      document.getElementById('logout').style.display = 'block';
      return true;
    }
  }

After

  checkToken(token: any) {
    if (token === '') {
      return false;
    } else {
      this.modifyStyle();
      return true;
    }
  }

  modifyStyle() {
    document.getElementById('register').style.display = 'none';
    document.getElementById('login').style.display = 'none';
    document.getElementById('deSuaOpiniao').style.display = 'block';
    document.getElementById('profile').style.display = 'block';
    document.getElementById('logout').style.display = 'block';
  }

Function paragraphs (T34 e T35)

Example 1

  // Paragraph for styles of sidebar
  showStyleSuccess() {
    const sidebarStatus: HTMLElement = document.getElementById('sidebar');
      this.assert.ifError(sidebarStatus == null);
      sidebarStatus.classList.toggle('active');
    const contentStatus: HTMLElement = document.getElementById('content');
      contentStatus.classList.toggle('active');
  }

  showStyleFailed() {
    const sidebarStatus: HTMLElement = document.getElementById('sidebar');
      this.assert.ifError(sidebarStatus == null);
      sidebarStatus.classList.toggle('deactive');
    const contentStatus: HTMLElement = document.getElementById('content');
      contentStatus.classList.toggle('deactive');
  }

   getStyle() {
      let styleStatus;
      /*
      * If token is empty, the status of sidebar is 'disabled'
      * Else sidebar is active
      */
      if (this.token.getToken() === '') {
        styleStatus = 'disabled';
      } else {
        styleStatus = '';
      }
        return styleStatus;
    }

Example 2 -

// Paragraph for handle error
  /**
   * Gives error messages linked to error status
   * @param statusRequest
   * @return the requisition status
   */
  handleError(error: any) {
    const httpErrorCode = error.status;

    switch (httpErrorCode) {
      case 401:
        document.getElementById('contactFail').style.display = 'block';
        this.router.navigateByUrl('/login');
        break;

      case 400:
        document.getElementById('contactFail').style.display = 'block';
        this.showError(ContactUsComponent.REFRESH_PAGE_ON_TOAST_CLICK_MESSAGE);
        break;

      case 500:
        document.getElementById('contactFail').style.display = 'block';
        this.showError('Internal Server error');
        break;

      default:
        this.showError(ContactUsComponent.REFRESH_PAGE_ON_TOAST_CLICK_MESSAGE);
    }
  }

  private showError(message: string) {
    this.toastManager.error(message, ContactUsComponent.DEFAULT_ERROR_TITLE, { dismiss: 'controlled'}).then((toast: Toast) => {
            const currentToastId: number = toast.id;
            this.toastManager.onClickToast().subscribe(clickedToast => {
                if (clickedToast.id === currentToastId) {
                    this.toastManager.dismissToast(toast);
                    window.location.reload();
                }
            });
        });
}

Example 3

  // Paragraph to filter page
  filterRestrictPage(token: any) {
    if (token === '') {
      this.router.navigate(['login']);
      return true;
    }
  }

  filterLoginPage(token: any) {
    if (token !== '') {
      this.router.navigate(['']);
      return true;
    }
  }