file.js

import React, {Component} from 'react';
import firebase from '../../utils/firebase';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {fetchUser, updateUser}  from '../../actions/firebase_actions';
import Loading  from '../helpers/loading';
import ChangePassword from './change_password';
import { DATA_API, POST_API } from './Api';
import {Link} from 'react-router';
import { SplitButton, DropdownButton, MenuItem, Badge, Button, ButtonToolbar, FieldGroup, ButtonGroup, Tab, Tabs, Panel, ListGroup, ListGroupItem } from 'react-bootstrap';

export default React.createClass({
  componentWillMount () {
    return fetch(DATA_API)
      .then((response) => response.json())
      .then((json) => {
        console.log(json);
        this.setState({testapi: json})
        this.props.fetchUser();
        this.logOut = this.logOut.bind(this);
      })

  },

getInitialState () {
    return { 
      displayedCategories: [],
      testapi: [],
  };
},

selectTag: function (tag) {
 
        let newCategories = this.state.displayedCategories.filter(function (category) {
          return category.id !== tag.id
        })        
        if (newCategories.length === this.state.displayedCategories.length) {
          newCategories = newCategories.concat([tag])
        }
        this.setState({
          displayedCategories: newCategories,
        });
    },

    resetFilter: function(){
      this.setState({
        displayedCategories: []
      });
    },
    logout(evt) {
        evt.preventDefault();
        Auth.logout()
    },
    loggedIn(currentUser) {
    // if current user exists and user id exists than make user navigation
    if (currentUser && currentUser.uid)
      return (
        <h1>
 You're logged in (I plan to do the render of line 83 here)
        </h1>
      )
    else
      return [
       <b>NOT logged yet</b>
      ]

  },
    render: function(){
        var testapi = this.state.testapi
        var uniqueCategories = testapi.map(function (photo) {
            return photo.tag; // tag is a list of tags...
        }).reduce(function (uniqueList, someTags) {
            return uniqueList.concat(
              someTags.filter(function (thisTag) {
                return !uniqueList.some(function(uniqueTag) {
                  return uniqueTag.id === thisTag.id && uniqueTag.taglevel === thisTag.taglevel
                });
              })
            );
        }, 
    []
  );
        return (
            <div>
             { this.loggedIn(this.props.currentUser) }
                <PhotoGalleryLevel level={1} tags={uniqueCategories} displayedCategories={this.state.displayedCategories} selectTag={this.selectTag} />
                  <PhotoGalleryLevel level={2} tags={uniqueCategories} displayedCategories={this.state.displayedCategories} selectTag={this.selectTag} />
                  <PhotoGalleryLevel level={3} tags={uniqueCategories} displayedCategories={this.state.displayedCategories} selectTag={this.selectTag} />
                    <PhotoDisplay displayedCategories={this.state.displayedCategories} testapi={testapi} />
            </div>
            );
    }
});
function mapDispatchToProps(dispatch) {
  return bindActionCreators({fetchUser, logoutUser}, dispatch);
}


function mapStateToProps(state) {
  return {currentUser: state.currentUser};
}

var PhotoGalleryLevel = React.createClass({
  render: function () {
    var filteredTags = this.props.tags.filter(function (tag) {
      return tag.taglevel === this.props.level;
    }.bind(this));
    var disabled = this.props.displayedCategories.some(function (tag) {
      return tag.taglevel === this.props.level;
    }.bind(this));
    return (
      <div>
        {filteredTags.map(function (tag){
          return <PhotoGalleryButton tag={tag} selectTag={this.props.selectTag} disabled={disabled} />;
        }.bind(this))}
      </div>
    );
  }
});

var PhotoGalleryButton = React.createClass({
  getInitialState: function() {
    return this.state = {
      isClicked: false
    }
  },
  onClick: function (e) {
    this.setState({
      isClicked: !this.state.isClicked
    })
    this.props.selectTag(this.props.tag);
  },
  render: function () {
    return (
      <Button className={this.state.isClicked ? '' : 'btn-default-1'} onClick={this.onClick}>{this.props.tag.name}</Button>
    );
  }
});

var PhotoDisplay = React.createClass({
  getPhotoDetails: function (photo) {
    console.log(this.props.displayedCategories, photo);
      return (
        <Photo title={photo.title} name={photo.name} tags={photo.tag} pk={photo.pk} created={photo.created}/>
      );
  },
  
  tagFilter: function (photo) {
    return this.props.displayedCategories.length === 0 || 
      this.props.displayedCategories.every(function(thisTag) {
        return photo.tag.some(function (photoTag) {
          return photoTag.id === thisTag.id &&
            photoTag.taglevel === thisTag.taglevel;
        });
      });
  },
  
  render: function () {
    return (
      <div>
        <b> {this.props.testapi.filter(this.tagFilter).map(this.getPhotoDetails)} </b>
      </div>
    );
  }
});


var Photo =  React.createClass({
    getTagDetail: function (tag){
      return (
        <li><span>{tag.name} (level:{tag.taglevel})</span></li>
      );
    },
  
  sortTags: function (tagA, tagB) {
    return tagA.taglevel - tagB.taglevel;
  },
  
    render: function(){
        return (
          <div>
<style type="text/css">{`
    .badge-custom {
        background: red;
    }
    `}</style>
<Panel key={this.props.id} collapsible defaultClosed header={this.props.title}>
    <ListGroup fill>
      <ListGroupItem key={this.props.pk} target="_blank" href={"https://23.herokuapp.com/admin/Tril/task/" + this.props.pk + "/change/"}>Edit item in Admin. <Badge bsStyle="custom">{this.props.pk}</Badge></ListGroupItem>
    </ListGroup>
  </Panel>
  </div>

        );
    }
    
})