Add react-bootstrap and redesign todo list footer touse bootstrap button

estebano · Nov 1, 2017 · 7430249 · 7430249
1 parent 81e810f
commit 7430249
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 13 deletions.
diff --git a/public/index.html b/public/index.html
@@ -2,6 +2,7 @@
 <html lang="pl">
     <head>
         <meta charset="utf-8" />
+        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
     </head>
 
     <body>

diff --git a/src/components/ToDoList/FilterLink.js b/src/components/ToDoList/FilterLink.js
@@ -11,8 +11,7 @@ const mapStateToProps = (state, ownProps) => {
 const mapDispatchToProps = (dispatch, ownProps) => {
     return {
         onClick: () => {
-            debugger;
-
+            dispatch(setVisibilityFilter(ownProps.filter));
         }
     }
 }

diff --git a/src/components/ToDoList/Footer.js b/src/components/ToDoList/Footer.js
@@ -3,16 +3,16 @@ import FilterLink from './FilterLink'
 
 const Footer = () => (
   <p>
-    Show:
+    Show:<br/>
     {' '}
     <FilterLink filter="SHOW_ALL">
       All
     </FilterLink>
-    {', '}
+    {' '}
     <FilterLink filter="SHOW_ACTIVE">
       Active
     </FilterLink>
-    {', '}
+    {' '}
     <FilterLink filter="SHOW_COMPLETED">
       Completed
     </FilterLink>

diff --git a/src/components/ToDoList/Link.js b/src/components/ToDoList/Link.js
@@ -1,26 +1,25 @@
-import React from 'react'
-import PropTypes from 'prop-types'
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button } from 'react-bootstrap';
 
 class Link extends React.Component {
     onClick = undefined;
 
     constructor(props) {
         super(props);
+        debugger;
         this.onClick = props.onClick.bind(this);
     }
 
     render() {
         if (this.props.active) {
-            return (<span>{this.props.children}</span>);
+            return (<Button bsStyle="primary" bpSize="small" disabled>{this.props.children}</Button>);
         }
         else {
-            return (
-                <a href="#" onClick={e => {
+            return (<Button bpStyle="primary" bpSize="small" onClick={e => {
                     e.preventDefault();
                     this.onClick();
-                }}>
-                    {this.props.children}
-                </a>
+                }}>{this.props.children}</Button>
             );
         }
     }