For this experience, you will “wire up” your Add Contact page so that it performs validation and adds the page to 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 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.For this WOD, you will need to adapt code from the meteor-example-form system. So, before starting, be sure to have downloaded this code to your laptop, run it successfully, and created an IntelliJ project so you can easily cut and paste code between the two applications.
You should also watch the video demonstration of the solution before trying this WOD for the first time. That will help you understand what steps to take as a Meteor newbie.
Ready? Let’s begin:
Start your timer.
Create branch. Create and switch to a branch called “add-contact-1” in your local repository. You will do all the work for this WOD in this branch.
Remove autopublish. Invoke ‘meteor remove autopublish’ at the command line. For form processing to work correctly, we need to publish and subscribe manually. Fortunately, this is easy to do.
Publish Contacts. Add a file named publications.js to imports/startup/server. Model this file on the publications.js file in meteor-example-form. Be sure to update the index.js file!
Subscribe to Contacts. Update the home-page.js file with an onCreated template helper that subscribes to the Contacts publication. Model it on the edit-student-data-page.js onCreated helper in meteor-example-form. The only code you need is the call to subscribe().
Provide Semantic UI form control templates. Copy the imports/ui/components/form-controls directory form meteor-example-template into digits, and import that directory in client/main.js. Now you have access to all the form templates in digits.
Update add-contact-page.html. Using the file create-student-data-page.html from meteor-example-form as an example, update add-contact-page so that the form’s HTML is appropriate for form submission. It’s fine if the labels change slightly. Check your Contacts schema to determine if fields are required or not.
Update add-contact-page.js. Using the file create-student-data-page.js from meteor-example-form as an example, update add-contact-page so that the form’s Javascript is appropriate for form submission.
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 include the new contact). Use FlowRouter.go('Home_Page'); to accomplish this.
Test that you can create new contacts and that they are shown on the Home Page after being created.
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: <30 min Av: 30-40 min Sd: 40-45 min DNF: 45+ min
You should watch this before doing the WOD to better understand how to do it.
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 add-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.