Adrienne / Show online offline status in advertiser page #6913
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
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
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,5 @@ | ||
| import OnlineStatusIcon from './online-status-icon'; | ||
| import OnlineStatusLabel from './online-status-label'; | ||
| import './online-status.scss'; | ||
|
|
||
| export { OnlineStatusIcon, OnlineStatusLabel }; |
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,26 @@ | ||
| import React from 'react'; | ||
| import classNames from 'classnames'; | ||
| import PropTypes from 'prop-types'; | ||
| import { observer } from 'mobx-react-lite'; | ||
|
|
||
| const OnlineStatusIcon = ({ is_online, size = '1em' }) => { | ||
| return ( | ||
| <div | ||
| className={classNames('online-status__icon', { | ||
| 'online-status__icon--offline': !is_online, | ||
| 'online-status__icon--online': !!is_online, | ||
| })} | ||
| style={{ | ||
| width: size, | ||
| height: size, | ||
| }} | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| OnlineStatusIcon.propTypes = { | ||
| is_online: PropTypes.oneOfType([PropTypes.number, PropTypes.bool]).isRequired, | ||
| size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), | ||
| }; | ||
|
|
||
| export default observer(OnlineStatusIcon); |
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,58 @@ | ||
| import React from 'react'; | ||
| import { Text } from '@deriv/components'; | ||
| import { getDiffDuration, isMobile, toMoment, epochToMoment } from '@deriv/shared'; | ||
| import { localize } from 'Components/i18next'; | ||
| import { observer } from 'mobx-react-lite'; | ||
| import PropTypes from 'prop-types'; | ||
|
|
||
| const OnlineStatusLabel = ({ is_online, last_online_time, size = isMobile() ? 'xxxs' : 'xs' }) => { | ||
| const last_online_label = () => { | ||
| if (!is_online) { | ||
| if (last_online_time) { | ||
| const start_time = epochToMoment(last_online_time).unix(); | ||
| const end_time = toMoment().unix(); | ||
|
|
||
| const diff = getDiffDuration(start_time, end_time); | ||
| const addPrural = duration => (duration !== 1 ? 's' : ''); | ||
nijil-deriv marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
|
||
| if (diff.months()) | ||
| return localize('Seen {{ duration }} month{{ prural }} ago', { | ||
| duration: diff.months(), | ||
| prural: addPrural(diff.months()), | ||
| }); | ||
| if (diff.days()) | ||
| return localize('Seen {{ duration }} day{{ prural }} ago', { | ||
| duration: diff.days(), | ||
| prural: addPrural(diff.days()), | ||
| }); | ||
| if (diff.hours()) | ||
| return localize('Seen {{ duration }} hour{{ prural }} ago', { | ||
| duration: diff.hours(), | ||
| prural: addPrural(diff.hours()), | ||
| }); | ||
| if (diff.minutes()) | ||
| return localize('Seen {{ duration }} minute{{ prural }} ago', { | ||
| duration: diff.minutes(), | ||
| prural: addPrural(diff.minutes()), | ||
| }); | ||
| } else { | ||
| return localize('Seen more than 6 months ago'); | ||
| } | ||
| } | ||
| return localize('Online'); | ||
| }; | ||
|
|
||
| return ( | ||
| <Text color='less-prominent' size={size}> | ||
| {last_online_label()} | ||
| </Text> | ||
| ); | ||
| }; | ||
|
|
||
| OnlineStatusLabel.propTypes = { | ||
| is_online: PropTypes.number.isRequired, | ||
| last_online_time: PropTypes.number, | ||
| size: PropTypes.string, | ||
| }; | ||
|
|
||
| export default observer(OnlineStatusLabel); | ||
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,20 @@ | ||
| .online-status { | ||
| &__icon { | ||
| width: 1rem; | ||
| height: 1rem; | ||
| margin: auto 0.5rem auto 0rem; | ||
| border-radius: 50%; | ||
|
|
||
| @include mobile { | ||
| width: 0.8rem; | ||
| height: 0.8rem; | ||
| } | ||
|
|
||
| &--online { | ||
| background: var(--text-profit-success); | ||
| } | ||
| &--offline { | ||
| background: var(--checkbox-disabled-grey); | ||
| } | ||
| } | ||
| } |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
So I found the cause of this issue:
this.advertiser_details_idin the advertiser page store is correctly pointing to the clicked advertiser ID, but when we navigate to our own adverts, we make a call top2p_advertiser_infowithsubscribe: 1and the id as our advertiser ID, but this returns an error from the websocket.This is because we are already subscribed to listen to our own advertiser details within general store, and thus the reason why the websocket is returning
AlreadySubscribederror (by omitting theidfield, we are essentially calling advertiser info on our own profile as per the API documentation):So, one of the ways I tried to use a single request was modifying
this.counterparty_advertiser_infointo usinggeneral_store.advertiser_infoif we are looking at our own adverts, but this defeats the purpose of having a counterparty advertiser info as an observable, since it could then contain your own advertiser info or the counterparty advertiser info. Since we are already subscribed to our ownp2p_advertiser_infoendpoint, I feel that we can just reuse our details withingeneral_store.advertiser_infowithout making unnecessary re-request to again get our personal advertiser info, since its already cached within general store. If there are any updates to our own advertiser info, the subscribed endpoint in general store should automatically already re-set our advertiser info throughgeneral_store.updateAdvertiserInfo:Thus the approach I can find at the moment without breaking other pages using
counterparty_advertiser_infois to just check within advertiser page, that is:general_store.advertiser_info, any subsequent updates to our advertiser info will be updated automatically since we are already subscribed to it in general store (and it would not be unsubscribed even if we leave our advertiser page and check on other user's advertiser info)advertiser_page_store.counterparty_advertiser_infoadvertiser_page_store.advertiser_details_id === general_store.advertiser_idIf this approach is not a good one, I could try to create a new computed value to return either
general_store.advertiser_infooradvertiser_page_store.counterparty_advertiser_info, but that is essentially the same approach as I am doing within advertiser page