Little tweaks to make it work... In a devcontainer anyway....

app/package.json

@@ -33,7 +33,7 @@
     "zone.js": "0.8.18"
   },
   "devDependencies": {
-    "@ionic/app-scripts": "3.1.8",
+    "@ionic/app-scripts": "3.2.4",
     "typescript": "2.4.2"
   },
   "description": "Nick Pfosi's exploration at modern gay app-based meeting and dating"

app/src/pages/chat/chat.html

@@ -5,21 +5,35 @@
         <ion-icon name="arrow-back"></ion-icon>
       </button>
     </ion-buttons>
-    <ion-title><img class="title-profile-avatar" [src]="'https://appsby.fitz.guru/urge/' + this.profile.details.pic.thumb" height="24" width="24"> {{this.profile.details.name}}</ion-title>
+    <ion-title
+      ><img
+        class="title-profile-avatar"
+        [src]="'/assets/' + this.profile.details.pic.thumb"
+        height="24"
+        width="24"
+      />
+      {{this.profile.details.name}}</ion-title
+    >
   </ion-toolbar>
 </ion-header>
 
 <ion-content>
   <ion-list>
-    <ion-item class="message-bubble" *ngFor="let message of this.profile.messages" [ngClass]="{ 'is-user': (message.isUser == true) }">
-      <img *ngIf="message.image" [src]="'https://appsby.fitz.guru/urge/' + message.image" (press)="showLightbox($event, message.image)">
+    <ion-item
+      class="message-bubble"
+      *ngFor="let message of this.profile.messages"
+      [ngClass]="{ 'is-user': (message.isUser == true) }"
+    >
+      <img
+        *ngIf="message.image"
+        [src]="'/assets/' + message.image"
+        (press)="showLightbox($event, message.image)"
+      />
       <p *ngIf="message.text != ''">{{message.text}}</p>
     </ion-item>
   </ion-list>
 </ion-content>
 
 <ion-footer>
-  <ion-toolbar>
-
-  </ion-toolbar>
+  <ion-toolbar> </ion-toolbar>
 </ion-footer>

app/src/pages/grid/grid.ts

@@ -1,45 +1,50 @@
-import { Component } from '@angular/core';
-import { DomSanitizer } from '@angular/platform-browser';
-import { NavController } from 'ionic-angular';
+import { Component } from "@angular/core";
+import { DomSanitizer } from "@angular/platform-browser";
+import { NavController } from "ionic-angular";
 
