Merge pull request #612 from ResearchHub/seoOptimizations

SEO Optimizations
ResearchHub · Sep 5, 2020 · bab1422 · bab1422
2 parents 20c9148 + 299077f
commit bab1422
Show file tree

Hide file tree

Showing 15 changed files with 245 additions and 99 deletions.
diff --git a/components/Author/Tabs/UserContributions.js b/components/Author/Tabs/UserContributions.js
@@ -1,11 +1,15 @@
 import { StyleSheet, css } from "aphrodite";
 import { connect } from "react-redux";
 import ReactPlaceholder from "react-placeholder";
+import Ripples from "react-ripples";
 
 // Components
 import ComponentWrapper from "~/components/ComponentWrapper";
 import PaperEntryCard from "~/components/Hubs/PaperEntryCard";
-import { Reply, Comment } from "~/components/DiscussionComment";
+import Loader from "~/components/Loader/Loader";
+
+// Redux
+import { AuthorActions } from "~/redux/author";
 
 // Config
 import colors from "~/config/themes/colors";
@@ -15,14 +19,19 @@ class UserContributionsTab extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      contributions: [],
+      contributions:
+        this.props.author.userContributions &&
+        this.props.author.userContributions.contributions
+          ? this.props.author.userContributions.contributions
+          : [],
+      fetching: false,
     };
   }
 
   componentDidMount() {
     let { author } = this.props;
     this.setState({
-      contributions: author.userContributions.contributions,
+      // contributions: author.userContributions.contributions,
     });
   }
 
