Display contributor and package additional information

src/sketchObjects/Revealable.ts

@@ -5,6 +5,7 @@ import { colors } from '../constants/colors';
 import { logger } from '../logger';
 import store from '../store';
 import { Area } from '../types';
+import { Commit } from '../ui/info';
 
 export enum RevealableTypes {
   LEGACY = 'LEGACY',
@@ -20,6 +21,8 @@ export interface RevealableInterface {
   size: number;
   path?: string;
   imageUrl?: string;
+  version?: string;
+  commits?: Commit[];
 }
 
 enum RevealableStates {
@@ -39,6 +42,8 @@ export class Revealable {
   contents: string;
   url: string;
   imageUrl: string;
+  version: string;
+  commits: Commit[];
 
   isHovered: boolean;
   isRevealed: boolean;
@@ -53,12 +58,17 @@ export class Revealable {
   pulseOpacity: number = 255;
   pulseCountUp: boolean;
 
-  constructor({ type, name, path, contents, url, imageUrl }: RevealableInterface, area: Area) {
+  constructor(
+    { type, name, path, contents, url, imageUrl, version, commits }: RevealableInterface,
+    area: Area
+  ) {
     this.type = type;
     this.name = name;
     this.path = path;
     this.contents = contents;
     this.url = url;
+    this.version = version;
+    this.commits = commits;
     this.imageUrl = imageUrl;
     this.area = area;
     this.currentSize = this.minSize;
@@ -170,6 +180,8 @@ export class Revealable {
         innerHTML: this.contents,
         imgUrl: this.imageUrl,
         url: this.url,
+        version: this.version,
+        commits: this.commits,
       });
     }
   }

src/ui/info.ts

@@ -1,13 +1,21 @@
+import moment from 'moment';
 import { logger } from '../logger';
 import { RevealableTypes } from '../sketchObjects/Revealable';
 import store from '../store';
 
+export interface Commit {
+  url: string;
+  message: string;
+  time: string;
+}
 export interface InfoMessageType {
   type: RevealableTypes;
   headline: string;
   innerHTML: string;
   imgUrl?: string;
   url?: string;
+  commits?: Commit[];
+  version?: string;
 }
 
 export class InfoMessage {
@@ -20,6 +28,10 @@ export class InfoMessage {
   infoMessageClose: HTMLElement;
   infoMessageImgRef: HTMLImageElement;
   infoMessageLinkRef: HTMLAnchorElement;
+
+  infoMessageCommitsHeadlineRef: HTMLElement;
+  infoMessageCommitsRef: HTMLElement;
+  infoMessageVersionRef: HTMLElement;
   backdrop: HTMLElement;
 
   constructor() {
@@ -30,6 +42,11 @@ export class InfoMessage {
     this.infoMessageClose = document.getElementById('info-message-close');
     this.infoMessageImgRef = document.getElementById('info-message-img') as HTMLImageElement;
     this.infoMessageLinkRef = document.getElementById('info-message-link') as HTMLAnchorElement;
+    this.infoMessageCommitsRef = document.getElementById('info-message-contents-commits');
+    this.infoMessageCommitsHeadlineRef = document.getElementById(
+      'info-message-content-commits-headline'
+    );
+    this.infoMessageVersionRef = document.getElementById('info-message-contents-version');
     this.backdrop = document.getElementById('backdrop');
 
     this.backdrop.addEventListener('click', this.onBackdropClick);
@@ -63,6 +80,22 @@ export class InfoMessage {
           this.infoMessageLinkRef.style.display = 'none';
         }
 
+        if (this.type === RevealableTypes.CONTRIBUTOR) {
+          this.infoMessageCommitsRef.style.display = 'block';
+          this.infoMessageCommitsHeadlineRef.style.display = 'block';
+          this.setCommits(newMessage.commits);
+        } else {
+          this.infoMessageCommitsRef.style.display = 'none';
+          this.infoMessageCommitsHeadlineRef.style.display = 'none';
+        }
+
+        if (this.type === RevealableTypes.PACKAGE) {
+          this.infoMessageVersionRef.style.display = 'block';
+          this.setVersion(newMessage.version);
+        } else {
+          this.infoMessageVersionRef.style.display = 'none';
+        }
+
         store.setState({ infoMessageShown: true });
       }
     });
@@ -80,7 +113,28 @@ export class InfoMessage {
 
   private setContents(headline: string, innerHTML: string) {
     this.infoMessageHeadline.innerText = headline;
-    this.infoMessageContents.innerHTML = innerHTML;
+    // this.infoMessageContents.innerHTML = innerHTML;
+  }
+
+  private setVersion(version: string) {
+    this.infoMessageVersionRef.innerHTML = `This package is installed at<br/><h3>${version}</h3>`;
+  }
+
+  private setCommits(commits: Commit[]) {
+    const commitEls = commits.map(
+      ({ message, url, time }) =>
+        `<div class="info-message-contents-commit">
+         <p>${message}</p>
+         <div>
+            <span>${moment(time).format(
+              'LLL'
+            )}</span> • <a href="${url}" target="_blank">Take a look on Github</a>
+         </div>
+      </div>`
+    );
+    console.log(commitEls);
+
+    this.infoMessageCommitsRef.innerHTML = commitEls.join('');
   }
 
   private setImg(imgUrl: string) {