import R from "ramda";
import React from "react";
import { compose } from "redux";
import { Link } from "react-router-dom";
import { firebaseConnect, dataToJS, isEmpty } from "react-redux-firebase";
import { connect } from "react-redux";
import {
  Form,
  FormGroup,
  Input,
  InputGroup,
  InputGroupAddon,
  Button,
  Jumbotron,
  Container,
  Row,
  Col
} from "reactstrap";

import AppHeader from "../../components/AppHeader";
import Leaderboard from "../../components/Leaderboard";

class Home extends React.Component {
  state = {
    code: "",
    boards: []
  };

  componentWillReceiveProps(nextProps) {
    this.fetchTrendingBoard(nextProps);
  }

  findByCode = () => {
    const { firebase, history } = this.props;

    firebase
      .ref("boards")
      .orderByChild("public_code")
      .equalTo(this.state.code)
      .once("value")
      .then(foo => {
        const boards = foo.val();

        if (boards) {
          const boardKey = R.pipe(R.keys, R.take(1))(boards);
          history.push("/boards/" + boards[boardKey].public_code);
        } else {
          window.toastr.warning("Sadly, we dont't have that board", "", {
            timeOut: 1000
          });
        }
      });
  };

  fetchTrendingBoard = ({ trending, firebase }) => {
    if (isEmpty(trending) === false) {
      const ids = R.keys(trending);
      R.forEach(id => {
        firebase.ref("/boards/" + id).once("value").then(r => {
          const board = r.val();

          this.setState(prevState => ({
            ...prevState,
            boards: [...prevState.boards, { ...board, id }]
          }));
        });
      }, ids);
    }
  };

  handleAnyChange = (name, value) => {
    this.setState(prevState => ({
      ...prevState,
      [name]: value
    }));
  };

  render() {
    return (
      <div>
        <div className="main-header">
          <AppHeader />
          <Jumbotron>
            <Container>
              <Row>
                <Col className="text-center bottom-margin">
                  <h1>
                    Instant leaderboards in 60 seconds or less.
                  </h1>
                  <p className="lead">
                    Browse, join, create, compete!
                  </p>
                </Col>
              </Row>

              <Row>
                <Col className="text-center">
                  <Form
                    inline
                    onSubmit={e => {
                      e.preventDefault();
                      this.findByCode();
                    }}
                  >
                    <FormGroup>
                      <InputGroup size="lg">
                        <InputGroupAddon>#</InputGroupAddon>
                        <Input
                          autoFocus
                          type="text"
                          value={this.state.code}
                          placeholder="Enter code"
                          onChange={e =>
                            this.handleAnyChange("code", e.target.value)}
                        />
                      </InputGroup>
                      <Button
                        size="lg"
                        onClick={this.findByCode}
                        color="primary"
                      >
                        Go
                      </Button>
                    </FormGroup>
                  </Form>
                </Col>
              </Row>
              <Row>
                <Col className="text-center or lead">
                  or
                </Col>
              </Row>
              <Row>
                <Col className="text-center">
                  <Link to="/boards/new">
                    <Button size="lg" color="success">
                      Create new leaderboard
                    </Button>
                  </Link>
                </Col>
              </Row>
            </Container>

          </Jumbotron>

        </div>
        <div>
          <Row>
            <Col xs={12}>Trending</Col>
            {this.state.boards.map((board, i) =>
              <Col key={i} xs={12} md={3}>
                <Leaderboard users={[]} board={board} />
              </Col>
            )}
          </Row>
        </div>
      </div>
    );
  }
}

export default compose(
  firebaseConnect(props => {
    return ["/trending"];
  }),
  connect(({ firebase }, props) => {
    return {
      trending: dataToJS(firebase, "/trending")
    };
  })
)(Home);

@@ -483,16 +483,67 @@
 oard%22;%0A%0A
+import %7B getUsers %7D from %22../../selectors/board%22;%0A%0A
 class Ho
@@ -609,18 +609,18 @@
 boards: 
-%5B%5D
+%7B%7D
 %0A  %7D;%0A%0A 
@@ -1452,26 +1452,24 @@
 + id).on
-ce
 (%22value%22
 ).then(r
@@ -1464,16 +1464,18 @@
 lue%22
-).then(r
+, snapshot
  =%3E 
@@ -1500,17 +1500,24 @@
 board = 
-r
+snapshot
 .val();%0A
@@ -1603,17 +1603,18 @@
 boards: 
-%5B
+%7B 
 ...prevS
@@ -1625,16 +1625,22 @@
 .boards,
+ %5Bid%5D:
  %7B ...bo
@@ -1648,17 +1648,18 @@
 rd, id %7D
-%5D
+ %7D
 %0A       
@@ -4065,16 +4065,23 @@
        %7B
+R.keys(
 this.sta
@@ -4093,27 +4093,103 @@
 ards
+)
 .map((
-board, i) =%3E%0A
+id, i) =%3E %7B%0A              const board = this.state.boards%5Bid%5D;%0A              return (%0A  
     
@@ -4243,16 +4243,18 @@
         
+  
 %3CLeaderb
@@ -4261,37 +4261,421 @@
 oard
- users=%7B%5B%5D%7D board=%7Bboard%7D
+%0A                    users=%7BR.take(%0A                      3,%0A                      R.sort(%0A                        (a, b) =%3E%0A                          board.sort === %22ASC%22%0A                            ? a.score - b.score%0A                            : b.score - a.score,%0A                        getUsers(board)%0A                      )%0A                    )%7D%0A                    board=%7Bboard%7D%0A                 
  /%3E%0A
+  
     
@@ -4695,32 +4695,50 @@
 ol%3E%0A            
+  );%0A            %7D
 )%7D%0A          %3C/R

fix trending