In class group WOD: Dollar field

For this WOD, you will make a new repo based on meteor-application-template-react and update the Stuff collection and forms to include a dollar amount field. When you’re done, the Add Stuff page will look like this:

And the Edit Stuff page will look like this:

Finally, the List Stuff page will look like this:

Step 1: Create meteor-dollar repo

Go to https://github.com/ics-software-engineering/meteor-application-template-react, and click the “Use this template” button. Complete the dialog box to create a new private repository called “meteor-dollar” 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.

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

$ meteor npm install

Run the system with:

meteor npm run start

To test this step: Go to http://localhost:3000 to see the app. If you’ve done these steps correctly, the application template should now appear.

Step 2: Setup IntelliJ and ESLint

Create an IntelliJ project called “meteor-dollar” that points to your repo.

Make sure that ESLint is configured correctly. Open a Javascript file such as imports/startup/client/startup.jsx. ESLint might complain “Error: Failed to load plugin meteor: Cannot find module ‘eslint-plugin-meteor’. Don’t worry: just click the “ESLint Settings” link and change the “ESLint Package” to the path to ESLint inside this project’s node_modules directory. (In my IntelliJ, just pulling down the menu shows that path as an option). Once you select the correct path to ESLint, the error should disappear.

To test this step: Add 3-4 blank lines to the bottom of the startup.jsx file. An ESLint error should now be displayed in the right margin in red. Now delete them, and a green checkmark should reappear. (If it doesn’t reappear immediately, then click on the red circle in the upper right side of the window, which should force re-inspection and generate the green checkmark.)

Step 3: Update the Stuff collection

Create a new field in the Stuff collection schema called “value” that takes a number as its value.

Update the settings.development.json file to include default values for the sample data.

Now exit meteor, run meteor reset (to clear the database), and meteor npm run start to restart the system with this new data.

To test this step: If you’ve done this right, there should be no errors listed to the console.

Step 4: Update the List Stuff page

Update the List Stuff page to display the Value field. You will need to update both the “user” and “admin” ListStuff pages to provide a column for the value. In addition, update the StuffItem and StuffItemAdmin components to display the value data in each row.

To test this step: You should be able to display the user and admin List Stuff pages and see a column containing the Value amount.

Step 5: Update the Add Stuff page

Now update the Add Stuff page to include a required “Value” field which accepts a number.

To test this step: You should be able to add an item including its Value using the form, and it will appear on the List Stuff page.

Step 6: Update the Edit Stuff page

Now update the Edit Stuff page to include a required “Value” field which displays the current Value, and allows editing.

To test this step: You should be able to edit the Value associated with an existing item, and the new Value will appear on the List Stuff page.

Step 7: Ensure that there are no ESLint errors

When your changes are implemented, run ESLint from the command line to be sure that there are no coding style problems. Here’s an example run:

$ meteor npm run lint

> meteor-application-template-react@ lint /Users/philipjohnson/github/philipmjohnson/meteor2-wod/app
> eslint --quiet --ext .jsx --ext .js ./imports

$

To test this step: If ESLint flags errors, be sure to remove them.

Step 8: Save your changes to GitHub.

Commit your code and push it to GitHub.

Check to make sure it is present on GitHub.

Rx: < 15 min Av: 15 - 25 min Sd: 25 - 35 min DNF: 35+ min

Submission instructions

You may grant read access to this repo to the TA for your section if you wish to receive feedback on your work. 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.
• For sections 001 and 002 search for “zerinnasrintumpa”, then click “Add collaborator”.
• For section 003 search for “giorgio-tran”, then click “Add collaborator”.

• For sections 004 and 005 search for “acatarinaoaraujo”, then click “Add collaborator”.

• Send a DM to the TA requesting a review of your repository; it will help to provide a description of any problems you are experiencing