Create UI for clearing cache

app/adapters/application.js

@@ -0,0 +1,19 @@
+import JSONAPIAdapter from '@ember-data/adapter/json-api';
+
+import ENV from 'website-my/config/environment';
+
+const API_BASE_URL = ENV.BASE_API_URL;
+
+export default class ApplicationAdapter extends JSONAPIAdapter {
+  host = API_BASE_URL;
+
+  ajaxOptions() {
+    const options = super.ajaxOptions(...arguments);
+    options.credentials = 'include';
+    return options;
+  }
+
+  buildURL(...args) {
+    return `${super.buildURL(...args)}`;
+  }
+}

app/components/self-clear-cache.hbs

@@ -0,0 +1,14 @@
+<section class="cache">
+  <div data-test-last-time class="cache__last-request">
+    Last Request: <br> {{@time}}
+  </div>
+  {{#if @isPurgingCache}}
+    <div>
+      <Spinner />
+    </div>
+  {{/if}}
+  <button data-test-btn-clear-cache class="cache__clear-btn" type="submit" disabled={{@isPurgingCache}} {{on "click" (fn @onClearCache)}}>Clear cache</button>
+  <div data-test-pending-requests class="cache__remaining-requests">
+    {{@totalTimes}} / 3 requests remaining for today
+  </div>
+</section>

app/components/user-status.hbs

@@ -1,22 +1,29 @@
-<div class="heading">
-  {{#each this.currentUserStatus as |currentStatus|}}
-    {{#if (eq @status currentStatus.status)}}
-      <h2 data-test-status>{{currentStatus.message}}</h2>
-    {{/if}}
-  {{/each}}
-</div>
+<section class="status">
+  <div class="heading">
+    {{#each this.currentUserStatus as |currentStatus|}}
+      {{#if (eq @status currentStatus.status)}}
+        <h2 data-test-status>{{currentStatus.message}}</h2>
+      {{/if}}
+    {{/each}}
+  </div>
 
-<div class="buttons">
-  {{#each this.currentUserStatus as |currentStatus|}}
-    {{#if (eq @status currentStatus.status)}}
-      {{#if (not-eq @status 'ooo')}}
-        <button class={{currentStatus.class}} type="button" data-test-button disabled={{@isStatusUpdating}} {{on "click" (fn @onUpdateStatus currentStatus.firstAvailableStatus )}}>
-          <span data-test-button-text>{{currentStatus.firstStatusMessage}}</span>
+  <div class="buttons">
+    {{#each this.currentUserStatus as |currentStatus|}}
+      {{#if (eq @status currentStatus.status)}}
+        {{#if (not-eq @status 'ooo')}}
+          <button class={{currentStatus.class}} type="button" data-test-button disabled={{@isStatusUpdating}} {{on "click" (fn @onUpdateStatus currentStatus.firstAvailableStatus )}}>
+            <span data-test-button-text>{{currentStatus.firstStatusMessage}}</span>
+          </button>
+        {{/if}}
+        <button class="buttons--small" type="button" disabled={{@isStatusUpdating}} {{on "click" (fn @onUpdateStatus currentStatus.secondAvailableStatus )}}>
+          <span>{{currentStatus.secondStatusMessage}}</span>
         </button>
       {{/if}}
-      <button class="buttons--small" type="button" disabled={{@isStatusUpdating}} {{on "click" (fn @onUpdateStatus currentStatus.secondAvailableStatus )}}>
-        <span>{{currentStatus.secondStatusMessage}}</span>
-      </button>
-    {{/if}}
-  {{/each}}
-</div>
+    {{/each}}
+  </div>
+  {{#if @isStatusUpdating}}
+    <div>
+      <Spinner />
+    </div>
+  {{/if}}
+</section>

app/controllers/index.js

@@ -6,9 +6,13 @@ import ENV from 'website-my/config/environment';
 const BASE_URL = ENV.BASE_API_URL;
 
 export default class IndexController extends Controller {
-  @tracked status = this.model;
+  @tracked status = this.model.user.status;
   @tracked isStatusUpdating = false;
 
+  @tracked timestamp = this.model.cache.timestamp;
+  @tracked count = this.model.cache.count;
+  @tracked isPurgingCache = false;
+
   @action async updateStatus(status) {
     this.isStatusUpdating = true;
     try {
@@ -32,4 +36,30 @@ export default class IndexController extends Controller {
       this.isStatusUpdating = false;
     }
   }
+
+  @action async purgeCache() {
+    this.isPurgingCache = true;
+    try {
+      const response = await fetch(`${BASE_URL}/members/cache`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        credentials: 'include',
+      });
+
+      if (response.ok) {
+        const data = await response.json();
+        alert(data.message);
+      }
+    } catch (error) {
+      console.error('Error : ', error);
+      alert('Something went wrong!');
+    } finally {
+      this.isPurgingCache = false;
+      const updatedCacheData = await this.store.queryRecord('caches', {});
+      this.timestamp = updatedCacheData.timestamp;
+      this.count = updatedCacheData.count;
+    }
+  }
 }

app/models/caches.js

@@ -0,0 +1,6 @@
+import Model, { attr } from '@ember-data/model';
+
+export default class CachesModel extends Model {
+  @attr('epochToDate') timestamp;
+  @attr count;
+}

app/models/users.js

@@ -0,0 +1,20 @@
+import Model, { attr } from '@ember-data/model';
+
+export default class UsersModel extends Model {
+  @attr('string', { defaultValue: 'User' }) first_name;
+  @attr last_name;
+  @attr username;
+  @attr('string', { defaultValue: 'active' }) status;
+  @attr roles;
+  @attr yoe;
+  @attr('json', { defaultValue: 'dummyProfilePicture.png' }) picture;
+  @attr company;
+  @attr incompleteUserDetails;
+  @attr github_display_name;
+  @attr github_id;
+  @attr instragram_id;
+  @attr linkedin_id;
+  @attr twitter_id;
+  @attr profileURL;
+  @attr profileStatus;
+}

app/routes/index.js

@@ -1,26 +1,28 @@
 import Route from '@ember/routing/route';
-import ENV from 'website-my/config/environment';
+import { inject as service } from '@ember/service';
+import { UnauthorizedError } from '@ember-data/adapter/error';
+import { action } from '@ember/object';
+import RSVP from 'rsvp';
 
-const API_BASE_URL = ENV.BASE_API_URL;
 export default class IndexRoute extends Route {
-  model = async () => {
-    const defaultStatus = 'active';
-    try {
-      const response = await fetch(`${API_BASE_URL}/users/self`, {
-        credentials: 'include',
-      });
-      const userData = await response.json();
-      if (response.status === 200 && !userData.incompleteUserDetails) {
-        return userData.status ?? defaultStatus;
-      } else if (response.status === 401) {
-        alert('You are not logged in. Please login to continue.');
-        window.open(
-          'https://github.com/login/oauth/authorize?client_id=23c78f66ab7964e5ef97',
-          '_self'
-        );
-      }
-    } catch (error) {
-      console.error(error.message);
+  @service store;
+
+  async model() {
+    return RSVP.hash({
+      user: this.store.findRecord('users', 'self'),
+      cache: this.store.queryRecord('caches', {}),
+    });
+  }
+
+  @action
+  error(error) {
+    if (error instanceof UnauthorizedError) {
+      alert('You are not logged in. Please login to continue.');
+      window.open(
+        'https://github.com/login/oauth/authorize?client_id=23c78f66ab7964e5ef97',
+        '_self'
+      );
+      return;
     }
-  };
+  }
 }

app/serializers/application.js

@@ -0,0 +1,2 @@
+import JSONSerializer from '@ember-data/serializer/json';
+export default class ApplicationSerializer extends JSONSerializer {}

app/styles/app.css

@@ -10,6 +10,7 @@
 @import 'components/input-field.css';
 @import 'navbar.css';
 @import 'identity.css';
+@import 'self-clear-cache.css';
 
 html,
 body {

app/styles/self-clear-cache.css

@@ -0,0 +1,35 @@
+.cache {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin: auto;
+  box-shadow: 5px 10px 15px #09113344;
+  border-radius: 10px;
+  padding: 30px;
+  font-weight: 700;
+}
+
+.cache__last-request {
+  padding: 40px 4px 20px;
+  color: #1d1283;
+  font-size: 2rem;
+  text-align: center;
+}
+
+.cache__clear-btn {
+  border-radius: 10px;
+  padding: 16px 60px;
+  border: 3px solid #e49504;
+  color: #e49504;
+  background-color: white;
+  font-weight: 700;
+  font-size: 1.25rem;
+  cursor: pointer;
+}
+
+.cache__remaining-requests {
+  padding-top: 30px;
+  color: #1d1283;
+  font-size: 1.25rem;
+}

app/styles/user-status.css

@@ -1,16 +1,24 @@
+.status {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin: 40px auto;
+  box-shadow: 5px 10px 15px #09113344;
+  border-radius: 10px;
+  padding: 30px;
+}
+
 .heading h2 {
-  color: #0034a5;
-  margin: 50px 0 40px;
-  font-size: 1.75rem;
+  color: #1d1283;
+  margin: 20px 0px;
+  font-size: 2rem;
   text-align: center;
 }
 
 .buttons {
   display: flex;
   flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  margin: 20px 0;
 }
 
 .buttons__idle {
@@ -19,7 +27,7 @@
   font-weight: 700;
   border: 3px solid #e49504;
   padding: 20px;
-  margin-bottom: 40px;
+  margin-bottom: 20px;
   border-radius: 10px;
   background: #fff;
   cursor: pointer;
@@ -38,8 +46,9 @@
 }
 
 .buttons--small {
+  font-size: 1.25rem;
   font-weight: 700;
-  color: #0034a5;
+  color: #1d1283;
   border: none;
   background: #fff;
   cursor: pointer;

app/templates/index.hbs

@@ -2,6 +2,13 @@
   <h1>Welcome to my site!</h1>
 </div>
 
+<SelfClearCache 
+  @time={{this.timestamp}} 
+  @totalTimes={{this.count}} 
+  @onClearCache={{this.purgeCache}} 
+  @isPurgingCache={{this.isPurgingCache}}
+/>
+
 <UserStatus 
   @status={{this.status}} 
   @onUpdateStatus={{this.updateStatus}} 

app/transforms/epoch-to-date.js

@@ -0,0 +1,11 @@
+import Transform from '@ember-data/serializer/transform';
+
+export default class EpochToDateTransform extends Transform {
+  deserialize(serialized) {
+    return new Date(serialized * 1000).toString();
+  }
+
+  serialize(deserialized) {
+    return deserialized;
+  }
+}

app/transforms/json.js

@@ -0,0 +1,11 @@
+import Transform from '@ember-data/serializer/transform';
+
+export default class JsonTransform extends Transform {
+  deserialize(serialized) {
+    return JSON.stringify(serialized);
+  }
+
+  serialize(deserialized) {
+    return JSON.parse(deserialized);
+  }
+}

jsconfig.json

@@ -1 +1,11 @@
-{"compilerOptions":{"target":"es6","experimentalDecorators":true},"exclude":["node_modules","bower_components","tmp","vendor",".git","dist"]}
+{
+  "compilerOptions": { "target": "es6", "experimentalDecorators": true },
+  "exclude": [
+    "node_modules",
+    "bower_components",
+    "tmp",
+    "vendor",
+    ".git",
+    "dist"
+  ]
+}