DEV Community

Minsu Kim
Minsu Kim

Posted on

Final Release 0.4

#opensource

Introduction

The previous blog post talked about planning and progress. Now I would like to talk about the final release 0.4

First Issue

Issue & PR

As I talked about previous blog post. My first approach is failed to implement this feature because it is very inefficient that refresh the page every time user clicks the map. I have looked the project very carefully and I found that the repostirory owner used react-zoom-pan-finch library to fetch the map images. I have read the document for approach. The answer is much simpler than I think. The method called resetTransform() can be accessed by useRef. Create useEffect to detect for changing state of currentMap from useParams. Every time user clicks the map, the zoom of image is reset by ref?.current?.resetTransform()

Second Issue

Issue & PR

I have added highlight feature with Vue.js instead of CSS only. The issue itself is very simple but I have challenged with Vue.js syntax. First, I have created the variables that receive the TrackID

selectedRow: null,
deselectedRow: null
Enter fullscreen mode Exit fullscreen mode

Second, I have to emit the table row ID when user hover the mouse over the table row.
@mouseenter="highlightTableRow(track.id)" @mouseleave="removeHighlightTableRow(track.id)"

Then created functions to assign the trackId with variables

highlightTableRow(trackId){
           this.selectedRow = trackId
},
removeHighlightTableRow(trackId){
           this.deselectedRow = trackId
}
Enter fullscreen mode Exit fullscreen mode

trigger CSS with :class in <tr>

.highlight {
          background-color:powderblue;
}

.removeHighlight{
         background-color: white;
}
Enter fullscreen mode Exit fullscreen mode 
:class="{'highlight': (track.id == selectedRow), 'removeHighlight': (track.id == deselectedRow)}">
Enter fullscreen mode Exit fullscreen mode

Third Issue

Issue & PR

The parse.js file contains the implementation for translating some random input into the track information. Create the replace method for replace back-ticks and UTF-8 apostrophes with regular apostrophes

track.title = track.title
            .replace(/`/g, "'")
            .replace(/[\u2018\u2019]/g, "'");
Enter fullscreen mode Exit fullscreen mode

More over, replace double smart quotes with regular apostrophes.

track.title = track.title.replace(/[\u201C\u201D]/g, "\"");
Enter fullscreen mode Exit fullscreen mode

Add unit tests for those replacement

{
        str: '\`Leave The Door Open\`',
        lineMode: 'one-line',
        expected: [
            {number: '', title: "'Leave The Door Open'", time: ''},
        ],
    },
    {
        str: '‘Leave The Door Open’',
        lineMode: 'one-line',
        expected: [
            {number: '', title: "'Leave The Door Open'", time: ''},
        ],
    },
    {
        str: '“Leave The Door Open”',
        lineMode: 'one-line',
        expected: [
            {number: '', title: "\"Leave The Door Open\"", time: ''},
        ],
    },
Enter fullscreen mode Exit fullscreen mode

Concolusion

Throughout final release 0.4, I have learned that there is many different approaches to resolve the issue. It is very important to find proper way to resolve the issue. The one of the issue that I have used different JavaScript framework. I have learned from the last issue is that make sure I have proper communication with other person.

Top comments (0)