forked from hexlet-codebattle/codebattle
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added user statistic popover hexlet-codebattle#437
- Loading branch information
Showing
14 changed files
with
188 additions
and
96 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
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,12 +1,11 @@ | ||
import React, { Component } from 'react'; | ||
import React from 'react'; | ||
import ReactLoading from 'react-loading'; | ||
|
||
export default class Messages extends Component { | ||
render() { | ||
return ( | ||
<div className="d-flex my-0 py-1 justify-content-center" > | ||
<ReactLoading type="spin" color="#6c757d" height={50} width={50} /> | ||
</div> | ||
); | ||
} | ||
} | ||
export default ({ small }) => { | ||
const size = small ? 30 : 50; | ||
return ( | ||
<div className="d-flex my-0 py-1 justify-content-center"> | ||
<ReactLoading type="spin" color="#6c757d" height={size} width={size} /> | ||
</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,23 @@ | ||
import React from 'react'; | ||
import Loading from './Loading'; | ||
|
||
const UserStats = ({ stats }) => { | ||
if (stats) { | ||
return ( | ||
<div> | ||
Won: | ||
<b className="text-success">{stats.won}</b> | ||
<br /> | ||
Lost: | ||
<b className="text-danger">{stats.lost}</b> | ||
<br /> | ||
Gave up: | ||
<b className="text-warning">{stats.gave_up}</b> | ||
</div> | ||
); | ||
} | ||
|
||
return <Loading small />; | ||
}; | ||
|
||
export default UserStats; |
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
7 changes: 3 additions & 4 deletions
7
services/app/assets/js/widgets/containers/LeftEditorToolbar.jsx
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,38 @@ | ||
import { connect } from 'react-redux'; | ||
import React from 'react'; | ||
import { OverlayTrigger, Popover } from 'react-bootstrap'; | ||
import UserName from '../components/UserName'; | ||
import UserStats from '../components/UserStats'; | ||
import { getUsersStats } from '../selectors'; | ||
import { loadUserStats } from '../middlewares/Users'; | ||
|
||
const UserInfo = ({ dispatch, user, usersStats }) => { | ||
const userStats = usersStats[user.id]; | ||
const statsPopover = ( | ||
<Popover title="Stats"> | ||
<UserStats stats={userStats} /> | ||
</Popover> | ||
); | ||
|
||
const onEnter = () => (userStats ? null : loadUserStats(dispatch)(user)); | ||
|
||
return ( | ||
<OverlayTrigger | ||
trigger={['hover', 'focus']} | ||
placement="left" | ||
overlay={statsPopover} | ||
onEnter={onEnter} | ||
shouldUpdatePosition | ||
> | ||
<div> | ||
<UserName user={user} /> | ||
</div> | ||
</OverlayTrigger> | ||
); | ||
}; | ||
|
||
const mapStateToProps = state => ({ | ||
usersStats: getUsersStats(state), | ||
}); | ||
|
||
export default connect(mapStateToProps)(UserInfo); |
Oops, something went wrong.