Eyetemize Part 2

Here we are in Part 2 of this project. A little project but it has all the bits and pieces that could be used to build a bigger program, and that’s what I’ll be working on next. But before I get ahead of myself lets see how Eyetemize works

Actions

Now that the bones of the app are set, lets work on fully connecting the app to the backend

Actions

These actions will take care of fetching, posting and deleting notes from rails. I decided not to go with a serializer to keep things simple as there’s not much coming from the backend, just an ID, a title, and the note content.

The different actions behave in a similar way:

They dispatch (optional) an action of the type loading, so when the info is rendered on the DOM it waits before throwing an error because JS fetch functions are asynchronous; then we actually fetch, whether that is posting, deleting, etc. and we get a return from the server. Another action is dispatched and that takes care of removing or adding the note to Redux and keep the DOM clean.

Displaying the correct items

Dealing with the back end is half the battle. I decided to use pure CSS for the front end, so there were little challenges to tackle.

I wanted to add the very simple functionality that when you click on a note it’s highlighted, and in vanilla JS that’s easy, but now I have to be able to generate an onclick function for every element created from the data I gathered from the back end.

Here’s the entire component, let’s break it down

To render the <div> elements containing the notes, we call a function right inside the render method

<ul className='notes-list'>
     {this.iterateNoteTitles()}
</ul>

and this is the function itself:

iterateNoteTitles = () => {
const notesIt = this.props.notes.notes.map(n => <li className='notes-all' key={'note-' + n.id} id={'note-' + n.id} onClick={() => {this.onNoteClick(n.id)}}>{n.title}</li>)
return notesIt
}

we iterate through our store with

this.props.notes.notes.map

and render a <li> element for every note, we give them an id value to be referenced later and an onClick event listener so that every time I click on a note it filters the one with the id matching the even listener, after that the HTML element is selected in the DOM and a class is applied so the CSS can make it look green

onNoteClick = (id) => {
const noteCont = this.props.notes.notes.filter(note => id === note.id)
const selNote = document.getElementById(`note-${id}`)
this.setState({content: noteCont[0].content, id: id})
this.removeNoteClass()
selNote.classList.add('notes-back-color')
}

removeNoteClass() takes care of removing that same class from the other elements so that they’re not green anymore. We select all the elements with the .notes-all matching class, then iterate through them removing the class with the CSS rules

removeNoteClass = () => {
const allNotes = document.querySelectorAll('.notes-all')
allNotes.forEach(element => {
element.classList.remove('notes-back-color')
})
}

Conclusion

Super simple application but a good way to practice working with APIs and redux, the CSS was just the cherry on top

wewew and variations to test it