feat: UI for purging members cache

app/components/self-clear-cache.hbs

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

app/constants/self-clear-cache.js

@@ -0,0 +1,3 @@
+export const MAX_CACHE_PURGE_COUNT = 3;
+// this will be removed once we fetch this from the API
+export const LAST_UPDATED_REQUEST = '24 November, 1:23 PM IST';

app/controllers/index.js

@@ -5,20 +5,32 @@ import ENV from 'website-my/config/environment';
 import { inject as service } from '@ember/service';
 import { toastNotificationTimeoutOptions } from '../constants/toast-notification';
 import { USER_STATES } from '../constants/user-status';
+import {
+  MAX_CACHE_PURGE_COUNT,
+  LAST_UPDATED_REQUEST,
+} from '../constants/self-clear-cache';
 
 const BASE_URL = ENV.BASE_API_URL;
 
 export default class IndexController extends Controller {
+  @service featureFlag;
   @service toast;
   @tracked status = this.model;
   @tracked isStatusUpdating = false;
   @tracked showUserStateModal = false;
   @tracked newStatus;
+  @tracked isPurgingCache = false;
+  @tracked cacheTriggeredPending = MAX_CACHE_PURGE_COUNT;
+  lastUpdatedCacheRequest = LAST_UPDATED_REQUEST;
 
   @action toggleUserStateModal() {
     this.showUserStateModal = !this.showUserStateModal;
   }
 
+  get isDevMode() {
+    return this.featureFlag.isDevMode;
+  }
+
   @action async updateStatus(newStatus) {
     this.isStatusUpdating = true;
     if (!('cancelOoo' in newStatus)) {
@@ -68,4 +80,37 @@ export default class IndexController extends Controller {
     this.newStatus = status;
     this.toggleUserStateModal();
   }
+
+  @action async purgeCache() {
+    this.isPurgingCache = true;
+    try {
+      const response = await fetch(`${BASE_URL}/cache`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        credentials: 'include',
+      });
+      if (response.ok) {
+        const data = await response.json();
+        this.cacheTriggeredPending--;
+        this.toast.success(data.message, '', toastNotificationTimeoutOptions);
+      } else {
+        this.toast.error(
+          'Something went wrong.',
+          '',
+          toastNotificationTimeoutOptions
+        );
+      }
+    } catch (error) {
+      console.error('Error : ', error);
+      this.toast.error(
+        'Something went wrong.',
+        '',
+        toastNotificationTimeoutOptions
+      );
+    } finally {
+      this.isPurgingCache = false;
+    }
+  }
 }

app/styles/app.css

@@ -20,6 +20,7 @@
 @import 'progress-bar.css';
 @import 'mobile.css';
 @import 'components/mobile-dialog.css';
+@import 'self-clear-cache.css';
 
 html,
 body {
@@ -41,7 +42,7 @@ body {
 .main-container {
   margin: 0;
   padding: 0;
-  flex: 100%;            
+  flex: 100%;
   display: flex;
   flex-direction: column;
 }

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/templates/index.hbs

@@ -1,8 +1,15 @@
-<div class="greeting">
+<div class='greeting'>
   <h1>Welcome to my site!</h1>
 </div>
-<UserStatus 
-  @status={{this.status}} 
+<SelfClearCache
+  @totalTimes={{this.cacheTriggeredPending}}
+  @onClearCache={{this.purgeCache}}
+  @isPurgingCache={{this.isPurgingCache}}
+  @time={{this.lastUpdatedCacheRequest}}
+  @dev={{this.isDevMode}}
+/>
+<UserStatus
+  @status={{this.status}}
   @changeStatus={{this.changeStatus}}
   @isStatusUpdating={{this.isStatusUpdating}}
   @updateStatus={{this.updateStatus}}

tests/integration/components/self-clear-cache-test.js

@@ -0,0 +1,36 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | self-clear-cache', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('should render the component with relevant details', async function (assert) {
+    this.setProperties({
+      purgeCache: () => {},
+      cacheTriggeredPending: 3,
+      isDevMode: true,
+      isPurgingCache: false,
+      lastUpdatedCacheRequest: '24 November, 1:23 PM IST',
+    });
+
+    await render(hbs`
+        <SelfClearCache
+          @totalTimes={{this.cacheTriggeredPending}}
+          @onClearCache={{this.purgeCache}}
+          @isPurgingCache={{this.isPurgingCache}}
+          @dev={{this.isDevMode}}
+          @time={{this.lastUpdatedCacheRequest}}
+        />
+    `);
+
+    assert
+      .dom('[data-test-pending-requests]')
+      .hasText(`3 / 3 requests remaining for today`);
+    assert.dom('[data-test-btn-clear-cache]').hasText('Clear Cache');
+    assert
+      .dom('[data-test-last-time]')
+      .hasText('Last Request: 24 November, 1:23 PM IST');
+  });
+});