Tabs improvements

src/components/page/index.js

@@ -5,6 +5,7 @@ import { withRouter } from 'react-router-dom'
 import { fetchPage } from '../../lib/api'
 import { stripTags } from '../../lib/html'
 import { addTab } from '../../store/tabs'
+import { storePage } from '../../store/pages'
 
 import Loading from '../loading'
 import Sections from '../sections'
@@ -34,18 +35,21 @@ class Page extends Component {
   }
 
   fetchPage (title) {
+    const { pages, storePage } = this.props
+    const pageIsCached = !!pages[title]
+
     this.setState({ loading: true })
 
-    return fetchPage(title)
-      .then(({ title, content, sections }) => {
-        document.title = `${stripTags(title)} - Wikipadia`
+    return Promise.resolve()
+      .then(() => pageIsCached ? pages[title] : fetchPage(title))
+      .then(page => {
+        document.title = `${title} - Wikipadia`
+        storePage(title, page)
 
         this.setState(
           {
             loading: false,
-            title,
-            content,
-            sections
+            ...page
           },
           () => {
             const { location: { hash } } = this.props
@@ -78,7 +82,7 @@ class Page extends Component {
       const url = e.target.href.replace(window.location.origin, '')
 
       if (tabs.length === 0) {
-        this.props.addTab(title, `/${encodeURIComponent(title.replace(/ /g, '_'))}`)
+        this.props.addTab(stripTags(title), `/${encodeURIComponent(stripTags(title).replace(/ /g, '_'))}`)
       }
 
       this.props.addTab(decodeURIComponent(url.split('/')[1].replace(/_/g, ' ')), url)
@@ -114,9 +118,9 @@ class Page extends Component {
   }
 }
 
-const mapStateToProps = ({ tabs }) => ({ tabs })
+const mapStateToProps = ({ pages, tabs }) => ({ pages, tabs })
 
 export default compose(
-  connect(mapStateToProps, { addTab }),
+  connect(mapStateToProps, { addTab, storePage }),
   withRouter
 )(Page)

src/components/tabs/index.js

@@ -1,36 +1,51 @@
 import React, { useState } from 'react'
+import { compose } from 'redux'
 import { connect } from 'react-redux'
+import { withRouter } from 'react-router-dom'
 import { removeTab } from '../../store/tabs'
 
 import { Link } from 'react-router-dom'
 
-const Tabs = ({ tabs, removeTab }) => {
+const Tabs = ({ tabs, removeTab, history }) => {
   if (tabs.length) {
     const [active, setActive] = useState(tabs[0].id)
 
+    const handleClick = tab => e => {
+      window.scrollTo(0, 0)
+      return setActive(tab.id)
+    }
+
+    const handleRemove = tab => e => {
+      e.preventDefault()
+
+      const currentIndex = tabs.indexOf(tab)
+      const newTab = tabs[currentIndex + 1] || tabs[currentIndex - 1]
+
+      if (newTab) {
+        setActive(newTab.id)
+        window.scrollTo(0, 0)
+        history.push(newTab.path)
+      }
+
+      return removeTab(tab.id)
+    }
+
     return (
       <nav className='tabs'>
         {tabs.map(tab => {
-          const handleClick = e => {
-            window.scrollTo(0, 0)
-            return setActive(tab.id)
-          }
-
-          const handleRemove = e => {
-            e.preventDefault()
-            return removeTab(tab.id)
-          }
           const isActive = active === tab.id
 
           return (
             <div key={tab.id} className={['tab-link', isActive && 'tab-link-active'].filter(Boolean).join(' ')}>
               <Link
                 to={tab.path}
-                onClick={handleClick}
+                onClick={handleClick(tab)}
               >
                 {tab.name}
               </Link>
-              <button className='remove-tab-link' onClick={handleRemove}>Remove tab</button>
+              {isActive && (
+                <button className='remove-tab-link' onClick={handleRemove(tab)}>Remove tab</button>
+              )}
             </div>
           )
         })}
@@ -41,4 +56,7 @@ const Tabs = ({ tabs, removeTab }) => {
   return null
 }
 
-export default connect(null, { removeTab })(Tabs)
+export default compose(
+  connect(null, { removeTab }),
+  withRouter
+)(Tabs)

src/store/index.js

@@ -2,6 +2,7 @@ import { combineReducers, createStore, applyMiddleware } from 'redux'
 import thunk from 'redux-thunk'
 import createLogger from 'redux-logger'
 
+import pages from './pages'
 import settings from './settings'
 import tabs from './tabs'
 
@@ -10,6 +11,7 @@ const initialState = {}
 export default () =>
   createStore(
     combineReducers({
+      pages,
       settings,
       tabs
     }),

src/store/pages/index.js

@@ -0,0 +1,22 @@
+
+export const storePage = (title, data) => dispatch =>
+  dispatch({
+    type: 'PAGES/STORE',
+    payload: { title, data }
+  })
+
+export default (state = {}, action) => {
+  switch (action.type) {
+    case 'PAGES/STORE': {
+      const { title, data } = action.payload
+
+      return {
+        ...state,
+        [title]: data
+      }
+    }
+
+    default:
+      return state
+  }
+}

src/store/tabs/index.js

@@ -25,6 +25,11 @@ export default (state = [], action) => {
 
     case 'TABS/REMOVE': {
       const { id } = action.payload
+
+      if (state.length === 2) {
+        return []
+      }
+
       return state.filter(tab => tab.id !== id)
     }
 

src/styles/_layout.scss

@@ -86,6 +86,7 @@
     border-bottom: thin solid rgba(128, 128, 128, 0.5);
     font-weight: bold;
     text-align: center;
+    white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
     flex: 1 1 auto;
@@ -99,6 +100,9 @@
       text-decoration: none;
       display: block;
       padding: 0 1.5rem 0 1rem;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
     }
   }
 
@@ -116,7 +120,7 @@
   width: 2rem;
   height: 2rem;
   margin-top: -1rem;
-  line-height: 1.8rem;
+  line-height: 2rem;
   padding: 0;
   text-indent: -9999px;
   text-align: center;

src/styles/styles.css

@@ -146,6 +146,7 @@ table {
     border-bottom: thin solid rgba(128, 128, 128, 0.5);
     font-weight: bold;
     text-align: center;
+    white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
     flex: 1 1 auto;
@@ -157,7 +158,10 @@ table {
       color: currentColor !important;
       text-decoration: none;
       display: block;
-      padding: 0 1.5rem 0 1rem; }
+      padding: 0 1.5rem 0 1rem;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden; }
   .tabs .tab-link.tab-link-active {
     border-bottom-color: transparent;
     border-right-color: rgba(128, 128, 128, 0.25);
@@ -170,7 +174,7 @@ table {
   width: 2rem;
   height: 2rem;
   margin-top: -1rem;
-  line-height: 1.8rem;
+  line-height: 2rem;
   padding: 0;
   text-indent: -9999px;
   text-align: center;