Build basic record list + list view

[vidbina]

List all records in a nifty list using a list view that allows a structure as indicated in the graphic.

Visual

Function

The coloured bar to the left is simply used to represent the color of a category. Initially this color is to be orange for every item (this may be hardcoded in the ListView element).

The main container of the ListView will contain the description of the record along with an indication of the date which will be YYYY/MM/DD for this issues instead of the text represented in the mockup. Long descriptions should be shortened and appended with an ellipsis (e.g. "Very long descriptions should be shortened" becomes "Very long description...").

[vidbina]

Work in branch ui/basic-record-list

[vidbina]

• [ ] implement component in components/BasicRecordListElement.js with all text hard-coded
• [ ] implement container component in components/iOSPlaceholderView.js which presents a ListView containing 40 elements of previously defined BasicRecordListElements (the property renderRow allows you to define a function that returns a components to be rendered as list item).
• [ ] implement components/iOSPlaceholderView.js to receive array of data from prop dataSource conforming to example data in https://github.com/Suprnovae/abc-totaal-notitieblok/wiki/Records (look at components/PlaceholderView.js if you need to see an example of what I had done before).

[vidbina]

I have setup a new branch https://github.com/Suprnovae/abc-totaal-notitieblok/tree/ui/basic-record-list-retry because I need the changes on top of the style/ios branch. I guess I forgot to mention that. Sorry for the mix-up.

Please run npm run style before committing in order to discover whether the code adheres to the style guidelines. I noticed we had a lot of inconsistent whitespacing. Now a style will force us to be consistent. We need to keep code clean and readable :wink:

Look how I implemented some components in the components directory; I will need the iOSPlaceholderView in that directory as well. In index.ios.js that would replace the Main component.

Let's use ES6 syntax export default class SomeComponent extends Component instead of the older var SomeComponent = React.createClass(...) see react doc on reusable components. The future rules :rocket:.

It needs to be hard-coded 💪 but pretty 💐

Furthermore, the list element view should cover the full width of the screen.

[AlinaChernenko]

Good Morning David! Please point me where I can find components directory? =)

[vidbina]

Good morning :smile:... not sure what you mean with the first point. There already is a script setup for that. Check the current master branch or ui/basic-record-list-retry.

For point two https://github.com/Suprnovae/abc-totaal-notitieblok/tree/master/components

Almost falling over so if I don't respond I've fallen :zzz:

Still on 🗽 NYC time

[AlinaChernenko]

Got it! have a sweet dreams!

[vidbina]

Thanks. Happy hacking! :metal:

[vidbina]

BTW. The text truncation issue can be solved by using Text's numberOfLines prop.

Go ahead and hardcode a dollar sign for the currency. The text USD takes too much space.

Display the date as YYYY/MM/DD 📅

[vidbina]

P.S.: You seem to have multiple github accounts?!? I noticed that the commits were made by user https://github.com/achernenko 😝

[AlinaChernenko]

oh yes, achernenko is another account which is not active now, changed .gitconfig to alinachernenko.

[vidbina]

Hey @AlinaChernenko, I cherry-picked a few of your commits, but wasn't able to use all of your work. Please take a look at #8 to see how I managed to move forward. Upon code fixes, please remember to run npm run fix-style :wink: and I've set up an .editorconfig to make it easier for every contributor to deliver code conform the chosen style. It's a 👍 for effort for a beginner. Let's make the next commit much better :wink: until we get :trophy: code.

The look is a bit different but I figured that this was a bit clearer for the initial version. Also make the price box a bit wider. We'll gradually work on the look until we get it right :wink:

[AlinaChernenko]

Hi @vidbina , thanks for remarks. I promise, will do better next time ;) I noticed there is 3rd branch for the record-list - ui/basic-record-list-retry2, what shall I use moving forward? And do you expect from me any updates now?

[vidbina]

@AlinaChernenko you're welcome. All work will be started by checking out from dev. I just set up that branch. The dev branch will always contain the bleeding-edge codebase while master contains everything that is fit to go live. You just have to worry about dev and whenever you have tackled an issue just file a PR and I will take it from there :wink:. We're good for now since 093aaadcd36d2f0c4ea1fd70c92cb3f28ea8f174. Polishing comes later. I'll come up with more important tasks ;).