For this experience, you will “wire up” your Edit Contact page so that it performs validation and updates the data in the collection.
As with the last WOD, feel free to watch me solve it first, and then try it yourself.
Before starting this WOD, be sure to have merged the branch containing the “final” version of your previous WOD into master. See the screencast in the Readings for an illustration.
Note that switching GitHub branches on a running meteor application has the potential to put the application into an inconsistent state. To minimize problems, whenever you switch branches while doing meteor development, it is best to:
meteor reset to clear out the contents of the database.meteor npm run start, which runs a script found in package.json that resolves to meteor --no-release-check --settings ../config/settings.development.json.For this WOD, you will need to adapt code from both the meteor-example-form and meteor-example-template systems. So, before starting, be sure to have downloaded these systems to your laptop, run them successfully, and created an IntelliJ project so you can easily cut and paste code between these applications and digits.
Ready? Let’s begin:
Start your timer.
Create and switch to a branch called “edit-contact-1” in your local repository. You will do all the work for this WOD in this branch.
Update home-page.html. Using the file list-stuff-page.html from meteor-application-template as an example, update home-page with a link to the edit page and the associated URL.
Fix the edit-contact route to bind the id to ‘_id’, not ‘id’. This is needed due to a small inconsistency between meteor-application-template and meteor-example-form.
Update edit-contact-page.html. Using the file edit-student-data-page.html from meteor-example-form as an example, update edit-contact-page.html so that the form’s HTML is appropriate for form submission. Be sure to include the check that the subscription is ready, that the form includes the contact-data-form class, and that the value attribute is included.
Update edit-contact-page.js. Using the file edit-student-data-page.js from meteor-example-form as an example, update edit-contact-page.js so that the form’s Javascript is appropriate for form submission. Note that there are only a few differences between the “add” javascript and the “edit” javascript. The edit javascript: (1) includes the helper function to retrieve the value of a field; (2) subscribes to the collection; and (3) once the data is validated, the event handler calls “update” rather than “insert”.
Redirect to the home page upon successful form submission. After validating and inserting the Contact data successfully, redirect the user to the Home Page (where the table should now show the updated info). Use FlowRouter.go('Home_Page'); to accomplish this.
Test that you can edit contacts and that they are shown on the Home Page after being updated.
Once you’ve finished, commit your changes to GitHub, and check to see that your changes are there.
Stop your timer and record your time. Be sure to record it, because you will need your WOD time data when you write your technical essay.
Rx: <21 min Av: 21-30 min Sd: 30-35 min DNF: 35+ min
You can watch this before doing the WOD if you like:
If you want to try this WOD again, just commit your branch, then switch to the master branch to reset your system to its state at the end of the first Digits experience. Then create a new branch called edit-contact-2 and start over.
By the time and date indicated on the Schedule page, submit this assignment via Laulima.
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 the branch of the repo associated with this WOD 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 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.