From 02c21a4f8f314c443ed147b565695b7eb800898c Mon Sep 17 00:00:00 2001
From: Tanya Dixit <shanya.2018td@gmail.com>
Date: Tue, 13 Apr 2021 02:23:56 +0530
Subject: [PATCH 1/5] adds component for updating user status

---
 app/components/index-buttons.hbs |  3 +++
 app/components/index-buttons.js  | 23 +++++++++++++++++++++++
 app/templates/index.hbs          |  2 +-
 3 files changed, 27 insertions(+), 1 deletion(-)
 create mode 100644 app/components/index-buttons.hbs
 create mode 100644 app/components/index-buttons.js

diff --git a/app/components/index-buttons.hbs b/app/components/index-buttons.hbs
new file mode 100644
index 00000000..84cfce0e
--- /dev/null
+++ b/app/components/index-buttons.hbs
@@ -0,0 +1,3 @@
+<button type="button" {{on "click" (fn this.updateStatus 'idle')}}>I am idle</button>
+<button type="button" {{on "click" (fn this.updateStatus 'active')}}>Change status to 'Doing a task'</button>
+<button type="button" {{on "click" (fn this.updateStatus 'ooo')}}>Mark yourself as OOO</button>
diff --git a/app/components/index-buttons.js b/app/components/index-buttons.js
new file mode 100644
index 00000000..c5c0eb16
--- /dev/null
+++ b/app/components/index-buttons.js
@@ -0,0 +1,23 @@
+import Component from '@glimmer/component';
+import ENV from 'website-my/config/environment';
+
+const BASE_URL = ENV.BASE_API_URL;
+export default class IndexButtonsComponent extends Component {
+  async updateStatus(status) {
+    const newStatus = { [status]: true };
+    console.log(newStatus);
+    try {
+      const response = await fetch(`${BASE_URL}/users/self`, {
+        method: 'PATCH',
+        body: JSON.stringify(newStatus),
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        credentials: 'include',
+      });
+      console.log(response);
+    } catch (error) {
+      console.error('Error : ', error);
+    }
+  }
+}
diff --git a/app/templates/index.hbs b/app/templates/index.hbs
index cd66b627..c5d86375 100644
--- a/app/templates/index.hbs
+++ b/app/templates/index.hbs
@@ -1 +1 @@
-Index page works!
\ No newline at end of file
+<IndexButtons />
\ No newline at end of file

From 73ed782ae65b77da51de8c1651f1ae1d15e42d54 Mon Sep 17 00:00:00 2001
From: Tanya Dixit <shanya.2018td@gmail.com>
Date: Tue, 20 Apr 2021 21:17:20 +0530
Subject: [PATCH 2/5] [WIP] adds component for updating user status

---
 app/components/index-buttons.hbs | 23 ++++++++++++++---
 app/controllers/index.js         |  6 +++++
 app/routes/index.js              | 15 ++++++++++++
 app/styles/app.css               |  1 +
 app/styles/index-buttons.css     | 42 ++++++++++++++++++++++++++++++++
 app/templates/index.hbs          |  4 ++-
 6 files changed, 87 insertions(+), 4 deletions(-)
 create mode 100644 app/controllers/index.js
 create mode 100644 app/routes/index.js
 create mode 100644 app/styles/index-buttons.css

