render to HTML (instead of DOM) // #161

Author: brillout

reframe/pages/ProfilePage.config.js

@@ -1,10 +1,39 @@
 import React from 'react';
+import assert_internal from 'reassert/internal';
 
 import Profile from '../views/profile/Profile';
 
+import {getAllData} from '../views/profile/rightpanel/contrib/getContribInfo';
+
+/*
+const doNotRenderInBrowser = false;
+const doNotRenderOnServer = true;
+/*/
+const doNotRenderInBrowser = true;
+const doNotRenderOnServer = false;
+//*/
+
 const ProfilePage = {
   route: '/:username',
-  view: ({route: {args: {username}}}) => <Profile username={username} />
+  view: ({route: {args: {username}}, ...props}) => <Profile username={username} {...props} />,
+  getInitialProps: async ({route: {args: {username}}}) => {
+    const isServerRendering = typeof window === "undefined";
+    const doNotRender = isServerRendering && doNotRenderOnServer;
+    assert_internal(isServerRendering || !doNotRenderInBrowser);
+
+    const allData = (
+      doNotRender ? (
+        {doNotRender}
+      ) : (
+        await getAllData({username})
+      )
+    );
+    return {
+      isServerRendering,
+      ...allData
+    };
+  },
+  doNotRenderInBrowser,
 };
 
 export default ProfilePage;

reframe/views/profile/Profile.js

@@ -10,12 +10,13 @@ import RightPanel from './rightpanel/RightPanel';
 import './Profile.css';
 import * as db from '../../db';
 import {urls} from '../../ghuser';
+import assert_internal from 'reassert/internal';
 
 class Profile extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      loading: true,
+      loading: this.props.isServerRendering ? this.props.doNotRender : true,
       user: {
         login: props.username
       },
@@ -25,16 +26,9 @@ class Profile extends React.Component {
   }
 
   async componentDidMount() {
-    const userId = this.props.username.toLowerCase();
-    try {
-      const userData = await fetch(`${db.url}/users/${userId}.json`);
-      const user = await userData.json();
-      this.setState({ user });
-
-      const contribsData = await fetch(`${db.url}/contribs/${userId}.json`);
-      const contribs = await contribsData.json();
-      this.setState({ contribs });
-    } catch (_) {
+    assert_internal(!this.props.isServerRendering);
+    assert_internal(!this.props.doNotRender);
+    if( this.props.profileDoesNotExist ) {
       // This profile doesn't exist yet, let's see if it's being created:
       const profilesBeingCreatedData = await fetch(urls.profileQueueEndpoint);
       const profilesBeingCreated = await profilesBeingCreatedData.json();
@@ -52,19 +46,24 @@ class Profile extends React.Component {
         }
       }
     }
-    this.setState({ loading: false });
+    if( this.state.loading ) {
+      this.setState({ loading: false });
+    }
   }
 
   render() {
+    assert_internal(!this.props.isServerRendering || !this.props.doNotRender || this.state.loading);
     const content = this.state.loading &&
-      <div><i className="fas fa-spinner fa-pulse"></i> {this.state.user.login}'s profile</div> ||
+      <div><i className="fas fa-spinner fa-pulse"></i> {this.props.username}'s profile</div> ||
       <div className="row">
-        <LeftPanel user={this.state.user} contribs={this.state.contribs} />
-        <RightPanel username={this.state.user.login}
-                    fetchedat={this.state.user.contribs && this.state.user.contribs.fetched_at}
-                    contribs={this.state.contribs}
-                    being_created={this.state.user.ghuser_being_created}
-                    deleted_because={this.state.user.ghuser_deleted_because}
+        <LeftPanel user={this.props.user} contribs={this.props.contribs}
+                   orgsData={this.props.orgsData} />
+        <RightPanel username={this.props.user.login}
+                    fetchedat={this.props.user.contribs && this.props.user.contribs.fetched_at}
+                    contribs={this.props.contribs}
+                    being_created={this.props.user.ghuser_being_created}
+                    deleted_because={this.props.user.ghuser_deleted_because}
+                    allRepoData={this.props.allRepoData}
                     profilesBeingCreated={this.state.profilesBeingCreated} />
       </div>;
 

reframe/views/profile/leftpanel/LeftPanel.js

@@ -28,7 +28,7 @@ const LeftPanel = props => {
                     company={props.user.company} settings={props.user.settings}
                     blog={!props.user.ghuser_created_at && urls.landing || props.user.blog}
                     gist_username={props.user.public_gists && props.user.login || null}/>
-      <Orgs contribOrgs={props.contribs && props.contribs.organizations || []} />
+      <Orgs orgsData={props.orgsData} />
     </div>
   );
 };

reframe/views/profile/leftpanel/Orgs.js

