feat: UI for purging members cache

Real-Dev-Squad · Nov 24, 2023 · a5c4beb · a5c4beb
1 parent 08af887
commit a5c4beb
Show file tree

Hide file tree

Showing 6 changed files with 104 additions and 4 deletions.
diff --git a/app/components/self-clear-cache.hbs b/app/components/self-clear-cache.hbs
@@ -0,0 +1,18 @@
+{{#if @dev}}
+  <section class='cache'>
+    <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}}
diff --git a/app/constants/self-clear-cache.js b/app/constants/self-clear-cache.js
@@ -0,0 +1 @@
+export const MAX_CACHE_PURGE_COUNT = 3;
diff --git a/app/controllers/index.js b/app/controllers/index.js
@@ -5,20 +5,29 @@ 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 } from '../constants/self-clear-cache';
 
 const BASE_URL = ENV.BASE_API_URL;
 
 export default class IndexController extends Controller {
+  queryParams = ['dev'];
+  @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;
 
   @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 +77,34 @@ 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',
+      });
+      console.log(response);
+      if (response.ok) {
+        const data = await response.json();
+        this.cacheTriggeredPending--;
+        alert(data.message);
+      } else {
+        this.toast.error(
+          'Something went wrong.',
+          '',
+          toastNotificationTimeoutOptions
+        );
+      }
+    } catch (error) {
+      console.error('Error : ', error);
+      alert('Something went wrong!');
+    } finally {
+      this.isPurgingCache = false;
+    }
+  }
 }
diff --git a/app/styles/app.css b/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;
 }

diff --git a/app/styles/self-clear-cache.css b/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;
+}
diff --git a/app/templates/index.hbs b/app/templates/index.hbs
@@ -1,8 +1,14 @@
-<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}}
+  @dev={{this.isDevMode}}
+/>
+<UserStatus
+  @status={{this.status}}
   @changeStatus={{this.changeStatus}}
   @isStatusUpdating={{this.isStatusUpdating}}
   @updateStatus={{this.updateStatus}}