Follow
{song.words.substr(0, song.words.indexOf(‘<‘).substr(0, 30).concat("...")}
nifty string manipulation cuts off after the first line, truncates to max 30 chars, adds ellipsis
It detects the beginning of a line break tag in the React render (rendered using dangerouslySetInnerHTML)
Here’s a video of a user journey through the app as it currently stands.
# /Home
The YouTube embed function is for learning new songs before practice.
# /Add Track
The Add Track component is for local development use so that only I can perform weekly updates. Songs have to be hard coded in at present in order for the React app to work offline in the browser when phones are switched to airplane mode during the performance.
# /Search Track
The Search Track component searches on a partial match of either title or first line. That was the use case that inspired it at the start, two weeks ago while driving to Mass!
# Backlog
Next sprint: Search will lift state up to the Home component and load user choice from searched-for songs.
# Tech Stack
As a teaching example I intend to do this one way via lifting state up, without using redux, and another way using Redux ToolKit. The user will be agnostic as to which state management architecture was used.
#rtk #redux #react
Link to bird video - just for length!😬
https://x.com/lavenderlens/status/1706654057421566298?s=46