[UI] Render new lines in package description (loic-sharma#374)

Addresses loic-sharma#327

Author: loic-sharma

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

@@ -35,8 +35,6 @@ class Dependents extends React.Component<IDependentsProps, IDependentsState> {
     fetch(url, {signal: this.controller.signal}).then(response => {
       return response.json();
     }).then(json => {
-      // tslint:disable-next-line:no-console
-      console.log(json as IDependentsState);
       this.setState(json as IDependentsState);
     // tslint:disable-next-line:no-console
     }).catch((e) => console.log("Failed to load dependents.", e));
@@ -58,7 +56,7 @@ class Dependents extends React.Component<IDependentsProps, IDependentsState> {
         <div>
           <h3>Dependents</h3>
 
-          <div>No packages depend on {this.props.packageId}</div>
+          <div>No packages depend on {this.props.packageId}.</div>
         </div>
       );
     }

src/BaGet.UI/src/DisplayPackage/DisplayPackage.css

@@ -12,6 +12,10 @@
   font-size: 45%;
 }
 
+.display-package .package-description {
+  white-space: pre-wrap;
+}
+
 .package-details-info {
   margin-top: -25px;
 }

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

@@ -25,6 +25,8 @@ interface IDisplayPackageProps {
 interface IPackage {
   id: string;
   latestVersion: string;
+  hasReadme: boolean;
+  description: string;
   readme: string;
   lastUpdate: Date;
   iconUrl: string;
@@ -137,10 +139,6 @@ class DisplayPackage extends React.Component<IDisplayPackageProps, IDisplayPacka
 
       if (currentItem && lastUpdate) {
         let readme = "";
-        if (!currentItem.catalogEntry.hasReadme) {
-          readme = currentItem.catalogEntry.description;
-        }
-
         const isDotnetTool = (currentItem.catalogEntry.packageTypes &&
           currentItem.catalogEntry.packageTypes.indexOf("DotnetTool") !== -1);
 
@@ -205,8 +203,20 @@ class DisplayPackage extends React.Component<IDisplayPackageProps, IDisplayPacka
 
             <InstallationInfo id={this.state.package.id} version={this.state.package.normalizedVersion} isDotnetTool={this.state.package.isDotnetTool} />
 
-            {/* TODO: Fix this */}
-            <div dangerouslySetInnerHTML={{ __html: this.state.package.readme }} />
+            {(() => {
+              if (this.state.package.hasReadme) {
+                // TODO: Fix this
+                return (
+                  <div dangerouslySetInnerHTML={{ __html: this.state.package.readme }} />
+                );
+              } else {
+                return (
+                  <div className="package-description">
+                    {this.state.package.description}
+                  </div>
+                );
+              }
+            })()}
 
             <Dependents packageId={this.id} />
             <Dependencies dependencyGroups={this.state.package.dependencyGroups} />

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

@@ -29,8 +29,6 @@ class InstallationInfo extends React.Component<IInstallationInfoProps, IInstalla
   constructor(props: IInstallationInfoProps) {
     super(props);
 
-    // tslint:disable-next-line:no-console
-    console.log(props);
     this.state = props.isDotnetTool
       ? this.buildState(Tab.DotnetTool)
       : this.buildState(Tab.Dotnet);