Feature: updating user status (#183)

* add tests for new signup flow (#149) * Added Component test * Added Ember Addon * Added controller test * Removed extra fields * add update profile page form (#150) * added functionality to update profile info * disabled name fields * Removed "required" property from all fields * Renamed labels for some fields * Fixed 'yoe' issue to treat it as number * Fixed the redirection * Added link to upload component in profile page (#156) * Added link to uplaod component in profile page * Fix styling Co-authored-by: Prakash <you@example.com> * updating user status feature * Simplified the user status component logic * Fix for the failing test * Added a pointer on button and some spacing fixes. * updated package lock version * Added test to ensure return type from FormInput component #129 (#130) * Move tests for the new component from FormInput to InputField (#168) * chore: tests for new component input-field * Create InputField component for input field with type validation (#169) * feat: create new component InputField for input fields with type validation * chore: move from Input component to native html input and add styles * chore: remove validator, change em to rem, remove class repetition * styles: remove important rule and remove outline * Handled edge cases for user status * Fixed naming and handled a edge-case in handlebars * handled edge case - when user not logged in * removed non-required fields in UserStatusComponent * Added disabled attribute to user-status buttons * Added finally block * Fixed backticks * chore: resolve conflicts Co-authored-by: Lakshay Manchanda <45519620+lakshayman@users.noreply.github.com> Co-authored-by: Rohan Raj Gupta <78433013+rohan09-raj@users.noreply.github.com> Co-authored-by: Prakash Choudhary <34452139+prakashchoudhary07@users.noreply.github.com> Co-authored-by: Prakash <you@example.com> Co-authored-by: Rohan Raj Gupta <rajrohan1914@gmail.com> Co-authored-by: Ankush Dharkar <ankushdharkar@users.noreply.github.com>
Real-Dev-Squad · Dec 26, 2021 · 315abb6 · 315abb6
1 parent f78ef61
commit 315abb6
Show file tree

Hide file tree

Showing 9 changed files with 26,795 additions and 143 deletions.
diff --git a/app/components/user-status.hbs b/app/components/user-status.hbs
@@ -0,0 +1,22 @@
+<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>
+        </button>
+      {{/if}}
+      <button class="buttons--small" type="button" disabled={{@isStatusUpdating}} {{on "click" (fn @onUpdateStatus currentStatus.secondAvailableStatus )}}>
+        <span>{{currentStatus.secondStatusMessage}}</span>
+      </button>
+    {{/if}}
+  {{/each}}
+</div>
diff --git a/app/components/user-status.js b/app/components/user-status.js
@@ -0,0 +1,29 @@
+import Component from '@glimmer/component';
+export default class UserStatusComponent extends Component {
+  currentUserStatus = [
+    {
+      status: 'active',
+      message: 'I am doing a task',
+      class: 'buttons__idle',
+      firstAvailableStatus: 'idle',
+      firstStatusMessage: 'Change status to ‘Idle’',
+      secondAvailableStatus: 'ooo',
+      secondStatusMessage: 'Mark yourself as OOO',
+    },
+    {
+      status: 'idle',
+      message: 'I am Idle',
+      class: 'buttons__active',
+      firstAvailableStatus: 'active',
+      firstStatusMessage: 'Change status to ‘Active’',
+      secondAvailableStatus: 'ooo',
+      secondStatusMessage: 'Mark yourself as OOO',
+    },
+    {
+      status: 'ooo',
+      message: 'I am OOO',
+      secondAvailableStatus: 'active',
+      secondStatusMessage: 'Mark yourself as Active again',
+    },
+  ];
+}
diff --git a/app/controllers/index.js b/app/controllers/index.js
@@ -0,0 +1,35 @@
+import Controller from '@ember/controller';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+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 isStatusUpdating = false;
+
+  @action async updateStatus(status) {
+    this.isStatusUpdating = true;
+    try {
+      const response = await fetch(`${BASE_URL}/users/self`, {
+        method: 'PATCH',
+        body: JSON.stringify({
+          status,
+        }),
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        credentials: 'include',
+      });
+      if (response.ok) {
+        this.status = status;
+      }
+    } catch (error) {
+      console.error('Error : ', error);
+      alert('Something went wrong!');
+    } finally {
+      this.isStatusUpdating = false;
+    }
+  }
+}
diff --git a/app/routes/index.js b/app/routes/index.js
@@ -0,0 +1,27 @@
+import Route from '@ember/routing/route';
+import ENV from 'website-my/config/environment';
+
+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);
+      alert('Failed');
+    }
+  };
+}
diff --git a/app/routes/signup.js b/app/routes/signup.js
@@ -14,7 +14,7 @@ export default class SignupRoute extends Route {
         '_self'
       );
     }
-    if (response.status == 200 && !userData.incompleteUserDetails) {
+    if (response.status === 200 && !userData.incompleteUserDetails) {
       alert("You already have filled the up form. You'll now be redirected.");
       window.open('https://realdevsquad.com/goto', '_self');
     }

diff --git a/app/styles/app.css b/app/styles/app.css
@@ -6,6 +6,7 @@
 @import 'local-navbar.css';
 @import 'profile.css';
 @import 'get-started.css';
+@import 'user-status.css';
 @import 'components/input-field.css';
 
 html,
@@ -32,11 +33,11 @@ body {
 }
 
 .greeting {
-  height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 20px;
+  margin-top: 50px;
 }
 
 .footer {

diff --git a/app/styles/user-status.css b/app/styles/user-status.css
@@ -0,0 +1,46 @@
+.heading h2 {
+  color: #0034a5;
+  margin: 50px 0 40px;
+  font-size: 1.75rem;
+  text-align: center;
+}
+
+.buttons {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin: 20px 0;
+}
+
+.buttons__idle {
+  font-size: 1.25rem;
+  color: #e49504;
+  font-weight: 700;
+  border: 3px solid #e49504;
+  padding: 20px;
+  margin-bottom: 40px;
+  border-radius: 10px;
+  background: #fff;
+  cursor: pointer;
+}
+
+.buttons__active {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: #16a334;
+  border: 3px solid #16a334;
+  border-radius: 10px;
+  padding: 20px;
+  margin-bottom: 40px;
+  background: #fff;
+  cursor: pointer;
+}
+
+.buttons--small {
+  font-weight: 700;
+  color: #0034a5;
+  border: none;
+  background: #fff;
+  cursor: pointer;
+}
diff --git a/app/templates/index.hbs b/app/templates/index.hbs
@@ -1,3 +1,9 @@
 <div class="greeting">
   <h1>Welcome to my site!</h1>
-</div>
+</div>
+
+<UserStatus 
+  @status={{this.status}} 
+  @onUpdateStatus={{this.updateStatus}} 
+  @isStatusUpdating={{this.isStatusUpdating}}
+/>