diff --git a/app/components/index-buttons.hbs b/app/components/index-buttons.hbs
index 84cfce0e..98f369f2 100644
--- a/app/components/index-buttons.hbs
+++ b/app/components/index-buttons.hbs
@@ -1,3 +1,20 @@
-<button type="button" {{on "click" (fn this.updateStatus 'idle')}}>I am idle</button>
-<button type="button" {{on "click" (fn this.updateStatus 'active')}}>Change status to 'Doing a task'</button>
-<button type="button" {{on "click" (fn this.updateStatus 'ooo')}}>Mark yourself as OOO</button>
+<div class="heading">
+  {{#if @status.active}}
+    <h2 data-test-status>I am doing a task</h2>
+  {{/if}}
+  {{#if @status.idle}}
+    <h2 data-test-status>I am idle</h2>
+  {{/if}} 
+  {{#if @status.ooo}}
+    <h2 data-test-status>I am OOO</h2>
+  {{/if}} 
+</div>
+<div class="buttons">
+  {{#if @status.active}}
+    <button class="idle" type="button" {{on "click" (fn this.updateStatus 'idle')}}><span data-test-button-text>Change status to ‘Idle’</span></button>
+  {{/if}}   
+  {{#if @status.idle}}
+    <button class="active" type="button" data-test-button {{on "click" (fn this.updateStatus 'active')}}><span data-test-button-text>Change status to ‘Doing a task’</span></button>
+  {{/if}}
+    <button class="ooo" type="button" {{on "click" (fn this.updateStatus 'ooo')}}><span>Mark yourself as OOO</span></button>
+</div>
diff --git a/app/controllers/index.js b/app/controllers/index.js
new file mode 100644
index 00000000..6ee84b47
--- /dev/null
+++ b/app/controllers/index.js
@@ -0,0 +1,6 @@
+import Controller from '@ember/controller';
+import { tracked } from '@glimmer/tracking';
+
+export default class IndexController extends Controller {
+  @tracked status = this.model;
+}
diff --git a/app/routes/index.js b/app/routes/index.js
new file mode 100644
index 00000000..98519d0f
--- /dev/null
+++ b/app/routes/index.js
@@ -0,0 +1,15 @@
+import Route from '@ember/routing/route';
+import ENV from 'website-my/config/environment';
+
+const API_BASE_URL = ENV.BASE_API_URL;
+
+export default class TasksRoute extends Route {
+  model = async () => {
+    const response = await fetch(`${API_BASE_URL}/users/self`, {
+      credentials: 'include',
+    });
+    const status = await response.json();
+
+    return status.status;
+  };
+}
diff --git a/app/styles/app.css b/app/styles/app.css
index 3c5d1308..db4e2e80 100644
--- a/app/styles/app.css
+++ b/app/styles/app.css
@@ -3,6 +3,7 @@
 @import "image-upload.css";
 @import "tasks.css";
 @import "sidebar.css";
+@import "index-buttons.css";
 
 body {
   font-family: "Roboto", sans-serif, serif;
diff --git a/app/styles/index-buttons.css b/app/styles/index-buttons.css
new file mode 100644
index 00000000..dd3113cd
--- /dev/null
+++ b/app/styles/index-buttons.css
@@ -0,0 +1,42 @@
+.heading h2{
+    color: #0034a5;
+    margin-bottom: 40px;
+    margin-top: 50px;
+}
+
+.buttons {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.buttons .idle {
+    font-size: 1rem;
+    color: #e49504;
+    font-weight: 600;
+    border: 1px solid #e49504;
+    padding: 20px;
+    margin-bottom: 40px;
+    border-radius: 10px;
+    background: #ffff;
+}
+
+.buttons .active {
+    font-size: 1rem;
+    font-weight: 600;
+    color: #16a334;
+    border: 1px solid #16a334;
+    border-radius: 10px;
+    padding: 20px;
+    margin-bottom: 40px;
+    background: #ffff;
+}
+
+.buttons .ooo {
+    font-size: 0.6rem;
+    font-weight: 600;
+    color: #0034a5;
+    border: none;
+    background: #ffff;
+}
\ No newline at end of file
diff --git a/app/templates/index.hbs b/app/templates/index.hbs
index c5d86375..c83786ee 100644
--- a/app/templates/index.hbs
+++ b/app/templates/index.hbs
@@ -1 +1,3 @@
-<IndexButtons />
\ No newline at end of file
+<IndexButtons 
+@status={{this.status}}
+/>
\ No newline at end of file

From f97cfabce0470e8c14058d48ff9602f215777248 Mon Sep 17 00:00:00 2001
From: Tanya Dixit <shanya.2018td@gmail.com>
Date: Fri, 30 Apr 2021 01:17:20 +0530
Subject: [PATCH 3/5] update-status feature

---
 app/components/index-buttons.hbs | 20 ++++++++++++--------
 app/components/index-buttons.js  | 23 -----------------------
 app/controllers/index.js         | 23 +++++++++++++++++++++++
 app/styles/index-buttons.css     |  4 +++-
 app/templates/index.hbs          |  1 +
 5 files changed, 39 insertions(+), 32 deletions(-)
 delete mode 100644 app/components/index-buttons.js

diff --git a/app/components/index-buttons.hbs b/app/components/index-buttons.hbs
index 98f369f2..f1089d31 100644
--- a/app/components/index-buttons.hbs
+++ b/app/components/index-buttons.hbs
@@ -1,20 +1,24 @@
 <div class="heading">
-  {{#if @status.active}}
+  {{#if (eq @status "active")}}
     <h2 data-test-status>I am doing a task</h2>
   {{/if}}
-  {{#if @status.idle}}
+  {{#if (eq @status "idle")}}
     <h2 data-test-status>I am idle</h2>
   {{/if}} 
-  {{#if @status.ooo}}
+  {{#if (eq @status "ooo")}}
     <h2 data-test-status>I am OOO</h2>
   {{/if}} 
 </div>
 <div class="buttons">
-  {{#if @status.active}}
-    <button class="idle" type="button" {{on "click" (fn this.updateStatus 'idle')}}><span data-test-button-text>Change status to ‘Idle’</span></button>
+  {{#if (eq @status "active")}}
+    <button class="idle" type="button" {{on "click" (fn @onUpdateStatus 'idle')}}><span data-test-button-text>Change status to ‘Idle’</span></button>
+    <button class="small" type="button" {{on "click" (fn @onUpdateStatus 'ooo')}}><span>Mark yourself as OOO</span></button>
   {{/if}}   
-  {{#if @status.idle}}
-    <button class="active" type="button" data-test-button {{on "click" (fn this.updateStatus 'active')}}><span data-test-button-text>Change status to ‘Doing a task’</span></button>
+  {{#if (eq @status "idle")}}
+    <button class="active" type="button" data-test-button {{on "click" (fn @onUpdateStatus 'active')}}><span data-test-button-text>Change status to ‘Doing a task’</span></button>
+    <button class="small" type="button" {{on "click" (fn @onUpdateStatus 'ooo')}}><span>Mark yourself as OOO</span></button>
+  {{/if}}
+  {{#if (eq @status "ooo")}}
+    <button class="small" type="button" {{on "click" (fn @onUpdateStatus 'active')}}><span>Mark yourself as Active again</span></button>
   {{/if}}
-    <button class="ooo" type="button" {{on "click" (fn this.updateStatus 'ooo')}}><span>Mark yourself as OOO</span></button>
 </div>
diff --git a/app/components/index-buttons.js b/app/components/index-buttons.js
deleted file mode 100644
index c5c0eb16..00000000
--- a/app/components/index-buttons.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import Component from '@glimmer/component';
-import ENV from 'website-my/config/environment';
-
-const BASE_URL = ENV.BASE_API_URL;
-export default class IndexButtonsComponent extends Component {
-  async updateStatus(status) {
-    const newStatus = { [status]: true };
-    console.log(newStatus);
-    try {
-      const response = await fetch(`${BASE_URL}/users/self`, {
-        method: 'PATCH',
-        body: JSON.stringify(newStatus),
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        credentials: 'include',
-      });
-      console.log(response);
-    } catch (error) {
-      console.error('Error : ', error);
-    }
-  }
-}
diff --git a/app/controllers/index.js b/app/controllers/index.js
index 6ee84b47..a73f18f6 100644
--- a/app/controllers/index.js
+++ b/app/controllers/index.js
@@ -1,6 +1,29 @@
 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;
+
+  @action async updateStatus(status) {
+    this.status = status;
+    try {
+      const response = await fetch(`${BASE_URL}/users/self`, {
+        method: 'PATCH',
+        body: JSON.stringify({
+          status: status,
+        }),
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        credentials: 'include',
+      });
+      console.log(response);
+    } catch (error) {
+      console.error('Error : ', error);
+    }
+  }
 }
diff --git a/app/styles/index-buttons.css b/app/styles/index-buttons.css
index dd3113cd..6be49c53 100644
--- a/app/styles/index-buttons.css
+++ b/app/styles/index-buttons.css
@@ -2,6 +2,7 @@
     color: #0034a5;
     margin-bottom: 40px;
     margin-top: 50px;
+    font-size: 1.5rem;
 }
 
 .buttons {
@@ -17,6 +18,7 @@
     font-weight: 600;
     border: 1px solid #e49504;
     padding: 20px;
+    width: 300px;
     margin-bottom: 40px;
     border-radius: 10px;
     background: #ffff;
@@ -33,7 +35,7 @@
     background: #ffff;
 }
 
-.buttons .ooo {
+.buttons .small {
     font-size: 0.6rem;
     font-weight: 600;
     color: #0034a5;
diff --git a/app/templates/index.hbs b/app/templates/index.hbs
index c83786ee..dc0c5b2b 100644
--- a/app/templates/index.hbs
+++ b/app/templates/index.hbs
@@ -1,3 +1,4 @@
 <IndexButtons 
 @status={{this.status}}
+@onUpdateStatus={{this.updateStatus}}
 />
\ No newline at end of file

From b35124e3a3f32c6e2f8fa092b7cc6e02db3ec506 Mon Sep 17 00:00:00 2001
From: Tanya Dixit <shanya.2018td@gmail.com>
Date: Sun, 6 Jun 2021 23:48:05 +0530
Subject: [PATCH 4/5] changes in variable naming

---
 app/components/index-buttons.hbs | 24 ------------------------
 app/components/user-status.hbs   | 24 ++++++++++++++++++++++++
 app/controllers/index.js         |  2 +-
 app/routes/index.js              |  4 ++--
 app/styles/index-buttons.css     |  8 ++++----
 app/templates/index.hbs          |  2 +-
 6 files changed, 32 insertions(+), 32 deletions(-)
 delete mode 100644 app/components/index-buttons.hbs
 create mode 100644 app/components/user-status.hbs

diff --git a/app/components/index-buttons.hbs b/app/components/index-buttons.hbs
deleted file mode 100644
index f1089d31..00000000
--- a/app/components/index-buttons.hbs
+++ /dev/null
@@ -1,24 +0,0 @@
-<div class="heading">
-  {{#if (eq @status "active")}}
-    <h2 data-test-status>I am doing a task</h2>
-  {{/if}}
-  {{#if (eq @status "idle")}}
-    <h2 data-test-status>I am idle</h2>
-  {{/if}} 
-  {{#if (eq @status "ooo")}}
-    <h2 data-test-status>I am OOO</h2>
-  {{/if}} 
-</div>
-<div class="buttons">
-  {{#if (eq @status "active")}}
-    <button class="idle" type="button" {{on "click" (fn @onUpdateStatus 'idle')}}><span data-test-button-text>Change status to ‘Idle’</span></button>
-    <button class="small" type="button" {{on "click" (fn @onUpdateStatus 'ooo')}}><span>Mark yourself as OOO</span></button>
-  {{/if}}   
-  {{#if (eq @status "idle")}}
-    <button class="active" type="button" data-test-button {{on "click" (fn @onUpdateStatus 'active')}}><span data-test-button-text>Change status to ‘Doing a task’</span></button>
-    <button class="small" type="button" {{on "click" (fn @onUpdateStatus 'ooo')}}><span>Mark yourself as OOO</span></button>
-  {{/if}}
-  {{#if (eq @status "ooo")}}
-    <button class="small" type="button" {{on "click" (fn @onUpdateStatus 'active')}}><span>Mark yourself as Active again</span></button>
-  {{/if}}
-</div>
diff --git a/app/components/user-status.hbs b/app/components/user-status.hbs
new file mode 100644
index 00000000..2f8f26ad
--- /dev/null
+++ b/app/components/user-status.hbs
@@ -0,0 +1,24 @@
+<div class="heading">
+  {{#if (eq @status "active")}}
+    <h2 data-test-status>I am doing a task</h2>
+  {{/if}}
+  {{#if (eq @status "idle")}}
+    <h2 data-test-status>I am idle</h2>
+  {{/if}} 
+  {{#if (eq @status "ooo")}}
+    <h2 data-test-status>I am OOO</h2>
+  {{/if}} 
+</div>
+<div class="buttons">
+  {{#if (eq @status "active")}}
+    <button class="buttons__idle" type="button" {{on "click" (fn @onUpdateStatus 'idle')}}><span data-test-button-text>Change status to ‘Idle’</span></button>
+    <button class="buttons--small" type="button" {{on "click" (fn @onUpdateStatus 'ooo')}}><span>Mark yourself as OOO</span></button>
+  {{/if}}   
+  {{#if (eq @status "idle")}}
+    <button class="buttons__active" type="button" data-test-button {{on "click" (fn @onUpdateStatus 'active')}}><span data-test-button-text>Change status to ‘Doing a task’</span></button>
+    <button class="buttons--small" type="button" {{on "click" (fn @onUpdateStatus 'ooo')}}><span>Mark yourself as OOO</span></button>
+  {{/if}}
+  {{#if (eq @status "ooo")}}
+    <button class="buttons--small" type="button" {{on "click" (fn @onUpdateStatus 'active')}}><span>Mark yourself as Active again</span></button>
+  {{/if}}
+</div>
diff --git a/app/controllers/index.js b/app/controllers/index.js
index a73f18f6..03e44bef 100644
--- a/app/controllers/index.js
+++ b/app/controllers/index.js
@@ -14,7 +14,7 @@ export default class IndexController extends Controller {
       const response = await fetch(`${BASE_URL}/users/self`, {
         method: 'PATCH',
         body: JSON.stringify({
-          status: status,
+          status,
         }),
         headers: {
           'Content-Type': 'application/json',
diff --git a/app/routes/index.js b/app/routes/index.js
index 98519d0f..d6b82a0f 100644
--- a/app/routes/index.js
+++ b/app/routes/index.js
@@ -8,8 +8,8 @@ export default class TasksRoute extends Route {
     const response = await fetch(`${API_BASE_URL}/users/self`, {
       credentials: 'include',
     });
-    const status = await response.json();
+    const userData = await response.json();
 
-    return status.status;
+    return userData.status;
   };
 }
diff --git a/app/styles/index-buttons.css b/app/styles/index-buttons.css
index 6be49c53..c7def037 100644
--- a/app/styles/index-buttons.css
+++ b/app/styles/index-buttons.css
@@ -12,19 +12,19 @@
     align-items: center;
 }
 
-.buttons .idle {
+.buttons__idle {
     font-size: 1rem;
     color: #e49504;
     font-weight: 600;
     border: 1px solid #e49504;
     padding: 20px;
-    width: 300px;
+    width: 18%;
     margin-bottom: 40px;
     border-radius: 10px;
     background: #ffff;
 }
 
-.buttons .active {
+.buttons__active {
     font-size: 1rem;
     font-weight: 600;
     color: #16a334;
@@ -35,7 +35,7 @@
     background: #ffff;
 }
 
-.buttons .small {
+.buttons--small {
     font-size: 0.6rem;
     font-weight: 600;
     color: #0034a5;
diff --git a/app/templates/index.hbs b/app/templates/index.hbs
index dc0c5b2b..5a9110da 100644
--- a/app/templates/index.hbs
+++ b/app/templates/index.hbs
@@ -1,4 +1,4 @@
-<IndexButtons 
+<UserStatus
 @status={{this.status}}
 @onUpdateStatus={{this.updateStatus}}
 />
\ No newline at end of file

From 01c568b9344b860d32b5183b613e3e5cfaf9d4c4 Mon Sep 17 00:00:00 2001
From: Tanya Dixit <shanya.2018td@gmail.com>
Date: Sat, 3 Jul 2021 11:47:51 +0530
Subject: [PATCH 5/5] updated tab size

---
 app/styles/index-buttons.css | 62 ++++++++++++++++++------------------
 app/templates/index.hbs      |  2 +-
 2 files changed, 32 insertions(+), 32 deletions(-)

diff --git a/app/styles/index-buttons.css b/app/styles/index-buttons.css
index c7def037..e1e996d0 100644
--- a/app/styles/index-buttons.css
+++ b/app/styles/index-buttons.css
@@ -1,44 +1,44 @@
 .heading h2{
-    color: #0034a5;
-    margin-bottom: 40px;
-    margin-top: 50px;
-    font-size: 1.5rem;
+  color: #0034a5;
+  margin-bottom: 40px;
+  margin-top: 50px;
+  font-size: 1.5rem;
 }
 
 .buttons {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 }
 
 .buttons__idle {
-    font-size: 1rem;
-    color: #e49504;
-    font-weight: 600;
-    border: 1px solid #e49504;
-    padding: 20px;
-    width: 18%;
-    margin-bottom: 40px;
-    border-radius: 10px;
-    background: #ffff;
+  font-size: 1rem;
+  color: #e49504;
+  font-weight: 600;
+  border: 1px solid #e49504;
+  padding: 20px;
+  width: 18%;
+  margin-bottom: 40px;
+  border-radius: 10px;
+  background: #ffff;
 }
 
 .buttons__active {
-    font-size: 1rem;
-    font-weight: 600;
-    color: #16a334;
-    border: 1px solid #16a334;
-    border-radius: 10px;
-    padding: 20px;
-    margin-bottom: 40px;
-    background: #ffff;
+  font-size: 1rem;
+  font-weight: 600;
+  color: #16a334;
+  border: 1px solid #16a334;
+  border-radius: 10px;
+  padding: 20px;
+  margin-bottom: 40px;
+  background: #ffff;
 }
 
 .buttons--small {
-    font-size: 0.6rem;
-    font-weight: 600;
-    color: #0034a5;
-    border: none;
-    background: #ffff;
-}
\ No newline at end of file
+  font-size: 0.6rem;
+  font-weight: 600;
+  color: #0034a5;
+  border: none;
+  background: #ffff;
+}
diff --git a/app/templates/index.hbs b/app/templates/index.hbs
index 5a9110da..3414789b 100644
--- a/app/templates/index.hbs
+++ b/app/templates/index.hbs
@@ -1,4 +1,4 @@
 <UserStatus
 @status={{this.status}}
 @onUpdateStatus={{this.updateStatus}}
-/>
\ No newline at end of file
+/>