client - thread page work

client/app/pages/realms/realms.tsx

@@ -3,7 +3,7 @@ import { chain } from 'lodash';
 import { Link, RouteComponentProps } from 'react-router-dom';
 import { CategoryService } from '../../services';
 import { CategoryModel } from '../../model';
-import { ContentContainer } from '../../components';
+import { ContentContainer, ScrollToTop } from '../../components';
 import './realms.scss';
 import header_realmforums from '../../assets/header-realmforums.gif';
 import realms_large from '../../assets/realms-large.gif';
@@ -49,6 +49,10 @@ export class Realms extends React.Component<Props, State> {
   render() {
     const { realms } = this.state;
 
+    if (realms.length === 0) {
+      return <div></div>;
+    }
+
     // copy list so we don't modify state
     const realmsCopy = realms.slice();
     // split realms into 3 lists
@@ -56,32 +60,34 @@ export class Realms extends React.Component<Props, State> {
     const list2 = realmsCopy.splice(0, realmsCopy.length / 2);
     const list3 = realmsCopy;
 
-    return realms.length === 0 ? <div></div> : (
-      <ContentContainer>
-        <div className="flex flex--center">
-          <img src={realms_large}/>
-          <img src={header_realmforums}/>
-        </div>
+    return (
+      <ScrollToTop>
+        <ContentContainer>
+          <div className="flex flex--center">
+            <img src={realms_large}/>
+            <img src={header_realmforums}/>
+          </div>
 
-        <div style={{ margin: '15px 0' }}>
-          <div><b>Welcome to the World of Warcraft Realm Forums!</b></div>
-          <div>Use these forums to discuss topics related to World of Warcraft with player on your own Realm.</div>
-        </div>
+          <div style={{ margin: '15px 0' }}>
+            <div><b>Welcome to the World of Warcraft Realm Forums!</b></div>
+            <div>Use these forums to discuss topics related to World of Warcraft with player on your own Realm.</div>
+          </div>
 
-        <div className="flex flex--wrap">
-          <ul className="realm-column">
-            {this.renderRealms(list1)}
-          </ul>
+          <div className="flex flex--wrap">
+            <ul className="realm-column">
+              {this.renderRealms(list1)}
+            </ul>
 
-          <ul className="realm-column">
-            {this.renderRealms(list2)}
-          </ul>
+            <ul className="realm-column">
+              {this.renderRealms(list2)}
+            </ul>
 
-          <ul className="realm-column">
-            {this.renderRealms(list3)}
-          </ul>
-        </div>
-      </ContentContainer>
+            <ul className="realm-column">
+              {this.renderRealms(list3)}
+            </ul>
+          </div>
+        </ContentContainer>
+      </ScrollToTop>
     );
   }
 }