E52: Digits, Part 4 (Add and Edit Contacts)

For this experience, you will create pages to add new contacts and edit existing ones. When finished, the AddContact page will look like this:

And the EditContact page will look like this:

Note that the URL for the Edit Contact page contains the ID of the Contact row to be edited.

Prelude

First, please review nextjs-example-form, and be sure to watch the 35 minute screencast. Familiarity with this system will make this WOD (and all your future efforts to implement forms in Next.js) much more straightforward.

Second, I suggest you watch my screencast before trying this WOD for the first time. I have not been able to find suitable resources for you to read prior to doing this WOD to cover all the Next.js concepts I will cover. So, it’s best for you to watch the solution one time through to orient yourself.

Merge your contacts-table branch into main

At the conclusion of the last WOD, your contacts table mockup was in a branch called contacts-table-1 (and contacts-table-2).

Quit Next.js if it is running.

Now switch to the main branch in GitHub Desktop, and merge one of your contacts-table branches into it. Push your main branch to GitHub after the merge completes.

Start nextjs using npm run dev, and check http://localhost:3000 (and the console) to ensure that the merge worked correctly.

The WOD

Now you’re ready to do this practice WOD. There are two rounds to this WOD, each timed individually.

Pedagogy Alert! You might be tempted to do this WOD by stepping through the video frame by frame and copying what I do. That is very dangerous: you will simply trick yourself into thinking you've learned the material, but you've actually only learned how to copy and paste what I do. The way to learn the material is to watch the screencast, then try to do the WOD without looking at it. If you get stuck, then stop, watch the video, and start over from the beginning. If you follow this approach, then it may take you a little longer to finish the assignment, but when you get succeed, you'll actually know how to do the task on your own.

Round 1

Start your timer.

1. Create a branch to hold your work.

Create a branch called contact-forms-1 using GitHub Desktop, and publish this branch to GitHub.

If necessary, start up your application using npm run dev. Check to see that it’s running at http://localhost:3000. Take a look at the console to be sure there are no errors.

Pro Tip: run your app within the Terminal window in VSCode, and keep Chrome Dev Tools open during development.

2. Create the AddContactForm.

2.1. Create the addContact and editContact functions.

Edit src/lib/dbActions.ts to add two new functions called addContact and editContact.

addContact will insert a new contact into the Contacts table. This function should take a single argument, contact, which is an object containing the fields of the contact to be inserted. This method is very similar to the addStuff method, but it will insert into the Contacts table instead of the Stuffs table.
editContact will update an existing contact in the Contacts table. This function should take a single argument contact. The contact is an object containing the fields of the contact to be updated. This method is very similar to the editStuff method, but it will update the Contacts table instead of the Stuffs table.

2.2. Create the AddContactSchema and EditContactSchema.

Edit src/lib/validationSchemas.ts to add two new Yup schemas called AddContactSchema and EditContactSchema. They are very similar to the AddStuffSchema and EditStuffSchema, but they will validate the fields of the contact instead of the stuff.

2.3. Create the AddContactForm component.

Make a copy of src/components/AddStuffForm.tsx called AddContactForm.tsx. Change the component name to AddContactForm and change all other references.

Update the AddContact’s Col from xs={5} to xs={10}. This gives the form more room.

Change the form to specify the five strings to be collected by the form: firstName, lastName, address, image, and description.

In the onSubmit() method, extract the five form field names from the data object, then provide them to the addContact. Don’t forget to include the owner field in the data passed to addContact.

Inside the Form, change the Header to Add Contact, and replace the form fields for Stuff rows by 5 form fields for Contact rows. The fields firstName, lastName, address, and image, can be represented by text inputs, and description can be represented by a textfield.

3. Update the src/app/add/page.tsx.

In src/app/add/page.tsx, change the AddStuffForm to AddContactForm.

In src/components/NavBar.tsx, change the Add Stuff link to Add Contact.

Now you should have a link to Add Contact in the NavBar.

Test your AddContact code by filling out and submitting a new contact. In the screencast, I used info from Scott Robertson.

Here is an example of the page with a new contact filled in:

The image link is http://www2.hawaii.edu/~scottpr/images/RobertsonThumb.jpg. The description is

I was the Chair of the Information and Computer Sciences Department at the University of Hawaii, Manoa, where I teach human-computer interaction, programming, data structures, and cognitive science.

I conduct research on how social media is used for civic engagement and issues related to e-democracy and social informatics.

After submitting, the new contact should appear in the List Contacts page:

4. Create the EditContactForm.

Go through a similar sequence of actions to create the EditContactForm:

Make a copy of src/components/EditStuffForm.tsx called EditContactForm.tsx.
Change the EditContactForm’s Col from xs={5} to xs={10}.
Replace the form content with the AddContact form’s content.
Import EditContactSchema from @/lib/validationSchemas instead of EditStuffSchema.
Update the useForm hook to use Contact instead of Stuff.
Update the resolver to use EditContactSchema instead of EditStuffSchema.
Import editContact from @/lib/dbActions instead of editStuff.
Update submit() method to use editContact with the contact data.
Update EditContact return to render the Contact’s fields. Don’t forget to set the defaultValue for the inputs.

5. Add an edit link to the Contact card.

To create the Edit link, take a look at src/components/StuffItem.tsx to see and example of the Next.js Link component. You will want to add that Link element into ContactCard.tsx. I added the Link component to the end of the Card.Body like this:

<Card.Footer>
  <Link href={`edit/${id}`}>Edit</Link>
</Card.Footer>

You’ll have to import Link from next/link.

When you are done, the List Contacts page should include an Edit link at the bottom of each Contact:

And clicking on the Edit link should display a page that looks like this:

6. Check for ESLint errors.

As a last step, run npm run lint to ensure that there are no ESLint errors anywhere in your application.

7. Commit your finished work.

When your page renders correctly,

control-c to stop Next.js.
Stop your timer and note your time.
Commit and push your contact-forms-1 branch to GitHub with the message ‘contact forms finished in NN minutes.’, where NN is the number of minutes it took you to do it according to your timer.

Round 2

To ensure that you understand this material, you must do this WOD a second time.

Switch back to the main branch. This will revert your local repo to its state just before starting the WOD.

Create a new branch called contact-forms-2.

Go through the WOD again. When you’re done, commit and push your contact-forms-2 branch to GitHub with the message ‘contact forms finished in NN minutes.’, where NN is the number of minutes it took you to do it according to your timer.

Your TA will check whether both branches are in GitHub.

Rx: <30 min Av: 30-35 min Sd: 35-40 min DNF: 40+ min

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 each branch of the GitHub repository created as a result of your latest attempt at this practice WOD. Make sure you include the complete URLs for all branches so that I can click on them in my mailer. Note: the final commit for these branches must have been made before the submission time and date, otherwise you will not receive credit for this assignment.

You will receive full credit for this practice WOD as long as you have attempted it the required number of times and submitted the email 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.