#15 implement destination card component

shizuko-akamoto commented 4 years ago

Implement a reorder-able (using react-beautiful-dnd), expandable, list view of destinations

`Image` Component

Added to generalize what to display when no image src is given. The component takes in as props img src, and if that is set to null, will show an empty gray background with ? icon in the middle.

`RatingBar` Component

RatingBar displays a set of stars, and depending on the Rating value (a number from 0~5) as props, will display solid filled stars for Rating number of stars, and open stars for the rest.

`DestinationCard` Component

This is a component for one destination in Trecipe. It needs to take in as props a DestinationModel, a model representing one destination.
Aside from DestinationModel, it also takes in a boolean isInEdit to manage the style of the card. If isInEdit == false, a checkbox for checking off the destination is displayed, otherwise, the two edit buttons (Reorder and Delete) are given.
DC elements are wrapped inside Draggable, this is from react-beautiful-dnd, and basically, it makes whatever inside this component draggable.

`Trecipe` Page

For this PR, Trecipe page only contains a list of destinations (no header, no map, etc).
DragDropContext and Droppable are also components from react-beautiful-dnd, the first is a wrapper for all dnd related components, and the latter, marking area in the web Draggable elements can be dropped to.
- The reorder method is called whenever the user drops DC to a new location. This method reorders destinations stored in Trecipe state, and thus list is reordered on next render.
You will see some initial setup of Trecipe page, like code for "loading" (though just getting 10 copies of mock destination) destinations to page, as well as logic to limit how many destinations in the list are shown. The default initial is set to 5 destination cards right now, and each time "Show More" button is clicked, 5 more appears. Some more rules regarding the "Show More" button:
- If all DCs are already visible, button is hidden (handled by canExpand())
- If isInEdit == true, we show all the DCs and hide the "Show More" button (handled by canExpand() and getDestinationsList()

Demo

DC cards not in edit with "Show More" button: Trecipe-Google-Chrome-2020-06-16-01-36-15

DC cards in edit with reordering: Trecipe-Google-Chrome-2020-06-16-01-35-25

tianyan-zhu commented 4 years ago

Design choice: Do we want the corners to be a little bit more round? Or do we want to stick with the pointy ones?

Personally I think we should be consistent with the buttons.

shizuko-akamoto commented 4 years ago

Design choice: Do we want the corners to be a little bit more round? Or do we want to stick with the pointy ones?

Personally I think we should be consistent with the buttons.

Yea, we can go with 8px border-radius for our boxed conponents 👍

Updated look:

shizuko-akamoto commented 4 years ago

Awesome, the drag and drop works really well

Some more design choice: Do we wanna change the categories into icon?

And I was experimenting with some randomized linear gradient background instead of displaying a question mark icon when a image is not provided, not sure if this looks better 🤷‍♂️

I added the icons, just beside the category text for now 😄 (until we implement tooltips sometime in future...)

tianyan-zhu commented 4 years ago

The Coconut Tree is on the wrong line :P

shizuko-akamoto commented 4 years ago

The Coconut Tree is on the wrong line :P

I think those are four different design suggestions haha

tianyan-zhu commented 4 years ago

Ahhh I see, my bad :P

shizuko-akamoto commented 4 years ago

The Coconut Tree is on the wrong line :P

I think those are four different design suggestions haha

(which i did not exactly implement. sorry, I don't really wanna implement tooltips right now LOL)

knox153 commented 4 years ago

The Coconut Tree is on the wrong line :P

I think those are four different design suggestions haha

(which i did not exactly implement. sorry, I don't really wanna implement tooltips right now LOL)

Haha no worry, we can always defer design changes. Sorry for suggesting these changes so late, these ideas usually come up when I start playing with it

shizuko-akamoto commented 4 years ago

The Coconut Tree is on the wrong line :P

I think those are four different design suggestions haha

(which i did not exactly implement. sorry, I don't really wanna implement tooltips right now LOL)

Haha no worry, we can always defer design changes. Sorry for suggesting these changes so late, these ideas usually come up when I start playing with it

The Coconut Tree is on the wrong line :P

I think those are four different design suggestions haha

(which i did not exactly implement. sorry, I don't really wanna implement tooltips right now LOL)

Haha no worry, we can always defer design changes. Sorry for suggesting these changes so late, these ideas usually come up when I start playing with it

We should definitely be keeping track of those hehe. Created a folder in our google drive for all those ideas https://drive.google.com/drive/folders/1EVdh-ycXN6rijsPRLiYrTivdtWMehZk0

shizuko-akamoto / Trecipe