Pages link component

[brauliodiez]

In the trainers module, main toc raw, on the right side there is a page list link component (is very similary to the GitHub Wiki pages edition):

It would be a good idea to isolate this in a presentational component.

About styling, we are using Bootstrap 3, although we should think about if we can implement this list just using flexbox.

Recommended steps to start with this:

• Start playing with a JSBIN or a simple isolated project (create on in github startin from one othe react boiler plates we have created, e.g.: https://github.com/Lemoncode/react-by-sample/tree/master/02%20Properties ).

• Start by create a simple component that will display a header.

• Then add a list of links (check what to do whenver the list overflows, should we just add an scroll?

• Add the "+" button.

Now that we have played visually with the component is time to define a props contract:

We need:

• Header title property.
• Links array property, each link should contain: name, param info to callback.
• A common callback function to be called when clicking on the link (it should accept as param the param info callback).
• Plus button callback.

public class LinksInfo {
   text : string;
   param : any;
}

interface {
   title : string;
   links : LinksInfo[];
   doAction : (param) => void;
   add : () => void;
}

How would I use this component (pseudocode):

links = [
   {text: 'Home Page' param: 3},
   {text: 'Module 1' param: 4},
   {text: 'Module 2' param: 5},
];

// later on we will move this to an action
displayPage(param) {
   console.log('Simulate user clicked on link to navigate to another wiki page, param: ' + param);
}

// new page
newPage() {
 console.log('Simulate user clicked on create new page');
}

<LinkList 
   title = "Pages"
   links : {this.state.links }
   doAction : {this.displayPage.bind(this)}
   add : {this.newPage.bind(this)}
>