Live coding: Sorting data using Rails 7 and ReactJS!

Показать описание

Please subscribe if you haven't already!

In this video, I will continue working on the speed test web app. I will be adding functionality to sort by two columns in both ascending and descending order. There will also be a little bit of refactoring into objects. And as always, at the end of the video, you will be able, and at the end, we'll make some commits and push them to production. We are working on a reactJS front end, with a rails 7 backend web application.

This video is minimally edited to show what software development really is. It's not linear, and you will see me google problems and best practices a lot and refer to documentation.

To follow along, check out the sorting-video-before tag via git.

Resources:

0:00 Introduction -

1:08 - User stories, specifying behavior.

1:46 - Recapping the controller code from last time. Here I add a couple of parameters that we now expect from the frontend.

2:40 - Implementing frontend (reactJS). Here, I take advantage of useEffect and useState to keep track of what we're sorting by and which order.

4:00 - Styling the headers, including up arrow and down arrow keys. Based on the state, I use tailwindcss to turn the cursor on whenever the user hovers a sortable header column. There are some conditional statements. I also mention tertiary operators.

13:35 - Updating reactjs to send up the correct request to the server.

15:35 - Updating the rails controller to order.

19:25 - I spent some time figuring out how best to sanitize the input to prevent SQL injection (security vulnerability). Did some research on how best to do this, and ended up implementing my own sanitization.

21:33 - After research, I concluded it's too complicated to use Arel. Decided to use my own object instead.

22:23 - Creating an object that sorts places. Talk through the command pattern (ruby OOP style) which uses dependency injection.

36:04 - Writing tests. This took longer than I thought it would take, but we've got some pretty good test coverage in 45 minutes!

1:05:43 - Writing a git commit and pushing to main

1:06:48 - Found a failing test, fix the test case before github shows green. I am using github actions as continous integration tool.

1:11:15 - Here we deploy to heroku.

1:13:40 - Doing a light QA of what we deployed to heroku

1:16:18 - Outro