E48A: nextjs-application-template

For this experience, you will download and make a simple enhancement to nextjs-application-template, so that you feel comfortable using it as a basis for future projects. Specifically, you will add the ability to remove items from the “Stuff” table. When you’re done, the List Stuff page will look like this:

And clicking on the trash icon will remove the corresponding item from that row and refresh the page to show the remaining set of items.

Prelude, Part 1: Familiarize yourself with the template

Before starting this WOD, you should take some time to familiarize yourself with the template documentation.

First, read through the nextjs-application-template home page.

Prelude, Part 2: Install the template

Go to https://github.com/ics-software-engineering/nextjs-application-template, and click the “Use this template” button. Complete the dialog box to create a new private repository called “my-nextjs-template” that you own that is initialized with this template’s files.

From your newly created repository, and click the “Code” button to clone your new GitHub repo to your local file system. Using GitHub Desktop is a great choice if you use MacOS or Windows.

Next, cd into the directory of your local copy of the repo, and install third party libraries with:

$ npm install

Prelude, Part 2.1: Initialize the Postgres database

Before you start the WOD, you need to initialize the Postgres database. To do this, you need to start the Postgres database and create a database called nextjs-application-template. Here are the steps:

1. Open a Terminal window in VSCode and run the command createdb nextjs-application-template.
2. Copy the sample.env file to a new file called .env.
3. Edit the .env file to set the DATABASE_URL to postgresql://<username>:<password>@localhost:5432/nextjs-application-template?schema=public.
4. Migrate the database by running the command npx prisma migrate dev. This will create the tables in the nextjs-application-template database.
5. Seed the database by running the command npx prisma db seed. This will populate the tables with some sample data.
6. Start Next.js using npm run dev, and check http://localhost:3000 (and the console) to ensure that the new landing page displays correctly.

The WOD

Start your timer.

Create a branch called my-nextjs-1 using GitHub Desktop, and publish this branch to GitHub.

Login as the test user ‘john@foo.com’, and go to their List Stuff page.

Next, add a new column to the List Stuff page table called Remove. When you’re done, the page should look like this:

Next, edit the StuffItem component to add a Button that is displayed as a trash Icon in each cell of the Remove column. When you’re done, the page should look like this:

Next, attach an onClick handler that invokes a removeItem function that accepts the ID of the stuff item associated with that row of the table. Attaching an onClick handler changes the StuffItem component to a client side component. You’ll have to add "use client"; to the top of StuffItem.tsx.

Have the function call console.log on the passed value, so you can check to see that it is getting the right value. When you’ve done it correctly, then the console window should look like this after pressing the delete button for a given row:

To complete the WOD, we need to replace the console log with code to actually remove the item from the table. What you’ll notice at this point is that the StuffItem component does not have table object to call remove() on.

One way to fix this is to import the deleteStuff function from src/lib/dbActions.ts in the StuffItem component. Now you can call deleteStuff in the removeItem function within StuffItem.

After you’ve finished implementing the remove operation, clicking the Trash icon associated with a row will delete that item, and the row will be instantly removed from the list of items through the magic of Next.js Reactivity.

As a last step, quit out of Next.js, and run npm run lint to ensure that there are no ESLint errors.

When you’re done:

1. control-c to stop nextjs.
2. Stop your timer and note your time.
3. Commit and push your my-nextjs-1 branch to GitHub with the message ‘remove button implemented in NN minutes.’, where NN is the number of minutes it took you to do it according to your timer.

If you want to practice the WOD again, exit Next.js, then switch back to the main branch (which reverts all your changes) and create a new branch called my-nextjs-2. Then set up the database by:

1. Invoke dropdb nextjs-application-template to drop the database.
2. Recreate the database with createdb nextjs-application-template.
3. Migrate the database to create the tables using npx prisma migrate dev.
4. Seed the database with npx prisma db seed.
5. Start up Next.js with npm run dev.

Follow the WOD instructions again.

Rx: < 16 min Av: 16-20 min Sd: 20 - 25 min DNF: 25+ min              Start WOD Timer

Demonstration

Here’s a screencast of me working through this problem. You can watch this prior to attempting it for the first time yourself.

Submission instructions

By the time and date indicated in Laulima, submit this assignment via Laulima.

You must grant read access to this repo to the TA for your section. To do this:

• Retrieve your repository in a browser, then click on “Settings”. Depending upon the GitHub UI you are provided, you’ll then click on either “Collaborators” or “Manage Access”. Let us know if you can’t find either of these.

• Search for “aliremos”, then click “Add collaborator”.
• The search for “aliknd”, then click “Add collaborator”.

Your submission should contain:

• A link to the GitHub repository created as a result of your latest attempt at this practice WOD. Make sure you include the complete URL so that I can click on it in my mailer. Note: the final commit to this repo must have been made before the submission time and date, otherwise you will not receive credit for this assignment.

• The number of times you have attempted this practice WOD so far, and for each time, how long it took you.

You will receive full credit for this practice WOD as long as you have attempted it at least once and submitted your work on Laulima with all required data before the due date. Your code does not have to run perfectly for you to receive full credit. However, if you do not repeat each practice WOD until you can finish it successfully in at least AV time, you are unlikely to do well on the in-class WOD. To reduce the stress associated with this course, I recommend that you repeat each practice WOD as many times as necessary to achieve at least AV before its due date.