generated from Real-Dev-Squad/website-template
-
Notifications
You must be signed in to change notification settings - Fork 90
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added component for updating user-status (#162)
* 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 * 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
- Loading branch information
1 parent
7266ca6
commit ca665e1
Showing
9 changed files
with
26,722 additions
and
33 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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', | ||
}, | ||
]; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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'); | ||
} | ||
}; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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}} | ||
/> |
Oops, something went wrong.