filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-10-27 06:50:34 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #513 from filecoin-project/@akuokojnr/fix-status-bug

Browse Source 
fix status bug on peers tab
This commit is contained in:
CAKE 2021-02-09 09:58:58 -08:00 committed by GitHub
commit 93b82d77ab
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 27 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
components/core/Profile.js
View File

@ -239,9 +239,11 @@ function UserEntry({
message, message,
external, external,
url, url,
userOnline, checkStatus,
showStatusIndicator, showStatusIndicator,
}) { }) {
const isOnline = checkStatus({ id: user.id });
return ( return (
<div key={user.username} css={STYLES_USER_ENTRY}> <div key={user.username} css={STYLES_USER_ENTRY}>
{external ? ( {external ? (
@ -254,8 +256,8 @@ function UserEntry({
<div <div
css={STYLES_DIRECTORY_STATUS_INDICATOR} css={STYLES_DIRECTORY_STATUS_INDICATOR}
style={{ style={{
borderColor: userOnline && `${Constants.system.active}`, borderColor: isOnline && `${Constants.system.active}`,
backgroundColor: userOnline && `${Constants.system.active}`, backgroundColor: isOnline && `${Constants.system.active}`,
}} }}
/> />
)} )}
@ -274,8 +276,8 @@ function UserEntry({
<div <div
css={STYLES_DIRECTORY_STATUS_INDICATOR} css={STYLES_DIRECTORY_STATUS_INDICATOR}
style={{ style={{
borderColor: userOnline && `${Constants.system.active}`, borderColor: isOnline && `${Constants.system.active}`,
backgroundColor: userOnline && `${Constants.system.active}`, backgroundColor: isOnline && `${Constants.system.active}`,
}} }}
/> />
</div> </div>
@ -310,13 +312,11 @@ export default class Profile extends React.Component {
}).length, }).length,
fetched: false, fetched: false,
tab: this.props.tab, tab: this.props.tab,
isOnline: false,
}; };
componentDidMount = () => { componentDidMount = () => {
this._handleUpdatePage(); this._handleUpdatePage();
this.filterByVisibility(); this.filterByVisibility();
this.checkStatus();
}; };
componentDidUpdate = (prevProps) => { componentDidUpdate = (prevProps) => {
@ -404,11 +404,9 @@ export default class Profile extends React.Component {
}); });
}; };
checkStatus = () => { checkStatus = ({ id }) => {
const activeUsers = this.props.activeUsers; const { activeUsers } = this.props;
const userId = this.props.data?.id; return activeUsers && activeUsers.includes(id);
this.setState({ isOnline: activeUsers && activeUsers.includes(userId) });
}; };
render() { render() {
@ -473,12 +471,13 @@ export default class Profile extends React.Component {
) : null} ) : null}
</div> </div>
); );
return ( return (
<UserEntry <UserEntry
key={relation.id} key={relation.id}
user={relation.user} user={relation.user}
button={button} button={button}
userOnline={this.state.isOnline} checkStatus={this.checkStatus}
showStatusIndicator={this.props.isAuthenticated} showStatusIndicator={this.props.isAuthenticated}
onClick={() => { onClick={() => {
this.props.onAction({ this.props.onAction({
@ -532,7 +531,7 @@ export default class Profile extends React.Component {
key={relation.id} key={relation.id}
user={relation.owner} user={relation.owner}
button={button} button={button}
userOnline={this.state.isOnline} checkStatus={this.checkStatus}
showStatusIndicator={this.props.isAuthenticated} showStatusIndicator={this.props.isAuthenticated}
onClick={() => { onClick={() => {
this.props.onAction({ this.props.onAction({
@ -581,8 +580,10 @@ export default class Profile extends React.Component {
<div <div
css={STYLES_STATUS_INDICATOR} css={STYLES_STATUS_INDICATOR}
style={{ style={{
borderColor: this.state.isOnline && `${Constants.system.active}`, borderColor:
backgroundColor: this.state.isOnline && `${Constants.system.active}`, this.checkStatus({ id: this.props.data?.id }) && `${Constants.system.active}`,
backgroundColor:
this.checkStatus({ id: this.props.data?.id }) && `${Constants.system.active}`,
}} }}
/> />
)} )}

24
scenes/SceneDirectory.js
View File

@ -112,7 +112,9 @@ const STYLES_NAME = css`
text-overflow: ellipsis; text-overflow: ellipsis;
`; `;
function UserEntry({ user, button, onClick, message, userOnline }) { function UserEntry({ user, button, onClick, message, checkStatus }) {
const isOnline = checkStatus({ id: user.id });
return ( return (
<div key={user.username} css={STYLES_USER_ENTRY}> <div key={user.username} css={STYLES_USER_ENTRY}>
<div css={STYLES_USER} onClick={onClick}> <div css={STYLES_USER} onClick={onClick}>
@ -120,8 +122,8 @@ function UserEntry({ user, button, onClick, message, userOnline }) {
<div <div
css={STYLES_STATUS_INDICATOR} css={STYLES_STATUS_INDICATOR}
style={{ style={{
borderColor: userOnline && `${Constants.system.active}`, borderColor: isOnline && `${Constants.system.active}`,
backgroundColor: userOnline && `${Constants.system.active}`, backgroundColor: isOnline && `${Constants.system.active}`,
}} }}
/> />
</div> </div>
@ -159,11 +161,6 @@ export default class SceneDirectory extends React.Component {
state = { state = {
copyValue: "", copyValue: "",
contextMenu: null, contextMenu: null,
isOnline: false,
};
componentDidMount = () => {
this.checkStatus();
}; };
_handleCopy = (e, value) => { _handleCopy = (e, value) => {
@ -196,11 +193,10 @@ export default class SceneDirectory extends React.Component {
}); });
}; };
checkStatus = () => { checkStatus = ({ id }) => {
const activeUsers = this.props.activeUsers; const { activeUsers } = this.props;
const userId = this.props.data?.id;
this.setState({ isOnline: activeUsers && activeUsers.includes(userId) }); return activeUsers && activeUsers.includes(id);
}; };
render() { render() {
@ -240,7 +236,7 @@ export default class SceneDirectory extends React.Component {
key={relation.id} key={relation.id}
user={relation.user} user={relation.user}
button={button} button={button}
userOnline={this.state.isOnline} checkStatus={this.checkStatus}
onClick={() => { onClick={() => {
this.props.onAction({ this.props.onAction({
type: "NAVIGATE", type: "NAVIGATE",
@ -289,7 +285,7 @@ export default class SceneDirectory extends React.Component {
key={relation.id} key={relation.id}
user={relation.owner} user={relation.owner}
button={button} button={button}
userOnline={this.state.isOnline} checkStatus={this.checkStatus}
onClick={() => { onClick={() => {
this.props.onAction({ this.props.onAction({
type: "NAVIGATE", type: "NAVIGATE",