App component

App.jsx

import React, { Component } from 'react'
import { Route, Switch, Redirect } from "react-router-dom"

// now-ui import
import LoginPage from './examples/LoginPage'
import Index from './Index'

// user developed views
import HomePage from './HomePage'
import BlogPage from './BlogPage'
import BlogListGroup from '../components/ContentAreas/BlogListGroup'
import AccountPage from './AccountPage'
import CreateArticlePage from './CreateArticlePage'

// third party packages
import Cookies from 'js-cookie'


// backend constants
import { AuthContext } from '../backendConstants'

// todo Don't forget the use of
// todo the logical && operator
// todo to conditionally render
// todo something without the use
// todo of explicitely returning
// todo false or null =>
// todo eg... something={foo && somethingElse}
// todo provided foo === true will return somethingElse
// todo or null if foo is false

// TODO -> also consider using
// TODO useContext() to pass down certain
// TODO data without prop drilling


class App extends Component {
    constructor(props) {
        super(props)
        this.state = {
            isLoggedIn: false,
            authtoken: null,
            user: {},
            data: [],
            blog: {},
            csrftoken: Cookies.get('csrftoken'),
            blogCreationData: {},
        }
    }
    // set the csrftoken from the server
    componentWillMount () {
        Cookies.set('Set-Cookie', 'csrftoken')
    }

    // set methods
    setAuthToken = (token) => {
        if (token && token !== '') {
            const authtoken = token.token
            const user = {
                'username': token.username,
                'email': token.email,
                'date_joined': token.date_joined,
                'first_name': token.first_name,
                'last_name': token.last_name,
                'is_admin': token.is_admin,
                'is_staff': token.is_staff,
                'is_blogger': token.is_blogger,
            }
            this.setState({ authtoken })
            this.setState({ user })
        }
    }
    setIsLoggedIn = () => {
        this.setState({ isLoggedIn: true })
    }
    setIsLoggedOut = () => {
        this.setState({ isLoggedIn: false })
        this.setState({ user: {} })
        this.setState({ authtoken: null })
    }
    setData = (data) => {
        this.setState({ data })
    }
    setBlog = (blog) => {
        this.setState({ blog })
    }
    setUser = (user) => {
        this.setState({ user })
    }
    // get methods
    getIsLoggedIn = () => {
        const isLoggedIn = this.state.isLoggedIn
        return isLoggedIn
    }
    getUser = () => {
        const user = this.state.user
        return user
    }
    getData = () => {
        const data = this.state.data
        return data
    }
    getAuthToken = () => {
        const authtoken = this.state.authtoken
        return authtoken
    }
    getCookie = () => {
        const cookie = this.state.cookie
        return cookie
    }
    getBlog = () => {
        const blog = this.state.blog
        return blog
    }

    authPackage = () => {
        const pkg = {
            user: this.getUser(),
            isLoggedIn: this.getIsLoggedIn(),
            logout: this.setIsLoggedOut,
            cookie: this.setCookie
        }
        return pkg
    }

    render () {
        return (
            <AuthContext.Provider value={this.authPackage()}>
                <Switch>
                    <Switch>
                        <Route
                            path='/account'
                            component={AccountPage}
                        />
                        <Route
                            path='/content'
                            component={Index}
                        />
                        <Route
                            path='/create-blog'
                            render={(props) => <CreateArticlePage {...props}
                                isLoggedIn={this.getIsLoggedIn()}
                                user={this.getUser()}
                                token={this.getAuthToken()}
                                setBlogCreationData={this.setBlogCreationData}
                                blogCreationHandleSubmit={this.blogCreationHandleSubmit}
                            />}
                        />
                        <Route
                            path='/login'
                            render={(props) => <LoginPage {...props}
                                token={this.setAuthToken}
                                session={this.setSessionOrCookie}
                                setIsLoggedIn={this.setIsLoggedIn}
                                user={this.setUser}
                            />}
                        />
                        <Route
                            path='/home'
                            component={HomePage}
                        />
                        <Route
                            exact
                            path='/blog'
                            render={(props) => <BlogListGroup {...props} />}
                        />
                        <Route
                            path='/blog/:id'
                            render={(props) => <BlogPage {...props}
                                blog={this.setBlog}
                            />}
                        />
                        <Redirect
                            to='/home'
                        />
                        <Redirect
                            to='/home'
                            from='/'
                        />
                    </Switch>
                </Switch>
            </AuthContext.Provider>
        )
    }
}

export default App