Get PackageDetail from Server

server/artifactory-service.js

@@ -29,6 +29,18 @@ async function fetchPackages() {
 }
 
 async function getReadme({ scope, packageName }) {
+  if (process.env.MOCK) {
+    console.log('bla');
+    return new Promise((resolve, reject) => {
+      const converter = new showdown.Converter();
+      const readme = fs.readFileSync("./server/mock/fractal-menu-enhancer.readme.md");
+      const html = converter.makeHtml(readme.toString());
+      resolve({
+        data: html
+      });
+    });
+  }
+
   const packageDetailResonse = await getPackageDetail({ scope, packageName });
   const packageDetail = packageDetailResonse.data;
   const latestVersionResponse = await getDistTags({ scope, packageName });
@@ -67,6 +79,13 @@ async function getReadme({ scope, packageName }) {
 }
 
 async function getPackageDetail({ scope, packageName }) {
+  if (process.env.MOCK) {
+    return new Promise((resolve, reject) => {
+      resolve({
+        data: require(`./mock/fractal-menu-enhancer.json`)
+      });
+    });
+  }
   return axios.get(`/${name2url({ scope, packageName })}`);
 }
 

server/mock/fractal-menu-enhancer.readme.md

@@ -0,0 +1,4 @@
+Fractal Menu Enhancer
+=====================
+
+This is a test.

src/model/Package.ts

@@ -1,4 +1,3 @@
-import { PackageAbstract } from '@/model/package-abstract';
 import {
   IAuthor,
   IBinMap,
@@ -11,16 +10,14 @@ import {
   IRepository,
   IScriptsMap,
 } from '@/model/package-json';
-import { IDistTags, ITimes } from '@/model/package-abstract';
+import { IDistTags, ITimes, IVersions } from '@/model/package-meta-data';
 import { PackageMetaDataDTO } from '@/model/package-meta-data';
 
 export default class Package implements PackageMetaDataDTO {
   public distTags!: IDistTags;
   public time!: ITimes;
   public users!: {};
-  public versions!: {
-    [key: number]: string;
-  };
+  public versions!: IVersions;
   // tslint:disable-next-line:variable-name
   public _id!: string;
   // tslint:disable-next-line:variable-name
@@ -54,8 +51,9 @@ export default class Package implements PackageMetaDataDTO {
   public private?: boolean | undefined;
   public publishConfig?: IPublishConfig;
   public displayName: any;
+  private readmeProp: string | null;
 
-  constructor(packageDetails: PackageAbstract);
+  constructor(packageDetails: PackageMetaDataDTO);
 
   constructor(packageMetaData: PackageMetaDataDTO) {
     Object.assign(this, packageMetaData);
@@ -66,6 +64,17 @@ export default class Package implements PackageMetaDataDTO {
         : packageMetaData.author;
     }
     Object.assign(this, { displayName: this.displayName });
+    this.readmeProp = null;
+  }
+
+  public set readme(readme: string | null) {
+    if (!this.readmeProp) {
+      this.readmeProp = readme;
+    }
+  }
+
+  public get readme(): string | null {
+    return this.readmeProp;
   }
 
 }

src/model/package-meta-data.ts

@@ -1,8 +1,24 @@
-import { PackageAbstract } from '@/model/package-abstract';
+import { IPackageJSON } from '@/model/package-json';
 
-export interface PackageMetaDataDTO extends PackageAbstract {
+export interface PackageMetaDataDTO extends IPackageJSON {
 
-  readonly versions: {
-    [key: number]: string;
-  };
+  readonly distTags: IDistTags;
+  readonly time: ITimes;
+  readonly users: {};
+  readonly _id: string;
+  readonly _rev: string;
+}
+
+export interface ITimes {
+  [key: number]: Date;
+  created: string;
+  modified: string;
+}
+
+export interface IDistTags {
+  [key: string]: number;
+}
+
+export interface IVersions {
+  [key: number]: string | PackageMetaDataDTO;
 }

src/router.ts

@@ -13,11 +13,6 @@ export default new Router({
       name: 'home',
       component: Home,
     },
-    {
-      path: '/about',
-      name: 'about',
-      component: About,
-    },
     {
       path: '/package/:scope?/:packageName',
       name: 'packageDetail',

src/services/BackendApi.ts

@@ -1,5 +1,6 @@
 import axios, { AxiosInstance, AxiosPromise } from 'axios';
 import { PackagesResponse } from '@/model/PackageResponse';
+import Package from '@/model/Package';
 
 export default class BackendApi {
 
@@ -20,7 +21,15 @@ export default class BackendApi {
     return this.get('packages');
   }
 
-  private get(route: string): AxiosPromise<PackagesResponse> {
+  public getPackageDetail({scope, packageName}): AxiosPromise<Package> {
+    return this.get(`${scope ? `${scope}/` : ''}${packageName}`);
+  }
+
+  public getReadme({scope, packageName}): AxiosPromise<string> {
+    return this.get(`${scope ? `${scope}/` : ''}${packageName}/readme`);
+  }
+
+  private get(route: string): AxiosPromise<any> {
     return this.axios.get(route);
   }
 

src/services/PackageService.ts

@@ -22,11 +22,39 @@ export default class PackagesService {
   private packages!: Package[];
   private packageNamesList!: string[];
   private searchItemList!: SearchItem[];
+  private packageDetails!: { // TODO: move this caching to backend
+    [packageName: string]: Package,
+  };
 
   private constructor() {
     this.packages = [];
     this.packageNamesList = [];
     this.searchItemList = [];
+    this.packageDetails = {};
+  }
+
+  public async getPackageDetail(packageId: {scope: string, packageName: string}): Promise<Package|string> {
+    const scope = packageId.scope;
+    const packageName = packageId.packageName;
+    const key = scope ? `${scope}/${packageName}` : packageName;
+    const cachedPackageDetails = scope ? this.packageDetails[key] : this.packageDetails[packageName];
+    if (cachedPackageDetails) {
+      return new Promise<Package>((fulfill, reject) => {
+        fulfill(cachedPackageDetails);
+      });
+    }
+
+    return new Promise<Package|string>((fulfill, reject) => {
+      BackendApi.Instance.getPackageDetail({scope, packageName}).then((response) => {
+        return this.packageDetails[key] = response.data;
+      }).then((packageDetails) => {
+        return BackendApi.Instance.getReadme({scope, packageName}).then((response) => {
+          return this.packageDetails[key].readme = response.data;
+        });
+      }).then(() => {
+        fulfill(this.packageDetails[key]);
+      });
+    });
   }
 
   public async getPackages(): Promise<Package[]> {

src/views/PackageDetail.vue

@@ -1,5 +1,39 @@
 <template>
   <div class="about">
     <h2>{{this.$route.params.scope? `${this.$route.params.scope}/` : ''}}{{this.$route.params.packageName}}</h2>
+    <div>{{data.packageDetail}}</div>
   </div>
 </template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
+import Package from '@/model/Package';
+import PackagesService from '@/services/PackageService';
+import Router from '@/router';
+
+@Component
+export default class PackageDetail extends Vue {
+
+  @Prop() private dataProp!: { packageDetail: Package };
+  private data: { packageDetail: Package | null | string} = this.dataProp;
+
+  constructor() {
+    super();
+    this.data = {
+      packageDetail: null,
+    };
+    this.getPackageDetails();
+  }
+
+  private getPackageDetails() {
+    PackagesService.Instance.getPackageDetail({
+      scope: Router.currentRoute.params.scope,
+      packageName: Router.currentRoute.params.packageName,
+    }).then((response) => {
+      console.log('response', response);
+      this.data.packageDetail = response;
+    });
+  }
+}
+
+</script>