Zifan's work

[J22Melody]

I haven't finished a real back-end service yet and the UI design may look quite simple.

More information can be found at README which is included in my PR, and I think propTypes and the basic tests may also help to explain my code.

If you have any problems or need more features, please let me know.

[flyingant]

Hiya Zifan, This is MaYi again. You works looks good to me and I want to challenge more.

1. npm run test bring me some errors. Please fix it.
2. Try to apply a css pre-compile engine to your project (e.g. less or scss) and replace your .css files to .less or .scss
3. Try to build a form validate function by yourself (not third part lib).

For 3：I hope you could fullfill the functionality with the requirements below:

1. Please add the following fields with rules

   1. Title (Input filed) [cannot be blank][the lenght of charactors should be less than 60][Cannot be the same to exsit one][shoud avoid XSS attack]
   2. Publish Date (Date Picker)[Cannot be blank]
   3. Description (Textarea)[Cannot be blank][the lenght of charactors should be less than 600][shoud avoid XSS attack]
   4. Author (Input field)[Cannot be blank][the lenght of charactors should be less than 20][shoud avoid XSS attack]
   5. Public (Select field)[Default value should be blank]

2. Validate the form field before submit

3. Display the error message below the field if validation is failed

4. (Advanced) Automaticly validation

5. (Advanced) Integrate the validation feature to redux

[J22Melody]

@flyingant Thanks for your quick response. Before I start solving these challenges, I have something to communicate with you.

1. I have mentioned a possible error in README's Test section which I should have fixed. I want to make sure is it the same error as the one you got just now? Because I can't reproduce any error neither on my MacOS nor on my CentOS VPS now. If you are not sure, some detailed error messages and information of your environment may help.

2. What about PostCSS? I used to use CSS Pre-Processors like SASS and LESS and then I migrated to PostCSS. The main reason is that PostCSS is more powerful and flexible, for example, I can configure PostCSS to work like SASS. I am just curious about your opinion. After all, for this simple project there is no big difference, even plain CSS with good naming convention would do. Another benefit is that I won't need to rename my CSS files lol.

[flyingant]

Ahh, it's OK. Up to you.

[J22Melody]

@flyingant Nearly done and the demo is also updated.

1. The error mentioned above is fixed by commit 6f2931f64b921e3148613fed37db8d931fb91846. Reinstall your node_modules and give another try.

2. At last, I chose Sass (b145e00af13e2032e54b0e1c5c58c1da00d0b5e7) because it's easier to be integrated with create-react-apps than PostCSS. Also, I found that Autoprefixer is by default included in create-react-apps. I once considered that it was inconvenient for Sass to solve such things, now it seems OK.

3. I only completed a basic version integrated with Redux. The logic is: when user changes one form field, the value will be sent to Redux store and some basic validation (required, maxLength) will run automatically; when user submits the form, an overall validation will run. These are all client-side validations. After that data will be sent to server side and server should do validations too, for example, when Title exists, returns 400 to client side. There are more things that could be done to make the interaction better, like an independent request to make sure whether title is valid before user submits the form. Since I'm not sure about it, I'd rather stop here. Also, I temporarily omit tests for <Datepicker /> and <Calendar /> components. If you think those things are necessary, I can have a try.

[flyingant]

Thanks Zifan. We'll review and get back to you soon.