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

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
}

trigger CSS with :class in <tr>

.highlight {
          background-color:powderblue;
}

.removeHighlight{
         background-color: white;
}

:class="{'highlight': (track.id == selectedRow), 'removeHighlight': (track.id == deselectedRow)}">

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, "'");

More over, replace double smart quotes with regular apostrophes.

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

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: ''},
        ],
    },

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.