From 9c346056ed11f3e57ec1aa964cfcdd4a636665ec Mon Sep 17 00:00:00 2001 From: Nick Pegg Date: Sun, 1 Oct 2017 20:38:04 -0700 Subject: [PATCH] half-assed attempt to futz around with react-router --- public/index.html | 6 +-- src/App.js | 110 ++++++++++++++++++++++++++++++++-------------- src/Article.js | 27 +++++++++++- src/Header.js | 5 ++- src/Nav.js | 42 ++++++++++++++---- 5 files changed, 142 insertions(+), 48 deletions(-) diff --git a/public/index.html b/public/index.html index ee16dac..e6f5d3f 100644 --- a/public/index.html +++ b/public/index.html @@ -22,9 +22,9 @@ - - - + + + Nick Pegg diff --git a/src/App.js b/src/App.js index 2cf5e72..bf3f6e3 100644 --- a/src/App.js +++ b/src/App.js @@ -1,60 +1,102 @@ import React, { Component } from 'react'; +import { + BrowserRouter as Router, + Link, + Route, + Switch +} from 'react-router-dom'; + import hljs from 'highlight.js'; import 'highlight.js/styles/github-gist.css'; import { Container, Row, Column } from './skeleton'; -import { Article } from './Article'; +import { Articles, RoutedArticle } from './Article'; import { Footer } from './Footer'; import { Header } from './Header'; -import { NavList, TagNav, HistoryNav } from './Nav'; +import { NavList, TagNav, HistoryNav, HistoryNavStart } from './Nav'; class App extends Component { render() { return ( -
-
+ +
+
- - - - - - - - { this.articles() } - - + + + + + + + + + + { /* Page routes */ } + - - + { /* Article routes */ } + + -
-
+ { /* 404 fallback */ } + + + + + + { /* Display HistoryNav if this is a series of articles */ } + + + + +
+ +
+ ); } - articles() { - // TODO: This is the thing that'll fetch the articles from the JSON blob - // based on the URL that's hit. This will return one or more Articles - return [ -
, -
- ]; - } - componentDidMount() { // Auto-highlight all 
 blocks
     hljs.initHighlightingOnLoad();
   }
 }
 
+// Dummy About page just for playing around with ReactRouter
+class About extends Component {
+  render () {
+    return (
+      

+        

+          
About me

+        

+        

+          

+            Wowzers, this is an about page!
+          

+        

+      

+    )
+  }
+}
+
+class FourOhFour extends Component {
+  render () {
+    return (
+      

+        

+          
404 Oh No!

+        

+        

+          

+            You're lost, bud. Why not try going back Home?
+          

+        

+      

+    )
+  }
+}
+
 export default App;
diff --git a/src/Article.js b/src/Article.js
index b49b83c..c3515f6 100644
--- a/src/Article.js
+++ b/src/Article.js
@@ -63,4 +63,29 @@ class Article extends Component {
   }
 }
 
-export { Article };
+
+const RoutedArticle = ({match}) => (
+  

+)
+
+
+const Articles = ({match}) => (
+  // TODO: This is the thing that'll fetch the articles from the JSON blob
+  // based on the URL that's hit. This will return one or more Articles
+  

+    

+    

+    

+      This is page number: {match.params.page}
+    

+  

+)
+
+export { Article, Articles, RoutedArticle };
diff --git a/src/Header.js b/src/Header.js
index 4d60673..3c58311 100644
--- a/src/Header.js
+++ b/src/Header.js
@@ -1,13 +1,14 @@
 import React, { Component } from 'react';
+import { Link } from 'react-router-dom';
 
 class Header extends Component {
   render() {
     return (
       
     );
diff --git a/src/Nav.js b/src/Nav.js
index 4c49f01..84f3309 100644
--- a/src/Nav.js
+++ b/src/Nav.js
@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import { Link } from 'react-router-dom';
 
 import Icon from 'react-fontawesome';
 
@@ -18,14 +19,29 @@ class ListLink extends Component {
   }
 }
 
+class RouterListLink extends Component {
+  render () {
+    let icon = null;
+    if (this.props.icon) {
+      icon = 
+    }
+
+    return (
+      
  •  { icon } { this.props.name } 
    • 
+    );
+  }
+}
+
 class NavList extends Component {
   render() {
+    // TODO: populate these dynamically based on root page names
+    // but keep Home first and RSS at the end
     return (
       
         
      
-          
-          
-          
+          
+          
+          
           
         
    
           
@@ -57,12 +73,18 @@ class TagNav extends Component {
 
 class HistoryNav extends Component {
   render() {
+    let left = "";
+    if (!this.props.newest) {
+      left = (
+          
+            
+             newer posts
+          
+      )
+    }
     return (
       
-        
-          
-           newer posts
-        
+        { left }
         
           older posts 
           
@@ -72,4 +94,8 @@ class HistoryNav extends Component {
   }
 }
 
-export { ListLink, NavList, TagNav, HistoryNav };
+const HistoryNavStart = ({match}) => (
+  
+)
+
+export { ListLink, NavList, TagNav, HistoryNav, HistoryNavStart };