Final Release 0.4 
Tags: opensource
Published: 2021-12-30 12:50:34

## 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](https://github.com/kokarn/tarkov-tools/issues/113) & [PR](https://github.com/kokarn/tarkov-tools/pull/119)

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](https://prc5.github.io/react-zoom-pan-pinch/?path=/story/docs-props--page) 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](https://github.com/elliotchance/tracklist-editor/issues/12) & [PR](https://github.com/elliotchance/tracklist-editor/pull/14)

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](https://github.com/elliotchance/tracklist-editor/issues/13) & [PR](https://github.com/elliotchance/tracklist-editor/pull/22)

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.