Persist

components/Paper/Tabs/SummaryTab.js

@@ -65,9 +65,23 @@ class SummaryTab extends React.Component {
     });
   };
 
+  componentDidMount() {
+    if (this.props.paper.summary) {
+      let contentState = convertFromRaw(this.props.paper.summary.summary);
+      let editorState = EditorState.createWithContent(contentState);
+      this.setState({
+        editorState,
+      });
+    }
+  }
+
   componentDidUpdate = (prevProps) => {
-    if (prevProps.paper !== this.props.paper) {
-      this.getSummary();
+    if (prevProps.paper.summary !== this.props.paper.summary) {
+      let contentState = convertFromRaw(this.props.paper.summary.summary);
+      let editorState = EditorState.createWithContent(contentState);
+      this.setState({
+        editorState,
+      });
     }
   };
   render() {

components/PaperTabBar.js

@@ -5,10 +5,11 @@ import { paperTabFont } from "~/config/themes/fonts";
 
 const PaperTabBar = (props) => {
   const selectedTab = props.selectedTab;
+  const { baseUrl } = props;
   return (
     <div className={css(styles.container)}>
       <div className={css(styles.tabContainer)}>
-        {tabs.map((link) => renderTabs(link, selectedTab))}
+        {tabs.map((link) => renderTabs(link, selectedTab, baseUrl))}
       </div>
     </div>
   );
@@ -26,15 +27,20 @@ function formatTabs(tab) {
   return tab;
 }
 
-function renderTabs({ key, href, label }, selected) {
+function renderTabs({ key, href, label }, selected, baseUrl) {
   let classNames = [styles.tab];
 
   if (href === selected) {
     classNames.push(styles.selected);
   }
 
   return (
-    <Link key={key} href={href}>
+    <Link
+      key={key}
+      href={`/paper/[paperId]/[tabName]`}
+      as={`/paper/${baseUrl}/${href}`}
+      prefetch
+    >
       <div className={css(classNames)}>
         <div className={css(styles.link)}>{label}</div>
       </div>

package.json

@@ -8,7 +8,7 @@
     "test": "cypress run --project $PWD/tests"
   },
   "dependencies": {
-    "@quantfive/js-web-config": "^1.0.3",
+    "@quantfive/js-web-config": "^1.0.4",
     "@zeit/next-css": "^1.0.1",
     "aphrodite": "^2.4.0",
     "draft-js": "0.10.0",
@@ -18,6 +18,7 @@
     "moment": "^2.24.0",
     "next": "^9.0.6",
     "next-compose-plugins": "^2.2.0",
+    "next-redux-wrapper": "^4.0.0",
     "next-transpile-modules": "^2.3.1",
     "react": "^16.9.0",
     "react-avatar": "^3.7.0",

pages/_app.js

@@ -1,16 +1,17 @@
 import App from "next/app";
 import React from "react";
-import withReduxStore from "../redux/with-redux-store";
+import withRedux from "next-redux-wrapper";
 import { Provider } from "react-redux";
+import { configureStore } from "~/redux/configureStore";
 
 class MyApp extends App {
   render() {
-    const { Component, pageProps, reduxStore } = this.props;
+    const { Component, pageProps, store } = this.props;
     return (
-      <Provider store={reduxStore}>
+      <Provider store={store}>
         <Component {...pageProps} />
       </Provider>
     );
   }
 }
-export default withReduxStore(MyApp);
+export default withRedux(configureStore)(MyApp);

pages/paper/[paperId]/[tabName]/index.js

@@ -1,6 +1,7 @@
 import { useRouter } from "next/router";
 import { useState, useEffect } from "react";
 import { StyleSheet, css } from "aphrodite";
+import { useSelector, connect } from "react-redux";
 import dynamic from "next/dynamic";
 import moment from "moment";
 import Avatar from "react-avatar";
@@ -10,20 +11,19 @@ import DiscussionTab from "~/components/Paper/Tabs/DiscussionTab";
 import SummaryTab from "~/components/Paper/Tabs/SummaryTab";
 import PaperTab from "~/components/Paper/Tabs/PaperTab";
 
+// Redux
+import { PaperActions } from "~/redux/paper";
+
 //Config
 import API from "~/config/api";
 import { Helpers } from "@quantfive/js-web-config";
 
-const Paper = () => {
+const Paper = (props) => {
   const router = useRouter();
   const { paperId, tabName } = router.query;
-  const [paper, setPaper] = useState({ authors: [] });
-
-  useEffect(() => {
-    getPaper();
-  }, []);
+  let { paper } = props;
 
-  function renderTabContent() {
+  let renderTabContent = () => {
     switch (tabName) {
       case "summary":
         return <SummaryTab paperId={paperId} paper={paper} />;
@@ -34,44 +34,38 @@ const Paper = () => {
       case "citations":
         return null;
     }
-  }
-
-  function getPaper() {
-    fetch(API.PAPER({ paperId }), API.GET_CONFIG())
-      .then(Helpers.checkStatus)
-      .then(Helpers.parseJSON)
-      .then((resp) => {
-        setPaper(resp);
-      });
-  }
+  };
 
   function renderAuthors() {
-    let authors = paper.authors.map((author, index) => {
-      return (
-        <div className={css(styles.authorContainer)}>
-          <Avatar
-            name={`${author.first_name} ${author.last_name}`}
-            size={30}
-            round={true}
-            textSizeRatio="1"
-          />
-        </div>
-      );
-    });
+    let authors =
+      paper &&
+      paper.authors.map((author, index) => {
+        return (
+          <div className={css(styles.authorContainer)} key={`author_${index}`}>
+            <Avatar
+              name={`${author.first_name} ${author.last_name}`}
+              size={30}
+              round={true}
+              textSizeRatio="1"
+            />
+          </div>
+        );
+      });
     return authors;
   }
 
   // TODO: Display different tab content based on tabName
   return (
     <div className={css(styles.container)}>
       <div className={css(styles.header)}>
-        <div className={css(styles.title)}>{paper.title}</div>
+        <div className={css(styles.title)}>{paper && paper.title}</div>
         <div className={css(styles.authors)}>{renderAuthors()}</div>
         <div className={css(styles.infoSection)}>
           <div className={css(styles.info)}>
-            Published {moment(paper.paper_publish_date).format("DD MMMM, YYYY")}
+            Published{" "}
+            {moment(paper && paper.paper_publish_date).format("DD MMMM, YYYY")}
           </div>
-          <div className={css(styles.info)}>DOI: {paper.doi}</div>
+          <div className={css(styles.info)}>DOI: {paper && paper.doi}</div>
         </div>
       </div>
       <PaperTabBar baseUrl={paperId} selectedTab={tabName} />
@@ -80,6 +74,16 @@ const Paper = () => {
   );
 };
 
+Paper.getInitialProps = async ({ store, isServer, query }) => {
+  let { paper } = store.getState();
+
+  if (!paper.id) {
+    await store.dispatch(PaperActions.getPaper(query.paperId));
+  }
+
+  return { isServer };
+};
+
 const styles = StyleSheet.create({
   contentContainer: {
     width: "70%",
@@ -112,4 +116,8 @@ const styles = StyleSheet.create({
   },
 });
 
-export default Paper;
+const mapStateToProps = (state) => ({
+  paper: state.paper,
+});
+
+export default connect(mapStateToProps)(Paper);

redux/configureStore.js

@@ -1,12 +1,13 @@
-import { createStore, applyMiddleware } from 'redux'
-import { composeWithDevTools } from 'redux-devtools-extension'
-import thunkMiddleware from 'redux-thunk'
-import reducer from './index'
+import { createStore, applyMiddleware } from "redux";
+import { composeWithDevTools } from "redux-devtools-extension";
+import thunkMiddleware from "redux-thunk";
+import reducer from "./index";
 
-export function configureStore (initialState={}) {
-  return createStore(
+export function configureStore(initialState = {}) {
+  let store = createStore(
     reducer,
     initialState,
     composeWithDevTools(applyMiddleware(thunkMiddleware))
-  )
-}
+  );
+  return store;
+}

redux/index.js

@@ -1,6 +1,6 @@
-import { combineReducers } from 'redux';
-import testReducer from './test';
+import { combineReducers } from "redux";
+import paperReducer from "./paper";
 
 export default combineReducers({
-  testReducer
-});
+  paper: paperReducer,
+});

redux/paper.js

@@ -0,0 +1,48 @@
+import API from "~/config/api";
+import { Helpers } from "@quantfive/js-web-config";
+
+/**********************************
+ *        ACTIONS SECTION         *
+ **********************************/
+
+export const PaperConstants = {
+  GET_PAPER: "@@paper/GET_PAPER",
+};
+
+export const PaperActions = {
+  getPaper: (paperId) => {
+    return (dispatch) => {
+      return fetch(API.PAPER({ paperId }), API.GET_CONFIG())
+        .then(Helpers.checkStatus)
+        .then(Helpers.parseJSON)
+        .then((resp) => {
+          return dispatch({
+            type: PaperConstants.GET_PAPER,
+            payload: { ...resp, doneFetching: true },
+          });
+        });
+    };
+  },
+};
+
+/**********************************
+ *        REDUCER SECTION         *
+ **********************************/
+
+const defaultPaperState = {
+  authors: [],
+};
+
+const PaperReducer = (state = defaultPaperState, action) => {
+  switch (action.type) {
+    case PaperConstants.GET_PAPER:
+      return {
+        ...state,
+        ...action.payload,
+      };
+    default:
+      return state;
+  }
+};
+
+export default PaperReducer;