@@ -40,42 +49,74 @@ class UserContributionsTab extends React.Component {
     let contributions = [...this.state.contributions];
     contributions[index] = paper;
 
-    this.setState({
-      contributions,
+    this.setState({ contributions });
+  };
+
+  loadMore = () => {
+    this.setState({ fetching: true }, async () => {
+      const next = this.props.author.userContributions.next;
+      await this.props.getUserContributions({ next });
+      setTimeout(() => this.setState({ fetching: false }), 400);
     });
   };
 
+  renderLoadMoreButton = () => {
+    let { author } = this.props;
+
+    if (author && author.userContributions) {
+      let { next } = author.userContributions;
+
+      if (next !== null) {
+        return (
+          <div className={css(styles.buttonContainer)}>
+            {!this.state.fetching ? (
+              <Ripples
+                className={css(styles.loadMoreButton)}
+                onClick={this.loadMore}
+              >
+                Load More
+              </Ripples>
+            ) : (
+              <Loader
+                key={"userContributionLoader"}
+                loading={true}
+                size={25}
+                color={colors.BLUE()}
+              />
+            )}
+          </div>
+        );
+      }
+    }
+  };
+
   render() {
     let contributions = this.state.contributions.map((contribution, index) => {
       return (
         <div className={css(styles.contributionContainer)}>
-          {contribution.type === "paper" ? (
-            <PaperEntryCard
-              paper={contribution}
-              index={index}
-              voteCallback={this.voteCallback}
-            />
-          ) : contribution.type === "comment" ? (
-            <div className={css(styles.contributionContainer)}>
-              <Reply data={contribution} />
-            </div>
-          ) : (
-            <div className={css(styles.contributionContainer)}>
-              <Reply data={contribution} commentId={contribution.comment} />
-            </div>
-          )}
+          <PaperEntryCard
+            key={`userContribution-${contribution.id}-${index}`}
+            paper={contribution}
+            index={index}
+            voteCallback={this.voteCallback}
+          />
         </div>
       );
     });
     return (
       <ComponentWrapper>
         <ReactPlaceholder
-          ready={this.props.author.contributionsDoneFetching}
+          ready={
+            this.props.author.contributionsDoneFetching && !this.props.fetching
+          }
           showLoadingAnimation
           customPlaceholder={<PaperPlaceholder color="#efefef" />}
         >
           {contributions.length > 0 ? (
-            <div className={css(styles.container)}>{contributions}</div>
+            <div className={css(styles.container)}>
+              {contributions}
+              {this.renderLoadMoreButton()}
+            </div>
           ) : (
             <div className={css(styles.box)}>
               <div className={css(styles.icon)}>
@@ -125,10 +166,47 @@ var styles = StyleSheet.create({
     height: 50,
     marginBottom: 10,
   },
+  buttonContainer: {
+    width: "100%",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    marginTop: 25,
+    height: 45,
+    "@media only screen and (max-width: 768px)": {
+      marginTop: 15,
+      marginBottom: 15,
+    },
+  },
+  loadMoreButton: {
+    fontSize: 14,
+    border: `1px solid ${colors.BLUE()}`,
+    boxSizing: "border-box",
+    borderRadius: 4,
+    height: 45,
+    width: 155,
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    color: colors.BLUE(),
+    cursor: "pointer",
+    userSelect: "none",
+    ":hover": {
+      color: "#FFF",
+      backgroundColor: colors.BLUE(),
+    },
+  },
 });
 
 const mapStateToProps = (state) => ({
   author: state.author,
 });
 
-export default connect(mapStateToProps)(UserContributionsTab);
+const mapDispatchToProps = {
+  getUserContributions: AuthorActions.getUserContributions,
+};
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(UserContributionsTab);
diff --git a/components/Author/Tabs/UserDiscussions.js b/components/Author/Tabs/UserDiscussions.js
@@ -100,7 +100,9 @@ class UserDiscussionsTab extends React.Component {
     return (
       <ComponentWrapper>
         <ReactPlaceholder
-          ready={this.props.author.discussionsDoneFetching}
+          ready={
+            this.props.author.discussionsDoneFetching && !this.props.fetching
+          }
           showLoadingAnimation
           customPlaceholder={<PaperPlaceholder color="#efefef" />}
         >

diff --git a/components/Author/Tabs/UserTransactions.js b/components/Author/Tabs/UserTransactions.js
@@ -76,7 +76,7 @@ class UserTransaction extends React.Component {
     return (
       <ComponentWrapper>
         <ReactPlaceholder
-          ready={transactions}
+          ready={transactions && !this.props.fetching}
           showLoadingAnimation
           customPlaceholder={<PaperPlaceholder color="#efefef" />}
         >

diff --git a/components/DiscussionComment.js b/components/DiscussionComment.js
@@ -58,7 +58,11 @@ class DiscussionComment extends React.Component {
   }
 
   createdByCurrentUser = () => {
-    return this.state.createdBy.id === this.props.currentUser.id;
+    if (this.state.createdBy) {
+      if (this.props.currentUser) {
+        return this.state.createdBy.id === this.props.currentUser.id;
+      }
+    }
   };
 
   setReadOnly = (readOnly) => {

diff --git a/components/Hubs/HubPage.js b/components/Hubs/HubPage.js
@@ -644,14 +644,14 @@ class HubPage extends React.Component {
               )}
               id={"topbar"}
             >
-              <div className={css(styles.text, styles.feedTitle)}>
+              <h1 className={css(styles.text, styles.feedTitle)}>
                 <span className={css(styles.fullWidth)}>
                   {this.getTitle()}
                   <span className={css(styles.hubName)}>
                     {this.props.home ? "ResearchHub" : this.props.hub.name}
                   </span>
                 </span>
-              </div>
+              </h1>
               <div
                 className={css(
                   styles.inputContainer,
@@ -968,6 +968,8 @@ var styles = StyleSheet.create({
     whiteSpace: "pre-wrap",
     width: "100%",
     textAlign: "center",
+    padding: 0,
+    margin: 0,
     "@media only screen and (min-width: 800px)": {
       textAlign: "left",
       paddingRight: 16,

diff --git a/components/Hubs/PaperEntryCard.js b/components/Hubs/PaperEntryCard.js
@@ -11,7 +11,6 @@ import "~/components/Paper/CitationCard.css";
 
 // Components
 import VoteWidget from "../VoteWidget";
-import AuthorAvatar from "~/components/AuthorAvatar";
 import HubTag from "./HubTag";
 import HubDropDown from "./HubDropDown";
 

diff --git a/components/Paper/Tabs/DiscussionTab.js b/components/Paper/Tabs/DiscussionTab.js
@@ -415,7 +415,7 @@ const DiscussionTab = (props) => {
           ref={discussionRef}
         >
           <div className={css(styles.header)}>
-            <div className={css(styles.discussionTitle)}>
+            <h3 className={css(styles.discussionTitle)}>
               Comments
               <span className={css(styles.discussionCount)}>
                 {fetching ? (
@@ -452,7 +452,7 @@ const DiscussionTab = (props) => {
                   Tweets
                 </div>
               </div>
-            </div>
+            </h3>
             {!showEditor && !showTwitterComments && renderAddDiscussion()}
           </div>
           <div className={css(styles.box, !addView && styles.right)}>

diff --git a/components/Paper/Tabs/LimitationTab.js b/components/Paper/Tabs/LimitationTab.js
@@ -255,7 +255,7 @@ class LimitationTab extends React.Component {
     return (
       <div className={css(dropdownStyles.bulletContainer)}>
         <div className={css(styles.bulletHeaderContainer)}>
-          <div className={css(styles.bulletTitle)}>Limitations</div>
+          <h3 className={css(styles.bulletTitle)}>Limitations</h3>
           <div className={css(dropdownStyles.dropdownContainer)}>
             {this.renderDropdown()}
           </div>

diff --git a/components/Paper/Tabs/PaperTab.js b/components/Paper/Tabs/PaperTab.js
@@ -267,7 +267,7 @@ function PaperTab(props) {
       <div className={css(styles.container)} ref={containerRef}>
         <div className={css(styles.headerContainer)} ref={paperPdfRef}>
           <div className={css(styles.titleContainer)}>
-            <div className={css(styles.title)}>Paper PDF</div>
+            <h3 className={css(styles.title)}>Paper PDF</h3>
             {file && renderDownloadPdf()}
           </div>
           {file && isModerator && (

diff --git a/components/Paper/Tabs/SummaryTab.js b/components/Paper/Tabs/SummaryTab.js
@@ -465,10 +465,10 @@ class SummaryTab extends React.Component {
                 {this.state.readOnly ? (
                   <Fragment>
                     <div className={css(styles.sectionHeader)}>
-                      <div className={css(styles.sectionTitle)}>
+                      <h3 className={css(styles.sectionTitle)}>
                         Description
                         {this.renderTabs()}
-                      </div>
+                      </h3>
                       <div className={css(styles.summaryActions)}>
                         {/* <Link
                           href={"/paper/[paperId]/[tabName]/edits"}

diff --git a/components/PaperPageCard.js b/components/PaperPageCard.js
@@ -699,13 +699,13 @@ class PaperPageCard extends React.Component {
               >
                 <div className={css(styles.metaContainer)}>
                   <div className={css(styles.titleHeader)}>
-                    <div className={css(styles.title)}>
+                    <h1 className={css(styles.title)}>
                       {paper && paper.title}
-                    </div>
+                    </h1>
                     {paper.paper_title && paper.paper_title !== paper.title ? (
-                      <div className={css(styles.subtitle)}>
+                      <h2 className={css(styles.subtitle)}>
                         {`From Paper: ${paper.paper_title}`}
-                      </div>
+                      </h2>
                     ) : null}
                   </div>
                   <div className={css(styles.column)}>
@@ -933,6 +933,9 @@ const styles = StyleSheet.create({
     fontSize: 30,
     position: "relative",
     wordBreak: "break-word",
+    fontWeight: "unset",
+    padding: 0,
+    margin: 0,
     "@media only screen and (max-width: 760px)": {
       fontSize: 28,
     },
@@ -951,6 +954,7 @@ const styles = StyleSheet.create({
     opacity: 0.5,
     fontSize: 16,
     marginTop: 10,
+    fontWeight: "unset",
     "@media only screen and (max-width: 415px)": {
       fontSize: 14,
     },