/groups/:groupName page improvements;

- data fetching behavior: use Promise.all and simplify things so that either both requests succeed or we go to error state. - add loading state - used StyledLink for groups' websites other misc.; see #314 (comment)
nextstrain · May 10, 2021 · b335573 · b335573
1 parent 45fd465
commit b335573
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 65 deletions.
diff --git a/static-site/src/components/Datasets/list-datasets.jsx b/static-site/src/components/Datasets/list-datasets.jsx
@@ -5,7 +5,7 @@ import styled from 'styled-components';
 import {Grid, Col, Row} from 'react-styled-flexboxgrid';
 import { CenteredContainer } from "./styles";
 
-const StyledLink = styled.a`
+export const StyledLink = styled.a`
   color: #444 !important;
   font-weight: ${(props) => props.bold ? 500 : 300} !important;
   &:hover,

diff --git a/static-site/src/sections/individual-group-page.jsx b/static-site/src/sections/individual-group-page.jsx
@@ -9,6 +9,7 @@ import * as splashStyles from "../components/splash/styles";
 import DatasetSelect from "../components/Datasets/dataset-select";
 import GenericPage from "../layouts/generic-page";
 import { fetchAndParseJSON } from "../util/datasetsHelpers";
+import { StyledLink } from "../components/Datasets/list-datasets";
 
 function Title({avatarSrc, children}) {
   if (!children) return null;
@@ -52,21 +53,10 @@ function Byline({children}) {
   return (<Div>{children}</Div>);
 }
 
-function Website({children}) {
-  if (!children) return null;
-  return (
-    <a href={children}
-      style={{color: "#A9ADB1", lineHeight: "1.0", textDecoration: "none", cursor: "pointer", fontWeight: "400", fontSize: "16px"}}
-    >
-      {children}
-    </a>
-  );
-}
-
-const GroupNotFound = (groupName) => (
+const GroupNotFound = ({groupName}) => (
   <FlexCenter>
     <splashStyles.CenteredFocusParagraph>
-      {`The Nextstrain Group "${groupName}" doesn't exist yet. `}
+      {`The Nextstrain Group "${groupName}" doesn't exist yet, or there was an error getting data for that group. `}
       Please <a href="mailto:hello@nextstrain.org">contact us at hello@nextstrain.org </a>
       if you believe this to be an error.</splashStyles.CenteredFocusParagraph>
   </FlexCenter>
@@ -89,11 +79,7 @@ class Index extends React.Component {
     super(props);
     configureAnchors({ offset: -10 });
     this.state = {
-      dataLoaded: false,
-      errorFetchingData: false,
-      groupNotFound: false,
-      groupName: undefined,
-      sourceInfo: undefined
+      groupNotFound: false
     };
   }
 
@@ -110,69 +96,67 @@ class Index extends React.Component {
 
   async componentDidMount() {
     const groupName = this.props["groupName"];
-    let sourceInfoPromise, availableDataPromise;
     try {
-      [sourceInfoPromise, availableDataPromise] = await Promise.allSettled([
+      console.log("Start", groupName);
+      const [sourceInfo, availableData] = await Promise.all([
         fetchAndParseJSON(`/charon/getSourceInfo?prefix=/groups/${groupName}/`),
         fetchAndParseJSON(`/charon/getAvailable?prefix=/groups/${groupName}/`)
       ]);
       this.setState({
-        sourceInfo: sourceInfoPromise.value,
+        sourceInfo,
         groupName,
-        datasets: this.createDatasetListing(availableDataPromise.value.datasets, groupName),
-        narratives: this.createDatasetListing(availableDataPromise.value.narratives, groupName),
-        dataLoaded: true
+        datasets: this.createDatasetListing(availableData.datasets, groupName),
+        narratives: this.createDatasetListing(availableData.narratives, groupName)
       });
     } catch (err) {
-      if (sourceInfoPromise.status === "rejected") {
-        console.error("Cannot find group.", err.message);
-        this.setState({groupName, groupNotFound: true});
-      } else {
-        console.error("Error fetching / parsing data.", err.message);
-        this.setState({
-          groupName,
-          sourceInfo: sourceInfoPromise.value,
-          errorFetchingData: true
-        });
-      }
+      console.error("Cannot find group.", err.message);
+      this.setState({groupName, groupNotFound: true});
     }
   }
 
   render() {
+    const groupName = this.props["groupName"];
     if (this.state.groupNotFound) {
       return (
         <GenericPage location={this.props.location}>
-          <GroupNotFound groupName={this.state.groupName}/>
+          <GroupNotFound groupName={groupName}/>
+        </GenericPage>
+      );
+    }
+    if (!this.state.sourceInfo) {
+      return (
+        <GenericPage location={this.props.location}>
+          <OverviewContainer>Data loading...</OverviewContainer>
         </GenericPage>
       );
     }
     return (
       <GenericPage location={this.props.location}>
-        {this.state.sourceInfo &&
-        <>
+        <FlexCenter>
+          <Title avatarSrc={this.state.sourceInfo.avatar}>
+            {this.state.sourceInfo.title}
+            <Byline>{this.state.sourceInfo.byline}</Byline>
+            {this.state.sourceInfo.website &&
+              <div style={{fontSize: "18px"}}>
+                <StyledLink href={this.state.sourceInfo.website}>{this.state.sourceInfo.website.replace(/(^\w+:|^)\/\//, '')}</StyledLink>
+              </div>}
+          </Title>
+        </FlexCenter>
+        {this.state.sourceInfo.overview &&
           <FlexCenter>
-            <Title avatarSrc={this.state.sourceInfo.avatar}>
-              {this.state.sourceInfo.title}
-              <Byline>{this.state.sourceInfo.byline}</Byline>
-              <Website>{this.state.sourceInfo.website}</Website>
-            </Title>
+            <OverviewContainer>
+              {this.state.sourceInfo.overview}
+            </OverviewContainer>
           </FlexCenter>
-          {this.state.sourceInfo.overview &&
-            <FlexCenter>
-              <OverviewContainer>
-                {this.state.sourceInfo.overview}
-              </OverviewContainer>
-            </FlexCenter>
-          }
-        </>}
+        }
         <HugeSpacer />
-        {this.state.dataLoaded && this.state.sourceInfo && this.state.sourceInfo.showDatasets && (
+        {this.state.sourceInfo.showDatasets && (
           <ScrollableAnchor id={"datasets"}>
             <div>
               <splashStyles.H3>Available datasets</splashStyles.H3>
               {this.state.datasets.length === 0 ?
-                <splashStyles.H4>No datasets are available for this group.</splashStyles.H4>
-                : <DatasetSelect
+                <splashStyles.H4>No datasets are available for this group.</splashStyles.H4> :
+                <DatasetSelect
                   datasets={this.state.datasets}
                   columns={[
                     {
@@ -187,13 +171,13 @@ class Index extends React.Component {
           </ScrollableAnchor>
         )}
         <HugeSpacer />
-        {this.state.dataLoaded && this.state.sourceInfo && this.state.sourceInfo.showNarratives && (
+        {this.state.sourceInfo.showNarratives && (
           <ScrollableAnchor id={"narratives"}>
             <div>
               <splashStyles.H3>Available narratives</splashStyles.H3>
               {this.state.narratives.length === 0 ?
-                <splashStyles.H4>No narratives are available for this group.</splashStyles.H4>
-                : <DatasetSelect
+                <splashStyles.H4>No narratives are available for this group.</splashStyles.H4> :
+                <DatasetSelect
                   datasets={this.state.narratives}
                   columns={[
                     {
@@ -208,13 +192,6 @@ class Index extends React.Component {
             </div>
           </ScrollableAnchor>
         )}
-        { this.state.errorFetchingData &&
-          <FlexCenter>
-            <splashStyles.CenteredFocusParagraph>
-                  Something went wrong getting data.
-                  Please <a href="mailto:hello@nextstrain.org">contact us at hello@nextstrain.org </a>
-                  if this continues to happen.</splashStyles.CenteredFocusParagraph>
-          </FlexCenter>}
       </GenericPage>
     );
   }