Introduction
The previous blog post talked about planning and progress. Now I would like to talk about the final release 0.4
First Issue
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
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
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.
Top comments (0)