class Home extends Component {
  state = {
    isLogined: false,
    redirect: false,
    username: "",
    avatar: "",
    name: "",
    messages: [],
    feeds: [],
    activechat: {},
    currentRoom: ""
  };

  componentDidMount() {
    var config = {
      //config data
    };
    Firebase.initializeApp(config);

    Firebase.auth().onAuthStateChanged(user => {
      if (user) {
        console.log("User logined");
        this.setState({
          isLogined: true
        });
        console.log(this.state.isLogined);
        this.getUserData(user);
      } else {
        console.log("User isn't logined");
        this.setState({
          isLogined: false,
          redirect: true
        });
        console.log(this.state.isLogined);
      }
    });
  }

  async getUserData(user) {
    var db = Firebase.database();
    var uid = user.uid;
    await db
      .ref(`users/${uid}`)
      .once("value")
      .then(s => {
        this.setState({
          username: s.child("username").val()
        });
      });
    await db
      .ref(`userdata/${this.state.username}`)
      .once("value")
      .then(s => {
        this.setState({
          avatar: s.child("pic100").val(),
          name: s.child("name").val()
        });
      });

    db
      .ref(`messages/users/${this.state.username}`)
      .orderByChild("timestamp")
      .limitToLast(30)
      .on("value", s => {
        var new_messages = [];
        s.forEach(element => {
          var message = element.val();
          new_messages.push(message);
        });
        new_messages = new_messages.reverse();
        this.setState({
          messages: new_messages
        });
      });
    var topics = [];

    db
      .ref(`home/feed`)
      .orderByChild("time")
      .limitToLast(30)
      .on("child_added", s => {
        topics.push(s.val());
        var reversedtopics = topics.reverse();
        this.setState({
          feeds: reversedtopics
        });
      });
  }

  loadChatBox(chat) {
    var id = chat.id;
    var name = chat.name;
    var type = chat.room_type;
    console.log(id + "  " + type);
    this.setState({
      activechat: {
        name: name,
        id: id,
        type: type
      }
    });
  }

  getChatBox(chat) {
    if (chat.id) {
      console.log("Get Chat Box called");
      return <ChatBox chat={chat} />;
    } else {
      return <div>Please select a chat</div>;
    }
  }

  render() {
    var topics = this.state.feeds.reverse();
    const { redirect } = this.state;

    if (redirect) {
      return <Redirect to="/login" />;
    }
    return (
      <div className={"container"}>
        <HomeBar avatar={this.state.avatar} />
        <div className={"columnContainer"}>
          <Card className={"leftContainer"}>
            <div style={{ overflowY: "scroll", height: "100%" }}>
              <ChatList
                messages={this.state.messages}
                onPress={message => {
                  if (message) {
                    this.loadChatBox(message);
                    message = null;
                  }
                }}
              />
            </div>
          </Card>
          <Card className={"middleContainer"}>
            {this.getChatBox(this.state.activechat)}
          </Card>

          <Card className={"rightContainer"}>
            <HomeFeed feeds={this.state.feeds} />
          </Card>
        </div>
      </div>
    );
  }
}

export default Home;




HomeBar

const HomeBar = props => {
  console.log(props);
  return (
    <div style={styles.root}>
      <AppBar position="static" style={{ backgroundColor: "#fff" }}>
        <Toolbar>
          <IconButton
            style={styles.menuButton}
            color="inherit"
            aria-label="Menu"
          >
            <MenuIcon />
          </IconButton>
          <Typography style={styles.title} variant="title" color="inherit">
            AppName
          </Typography>
          <Button style={styles.menuItem}>Home</Button>
          <Button style={styles.menuItem}>Topics</Button>
          <Button style={styles.menuItem}>Rooms</Button>
          <Button style={styles.menuItem}>Leaderboard</Button>

          <IconButton color="inherit">
            <Avatar alt="Remy Sharp" src={props.avatar} />
          </IconButton>
        </Toolbar>
      </AppBar>
    </div>
  );
};

export default HomeBar;