From 792939860c567192950d12e4db290b7424ded7ba Mon Sep 17 00:00:00 2001
From: Jesper Wrang <jesperwrang96@gmail.com>
Date: Mon, 19 Feb 2018 01:33:35 +0100
Subject: [PATCH] Fixed some routing problems with the links for subreddits

---
 src/js/components/Post.js |  7 ++++---
 src/js/pages/Subreddit.js | 28 +++++++++++++++++++---------
 2 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/src/js/components/Post.js b/src/js/components/Post.js
index 06346fa..63aca7f 100644
--- a/src/js/components/Post.js
+++ b/src/js/components/Post.js
@@ -1,4 +1,5 @@
 import React from 'react'
+import { Link } from 'react-router-dom'
 import { prettyScore, prettyDate, parse, redditThumbnails, isDeleted } from 'utils'
 
 export default (props) => {
@@ -41,14 +42,14 @@ export default (props) => {
         <div className='thread-info'>
           submitted <span className='thread-time'>{prettyDate(props.created_utc)}</span> by&nbsp;
           <a className='thread-author author' href={userLink}>{props.author}</a>
-          &nbsp;to <a className='subreddit-link author' href={`/r/${props.subreddit}`}>/r/{props.subreddit}</a>
+          &nbsp;to <Link className='subreddit-link author' to={`/r/${props.subreddit}`}>/r/{props.subreddit}</Link>
         </div>
         {props.selftext &&
         <div className='thread-selftext user-text' dangerouslySetInnerHTML={{ __html: parse(props.selftext) }} />}
         <div className='total-comments'>
-          <a className='grey-link' href={props.permalink}>
+          <Link className='grey-link' to={props.permalink}>
             <b>{props.num_comments} comments</b>
-          </a>&nbsp;
+          </Link>&nbsp;
           <a className='grey-link' href={`https://www.reddit.com${props.permalink}`}>
             <b>reddit</b>
           </a>&nbsp;
diff --git a/src/js/pages/Subreddit.js b/src/js/pages/Subreddit.js
index a2edf89..278184b 100644
--- a/src/js/pages/Subreddit.js
+++ b/src/js/pages/Subreddit.js
@@ -1,13 +1,12 @@
 import React from 'react'
+import { Link } from 'react-router-dom'
 import { getRemovedThreadIDs } from 'api/removeddit'
 import { getThreads } from 'api/reddit'
 import Post from 'components/Post'
 
 const getSubredditForAPI = props => {
-  const { subreddit } = props.match.params
-  if (subreddit === undefined) {
-    return ''
-  } else if (subreddit.toLowerCase() === 'all') {
+  const { subreddit = 'all' } = props.match.params
+  if (subreddit.toLowerCase() === 'all') {
     return ''
   }
   return subreddit.toLowerCase()
@@ -20,11 +19,23 @@ export default class Subreddit extends React.Component {
 
     this.state = {
       threads: [],
+      subreddit: '',
+    }
+  }
+  componentDidMount() {
+    this.updateThreads(this.props)
+  }
+
+  componentWillReceiveProps(nextProps) {
+    const newSubreddit = getSubredditForAPI(nextProps)
+
+    if (this.state.subreddit !== newSubreddit) {
+      this.updateThreads(nextProps)
     }
   }
 
-  componentDidMount() {
-    const subreddit = getSubredditForAPI(this.props)
+  updateThreads(props) {
+    const subreddit = getSubredditForAPI(props)
     getRemovedThreadIDs(subreddit)
       .then(threadIDs => getThreads(threadIDs))
       .then(threads => {
@@ -32,19 +43,18 @@ export default class Subreddit extends React.Component {
           thread.removed = true
           thread.selftext = ''
         })
-        this.setState({ threads })
+        this.setState({ threads, subreddit })
       })
   }
 
   render() {
     const { subreddit = 'all' } = this.props.match.params
-    console.log(subreddit)
     const subredditLink = `/r/${subreddit}`
 
     return (
       <React.Fragment>
         <div className='subreddit-box'>
-          <a href={subredditLink} className='subreddit-title'>{subredditLink}</a>
+          <Link to={subredditLink} className='subreddit-title'>{subredditLink}</Link>
           <span className='space' />
           <a href={`https://www.reddit.com${subredditLink}`} className='subreddit-title-link'>reddit</a>
           <span className='space' />