68 lines
2.1 KiB
JavaScript
68 lines
2.1 KiB
JavaScript
import React, { useContext } from 'react';
|
|
|
|
import capitalize from 'lodash/capitalize';
|
|
import { Link } from 'react-router-dom';
|
|
|
|
import { Routes } from '../../../data/constants';
|
|
import DiscussionContext from '../../common/context';
|
|
import { discussionsPath } from '../../utils';
|
|
import LearnerAvatar from './LearnerAvatar';
|
|
import LearnerFooter from './LearnerFooter';
|
|
import learnerShape from './proptypes';
|
|
|
|
const LearnerCard = ({ learner }) => {
|
|
const {
|
|
username, threads, inactiveFlags, activeFlags, responses, replies,
|
|
} = learner;
|
|
const { enableInContextSidebar, learnerUsername, courseId } = useContext(DiscussionContext);
|
|
const linkUrl = discussionsPath(Routes.LEARNERS.POSTS, {
|
|
0: enableInContextSidebar ? 'in-context' : undefined,
|
|
learnerUsername: learner.username,
|
|
courseId,
|
|
})();
|
|
|
|
return (
|
|
<Link
|
|
className="discussion-post p-0 text-decoration-none text-gray-900 border-bottom border-light-400"
|
|
to={linkUrl}
|
|
>
|
|
<div
|
|
className="d-flex flex-row flex-fill mw-100 py-3 px-4 border-primary-500"
|
|
style={username === learnerUsername ? {
|
|
borderRightWidth: '4px',
|
|
borderRightStyle: 'solid',
|
|
} : null}
|
|
>
|
|
<LearnerAvatar username={username} />
|
|
<div className="d-flex flex-column flex-fill" style={{ minWidth: 0 }}>
|
|
<div className="d-flex flex-column justify-content-start mw-100 flex-fill">
|
|
<div className="d-flex align-items-center flex-fill">
|
|
<div
|
|
className="text-truncate font-weight-500 text-primary-500 font-style"
|
|
>
|
|
{capitalize(username)}
|
|
</div>
|
|
</div>
|
|
{threads !== null && (
|
|
<LearnerFooter
|
|
inactiveFlags={inactiveFlags}
|
|
activeFlags={activeFlags}
|
|
threads={threads}
|
|
responses={responses}
|
|
replies={replies}
|
|
username={username}
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
);
|
|
};
|
|
|
|
LearnerCard.propTypes = {
|
|
learner: learnerShape.isRequired,
|
|
};
|
|
|
|
export default React.memo(LearnerCard);
|