<file_sep>import React, { Component } from 'react';
// import axios from 'axios';
// import axios from '../../axios'; //load the axios.js that we created our instance in
import Posts from './Posts/Posts';
// import FullPost from './FullPost/FullPost';
import NewPost from './NewPost/NewPost';
import './Blog.css';
import {Route, NavLink, Switch, Redirect} from 'react-router-dom';

class Blog extends Component {
    state = {
        auth: true
    };

    render () {
        return (
            <div className="Blog">
                <header>
                    <nav>
                        <ul>
                            {/*<li><Link to="/">Home</Link></li>*/}
                            <li>
                                <NavLink
                                    to="/posts/"
                                    exact
                                    activeClassName="my-active"
                                    activeStyle={{
                                        color: '#fa923f',
                                        textDecoration: 'underline'
                                    }}>
                                    Posts
                                </NavLink>
                            </li>
                            <li><NavLink to={{
                                // pathname: this.props.match.url + '/new-post', //relative path appends to current url
                                pathname: '/new-post', //absolute path appends to root domain
                                hash: '#submit',
                                search: '?quick-submit=true'
                            }}>New Post</NavLink></li>
                        </ul>
                    </nav>
                </header>
                {/*<Route path="/" exact render={() => <Posts/>}/>*/}
                {/*<Route path="/new-post" exact render={() => <NewPost/>}/>*/}
                {/*Routes are processed in order. Without the Switch it could process more than one route. Switch processes first route that matches*/}
                {/* the path "/" will match "/", "/1", etc. Anything that begins with a slash*/}
                <Switch>
                    {this.state.auth ? <Route path="/new-post" component={NewPost}/> : null}
                    <Route path="/posts" component={Posts}/>
                    {/*<Route path="/" component={Posts}/>*/}
                    <Redirect exact from="/" to="/posts"/>
                    <Route render={() => <h1>Page Not Found</h1>}/>
                </Switch>
            </div>
        );
    };
}

export default Blog;<file_sep>import axios from 'axios';

const instance = axios.create({
    baseURL: 'https://jsonplaceholder.typicode.com'
});

instance.defaults.headers.common['Authorization'] = 'AUTH TOKEN FROM INSTANCE';

instance.interceptors.request.use(request => {
    console.log(request);
    //edit request config
    return request;
}, error => { // the error is only to handle errors sending the request like no internet connection
    console.log(error);
    return Promise.reject(error); //i think this re-throws the error
});

instance.interceptors.response.use(response => {
    console.log(response);
    //edit request config
    return response;
}, error => { // this handles any errors in the response from the server like bad url
    console.log(error);
    return Promise.reject(error); //i think this re-throws the error
});

export default instance;<file_sep>import React from 'react';
import {withRouter} from 'react-router-dom'; //withRouter makes a component route aware (passes route props to child component

import './Post.css';

const post = (props) => {
    console.log(props);
    return (
        <article className="Post" onClick={props.clicked}>
            <h1 className="GetShwifty">{props.title}</h1>
            <div className="Info">
                <div className="Author">{props.author}</div>
            </div>
        </article>
    );
};
 //I added the CSS class GetShwifty to NewPost.css to show that it is global once imported

export default withRouter(post);<file_sep>import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import axios from 'axios';

axios.defaults.baseURL = 'https://jsonplaceholder.typicode.com';
axios.defaults.headers.common['Authorization'] = 'AUTH TOKEN';
axios.defaults.headers.post['Content-Type'] = 'application/json'; //this is already the default, just here to show that you can set it to something

axios.interceptors.request.use(request => {
    console.log(request);
    //edit request config
    return request;
}, error => { // the error is only to handle errors sending the request like no internet connection
    console.log(error);
    return Promise.reject(error); //i think this re-throws the error
});

axios.interceptors.response.use(response => {
    console.log(response);
    //edit request config
    return response;
}, error => { // this handles any errors in the response from the server like bad url
    console.log(error);
    return Promise.reject(error); //i think this re-throws the error
});

ReactDOM.render(<App/>, document.getElementById('root'));
registerServiceWorker();
