Play with inverses

components.table-list\.js

import Component from '@glimmer/component';
import Sort from '../state-object/sort';

export default class extends Component {
  sorter = new Sort()

  get sorted() {
    const { data } = this.args;
    const { sorter } = this;
    sorter.data = data;
    sorter.sortKey = 'title';
    
    return sorter.sorted;
  }
}

controllers.application\.js

import Controller from '@ember/controller';

export default class ApplicationController extends Controller {
  appName = 'Ember Twiddle';
}

helpers.element\.js

import { helper } from '@ember/component/helper';

export default helper(function element(params, hash) {
  let element = document.createElement(params[0]);
  Object.assign(element, hash);
  return element;
});

helpers.local-state-for\.js

import { helper } from '@ember/component/helper';

const STATES = new WeakMap();

export function stateObjectFor(obj) {
  let state = STATES.get(obj);
  
  if (!state) {
    state = Object.create(null);
    state.cleanup = () => {
      STATES.remove(obj);
    };
    STATES.set(obj, state);
  }
  
  return state;
}

export default helper(function localStateFor(params/*, hash*/) {
  return stateObjectFor(params[0]);
});

helpers.not\.js

import { helper } from '@ember/component/helper';

export default helper(function not(params/*, hash*/) {
  return !params[0];
});

helpers.state-object-for\.js

import { helper } from '@ember/component/helper';

const STATES = new WeakMap();

export function setStateFor(obj, value) {
  STATES.set(obj, value);
}

export function stateObjectFor(obj) {
  return STATES.get(obj)
}

export default helper(function stateObjectForHelper(params/*, hash*/) {
  return stateObjectFor(params[0]);
});

models.post\.js

import Model from 'ember-data/model';
import attr from 'ember-data/attr';
import { belongsTo } from 'ember-data/relationships';

export default class extends Model {
  @attr title
  
  @belongsTo('user', { async: false, inverse: 'posts' })
  author;
}

models.user\.js

import Model from 'ember-data/model';
import attr from 'ember-data/attr';
import { hasMany } from 'ember-data/relationships';

export default class extends Model {
  @attr firstName
  @attr lastName
  
  get name() {
  	return `${this.firstName} ${this.lastName}`;
  }
  
  @hasMany('post', { async: false, inverse: 'author' })
  posts
}

routes.application\.js

import Route from '@ember/routing/route';

const AUTHORS_PAYLOAD = {
  data: [
    {
      type: 'user',
      id: '2',
      attributes: {
        firstName: 'James',
        lastName: 'Thoburn'
      }
    },
    {
      type: 'user',
      id: '1',
      attributes: {
        firstName: 'Chris',
        lastName: ''
      },
      relationships: {
        posts: {
          data: [
            { type: 'post', id: '1' },
            { type: 'post', id: '2' },
            { type: 'post', id: '3' },
            { type: 'post', id: '4' },
            { type: 'post', id: '5' }
          ]
        }
      }
    },
  ]
};

const POSTS_PAYLOAD = {
  data: [
    { type: 'post', id: '1', attributes: { title: 'first post' } },
    { type: 'post', id: '2', attributes: { title: 'second post' } },
    { type: 'post', id: '3', attributes: { title: 'third post' } },
    { type: 'post', id: '4', attributes: { title: 'four post' } },
    {
      type: 'post',
      id: '5',
      attributes: { title: 'five post' },
      relationships: {
        author: {
          data: { type: 'user', id: '2' }
        }
      }
    },
  ]
}

export default Route.extend({
  model() {    
    const authors = this.store.push(AUTHORS_PAYLOAD);
    const posts = this.store.push(POSTS_PAYLOAD);
    
    return {
      posts,
      authors
    }
  }
});

state-object.sort\.js

import { tracked } from '@glimmer/tracking';

class Sort {
  @tracked data;
  @tracked sortKey;
  @tracked filterFn = () => {};
  
  get sorted() {
    const { sortKey, filterFn } = this;
    
    return this.data.filter(filterFn).sort((a, b) => {
      return a[sortKey] > b[sortKey] ? -1 : 1;
    });
  }
}

state-object.user\.js

import { stateObjectFor } from '../helpers/state-object-for';

export default class UserState {
		get name() {
    	let state = stateObjectFor(this);
      if (!state) {
        return;
      }
      return state.firstName + ' ' + state.lastName;
    }  
}

templates.application\.hbs

<h2>Posts</h2>
<ul>
  {{#each @model.posts as |post|}}
  	<li>{{post.title}} by {{post.author.name}}</li>
  {{/each}}
</ul>
<h2>Posts by Author</h2>
<ul>
  {{#each @model.authors as |author|}}
    <li>
    	{{author.name}}
      <ul>
        {{#each author.posts as |post|}}
          <li>
          	{{post.title}}  
          </li>
        {{/each}}
     	</ul>
    </li>
  {{/each}}
</ul>

templates.components.table-list\.hbs

<ul>
 {{#each this.sorted as |post|}}
   <li>{{post.title}}</li>
 {{/each}}
</ul>

twiddle\.json

{
  "version": "0.17.1",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": true
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js",
    "ember": "3.18.1",
    "ember-template-compiler": "3.18.1",
    "ember-testing": "3.18.1"
  },
  "addons": {
    "@glimmer/component": "1.0.0",
    "ember-data": "3.18.0"
  }
}