{"size": 3292, "ext": "js", "max_stars_repo_path": "src/containers/LoggedIn/index.js", "max_stars_repo_name": "JasonEtco/tote", "max_stars_repo_stars_event_min_datetime": "2020-09-19T06:01:40.000Z", "max_stars_repo_stars_event_max_datetime": "2020-09-19T06:01:40.000Z", "max_issues_repo_path": "src/containers/LoggedIn/index.js", "max_issues_repo_name": "JasonEtco/tote", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/containers/LoggedIn/index.js", "max_forks_repo_name": "JasonEtco/tote", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 33.9381443299, "max_line_length": 109, "alphanum_fraction": 0.5583232078}
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Note from '../../components/Note';  
import PublicNote from '../../components/PublicNote';  
import NotesNav from '../../components/NotesNav';  
import Nav from '../../components/Nav';  
import types from '../../utils/types';
import firebase from 'firebase';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import './LoggedIn.scss';

export default class LoggedIn extends Component {
  static propTypes = {
    user: types.user.isRequired,
    logout: PropTypes.func.isRequired,
  }

  constructor(props) {
    super(props);
    this.search = this.search.bind(this);
    this.closeAnyNav = this.closeAnyNav.bind(this);
    this.openNav = this.openNav.bind(this);
    this.openNotesNav = this.openNotesNav.bind(this);
  }

  state = { public: {}, private: {}, loading: true, search: '', notesNav: false, nav: false }

  componentDidMount() {
    const { uid } = this.props.user;

    const publicRef = firebase.database().ref(`users/${uid}/notes/public`);
    publicRef.on('value', (snapshot) => {
      this.setState({ public: snapshot.val(), loading: false });
    });

    const privateRef = firebase.database().ref(`users/${uid}/notes/private`);
    privateRef.on('value', (snapshot) => {
      this.setState({ private: snapshot.val(), loading: false });
    });
  }

  search(search) { this.setState({ search }); }

  openNotesNav() { this.setState({ notesNav: true, nav: false }); }
  openNav() { this.setState({ notesNav: false, nav: true }); }
  closeAnyNav() { this.setState({ notesNav: false, nav: false }); }

  render() {
    const { user, online } = this.props;
    const { search, nav, notesNav, loading } = this.state;
    const notes = { ...this.state.private, ...this.state.public };

    return (
      <Router>
        <main className="main">
          <Nav open={nav} notes={notes} logout={this.props.logout} updateSearch={this.search} />
          <NotesNav open={notesNav} notes={notes} updateSearch={this.search} search={search} />

          <div className="mobile-nav">
            <button className="mobile-nav__btn" onClick={this.openNav}>Tags</button>
            <button className="mobile-nav__btn" onClick={this.openNotesNav}>Notes</button>
          </div>

          <div className={`mobile-overlay ${nav || notesNav ? 'is-open' : ''}`} onClick={this.closeAnyNav} />
          <Switch>
            <Route
              exact
              path="(/n)?/:noteId?"
              render={p => {
                const { noteId } = p.match.params;
                const isPrivate = Object.prototype.hasOwnProperty.call(this.state.private || {}, noteId);
                return (
                  <Note
                    isPrivate={isPrivate}
                    notes={notes}
                    loading={loading}
                    online={online}
                    updateSearch={this.search}
                    user={user}
                    {...p}
                  />
                );
              }}
            />

            <Route
              exact
              path="/u/:uid/:noteId"
              render={p => <PublicNote loading={loading} {...p} />}
            />
          </Switch>
        </main>
      </Router>
    );
  }
}
