Merge pull request #628 from ResearchHub/client-load

Client load
ResearchHub · Sep 25, 2020 · c677bd1 · c677bd1
2 parents c38aa7c + 26f7de0
commit c677bd1
Show file tree

Hide file tree

Showing 16 changed files with 2,051 additions and 2,143 deletions.
diff --git a/components/ActionButton.js b/components/ActionButton.js
@@ -1,31 +1,23 @@
 import { StyleSheet, css } from "aphrodite";
 import Ripples from "react-ripples";
 import Router from "next/router";
-import { useDispatch } from "react-redux";
 
 // Component
 import ModeratorDeleteButton from "~/components/Moderator/ModeratorDeleteButton";
 
-// Redux
-import { MessageActions } from "~/redux/message";
-
 // Config
 import colors from "~/config/themes/colors";
-import { hidden } from "ansi-colors";
 
 const ActionButton = (props) => {
   let {
     icon,
     iconNode,
     action,
-    size,
     addRipples,
     active,
     isModerator,
     paperId,
-    style,
   } = props;
-  const dispatch = useDispatch();
 
   function renderIcon() {
     if (icon) {
@@ -92,7 +84,7 @@ const styles = StyleSheet.create({
     marginRight: 5,
     display: "flex",
     flexShrink: 0,
-    overflow: hidden,
+    overflow: "hidden",
     transition: "all ease-in-out 0.1s",
     ":hover": {
       background: colors.GREY(1),

diff --git a/components/Head.js b/components/Head.js
@@ -5,7 +5,7 @@ import { useRouter } from "next/router";
 
 import { COMPANY_NAME, METATAG_DEFAULT_IMAGE_URL } from "../config/constants";
 
-export default (props) => {
+const HeadComponent = (props) => {
   const router = useRouter();
   const title = props.title || `${COMPANY_NAME} | Open Science Community`;
   // TODO: What url can we use when rendered server side?
@@ -112,3 +112,5 @@ export default (props) => {
     </Head>
   );
 };
+
+export default HeadComponent;
diff --git a/components/Hubs/HubPage.js b/components/Hubs/HubPage.js
@@ -120,7 +120,7 @@ class HubPage extends React.Component {
 
   componentDidMount() {
     let { isLoggedIn, initialFeed } = this.props;
-    if (this.props.initialFeed) {
+    if (initialFeed) {
       this.detectPromoted(this.state.papers);
     } else {
       this.fetchPapers({ hub: this.props.hub });

diff --git a/components/Modal.js b/components/Modal.js
@@ -4,7 +4,7 @@ import Modal from "react-modal";
 import { RHLogo } from "~/config/themes/icons";
 import { modalStyles as styles } from "~/config/themes/styles";
 
-export default (props) => {
+const ModalComponent = (props) => {
   const { isOpen, close, shouldCloseOnOverlayClick, title } = props;
 
   return (
@@ -34,3 +34,5 @@ export default (props) => {
     </Modal>
   );
 };
+
+export default ModalComponent;
diff --git a/components/Paper/BulletsContainer.js b/components/Paper/BulletsContainer.js
@@ -174,7 +174,9 @@ class BulletsContainer extends React.Component {
           ready={false}
           showLoadingAnimation
           customPlaceholder={<BulletPlaceholder color="#efefef" />}
-        />
+        >
+          <div></div>
+        </ReactPlaceholder>
       );
     } else if (bullets.length === 0 && !showForm) {
       return (

diff --git a/components/Paper/Tabs/DiscussionTab.js b/components/Paper/Tabs/DiscussionTab.js
@@ -45,6 +45,7 @@ const DiscussionTab = (props) => {
     setCount,
     discussionRef,
     getThreads,
+    paperId,
   } = props;
 
   // TODO: move to config
@@ -120,7 +121,9 @@ const DiscussionTab = (props) => {
               ready={false}
               showLoadingAnimation
               customPlaceholder={<PaperPlaceholder color="#efefef" />}
-            />
+            >
+              <div></div>
+            </ReactPlaceholder>
           </div>
         </div>
       );
@@ -264,7 +267,7 @@ const DiscussionTab = (props) => {
     setLoading(true);
     const currentPaper = props.paper;
     const payload = await getThreads({
-      paperId: props.paper.id,
+      paperId: paperId,
       paper: currentPaper,
       filter,
       loadMore,

diff --git a/components/PaperPageCard.js b/components/PaperPageCard.js
@@ -46,7 +46,6 @@ class PaperPageCard extends React.Component {
       hovered: false,
       toggleLightbox: true,
       fetching: false,
-      loading: true,
       slideIndex: 1,
       showAllHubs: false, // only needed when > 3 hubs,
       boostHover: false,
@@ -55,17 +54,6 @@ class PaperPageCard extends React.Component {
     this.metaContainerRef = React.createRef();
   }
 
-  componentDidMount() {
-    this.fetchFigures();
-  }
-
-  componentDidUpdate(prevProps) {
-    if (prevProps.paper.id !== this.props.paper.id) {
-      this.setState({ loading: true });
-      this.fetchFigures();
-    }
-  }
-
   componentWillUnmount() {
     document.body.style.overflow = "scroll";
   }
@@ -101,8 +89,8 @@ class PaperPageCard extends React.Component {
 
   fetchFigures = () => {
     this.setState({ fetching: true }, () => {
-      let { paper } = this.props;
-      fetch(API.GET_PAPER_FIGURES({ paperId: paper.id }), API.GET_CONFIG())
+      let { paper, paperId } = this.props;
+      fetch(API.GET_PAPER_FIGURES({ paperId }), API.GET_CONFIG())
         .then(Helpers.checkStatus)
         .then(Helpers.parseJSON)
         .then((res) => {
@@ -140,7 +128,7 @@ class PaperPageCard extends React.Component {
 
   navigateToEditPaperInfo = (e) => {
     e && e.stopPropagation();
-    let paperId = this.props.paper.id;
+    let paperId = this.props.paperId;
     let href = "/paper/upload/info/[paperId]";
     let as = `/paper/upload/info/${paperId}`;
     Router.push(href, as);
@@ -652,7 +640,7 @@ class PaperPageCard extends React.Component {
     }
 
     return (
-      <>
+      <Fragment>
         <div
           className={css(
             styles.container,
@@ -826,7 +814,7 @@ class PaperPageCard extends React.Component {
                     </div>
                   </div>
                   <div className={css(styles.mobile)}>
-                    {this.renderPreview()}
+                    {process.browser && this.renderPreview()}
                   </div>
                   <div className={css(styles.mobile)}>{this.renderHubs()}</div>
                 </div>
@@ -843,7 +831,7 @@ class PaperPageCard extends React.Component {
               className={css(styles.absolutePreview)}
               // style={{ right: -1 * (this.state.width + 20) }}
             >
-              {this.renderPreview()}
+              {process.browser && this.renderPreview()}
             </div>
           )}
         </div>
@@ -881,7 +869,7 @@ class PaperPageCard extends React.Component {
             {this.renderHubs()}
           </div>
         </div>
-      </>
+      </Fragment>
     );
   }
 }
@@ -1427,15 +1415,11 @@ const carousel = StyleSheet.create({
   },
 });
 
-const mapStateToProps = (state) => ({
-  paper: state.paper,
-});
-
 const mapDispatchToProps = {
   openPaperTransactionModal: ModalActions.openPaperTransactionModal,
 };
 
 export default connect(
-  mapStateToProps,
+  null,
   mapDispatchToProps
 )(PaperPageCard);
diff --git a/components/PaperTabBar.js b/components/PaperTabBar.js
@@ -258,12 +258,12 @@ const PaperTabBar = (props) => {
       classNames.push(styles.lastTab);
     }
     return (
-      <a href={`#${href}`} className={css(styles.tag)}>
-        <div
-          className={css(classNames)}
-          onClick={() => scrollToPage(label)}
-          key={`paper_tab_bar_${index}`}
-        >
+      <a
+        href={`#${href}`}
+        className={css(styles.tag)}
+        key={`paper_tab_bar_${index}`}
+      >
+        <div className={css(classNames)} onClick={() => scrollToPage(label)}>
           {label} {ui && ui(isSelected)}
           {renderCount(label, selected)}
         </div>

diff --git a/components/University.js b/components/University.js
@@ -1,6 +1,6 @@
 import { css, StyleSheet } from "aphrodite";
 
-export default (props) => {
+const University = (props) => {
   const { university } = props || {};
   return (
     <div className={css(styles.extraInfo)}>
@@ -34,3 +34,5 @@ const styles = StyleSheet.create({
     marginRight: 5,
   },
 });
+
+export default University;
diff --git a/package.json b/package.json
@@ -39,7 +39,7 @@
     "jwks-rsa": "^1.6.2",
     "katex": "^0.11.1",
     "moment": "^2.24.0",
-    "next": "^9.0.6",
+    "next": "^9.5.3",
     "next-compose-plugins": "^2.2.0",
     "next-redux-wrapper": "^4.0.0",
     "next-transpile-modules": "^2.3.1",

diff --git a/pages/_document.js b/pages/_document.js
@@ -1,4 +1,4 @@
-import Document, { Head, Main, NextScript } from "next/document";
+import Document, { Html, Head, Main, NextScript } from "next/document";
 import { StyleSheetServer } from "aphrodite";
 import * as Sentry from "@sentry/browser";
 import CustomHead from "../components/Head";
@@ -38,7 +38,7 @@ export default class MyDocument extends Document {
     the client goes to render styles. If you don't you'll get a second
     <style> tag */
     return (
-      <html>
+      <Html>
         <Head>
           <script
             dangerouslySetInnerHTML={{
@@ -107,7 +107,7 @@ export default class MyDocument extends Document {
           <Main />
           <NextScript />
         </body>
-      </html>
+      </Html>
     );
   }
 }

diff --git a/pages/index.js b/pages/index.js
@@ -6,44 +6,42 @@ import HubPage from "../components/Hubs/HubPage";
 
 import API from "~/config/api";
 import { getInitialScope } from "~/config/utils/dates";
+const isServer = () => typeof window === "undefined";
 
-class Index extends React.Component {
-  static async getInitialProps(ctx) {
-    let { query } = ctx;
-    let defaultProps = {
-      initialFeed: null,
-      leaderboardFeed: null,
-      initialHubList: null,
-    };
-    let page = query.page ? query.page : 1;
+const Index = (props) => {
+  return <HubPage home={true} {...props} />;
+};
 
-    try {
-      const [initialFeed, leaderboardFeed] = await Promise.all([
-        fetch(
-          API.GET_HUB_PAPERS({
-            hubId: 0,
-            ordering: "hot",
-            timePeriod: getInitialScope(),
-            page,
-          }),
-          API.GET_CONFIG()
-        ).then((res) => res.json()),
-        // fetch(
-        //   API.LEADERBOARD({ limit: 10, page: 1, hubId: 0 }), // Leaderboard
-        //   API.GET_CONFIG()
-        // ).then((res) => res.json()),
-        // fetch(API.SORTED_HUB({}), API.GET_CONFIG()).then((res) => res.json()),
-      ]);
-
-      return { initialFeed, leaderboardFeed, query };
-    } catch {
-      return defaultProps;
-    }
+Index.getInitialProps = async (ctx) => {
+  if (!isServer()) {
+    return { props: {} };
   }
+  let { query } = ctx;
+  let defaultProps = {
+    initialFeed: null,
+    leaderboardFeed: null,
+    initialHubList: null,
+  };
+  let page = query.page ? query.page : 1;
+  try {
+    const [initialFeed] = await Promise.all([
+      fetch(
+        API.GET_HUB_PAPERS({
+          hubId: 0,
+          ordering: "hot",
+          timePeriod: getInitialScope(),
+          page,
+        }),
+        API.GET_CONFIG()
+      ).then((res) => res.json()),
+    ]);
 
-  render() {
-    return <HubPage home={true} {...this.props} />;
+    let props = { initialFeed, query };
+    return props;
+  } catch (e) {
+    console.log(e);
+    return defaultProps;
   }
-}
+};
 
 export default Index;