text: import React, { Component } from "react";
  import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
  import axios from "axios";
  import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
  
  import NavigationContainer from "./navigation/navigation-container";
  import Home from "./pages/home";
  import About from "./pages/about";
  import Contact from "./pages/contact";
  import Blog from "./pages/blog";
  import BlogDetail from "./pages/blog-detail";
  import PortfolioManager from "./pages/portfolio-manager";
  import PortfolioDetail from "./portfolio/portfolio-detail";
  import Auth from "./pages/auth";
  import NoMatch from "./pages/no-match";
  import Icons from "../helpers/icons";
  
  export default class App extends Component {
    constructor(props) {
      super(props);
  
      Icons();
  
      this.state = {
        loggedInStatus: "NOT_LOGGED_IN"
      };
  
      this.handleSuccessfulLogin = this.handleSuccessfulLogin.bind(this);
      this.handleUnsuccessfulLogin = this.handleUnsuccessfulLogin.bind(this);
      this.handleSuccessfulLogout = this.handleSuccessfulLogout.bind(this);
    }
  
    handleSuccessfulLogin() {
      this.setState({
        loggedInStatus: "LOGGED_IN"
      });
    }
  
    handleUnsuccessfulLogin() {
      this.setState({
        loggedInStatus: "NOT_LOGGED_IN"
      });
    }
  
    handleSuccessfulLogout() {
      this.setState({
        loggedInStatus: "NOT_LOGGED_IN"
      });
    }
  
    checkLoginStatus() {
      return axios
        .get("https://api.devcamp.space/logged_in", { 
          withCredentials: true 
      })
      .then(response => {
        const loggedIn = response.data.logged_in;
        const loggedInStatus = this.state.loggedInStatus;
  
        if (loggedIn && loggedInStatus === "LOGGED_IN") {
          return loggedIn;
        } else if (loggedIn && loggedInStatus === "NOT_LOGGED_IN") {
          this.setState({
            loggedInStatus: "LOGGED_IN"
          });
        } else if (!loggedIn && loggedInStatus === "LOGGED_IN") {
          this.setState({
            loggedInStatus: "NOT_LOGGED_IN"
          });
        }
      })
      .catch(error => {
        console.log("Error", error);
      });
    }
  
    componentDidMount() {
      this.checkLoginStatus();
    }
  
    authorizedPages() {
      return [
        <Route
        key="portfolio-manager" 
        path="/portfolio-manager" 
        component={PortfolioManager} 
        />
      ];
    }
  
    render() {
      return (
        <div className="container">
          <Router>
            <div>
              <NavigationContainer 
                loggedInStatus={this.state.loggedInStatus} 
                handleSuccessfulLogout={this.handleSuccessfulLogout}
              />
  
              <Switch>
                <Route exact path="/" component={Home} />
  
                <Route
                    path="/auth" 
                    render={props => (
                      <Auth
                        {...props}
                        handleSuccessfulLogin={this.handleSuccessfulLogin}
                        handleUnsuccessfulLogin={this.handleUnsuccessfulLogin}
                      />
                    )} 
                />
                
                <Route path="/about-me" component={About} />
                <Route path="/contact" component={Contact} />
                <Route path="/blog" 
                  render={props => (
                    <Blog {...props} loggedInStatus={this.state.loggedInStatus} />
                  )} 
                />
                <Route 
                  path="/b/:slug"
                  render={props => (
                    <BlogDetail 
                      {... props}
                      loggedInStatus={this.state.loggedInStatus}
                    />
                  )}  
                />
                {this.state.loggedInStatus === "LOGGED_IN" ? (
                  this.authorizedPages()
                 ) : null}
                <Route 
                  exact 
                  path="/portfolio/:slug" 
                  component={PortfolioDetail} 
                />
                <Route component={NoMatch} />
              </Switch>
            </div>
          </Router>
  
        </div>
      );
    }
  }
  