Fixes #952 : Adds My Badges Component (#960)

<!-- Add the issue number that is fixed by this PR (In the form Fixes #123) -->
Fixes #952 

#### Checklist

- [x] I have read the [Contribution & Best practices Guide](https://blog.fossasia.org/open-source-developer-guide-and-best-practices-at-fossasia) and my PR follows them.
- [x] My branch is up-to-date with the Upstream `development` branch.
- [ ] I have added necessary documentation (if appropriate)

### Preview Link 

- **Replace XXX with your PR no**
- Link to live demo: http://pr-XXX-fossasia-badgeyay.surge.sh  

#### Changes proposed in this pull request:

- Adds my-badges component to frontend
- User can now view the badges he/she has generated
- Badges can be downloaded from the my-badges portal as well

Cheers!

api/controllers/generateBadges.py

@@ -5,6 +5,7 @@
 
 from flask import Blueprint, jsonify, request
 
+from api.db import db
 from api.utils.errors import ErrorResponse
 from api.models.badges import Badges
 from api.models.user import User
@@ -64,6 +65,8 @@ def generateBadges():
         link = fileUploader(badgePath + '/all-badges.pdf', 'badges/' + badge_created.id + '.pdf')
         badge_created.download_link = link
 
+    db.session.commit()
+
     return jsonify(BadgeSchema().dump(badge_created).data)
 
 

api/schemas/badges.py

@@ -49,7 +49,7 @@ class Meta:
 
 class UserBadges(Schema):
     class Meta:
-        type_ = 'user-badges'
+        type_ = 'my-badges'
         self_view = 'generateBadges.get_badges'
         kwargs = {'id': '<id>'}
 
@@ -59,6 +59,7 @@ class Meta:
     badge_id = fields.Str(required=True)
     text_color = fields.Str(required=True)
     badge_size = fields.Str(required=True)
+    download_link = fields.Str(required=True)
     user_id = fields.Relationship(
         self_url='/api/upload/get_file',
         self_url_kwargs={'file_id': '<id>'},

frontend/app/adapters/my-badges.js

@@ -0,0 +1,12 @@
+import ApplicationAdapter from './application';
+import ENV from '../config/environment';
+
+const { APP } = ENV;
+
+export default ApplicationAdapter.extend({
+  host: APP.backLink,
+  pathForType() {
+    const user = this.get('session.currentUser');
+    return 'api/get_badges?uid=' + user.uid;
+  }
+});

frontend/app/components/user-component/my-badges.js

@@ -0,0 +1,4 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+});

frontend/app/models/my-badges.js

@@ -0,0 +1,11 @@
+import DS from 'ember-data';
+
+const { Model, attr } = DS;
+
+export default Model.extend({
+  badge_size    : attr('string'),
+  csv           : attr('string'),
+  download_link : attr('string'),
+  image         : attr('string'),
+  text_color    : attr('string')
+});

frontend/app/router.js

@@ -14,6 +14,7 @@ router.map(function() {
   this.route('login');
   this.route('signup');
   this.route('create-badges');
+  this.route('my-badges');
   this.route('not-found');
   this.route('not-found-catch', { path: '/*path' });
   this.route('my-profile');

frontend/app/routes/my-badges.js

@@ -0,0 +1,7 @@
+import Route from '@ember/routing/route';
+
+export default Route.extend({
+  model() {
+    return this.get('store').findAll('my-badges');
+  }
+});

frontend/app/serializers/my-badges.js

@@ -0,0 +1,12 @@
+import DS from 'ember-data';
+
+const { JSONAPISerializer } = DS;
+
+export default JSONAPISerializer.extend({
+
+  normalizeResponse(store, primaryModelClass, payload, id, requestType) {
+    console.log(payload);
+    return payload;
+  }
+
+});

frontend/app/templates/components/nav-bar.hbs

@@ -7,8 +7,8 @@
             {{#ui-dropdown class='large item' action='hide'}}
                 <div>Welcome</div><i class="dropdown icon"></i>
                 <div class="menu profile-dropdown-menu">
-                    <a class="item"><i class="clone outline icon"></i>My Badges</a>
-                    <a href="{{href-to 'my-profile'}}" class="item"><i class="user outline icon"></i>Profile</a>
+                    <a href="{{href-to 'my-badges'}}" class="item"><i class="clone outline icon"></i>My Badges</a>
+                    <a class="item"><i class="user outline icon"></i>Profile</a>
                     <a class="item"><i class="cog icon"></i>Settings</a>
                     <a class="item" {{action 'logOut'}}><i class="sign out alternate icon"></i>Logout</a>
                 </div>

frontend/app/templates/components/user-component/my-badges.hbs

@@ -0,0 +1,47 @@
+<div class="ui hidden divider"></div>
+
+{{#each model as |badge|}}
+
+  <div class="ui card">
+    <div class="content">
+      <div class="header">Badge</div>
+    </div>
+    <div class="content">
+      <h4 class="ui sub header">Badge Details</h4>
+      <div class="ui small feed">
+        <div class="event">
+          <div class="content">
+            <div class="summary">
+               Image : {{badge.image}}
+            </div>
+          </div>
+        </div>
+        <div class="event">
+          <div class="content">
+            <div class="summary">
+               CSV : {{badge.csv}}
+            </div>
+          </div>
+        </div>
+        <div class="event">
+          <div class="content">
+            <div class="summary">
+               Badge Size : {{badge.badge_size}}
+            </div>
+          </div>
+        </div>
+        <div class="event">
+          <div class="content">
+            <div class="summary">
+               Text Color : {{badge.text_color}}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="extra content">
+      <a href="{{badge.download_link}}" class="ui button">Download Badge</a>
+    </div>
+  </div>
+
+{{/each}}

frontend/app/templates/my-badges.hbs

@@ -0,0 +1 @@
+{{user-component/my-badges model=model}}

frontend/tests/integration/components/user-component/my-badges-test.js

@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | user-component/my-badges', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function(assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`{{user-component/my-badges}}`);
+
+    assert.equal(this.element.textContent.trim(), '');
+
+    // Template block usage:
+    await render(hbs`
+      {{#user-component/my-badges}}
+        template block text
+      {{/user-component/my-badges}}
+    `);
+
+    assert.equal(this.element.textContent.trim(), '');
+  });
+});

frontend/tests/unit/adapters/my-badges-test.js

@@ -0,0 +1,12 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Adapter | my badges', function(hooks) {
+  setupTest(hooks);
+
+  // Replace this with your real tests.
+  test('it exists', function(assert) {
+    let adapter = this.owner.lookup('adapter:my-badges');
+    assert.ok(adapter);
+  });
+});

frontend/tests/unit/models/my-badges-test.js

@@ -0,0 +1,14 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+import { run } from '@ember/runloop';
+
+module('Unit | Model | my badges', function(hooks) {
+  setupTest(hooks);
+
+  // Replace this with your real tests.
+  test('it exists', function(assert) {
+    let store = this.owner.lookup('service:store');
+    let model = run(() => store.createRecord('my-badges', {}));
+    assert.ok(model);
+  });
+});

frontend/tests/unit/routes/my-badges-test.js

@@ -0,0 +1,11 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Route | my-badges', function(hooks) {
+  setupTest(hooks);
+
+  test('it exists', function(assert) {
+    let route = this.owner.lookup('route:my-badges');
+    assert.ok(route);
+  });
+});

frontend/tests/unit/serializers/my-badges-test.js

@@ -0,0 +1,24 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+import { run } from '@ember/runloop';
+
+module('Unit | Serializer | my badges', function(hooks) {
+  setupTest(hooks);
+
+  // Replace this with your real tests.
+  test('it exists', function(assert) {
+    let store = this.owner.lookup('service:store');
+    let serializer = store.serializerFor('my-badges');
+
+    assert.ok(serializer);
+  });
+
+  test('it serializes records', function(assert) {
+    let store = this.owner.lookup('service:store');
+    let record = run(() => store.createRecord('my-badges', {}));
+
+    let serializedRecord = record.serialize();
+
+    assert.ok(serializedRecord);
+  });
+});