Apollo Catalog Linker

components.category-products.js

import Ember from 'ember';
import ajax from 'ember-ajax/request';
import { task } from 'ember-concurrency';

const { isPresent, get, set } = Ember;

export default Ember.Component.extend({
  loadTask: task(function*(uri) { 
  	const { links } = yield ajax(uri);
    return links;
  }).drop(),
  didInsertElement() { 
    this.sendAction('ready');
  },
  didReceiveAttrs() {
    const { uri, loadTask } = this.getProperties('uri', 'loadTask');
    
    if (isPresent(uri)) { 
      loadTask.perform(uri).then((products) => {
        this.setProperties({ products });
      });
    }
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Apollo Catalog Linker'
});

controllers.categories.js

import Ember from 'ember';

const { computed } = Ember;
export default Ember.Controller.extend({
  queryParams: ['line', 'vType'],
  vType: 'transit',
  gbp: 'https://tips.fedora.milady?u=mirin',
  pgbp: computed('gbp', { 
    get() { 
      return encodeURIComponent(this.get('gbp'));
    }
  }),
  actions: {
    pageDidRender() { 
      Ember.run.later(() => {
        this.set('fakeUser', 'Matthew Wilson');
      }, 1000)
    }
  }
});

router.js

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: 'none',
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('categories', { path: '/' }, function() { 
    this.route('category', { path: 'category/:id' }, function() { 
    	this.route('products');
    });
  });
});

export default Router;

routes.application.js

import Ember from 'ember';

export default Ember.Route.extend({
});

routes.categories.js

import Ember from 'ember';
import ajax from 'ember-ajax/request';

const URI_BY_LINE = {
  'mgmt': 'https://psnow.e1-np.playstation.com/store/api/ps4now/00_09_000/container/US/en/19/STORE-MSF192018-APOLLOROOT/1491319284?start=0&size=1000',
  'e1-np': 'https://commerce1.api.e1-np.km.playstation.net/store/api/ps4now/00_09_000/container/US/en/19/STORE-MSF4103535-APOLLO'
};

class Request {
  static uri(line) { 
    return URI_BY_LINE[line]
  }
  constructor(line) {
    this.line = line; 
  }
  run() {
    return ajax(this.constructor.uri(this.line));
  }
}

const getLinks = ({ links }) => links.map(({url, name}) => ({ name, url}) ); 

export default Ember.Route.extend({
  queryParams: {
    line: {
      refreshModel: true
    },
    vType: {
      refreshModel: false
    }
  },
  model() {
    const request = new Request('e1-np');
    return request.run().then(getLinks);
  }
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>

{{outlet}}
<br>
<br>

templates.categories.hbs

<h3>
  {{#if fakeUser}}
    Hello, {{fakeUser}}, copy and paste any of the following into your remote web inspector to visit the page.
  {{else}}
    Loading user info...
  {{/if}}
</h3>

<div>
{{one-way-select 
	vType 
	options=(array 'id' 'transit' 'launch' 'deeplink')
	update=(action (mut vType))}} 
  Pick type
</div>
{{#if (eq vType 'launch')}}
{{one-way-input gbp update=(action (mut gbp))}}
{{/if}}
<ul>
{{#each model as |category|}}
  <li>
  	<h2>{{category.name}}  -- {{vType}}</h2>
		{{#category-products ready='pageDidRender' uri=category.url as |products|}}
 			<ul>
      	{{#each products as |product|}}
        	<li>
	          <h3>{{product.name}}</h3>
           {{#if (eq vType 'id')}} 	
           	{{product.id}}
           {{else if (eq vType 'deeplink')}}
           <p>
             sce.launchApp('pscloudsubs:permalink/detail/{{product.id}}')
           </p>
           {{else if (eq vType 'launch')}}
             <p>
               sce.launchApp('pscloudsubs:play?entitlement={{product.id}}&gamebootparam=https%3A%2F%2Ftips.fedora.milady%3Fu%3Dmirin')
             </p>
           {{else if (eq vType 'transit')}}
           	<p>Apollo.__container__.lookup('route:application').transitionTo('free-ps4.pdp', '{{product.id}}')</p>
           {{/if}}
          </li>
        {{/each}}
      </ul>
    {{/category-products}}
  </li>
{{/each}}
</ul>
{{outlet}}

templates.components.category-products.hbs

{{#if loadTask.isRunning}}
  is busy...!
{{else}}
	{{yield products}}
{{/if}}

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1",
    "ember-one-way-controls": "2.0.0",
    "ember-ajax": "3.0.0",
    "ember-concurrency": "0.8.3",
    "ember-truth-helpers": "1.3.0",
    "ember-composable-helpers": "2.0.1"
  }
}