#16 trecipe page

[shizuko-akamoto]

Closes #16

Set up Trecipe Page: Integrated Destination Card list, Add Destination SearchBar popup, CoverPhoto to Trecipe page. I'm also going to add in the StaticMap after #60 gets merged into master. (Added!) The two feedback we got from Hailin is also addressed here. Those were:

1. Gray out destination cards on complete (applied a filter with opacity: 50% on cards that are checked off)
2. Don't hide the completed checkmark when edit buttons are showing.

How destination information are passed around from redux store to DestinationCard component

TrecipesList store Maintains a list of TrecipeModel, where destinations is an ordered array of destination ids contained in the trecipe, completed is a set of dest ids of checked off destinations.

export interface TrecipeModel {
  id: string;
  name: string;
  imageSrc: string | null;
  date: string;
  author: string;
  description: string;
  isPrivate: boolean;
  destinations: Array<string>;
  completed: Set<string>;
}

Destinations store Maintains a map of trecipeId to an array of unordered DestinationModels (maybe we can even make it a Set). Each DestinationModel has an id.

export interface DestinationModel {
  id: string;
  name: string;
  category: DestinationCategory;
  address: string;
  rating: Rating;
  description: string;
  imgSrc: string;
}

Trecipe page gets as prop, the id of the trecipe it has to render. This trecipeId comes from Route params (ie. when clicking on each TC in MyTrecipes page, the path will change from / to /:trecipeId, and Trecipe page that gets mounted receives the trecipeId part).

In mapStateToProps of Trecipe page, it takes the trecipeId from Route params to get the list of destination models from redux store's Destinations state. Note that these destinations might be unordered. So, we get the ordered destIds from TrecipeModel to sort them. This extra sorting is quite annoying however. When we're setting up the backend to retrieve destinations by trecipe id, we should make sure it sends in correct order. Trecipe page passes as a prop to DestintionCard component, the DestinationModel it has to display, along with callback methods to call when Delete or Check button is clicked.

[shizuko-akamoto]

I've changed the margin bottom on searchInput box, hopefully this looks better?

And regarding the styling of the Image popup, I'm gonna log a bug for that. We can come back to it when time allows. Issue logged: https://github.com/shizuko-akamoto/Trecipe/issues/69

[knox153]

I've changed the margin bottom on searchInput box, hopefully this looks better?

Yeaa that is much better thanks 😆

And regarding the styling of the Image popup, I'm gonna log a bug for that. We can come back to it when time allows. Issue logged: #69

Sounds good sounds good 👍