Improvement of empty lists and 404 pages (loic-sharma#522)

* Added a message on the index/search page when there is no package on the list. * Added a message on the package page where the package can't be found. * Fixed a bug where the wrong input was sent to search service Addresses loic-sharma#303
chaghi · Jun 12, 2020 · 1954e94 · 1954e94
1 parent 4a78702
commit 1954e94
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 42 deletions.
diff --git a/src/BaGet.UI/src/DisplayPackage/DisplayPackage.tsx b/src/BaGet.UI/src/DisplayPackage/DisplayPackage.tsx
@@ -205,7 +205,12 @@ class DisplayPackage extends React.Component<IDisplayPackageProps, IDisplayPacka
       );
     } else if (!this.state.package) {
       return (
-        <div>Could not find package '{this.id}'.</div>
+        <div>
+          <h2>Oops, package not found...</h2>
+          <p>Could not find package '{this.id}'.</p>
+          <p>You can try searching on <a href={`https://www.nuget.org/packages?q=${this.id}`} target="_blank" rel="noopener noreferrer">nuget.org</a> package.</p>
+          <p>Think there's a problem? Consider taking a look at our <a href="https://loic-sharma.github.io/BaGet/" target="_blank" rel="noopener noreferrer">documentation</a> or asking for help on our <a href="https://github.com/loic-sharma/BaGet/issues" target="_blank" rel="noopener noreferrer">GitHub project</a></p>
+        </div>
       );
     } else {
       return (

diff --git a/src/BaGet.UI/src/SearchResults.tsx b/src/BaGet.UI/src/SearchResults.tsx
@@ -25,6 +25,7 @@ interface ISearchResultsState {
   packageType: string;
   targetFramework: string;
   items: IPackage[];
+  loading: boolean;
 }
 
 interface ISearchResponse {
@@ -42,7 +43,8 @@ class SearchResults extends React.Component<ISearchResultsProps, ISearchResultsS
       includePrerelease: true,
       items: [],
       packageType: 'any',
-      targetFramework: 'any'
+      targetFramework: 'any',
+      loading: false
     };
   }
 
@@ -66,7 +68,7 @@ class SearchResults extends React.Component<ISearchResultsProps, ISearchResultsS
     }
 
     this._loadItems(
-      prevProps.input,
+      this.props.input,
       this.state.includePrerelease,
       this.state.packageType,
       this.state.targetFramework);
@@ -159,48 +161,68 @@ class SearchResults extends React.Component<ISearchResultsProps, ISearchResultsS
             />
           </div>
         </form>
-        {this.state.items.map(value => (
-          <div key={value.id} className="row search-result">
-            <div className="col-sm-1 hidden-xs hidden-sm">
-              <img
-                src={value.iconUrl || DefaultPackageIcon}
-                className="package-icon img-responsive"
-                onError={this.loadDefaultIcon}
-                alt="The package icon" />
-            </div>
-            <div className="col-sm-11">
-              <div>
-                <Link to={`/packages/${value.id}`} className="package-title">{value.id}</Link>
-                <span>by: {value.authors}</span>
+
+        {(() => {
+          if (this.state.loading || this.state.items.length > 0) {
+            return this.state.items.map(value => (
+              <div key={value.id} className="row search-result">
+                <div className="col-sm-1 hidden-xs hidden-sm">
+                  <img
+                    src={value.iconUrl || DefaultPackageIcon}
+                    className="package-icon img-responsive"
+                    onError={this.loadDefaultIcon}
+                    alt="The package icon" />
+                </div>
+                <div className="col-sm-11">
+                  <div>
+                    <Link to={`/packages/${value.id}`} className="package-title">{value.id}</Link>
+                    <span>by: {value.authors}</span>
+                  </div>
+                  <ul className="info">
+                    <li>
+                      <span>
+                        <Icon iconName="Download" className="ms-Icon" />
+                        {value.totalDownloads.toLocaleString()} total downloads
+                      </span>
+                    </li>
+                    <li>
+                      <span>
+                        <Icon iconName="Flag" className="ms-Icon" />
+                        Latest version: {value.version}
+                      </span>
+                    </li>
+                    {value.tags.length > 0 &&
+                      <li>
+                        <span className="tags">
+                          <Icon iconName="Tag" className="ms-Icon" />
+                          {value.tags.join(' ')}
+                        </span>
+                      </li>
+                    }
+                  </ul>
+                  <div>
+                    {value.description}
+                  </div>
+                </div>
               </div>
-              <ul className="info">
-                <li>
-                  <span>
-                    <Icon iconName="Download" className="ms-Icon" />
-                    {value.totalDownloads.toLocaleString()} total downloads
-                  </span>
-                </li>
-                <li>
-                  <span>
-                    <Icon iconName="Flag" className="ms-Icon" />
-                    Latest version: {value.version}
-                  </span>
-                </li>
-                {value.tags.length > 0 &&
-                  <li>
-                    <span className="tags">
-                      <Icon iconName="Tag" className="ms-Icon" />
-                      {value.tags.join(' ')}
-                    </span>
-                  </li>
-                }
-              </ul>
+            ));
+          }
+          else
+          {
+            return (
               <div>
-                {value.description}
+                <h2>Oops, nothing here...</h2>
+                <p>
+                  It looks like there's no package here to see. Take a look below for useful links.
+                </p>
+                <p><Link to="/upload">Upload a package</Link></p>
+                <p><a href="https://loic-sharma.github.io/BaGet/" target="_blank" rel="noopener noreferrer">BaGet documentation</a></p>
+                <p><a href="https://github.com/loic-sharma/BaGet/issues" target="_blank" rel="noopener noreferrer">BaGet issues</a></p>
               </div>
-            </div>
-          </div>
-        ))}
+            );
+          }
+        })()}
+
       </div>
     );
   }
@@ -217,6 +239,7 @@ class SearchResults extends React.Component<ISearchResultsProps, ISearchResultsS
       items: [],
       packageType,
       targetFramework,
+      loading: true
     });
 
     const url = this.buildUrl(query, includePrerelease, packageType, targetFramework);
@@ -236,6 +259,7 @@ class SearchResults extends React.Component<ISearchResultsProps, ISearchResultsS
         includePrerelease,
         items: results.data,
         targetFramework,
+        loading: false
       });
     })
     .catch((e) => {