@@ -6,35 +6,14 @@ import Avatar from '../Avatar';
 import * as db from '../../../db';
 
 class Orgs extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      orgs: props.contribOrgs.map(name => ({
-        name,
-        avatarUrl: null
-      })),
-    };
-  }
-
-  async componentDidMount() {
-    const orgs = [...this.state.orgs];
-    for (const org of orgs) {
-      const orgData = await (await fetch(`${db.url}/orgs/${org.name}.json`)).json();
-      org.avatarUrl = orgData.avatar_url;
-      this.setState({
-        orgs: [...orgs]
-      });
-    }
-  }
-
   render() {
     const orgAvatar = org => (
       <a key={org.name} href={`https://github.com/${org.name}`} target="_blank" title={org.name}>
         <Avatar url={org.avatarUrl} classes="avatar-org" />
       </a>
     );
 
-    const contributedTo = this.state.orgs.filter(org => org.avatarUrl).map(org => orgAvatar(org));
+    const contributedTo = (this.props.orgsData||[]).filter(org => org.avatarUrl).map(org => orgAvatar(org));
     if( contributedTo.length===0 ) {
       return null;
     }

reframe/views/profile/rightpanel/RightPanel.js

@@ -26,8 +26,10 @@ const RightPanel = props => {
   if (props.contribs) {
     const shownContribs = getShownContribs(props.contribs);
     shownContribs.forEach((contrib, i) => {
+      const repo = props.allRepoData[contrib.full_name];
       repos.push(
         <Contrib key={contrib.full_name} username={props.username} contrib={contrib}
+                 repo={repo}
                  i={i}
                  pushToFunctionQueue={pushToFunctionQueue} />
       )

reframe/views/profile/rightpanel/contrib/Contrib.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import * as db from '../../../../db';
+//import * as db from '../../../../db';
 import {urls} from '../../../../ghuser';
 
 import RichText from '../../../utils/RichText';
@@ -25,12 +25,14 @@ class Contrib extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      loading: true,
+   // loading: true,
+      loading: false,
       repo: null
     };
   }
 
   componentDidMount() {
+    /*
     this.props.pushToFunctionQueue(0, async () => {
       try {
         const repoData = await fetch(`${db.url}/repos/${this.props.contrib.full_name}.json`);
@@ -39,11 +41,14 @@ class Contrib extends React.Component {
       } catch (_) {}
       this.setState({ loading: false });
     });
+    */
   }
 
   render() {
-    if( ! this.state.loading && this.state.repo && this.props.i>=10 ) {
-        return <ContribMini {...{...this.props, ...this.state}}/>;
+    const repo = this.state.repo || this.props.repo;
+
+    if( ! this.state.loading && repo && this.props.i>=10 ) {
+        return <ContribMini {...{...this.props, ...this.state, repo}}/>;
     }
 
     const avatar = () => {
@@ -54,7 +59,7 @@ class Contrib extends React.Component {
           </span>
         );
       }
-      const repoAvatar = getRepoAvatar(this.state.repo);
+      const repoAvatar = getRepoAvatar(repo);
       if( repoAvatar ) {
         return <Avatar url={repoAvatar} classes="avatar-small" />;
       }
@@ -81,7 +86,7 @@ class Contrib extends React.Component {
         <div style={{position: 'absolute', top: 0, left: 0, paddingTop: 'inherit'}}>
           {avatar()}
         </div>
-        <ContribHeader {...{...this.props, ...this.state}}/>
+        <ContribHeader {...{...this.props, ...this.state, repo}}/>
         {badgesLine}
         <AccordionBadgerIcon/>
       </AccordionHead>

reframe/views/profile/rightpanel/contrib/getContribInfo.js

@@ -1,8 +1,12 @@
+import fetch from '@brillout/fetch';
+import * as db from '../../../../db';
+
 export {getCommitCounts};
 export {getRepoAvatar};
 export {getShownContribs};
 export {getContribDisplayOrder};
 export {getContribScore};
+export {getAllData};
 
 function getCommitCounts(contrib) {
   const {total_commits_count: commits_count__total} = contrib;
@@ -75,3 +79,56 @@ function getStarBoost(stars) {
   const starBoost = 0.2 + (Math.log10(stars) / Math.log10(MAX_STARS) * 5);
   return starBoost;
 }
+
+async function getAllData({username}) {
+  const userData = await getUserData({username});
+  if( userData.profileDoesNotExist ) {
+    return userData;
+  }
+  const allRepoData = await getAllRepoData(userData.contribs);
+  return {allRepoData, ...userData};
+}
+async function getUserData({username}) {
+    const userId = username.toLowerCase();
+
+    const dbBaseUrl = db.url;
+
+    let user;
+    let contribs;
+    try {
+      const userData = await fetch(`${dbBaseUrl}/users/${userId}.json`);
+      user = await userData.json();
+
+      const contribsData = await fetch(`${dbBaseUrl}/contribs/${userId}.json`);
+      contribs = await contribsData.json();
+    } catch (_) {
+      return {profileDoesNotExist: true};
+    }
+
+    const orgsData = contribs && contribs.organizations || [];
+    await Promise.all(
+      orgsData.map(async (orgName, i) => {
+        const newOrgData = await (await fetch(`${db.url}/orgs/${orgName}.json`)).json();
+        orgsData[i] = {name: orgName, ...newOrgData};
+      })
+    );
+
+    return {user, contribs, orgsData};
+}
+async function getAllRepoData(contribs) {
+    const shownContribs = getShownContribs(contribs);
+
+    const allRepoData = {};
+
+    await Promise.all(
+        shownContribs
+        .map(async contrib => {
+          const {full_name} = contrib;
+          const resp = await fetch(`${db.url}/repos/${full_name}.json`);
+          const repo = await resp.json();
+          allRepoData[full_name] = repo;
+        })
+    );
+
+    return allRepoData;
+}