Convert to derived data - Original

components.my-repository\.js

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default class MyRepository extends Component {
	@tracked showDetailVisible = false;
	@tracked branches = '';

	@action
	async showDetail(name, organizationName, token) {
		let requestOptions = {  
		  	method: 'GET',
		  	headers: {
		    	'Accept': 'application/vnd.github.v3+json',
		    	'Authorization': 'token ' + token
			}
		};
		let response = await fetch('https://api.github.com/repos/'+organizationName+'/'+name+'/branches', requestOptions);
		let data = await response.json();
		if (!response.ok) {
		    this.requestError = 'Some of the properties are wrong.';
		} else {
			this.branches = data;
			this.showDetailVisible = !this.showDetailVisible;
		}
		
	}
}

controllers.application\.js

import Controller from '@ember/controller';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';
import { filterBy } from '@ember/object/computed';

export default class ApplicationController extends Controller {
  @tracked requestError = '';
	@tracked dataFetched = false;
	@tracked repositories = '';
	@tracked filteredRepositories = '';
	@tracked languages = '';
	@tracked isPrivate = false;
	@tracked languageFilter = '';

	@action
	isPrivateCheck(event) {
		this.isPrivate = event.target.checked;
		if (this.languageFilter != 'All') {
			this.filteredRepositories = this.repositories.filterBy('private', this.isPrivate).filterBy('language', this.languageFilter);
		} else {
			this.filteredRepositories = this.repositories.filterBy('private', this.isPrivate)
		}
	}

	@action
	languageFilterCheck(value) {
		this.languageFilter = value;
		if (value != 'All') {
			this.filteredRepositories = this.repositories.filterBy('language', value).filterBy('private', this.isPrivate);
		} else {
			this.filteredRepositories = this.repositories.filterBy('private', this.isPrivate);
		}
	}

	@action
	async submitToken() {
		let requestOptions = {  
		  	method: 'GET',
		  	headers: {
		    	'Accept': 'application/vnd.github.v3+json',
		    	'Authorization': 'token ' + this.token
			}
		};
		this.requestError = '';
		let response = await fetch('https://api.github.com/orgs/'+this.organizationName+'/repos', requestOptions);
		let repositories  = await response.json();
		if (!response.ok) {
		    this.requestError = 'Token or organization name is invalid.';
		} else {
			
			let data = await Promise.all(repositories.map(async (entry) => {
				console.log(name);
				let response = await fetch('https://api.github.com/repos/'+this.organizationName+'/'+entry.name+'/branches', requestOptions);
				return await response.json();
			}));

			data.forEach(function(entry, index) {
				repositories[index].branch_count = entry.length;
			});

			console.log(repositories);

			this.repositories = repositories;
			this.filteredRepositories = repositories;
			this.dataFetched = true;
			
			let dropdownLanguages = [...new Set(repositories.map(a => a.language))];
			let removedNullFromLanguages = dropdownLanguages.filter(function (e) {return e != null;});
			let allFilter = 'All';
			let addAllFilter = [allFilter].concat(removedNullFromLanguages);
			this.languages = addAllFilter;
		}
	}
}

templates.application\.hbs

<div id="view">
	<div id="left-side">
		<div id="login-box">
			<Input
			  @id="token-input"
			  @type="password"
			  @value={{this.token}}
			  placeholder="Github api token"
			/>
			<br>
			<br>
			<Input
			  @id="organization-name-input"
			  @type="text"
			  @value={{this.organizationName}}
			  placeholder="Organization name"
			/>
			<br>
			{{#if this.requestError}}
				<br>
				{{this.requestError}}
				<br>
			{{/if}}
			
			<br>
			<button type="button" id="submit-login" {{on "click" this.submitToken}}>Submit</button>
		</div>
	</div>
	<div id="right-side">
		{{#if this.dataFetched}}
			<div class="filters">
				<label for="admin-checkbox">Is Private</label>
				<Input
				  @id="private-checkbox"
				  @type="checkbox"
				  @checked={{this.isPrivate}}
				  {{on "input" this.isPrivateCheck}}
				/>

				<select class="language-dropdown" onchange={{action "languageFilterCheck" value='target.value'}}>
				{{#each this.languages as |language|}}
				    <option value={{language}}>{{language}}</option>
				{{/each}}
				</select>
			</div>
			<table>
				<tr>
					<th>Repository name</th>
					<th>Url</th>
					<th>Language</th>
					<th>Private</th>
					<th>Open issues</th>
					<th>Branch count</th>
				</tr>
				{{#each this.filteredRepositories as |repository|}}
				  		<MyRepository
				      		@name={{repository.name}}
				      		@url={{repository.html_url}}
				      		@language={{repository.language}}
				      		@isPrivate={{repository.private}}
				      		@openIssues={{repository.open_issues}}
				      		@branchCount={{repository.branch_count}}
				      		@organizationName={{this.organizationName}}
				      		@token={{this.token}}
				    	/>
				{{/each}}
			</table>
		{{else}}
			<p class="no-data"> There are no data, please submit token and organization name! </p>
		{{/if}}
	</div>
</div>
{{this.triggerJquery}}

templates.components.my-repository\.hbs

<tr>
	<td>{{@name}}</td>
	<td><a href={{@url}}>{{@url}}</a></td>
	<td>{{@language}}</td>
	<td>{{@isPrivate}}</td>
	<td>{{@openIssues}}</td>
	<td>{{@branchCount}}</td>
	<td><a class="showmore" onclick={{action "showDetail" @name @organizationName @token}}>Show Branches</a></td>
</tr>
{{#if this.showDetailVisible}}
<tr class="detail">
    <td colspan="6">
      <div>
        <table class="table">
          	{{#each this.branches as |branch|}}
          		<div class="branch-name">{{branch.name}}</div>
          	{{/each}}
        </table>
      </div>
    </td>
  </tr>
{{/if}}

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"
  }
}