{"size": 1727, "ext": "js", "max_stars_repo_path": "components/discussion/post/PostControlPanel.js", "max_stars_repo_name": "rjmags1/disc", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "components/discussion/post/PostControlPanel.js", "max_issues_repo_name": "rjmags1/disc", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "components/discussion/post/PostControlPanel.js", "max_forks_repo_name": "rjmags1/disc", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 46.6756756757, "max_line_length": 82, "alphanum_fraction": 0.6768963521}
import { useContext } from 'react'
import { useUser } from '../../../lib/hooks'
import { PostContext } from '../../../pages/[courseId]/discussion'
import DeleteButton from './controlPanelButtons/DeleteButton'
import EndorseButton from './controlPanelButtons/EndorseButton'
import LikeButton from './controlPanelButtons/LikeButton'
import StarButton from './controlPanelButtons/StarButton'
import WatchButton from './controlPanelButtons/WatchButton'
import EditButton from './controlPanelButtons/EditButton'
import { SMALL_MEDIA_BREAKPOINT } from '../../../lib/layout'

function PostControlPanel({ editPost, toggleMobilePostDisplay }) {
    const { currentPost } = useContext(PostContext)

    const { user } = useUser()
    const userId = user.user_id
    const userIsAuthor = userId === currentPost.authorId
    const canEndorse = user.is_admin || user.is_staff || user.is_instructor
    const canDelete = userIsAuthor || user.is_admin 

    return (
        <section data-testid="post-control-panel-container" 
            className="w-full flex flex-wrap sm:flex-nowrap gap-2 h-[60px]" 
                style={ window.innerWidth < SMALL_MEDIA_BREAKPOINT ?
                    { marginBottom: '5%' } : {}}>
            <LikeButton liked={ currentPost.liked } />
            <WatchButton watched={ currentPost.watched }/>
            { userIsAuthor && <EditButton editPost={ editPost } /> }
            <StarButton starred={ currentPost.starred } />
            { canEndorse && <EndorseButton endorsed={ currentPost.endorsed } /> }
            { canDelete && !currentPost.deleted && 
            <DeleteButton toggleMobilePostDisplay={ toggleMobilePostDisplay } /> }
        </section>
    )
}

export default PostControlPanel