Due: 2017-03-14 11:00a
For our second pass at our simplified wiki we are going to add the ability to create new articles and edit existing ones. So everyone starts off in the same place, I am providing you with solution code for part 1. The solution code will be available on Canvas once you have submitted v1.
The first part of this assignment is to update the solution code to use styled components and PropTypes as I showed you in class. Remove the rules from the CSS files as you go. To include styled components in your build, you will need to run npm install --save styled-components.
Create a component that allows the user to create a new article. It should use an input tag of type "text" to allow the user to enter in a new title and a textarea to allow the user to write the body of the article.
It should have two buttons. The first should be a "save" button. When the user clicks it, the article should be saved, and editing should be completed. The date on the article should be set to the current date/time, and the article should be added to the collection. The second should be a "cancel" button. When the user clicks cancel, the edit should be completed and the text written by the user will vanish.
There is one caveat. If the title is not set, you should not let the user use the save function. You could disable the button, you could just put up an error message, or you could use an alert. Do what makes sense, just make it clear to the user why they can't proceed.
Add a "New Article" button to the main interface (the actual text of the button could be anything you like). When the user clicks this, the interface should switch to the editing component. We should not see IndexBar or Article. When the user finishes the new article (either by using "save" or "cancel"), the primary interface should be restored.
Once you can successfully add new articles, you will adapt the interface to allow editing of articles. Add a button or widget to the article to request the current article be edited. The interface should then switch to your new component, but the current title and article body should already be filled in.
On "save", the date should be updated and the changes saved. On "cancel", the changes should be thrown out and the article left untouched.
I have specifically not dictated which components to make (beyond the fact that you need one for editing), or what state to store, and where to store it. Part of this assignment will be thinking through these decisions and making good choices (I will hint that mode can be considered to be a state). Remember to think modularly. Design the interface that parents will see, and keep the amount of information exchange to a minimum. Keep state data as low in the hierarchy as you can, pushing it up the hierarchy only just enough to make sure everyone who is interested is below the component which holds it in the hierarchy. You are welcome to change the state locations made for v1 if it becomes necessary.
| Points | Criteria |
|---|---|
| 10 | Code organization/ design/ comments / style |
| 5 | Styled components and PropTypes |
| 5 | Successfully add articles |
| 5 | Successfully edit articles |
| 5 | Controls look reasonable and manage transitions properly |
To hand in your work, please make a copy of you working directory, rename the copy username_hw04, remove node_modules from it, and then zip it up. I would rather regenerate node_modules when I look at your work rather than having you submit the huge directory, so really, please don't include it.
You can then submit the zipped folder on Canvas.