Fixed data flow for the status bar

src/js/App.js

@@ -5,20 +5,39 @@ import {
 	Route
 } from 'react-router-dom'
 
+// Pages
 import Menu from 'components/Menu'
 import About from 'components/About'
 import Thread from 'components/Thread'
 
 export default class App extends React.Component {
+	constructor(props) {
+		super(props)
+
+		this.state = {
+			statusText: null,
+			statusImage: null
+		}
+
+		this.onStatusChange = this.onStatusChange.bind(this)
+	}
+	
+	handleStatusChange(text, image)  {
+		this.setState({
+			statusText: text,
+			statusImage: image 
+		})
+	}
+
 	render() {
 		return (
 			<BrowserRouter basename={__dirname}>
 				<>
-					<Menu />
+					<Menu statusText={this.state.statusText} statusImage={this.state.statusImage} />
 					<Switch>			
 						<IndexRoute component={Thread} />
 						<Route path='/about' component={About}/>
-						<Route path='/r/:subreddit/comments' component={Thread}/>
+						<Route path='/r/:subreddit/comments' onStatusChange={this.handleStatusChange} component={Thread}/>
 						{/* <Route path='/:board/:pageNr' component={Board} />
 						<Route path='/:board/thread/:thread' component={Thread}/>
 						<Route component={Home} /> */}

src/js/components/Menu.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import StatusBox from 'components/StatusBox'
 
 export default class Menu extends React.Component {
 	render () {
@@ -9,15 +10,12 @@ export default class Menu extends React.Component {
 						<Link to='/'>Removeddit</Link>
 					</h1>
 					<nav>
-						<Link to='/r/all'>subreddit</Link>
+						<Link to='/r/all'>/r/all</Link>
 						<Link to='/r/bestof/comments/7c8jof/'>thread</Link>
 						<Link to='/about/'>about</Link>
 					</nav>
 				</div>
-				<div id='status'>
-					<p id='status-text'></p>
-					<img id='status-image' src='/images/loading.gif'/>
-				</div>
+				<StatusBox text={this.props.statusText} image={this.props.statusImage} />
 			</header>
 		)
 	}

src/js/components/StatusBox.js

@@ -0,0 +1,14 @@
+import React from 'react'
+
+export default class StatusBox extends React.Component {	
+	render() {
+		return (
+				<div id='status'>
+					{this.props.text &&
+					<p id='status-text'>{this.props.text}</p>}
+					{this.props.image &&
+					<img id='status-image' src={this.props.image}/>}
+				</div>
+		)
+	}
+}

src/js/components/Subreddit.js

@@ -0,0 +1,8 @@
+import React from 'react'
+
+export default class Thread extends React.Component {
+	render() {
+		return <h1>Subreddit</h1>
+	}
+
+}

src/js/components/Thread.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import {prettyScore} from 'utils'
+import {prettyScore, statusImages, redditThumbnails} from 'utils'
 
 export default class Thread extends React.Component {
 	constructor() {
@@ -12,11 +12,12 @@ export default class Thread extends React.Component {
 			thumbnail: '',
 			position: 0,
 			score: 0
-
 		}
 	}
 
-
+	handleStateChange(text, image) {
+		this.props.onStateChange(text, image)
+	}
 
 	render () {
 		const url = this.props.url.replace('reddit.com', 'removeddit.com')

src/js/reddit/index.js

@@ -35,8 +35,6 @@ const fetchToken = () => {
 export default {
 	comments(subreddit, threadID) {
 		return fetchToken()
-		.then(() => console.log('hi'))
 	}
-
 	
 }

src/js/utils.js

@@ -2,6 +2,15 @@ import SnuOwnd from 'libraries/snuownd.js'
 
 const markdown = SnuOwnd.getParser()
 
+export const redditThumbnails = ['self', 'default', 'image', 'nsfw']
+
+// Images for the status box in right side of header
+export const statusImages = {
+	loading: '/images/loading.gif',
+	error: '/images/error.png',
+	success: '/images/done.png'
+}
+
 // JSON parsing for fetch
 export const json = x => x.json()