Merge pull request #523 from Real-Dev-Squad/develop

dev to main sync

app/components/mobile-dialog.hbs

@@ -0,0 +1,12 @@
+{{#if @isDevEnv}}
+  {{#if @isMobileDevice}}
+    {{#if this.isDialogVisible}}
+    <dialog data-test-mobile-dialog  class="mobile-dialog">
+        Redirect to RDS App
+      <br/>
+      <button id="mobile-dialog__close-button" type="button" {{on 'click' (fn this.closeDialog)}} >Cancel</button>
+      <button id="mobile-dialog__open-button" type="button" {{on 'click' (fn this.openRDSApp)}}>Okay</button>
+    </dialog>
+    {{/if}}
+  {{/if}}
+{{/if}}

app/components/mobile-dialog.js

@@ -0,0 +1,52 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import ENV from 'website-my/config/environment';
+import { tracked } from '@glimmer/tracking';
+
+export default class MobileDialogComponent extends Component {
+  @tracked isDialogVisible = true;
+
+  @action
+  closeDialog() {
+    this.isDialogVisible = false;
+  }
+
+  @action
+  openRDSApp() {
+    this.openApp();
+  }
+
+  openApp() {
+    let isAppInstalled = false;
+    const appScheme = ENV.RDS_ANDROID_SCHEME;
+    const fallbackURL = ENV.ANDROID_GITHUB_URL;
+    const userAgent = navigator.userAgent || navigator.vendor || window.opera;
+    const MAXTIME = 1000;
+
+    if (/android/i.test(userAgent)) {
+      const startTime = Date.now();
+      const iframe = document.createElement('iframe');
+      iframe.style.display = 'none';
+      iframe.src = appScheme;
+      document.body.appendChild(iframe);
+      this.isDialogVisible = false;
+
+      window.addEventListener('blur', function () {
+        document.body.removeChild(iframe);
+
+        const timeTaken = Date.now() - startTime;
+        if (timeTaken <= MAXTIME) {
+          isAppInstalled = true;
+        }
+      });
+
+      setTimeout(function () {
+        if (!isAppInstalled) {
+          document.body.removeChild(iframe);
+          window.location.href = fallbackURL;
+        }
+        this.isDialogVisible = false;
+      }, 1000);
+    }
+  }
+}

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/application.js

@@ -1,18 +1,27 @@
 import Controller from '@ember/controller';
 import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
 import { MAIN_SITE_URL } from '../constants/url';
 import { action } from '@ember/object';
 import { GITHUB_URL } from '../constants/url';
 import ENV from 'website-my/config/environment';
 
 export default class ApplicationController extends Controller {
   @service router;
+  @service featureFlag;
+  @service toast;
+  @tracked isMobileDevice = this.detectMobileDevice();
+
   GITHUB_URL = GITHUB_URL;
   BASE_API_URL = ENV.BASE_API_URL;
   get canShowNavBar() {
     return this.router.currentRouteName != 'signup';
   }
 
+  get isDevMode() {
+    return this.featureFlag.isDevMode;
+  }
+
   @action async signOutHandler() {
     try {
       const response = await fetch(`${this.BASE_API_URL}/auth/signout`, {
@@ -25,6 +34,21 @@ export default class ApplicationController extends Controller {
       }
     } catch (err) {
       console.error('Error: ', err);
+      this.toast.error(
+        'Unable to sign out. Something went wrong. Please try again.'
+      );
+    }
+  }
+
+  detectMobileDevice() {
+    let regexp = /android|iphone|kindle|ipad/i;
+    let details = navigator.userAgent;
+    let isMobileDevice = regexp.test(details);
+
+    if (isMobileDevice) {
+      return true;
+    } else {
+      return false;
     }
   }
 }

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

@@ -19,6 +19,8 @@
 @import 'qrcode.css';
 @import 'progress-bar.css';
 @import 'mobile.css';
+@import 'components/mobile-dialog.css';
+@import 'self-clear-cache.css';
 
 html,
 body {

app/styles/components/mobile-dialog.css

@@ -0,0 +1,30 @@
+.mobile-dialog {
+    display: block;
+    border-radius: 4px;
+    padding: 0.5rem 1rem;
+    font-weight: 900;
+    margin: 0 auto;
+    font-size:large;
+    text-align: center;
+    background-color: var(--form--bg);
+    border: none;
+    box-shadow: 4px 8px 8px var(--mobile-dialog-box-shadow);
+    & button {
+      padding: 0.5rem 1rem;
+      margin: 1rem;
+      font-size:medium;
+      border: none;
+      border-radius: 4px;
+      color: var(--body-bg-color);
+      font-weight: 600;
+    }
+  }
+
+  #mobile-dialog__open-button {
+    background-color: var(--mobile-dialog--open-button);
+  }
+
+  #mobile-dialog__close-button {
+    background-color: var(--body-bg-color);
+    color: var(--landing-page--main-heading);
+  }

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/variables.css

@@ -181,4 +181,7 @@
   --profile-edit-btn-clr: #1e429f;
   --profile-disabled-btn-bg-clr: #e5efeb;
   --profile-disabled-btn-text-clr: #9ca3af;
+
+  --mobile-dialog-box-shadow: hsl(0deg 0% 0% / 0.38);
+  --mobile-dialog--open-button: #1d1283;
 }

app/templates/application.hbs

@@ -1,16 +1,20 @@
 {{page-title "My | Real Dev Squad"}}
 
+<MobileDialog
+@isDevEnv = {{this.isDevMode}}
+@isMobileDevice = {{this.isMobileDevice}}
+/>
 <Navbar
   @firstName={{@model.firstName}}
   @profilePictureURL={{@model.profilePictureURL}}
   @signOutHandler={{this.signOutHandler}}
 />
 
 <div class="main-container">
-  {{outlet}}
+    {{outlet}}
 </div>
 <footer class="footer">Contents of this website are deployed from this
-  <a href={{this.GITHUB_URL}} target="_blank" rel="noopener noreferrer">
-    open sourced repo
-  </a>
+    <a href={{this.GITHUB_URL}} target="_blank" rel="noopener noreferrer">
+      open sourced repo
+    </a>
 </footer>

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}}

config/environment.js

@@ -26,6 +26,9 @@ module.exports = function (environment) {
 
   ENV.BASE_API_URL = 'https://api.realdevsquad.com';
   ENV.MIXPANEL_TOKEN = process.env.MIXPANEL_TOKEN || 'DUMMY_TOKEN';
+  ENV.ANDROID_GITHUB_URL =
+    'https://play.google.com/store/apps/details?id=com.github.android';
+  ENV.RDS_ANDROID_SCHEME = 'app://realdevsquad.com';
 
   if (environment === 'development') {
     ENV.BASE_API_URL = 'http://localhost:3000';

tests/integration/components/mobile-dialog-test.js

@@ -0,0 +1,31 @@
+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 | mobile-dialog', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('Mobile-Dialog does not renders', async function (assert) {
+    this.setProperties({
+      isDevEnv: false,
+      isMobileDevice: false,
+    });
+    await render(hbs`<MobileDialog @dev={{this.dev}}/>`);
+
+    assert.dom('[data-test-mobile-dialog]').doesNotExist();
+  });
+
+  test('Mobile-Dialog should renders', async function (assert) {
+    this.setProperties({
+      isDevEnv: true,
+      isMobileDevice: true,
+    });
+
+    await render(
+      hbs`<MobileDialog @isDevEnv={{this.isDevEnv}} @isMobileDevice={{this.isMobileDevice}}  />`
+    );
+
+    assert.dom('[data-test-mobile-dialog]').exists();
+  });
+});