fix: Display sponsor size according to their level

Author: iamareebjamal

app/components/public/sponsor-item.hbs

@@ -0,0 +1,5 @@
+<div class="ui column">
+  <a href="{{@sponsor.url}}" target="_blank" rel="noopener nofollow">
+    <img src="{{@sponsor.logoUrl}}" height="250" width="250" class="ui image sponsor-image" alt="{{@sponsor.name}}">
+  </a>
+</div>

app/components/public/sponsor-item.js

@@ -0,0 +1,10 @@
+{{#each-in this.sponsorsGrouped as |key sponsorsGroup|}}
+  {{#if (not-eq key 'null')}}
+    <h4 class="ui header">{{key}}</h4>
+  {{/if}}
+  <div class="ui {{sponsorsGroup.columns}} column stackable grid">
+    {{#each sponsorsGroup.sponsors as |sponsor|}}
+      <Public::SponsorItem @sponsor={{sponsor}} />
+    {{/each}}
+  </div>
+{{/each-in}}

app/components/public/sponsor-list.hbs

@@ -1,18 +1,50 @@
-import classic from 'ember-classic-decorator';
 import { computed } from '@ember/object';
-import Component from '@ember/component';
+import Component from '@glimmer/component';
 import { orderBy, groupBy } from 'lodash-es';
 
-@classic
 export default class SponsorList extends Component {
+
+  getDistinctLevels(sponsors) {
+    const levels = new Set(sponsors.toArray().map(sponsor => sponsor.level).filter(level => level != null));
+    return [...levels].sort((a, b) => a - b);
+  }
+
+  @computed('sponsors.[]')
+  get distinctLevels() {
+    return this.getDistinctLevels(this.args.sponsors);
+  }
+
+  inferColumns(key, sponsors) {
+    const levels = this.distinctLevels;
+    const groupLevels = this.getDistinctLevels(sponsors);
+
+    const groupLevel = groupLevels.pop();
+    if (groupLevel !== null || groupLevel !== undefined) {
+      const index = levels.indexOf(groupLevel);
+      const columns = ['three', 'four', 'five', 'six', 'seven'];
+      return columns[Math.min(index, columns.length - 1)];
+    }
+
+    return 'three';
+  }
+
   @computed('sponsors.[]')
   get sponsorsGrouped() {
-    return groupBy(
+    const grouped = groupBy(
       orderBy(
-        this.sponsors.toArray(),
+        this.args.sponsors.toArray(),
         sponsor => sponsor.get('level')
       ),
       sponsor => sponsor.get('type')
     );
+
+    const finalGrouped = {};
+    for (const [key, sponsors] of Object.entries(grouped)) {
+      finalGrouped[key] = {
+        sponsors,
+        columns: this.inferColumns(key, sponsors)
+      };
+    }
+    return finalGrouped;
   }
 }

app/components/public/sponsor-list.js

@@ -22,7 +22,7 @@ export default class RegisterController extends Controller {
     this.model.save()
       .then(user => {
         this.set('session.newUser', user.get('email'));
-          this.send('loginExistingUser', user.get('email'), password, this.inviteToken, this.event);
+        this.send('loginExistingUser', user.get('email'), password, this.inviteToken, this.event);
       })
       .catch(reason => {
         if (reason && Object.prototype.hasOwnProperty.call(reason, 'errors') && reason.errors[0].status === 409) {