Allow switching between different versions (loic-sharma#210)

Author: loic-sharma

src/BaGet.UI/src/DisplayPackage/Dependencies.tsx

@@ -6,7 +6,7 @@ interface IDependenciesProps {
 }
 
 interface IPackageDependenciesProps {
-  dependencies: Registration.IDependency[];
+  dependencies: Registration.IDependency[] | undefined;
 }
 
 class Dependencies extends React.Component<IDependenciesProps> {
@@ -58,7 +58,7 @@ class PackageDependencies extends React.Component<IPackageDependenciesProps> {
   }
 
   public render() {
-    if (this.props.dependencies.length === 0) {
+    if (!this.props.dependencies || this.props.dependencies.length === 0) {
       return <div>No dependencies.</div>
     }
 

src/BaGet.UI/src/DisplayPackage/DisplayPackage.tsx

@@ -1,6 +1,7 @@
 import { HtmlRenderer, Parser } from 'commonmark';
 import { Icon } from 'office-ui-fabric-react/lib/Icon';
 import * as React from 'react';
+import { Link } from 'react-router-dom';
 import timeago from 'timeago.js';
 import Dependencies from './Dependencies';
 import InstallationInfo from './InstallationInfo';
@@ -14,6 +15,7 @@ interface IDisplayPackageProps {
   match: {
     params: {
       id: string;
+      version?: string;
     }
   }
 }
@@ -30,9 +32,10 @@ interface IPackage {
   repositoryUrl: string;
   repositoryType: string;
   totalDownloads: number;
-  latestDownloads: number;
+  downloads: number;
   authors: string;
   tags: string[];
+  version: string;
   versions: IPackageVersion[];
   dependencyGroups: Registration.IDependencyGroup[];
 }
@@ -50,6 +53,7 @@ interface IDisplayPackageState {
 class DisplayPackage extends React.Component<IDisplayPackageProps, IDisplayPackageState> {
 
   private id: string;
+  private version?: string;
   private parser: Parser;
   private htmlRenderer: HtmlRenderer;
 
@@ -61,10 +65,12 @@ class DisplayPackage extends React.Component<IDisplayPackageProps, IDisplayPacka
 
     this.parser = new Parser();
     this.htmlRenderer = new HtmlRenderer();
+
     this.registrationController = new AbortController();
     this.readmeController = new AbortController();
 
     this.id = props.match.params.id;
+    this.version = props.match.params.version;
     this.state = {package: undefined};
   }
 
@@ -73,6 +79,23 @@ class DisplayPackage extends React.Component<IDisplayPackageProps, IDisplayPacka
     this.readmeController.abort();
   }
 
+  public componentDidUpdate(previous: IDisplayPackageProps) {
+    // This is used to switch between versions of the same package.
+    if (previous.match.params.id !== this.props.match.params.id ||
+      previous.match.params.version !== this.props.match.params.version) {
+      this.registrationController.abort();
+      this.readmeController.abort();
+
+      this.registrationController = new AbortController();
+      this.readmeController = new AbortController();
+
+      this.id = this.props.match.params.id;
+      this.version = this.props.match.params.version;
+      this.setState({package: undefined});
+      this.componentDidMount();
+    }
+  }
+
   public componentDidMount() {
     const url = `/v3/registration/${this.id}/index.json`;
 
@@ -82,7 +105,8 @@ class DisplayPackage extends React.Component<IDisplayPackageProps, IDisplayPacka
       const results = json as Registration.IRegistrationIndex;
 
       const latestVersion = results.items[0].upper;
-      let latestItem: Registration.IRegistrationPageItem | undefined;
+      let currentItem: Registration.IRegistrationPageItem | undefined;
+      let lastUpdate: Date | undefined;
 
       const versions: IPackageVersion[] = [];
 
@@ -93,40 +117,37 @@ class DisplayPackage extends React.Component<IDisplayPackageProps, IDisplayPacka
           version: entry.catalogEntry.version,
         });
 
-        if (entry.catalogEntry.version === latestVersion) {
-          latestItem = entry;
+        if ((!currentItem && entry.catalogEntry.version === latestVersion) ||
+          (this.version && entry.catalogEntry.version === this.version)) {
+          currentItem = entry;
+        }
+
+        const published = new Date(entry.catalogEntry.published);
+        if (!lastUpdate || lastUpdate < published) {
+          lastUpdate = published;
         }
       }
 
-      if (latestItem) {
+      if (currentItem && lastUpdate) {
         let readme = "";
-        if (!latestItem.catalogEntry.hasReadme) {
-          readme = latestItem.catalogEntry.description;
+        if (!currentItem.catalogEntry.hasReadme) {
+          readme = currentItem.catalogEntry.description;
         }
 
         this.setState({
           package: {
-            authors: latestItem.catalogEntry.authors,
-            dependencyGroups: latestItem.catalogEntry.dependencyGroups,
-            downloadUrl: latestItem.packageContent,
-            iconUrl: latestItem.catalogEntry.iconUrl,
-            id: latestItem.catalogEntry.id,
-            lastUpdate: new Date(latestItem.catalogEntry.published),
-            latestDownloads: latestItem.catalogEntry.downloads,
+            ...currentItem.catalogEntry,
+            downloadUrl: currentItem.packageContent,
+            lastUpdate,
             latestVersion,
-            licenseUrl: latestItem.catalogEntry.licenseUrl,
-            projectUrl: latestItem.catalogEntry.projectUrl,
             readme,
-            repositoryType: latestItem.catalogEntry.repositoryType,
-            repositoryUrl: latestItem.catalogEntry.repositoryUrl,
-            tags: latestItem.catalogEntry.tags,
             totalDownloads: results.totalDownloads,
             versions
           }
         });
 
-        if (latestItem.catalogEntry.hasReadme) {
-          const readmeUrl = `/v3/package/${this.id}/${latestVersion}/readme`;
+        if (currentItem.catalogEntry.hasReadme) {
+          const readmeUrl = `/v3/package/${this.id}/${currentItem.catalogEntry.version}/readme`;
 
           fetch(readmeUrl, {signal: this.readmeController.signal}).then(response => {
             return response.text();
@@ -161,12 +182,12 @@ class DisplayPackage extends React.Component<IDisplayPackageProps, IDisplayPacka
             <div className="package-title">
               <h1>
                 {this.state.package.id}
-                <small className="text-nowrap">{this.state.package.latestVersion}</small>
+                <small className="text-nowrap">{this.state.package.version}</small>
               </h1>
 
             </div>
 
-            <InstallationInfo id={this.state.package.id} version={this.state.package.latestVersion} />
+            <InstallationInfo id={this.state.package.id} version={this.state.package.version} />
 
             {/* TODO: Fix this */}
             <div dangerouslySetInnerHTML={{ __html: this.state.package.readme }} />
@@ -207,7 +228,7 @@ class DisplayPackage extends React.Component<IDisplayPackageProps, IDisplayPacka
                 </li>
                 <li>
                   <Icon iconName="GiftBox" className="ms-Icon" />
-                  {this.state.package.latestDownloads.toLocaleString()} downloads of latest version
+                  {this.state.package.downloads.toLocaleString()} downloads of latest version
                 </li>
               </ul>
             </div>
@@ -217,7 +238,7 @@ class DisplayPackage extends React.Component<IDisplayPackageProps, IDisplayPacka
 
               {this.state.package.versions.map(value => (
                 <div key={value.version}>
-                  <span>v{value.version}: </span>
+                  <span><Link to={`/packages/${this.state.package!.id}/${value.version}`}>{value.version}</Link>: </span>
                   <span>{this.dateToString(value.date)}</span>
                 </div>
               ))}

src/BaGet.UI/src/DisplayPackage/Registration.tsx

@@ -34,7 +34,7 @@ export interface ICatalogEntry {
 
 export interface IDependencyGroup {
   targetFramework: string;
-  dependencies: IDependency[];
+  dependencies: IDependency[] | undefined;
 }
 
 export interface IDependency {

src/BaGet.UI/src/index.tsx

@@ -18,7 +18,7 @@ initializeIcons();
 ReactDOM.render(
   <Router>
     <App>
-      <Route path="/packages/:id" component={DisplayPackage} />
+      <Route path="/packages/:id/:version?" component={DisplayPackage} />
 
       <Route path="/upload" component={Upload} />
     </App>