-import { ChatPage } from '../chat/chat';
-import { ProfileService } from '../../services/profiles';
-import { ProfilePage } from '../profile/profile';
+import { ChatPage } from "../chat/chat";
+import { ProfileService } from "../../services/profiles";
+import { ProfilePage } from "../profile/profile";
 
 @Component({
-  selector: 'page-grid',
-  templateUrl: 'grid.html',
-  providers: [ ProfileService ]
+  selector: "page-grid",
+  templateUrl: "grid.html",
+  providers: [ProfileService],
 })
 export class GridPage {
-
   profiles: any;
   tabNavEl: any;
 
-  constructor(public navCtrl: NavController, public profileService: ProfileService, private _sanitizer: DomSanitizer) {
+  constructor(
+    public navCtrl: NavController,
+    public profileService: ProfileService,
+    private _sanitizer: DomSanitizer
+  ) {
     profileService.loadVerified().then((data) => {
       this.profiles = data;
-      console.debug('profiles: ', this.profiles);
+      console.debug("profiles: ", this.profiles);
     });
-    this.tabNavEl = document.querySelector('#tab-nav .tabbar');
+    this.tabNavEl = document.querySelector("#tab-nav .tabbar");
   }
 
   ionViewWillEnter() {
-    this.tabNavEl.style.display = 'flex';
+    this.tabNavEl.style.display = "flex";
   }
 
   doTellStory() {
-    this.navCtrl.push(TellYourStoryPage);
+    // this.navCtrl.push(TellYourStoryPage);
   }
 
   getBackgroundThumbnail(pics) {
-    return this._sanitizer.bypassSecurityTrustStyle('url(https://appsby.fitz.guru/urge/' + pics.thumb + ')');
+    return this._sanitizer.bypassSecurityTrustStyle(
+      "url(/assets/" + pics.thumb + ")"
+    );
   }
 
   profilePressed(event, profile) {
     if (profile.messages && profile.messages.length) {
       this.navCtrl.push(ChatPage, {
-        profile: profile
+        profile: profile,
       });
     }
   }

app/src/pages/messages/messages.html

@@ -7,16 +7,21 @@
 <ion-content no-padding>
   <ion-list>
     <ng-container *ngFor="let profile of profiles">
-      <ion-item no-padding  *ngIf="profile.messages?.length > 0">
-        <ion-thumbnail padding-left item-start (tap)="profilePictureTapped($event, profile)">
-          <img [src]="'https://appsby.fitz.guru/urge/' + profile.details.pic.thumb">
+      <ion-item no-padding *ngIf="profile.messages?.length > 0">
+        <ion-thumbnail
+          padding-left
+          item-start
+          (tap)="profilePictureTapped($event, profile)"
+        >
+          <img [src]="'/assets/' + profile.details.pic.thumb" />
         </ion-thumbnail>
         <ion-grid (tap)="interviewTapped($event, profile)">
           <ion-row nowrap justify-content-between>
-            <ion-col class="username">
-              {{profile.details.name}}
-            </ion-col>
-            <ion-col class="timestamp" [innerHTML]="getLatestMessageTimestamp(profile.messages)"></ion-col>
+            <ion-col class="username"> {{profile.details.name}} </ion-col>
+            <ion-col
+              class="timestamp"
+              [innerHTML]="getLatestMessageTimestamp(profile.messages)"
+            ></ion-col>
           </ion-row>
           <ion-row class="latest-message" nowrap>
             <ion-col [innerHTML]="getLatestMessage(profile.messages)"></ion-col>

app/src/pages/profile/profile.ts

@@ -1,30 +1,33 @@
-import { Component } from '@angular/core';
-import { DomSanitizer } from '@angular/platform-browser';
-import { NavController, NavParams } from 'ionic-angular';
+import { Component } from "@angular/core";
+import { DomSanitizer } from "@angular/platform-browser";
+import { NavController, NavParams } from "ionic-angular";
 
-import { ChatPage } from '../chat/chat';
-import { LightboxPage } from '../lightbox/lightbox';
-import { ProfileService } from '../../services/profiles';
+import { ChatPage } from "../chat/chat";
+import { LightboxPage } from "../lightbox/lightbox";
+import { ProfileService } from "../../services/profiles";
 
 @Component({
-  selector: 'page-profile',
-  templateUrl: 'profile.html',
-  providers: [ ProfileService ]
+  selector: "page-profile",
+  templateUrl: "profile.html",
+  providers: [ProfileService],
 })
-
 export class ProfilePage {
-
   detailsOpen: boolean = false;
   profile: any;
   tabNavEl: any;
 
-  constructor(public navCtrl: NavController, public navParams: NavParams, public profileService: ProfileService, private _sanitizer: DomSanitizer) {
-    this.profile = navParams.get('profile');
-    this.tabNavEl = document.querySelector('#tab-nav .tabbar');
+  constructor(
+    public navCtrl: NavController,
+    public navParams: NavParams,
+    public profileService: ProfileService,
+    private _sanitizer: DomSanitizer
+  ) {
+    this.profile = navParams.get("profile");
+    this.tabNavEl = document.querySelector("#tab-nav .tabbar");
   }
 
   ionViewWillEnter() {
-    this.tabNavEl.style.display = 'none';
+    this.tabNavEl.style.display = "none";
   }
 
   closeProfile(event) {
@@ -34,17 +37,19 @@ export class ProfilePage {
   closeProfileDetails(event) {
     if (this.detailsOpen) {
       this.detailsOpen = false;
-      document.querySelector('.profile-toolbar').classList.remove('hidden');
-      document.getElementById('detail-overlay').classList.remove('open');
+      document.querySelector(".profile-toolbar").classList.remove("hidden");
+      document.getElementById("detail-overlay").classList.remove("open");
     }
   }
 
   getBackground(pics) {
-    return this._sanitizer.bypassSecurityTrustStyle('url(https://appsby.fitz.guru/urge/' + pics.detail + ')');
+    return this._sanitizer.bypassSecurityTrustStyle(
+      "url(/assets/" + pics.detail + ")"
+    );
   }
 
   markFavorite(event, profile) {
-    console.debug('favorite profile', { event: event, profile: profile });
+    console.debug("favorite profile", { event: event, profile: profile });
   }
 
   nextProfile(event) {
@@ -54,15 +59,15 @@ export class ProfilePage {
 
   openChat(event, profile) {
     this.navCtrl.push(ChatPage, {
-      profile: profile
+      profile: profile,
     });
   }
 
   openProfileDetails(event) {
     if (!this.detailsOpen) {
       this.detailsOpen = true;
-      document.querySelector('.profile-toolbar').classList.add('hidden');
-      document.getElementById('detail-overlay').classList.add('open');
+      document.querySelector(".profile-toolbar").classList.add("hidden");
+      document.getElementById("detail-overlay").classList.add("open");
     }
   }
 
@@ -72,9 +77,9 @@ export class ProfilePage {
   }
 
   showLightbox(event, image) {
-    if (event.target.classList.contains('scroll-content')) {
+    if (event.target.classList.contains("scroll-content")) {
       this.navCtrl.push(LightboxPage, {
-        image: image
+        image: image,
       });
     }
   }

app/src/services/profiles.ts

@@ -1,20 +1,18 @@
-import { Injectable } from '@angular/core';
-import { Http } from '@angular/http';
-import 'rxjs/add/operator/map';
+import { Injectable } from "@angular/core";
+import { Http } from "@angular/http";
+import "rxjs/add/operator/map";
 
 @Injectable()
 export class ProfileService {
-
-  endpoint: string = 'https://api.fitz.guru/urnings/profiles';
-  fallback: string = 'assets/data/profiles.json';
-  epSubmitted: string = '/submitted';
-  epVerified: string = '/verified';
+  endpoint: string = "http://localhost:27017/urnings/profiles";
+  fallback: string = "assets/data/profiles.json";
+  epSubmitted: string = "/submitted";
+  epVerified: string = "/verified";
   idMap: any = { all: {}, submitted: {}, verified: {} };
   profiles: any;
 
-
   constructor(private http: Http) {
-    this.idMap = {};
+    this.idMap = { all: {}, submitted: {}, verified: {} };
     this.profiles = null;
   }
 
@@ -23,7 +21,7 @@ export class ProfileService {
       return Promise.resolve(this.profiles);
     }
 
-    return new Promise(resolve => {
+    return new Promise((resolve) => {
       this.doGetRequest(this.endpoint, resolve);
     });
   }
@@ -33,8 +31,8 @@ export class ProfileService {
       return Promise.resolve(this.profiles.submitted);
     }
 
-    return new Promise(resolve => {
-      this.doGetRequest(this.endpoint + this.epSubmitted, resolve, 'submitted');
+    return new Promise((resolve) => {
+      this.doGetRequest(this.endpoint + this.epSubmitted, resolve, "submitted");
     });
   }
 
@@ -43,39 +41,42 @@ export class ProfileService {
       return Promise.resolve(this.profiles.verified);
     }
 
-    return new Promise(resolve => {
-      this.doGetRequest(this.endpoint + this.epVerified, resolve, 'verified');
+    return new Promise((resolve) => {
+      this.doGetRequest(this.endpoint + this.epVerified, resolve, "verified");
     });
   }
 
-  doGetRequest(endpoint, resolve, type = 'all') {
-    this.http.get(endpoint)
-      .map(res => res.json())
+  doGetRequest(endpoint, resolve, type = "all") {
+    this.http
+      .get(endpoint)
+      .map((res) => res.json())
       .subscribe(
-        data => {
+        (data) => {
           this.profiles = this.profiles || {};
           this.profiles[type] = data;
           this.profiles[type].reduce((map, profile, i) => {
+            console.log("profile: ", { map, profile, i });
             map[profile._id] = i;
             return map;
           }, this.idMap[type]);
           resolve(this.profiles[type]);
         },
-        error => {
+        (error) => {
           this.doGetRequest(this.fallback, resolve, type);
         }
-      )
+      );
   }
 
-  getNextProfile(id, type = 'all') {
+  getNextProfile(id, type = "all") {
     var nextIdIndex = this.idMap[type][id] + 1;
     nextIdIndex = nextIdIndex >= this.profiles[type].length ? 0 : nextIdIndex;
     return this.profiles[type][nextIdIndex];
   }
 
-  getPreviousProfile(id, type = 'all') {
+  getPreviousProfile(id, type = "all") {
     var prevIdIndex = this.idMap[type][id] - 1;
-    prevIdIndex = prevIdIndex < 0 ? (this.profiles[type].length - 1) : prevIdIndex;
+    prevIdIndex =
+      prevIdIndex < 0 ? this.profiles[type].length - 1 : prevIdIndex;
     return this.profiles[type][prevIdIndex];
   }