Fix the Bug on Telescope
Tags: opensource, telescope
Published: 2021-11-18 10:14:58

### Introduction 
The [Telescope](https://github.com/Seneca-CDOT/telescope) is the open source project that maintains by Seneca College. The Telescope is an open source web servce and client application gathers all blog posts from variety of platforms such as WordPress, Medium, Dev Community, and many others and presenting as timeline.

### Issue
 
![before-fix](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ndd98as6up51noyx51uk.png)
 The [issue](https://github.com/Seneca-CDOT/telescope/issues/2479) is one of blog post contain many lines of `<p><br><p>` at the end of blog post. This numerous of line break tag that wrap with paragraph tag interrupt view other blog posts.

### Fix
The issue is very simple to fix. In the 
```
remove-empty-paragraphs.js
const cleanWhiteSpace = require('clean-whitespace');

module.exports = function (dom) {
  if (!(dom && dom.window && dom.window.document)) {
    return;
  }

  dom.window.document.querySelectorAll('p').forEach((p) => {
    p.innerHTML = cleanWhiteSpace(p.innerHTML);
    const paragraphInnerHTML = p.innerHTML;
    if(!paragraphInnerHTML.replace(/&nbsp;/gm,'').trim()) {
      p.remove();
    }
  });
};

```
The logic already has been made for the `&nbsp` non-breaking space. Therefore simply add one more condition `|| paragraphInnerHTML.trim() === '<br>'` that catch if the `<p>` contains only `<br>` tag for remove the <p> tag. 

### challenge
The issue supposed to be easily resolved. However there is two things that I have faced the challenge. 
1. The `remove-empty-paragraph.js` is never called
2. Since (1) challenge exists, I do not know my logic is correct. 

The reason that `remove-empty-paragraph.js` is not called is actually function never get called. I think the empty `&nbsp` treats as edge case so I think the code was missing. Therefore I have create the code for invoking the function
The second challenge has been resolved with the advice from David who is instructor of this course. His advice is create unit test case for testing my logic is whether pass or fail. Therefore I have created 

```
test('should remove <p><br></p> (line break)', () => {
    const htmlData = toDom('<div><p><br></p></div>');
    removeEmptyParagraphs(htmlData);
    const expectedHtml = '<div></div>';
    expect(htmlData.window.document.body.innerHTML).toEqual(expectedHtml);
```
The output is pass! My logic is correct but I do not see the any change on the Telescope running in local. I have no idea why my change does not reflect to the Telescope. So I have asked this issue to our Telescope Slack channel. Thankfully Josue and Duc Bui Manh helped to resolve this issue. They suggested me to delete old `redis-data` and re-run the application that also update database to fetch the blog posts. It takes while the `elasticSearch` crawls the all the blog posts but finally I have the expected result. 

![after-fix](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x6ktwt0gjdj4ae8rst8k.png)

### Conclusion
During the time in Hacktoberfest, I have contributed 4 small projects. It is such a good experience to contribute to large open source project Telescope. 

### Link
[PR](https://github.com/Seneca-CDOT/telescope/pull/2481)