Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 | 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 6x 31x 31x 31x 31x 31x 31x 9x 31x | import { Card, CardContent, Typography } from "@material-ui/core"; import { Skeleton } from "@material-ui/lab"; import classNames from "classnames"; import Avatar from "components/Avatar"; import { useUser } from "features/userQueries/useUsers"; import { useTranslation } from "i18n"; import { COMMUNITIES } from "i18n/namespaces"; import Link from "next/link"; import { Discussion } from "proto/discussions_pb"; import { useMemo } from "react"; import { routeToDiscussion } from "routes"; import { timestamp2Date } from "utils/date"; import makeStyles from "utils/makeStyles"; import { timeAgo } from "utils/timeAgo"; import getContentSummary from "../getContentSummary"; const useStyles = makeStyles((theme) => ({ avatar: { height: "3rem", width: "3rem", }, cardContent: { display: "flex", "&&": { padding: theme.spacing(2), }, width: "100%", }, discussionSummary: { display: "flex", flexDirection: "column", flexGrow: 1, marginInlineStart: theme.spacing(2), }, commentsCount: { alignSelf: "flex-end", flexShrink: 0, color: theme.palette.primary.main, }, userLoading: { display: "inline-block", width: 80 }, surtitle: { marginBottom: theme.spacing(0.5) }, replies: { "&:first-child": { marginTop: theme.spacing(1) }, }, root: { "&:hover": { backgroundColor: theme.palette.grey[50], }, width: "100%", }, })); export const DISCUSSION_CARD_TEST_ID = "discussion-card"; export default function DiscussionCard({ discussion, className, }: { discussion: Discussion.AsObject; className?: string; }) { const { t } = useTranslation([COMMUNITIES]); const classes = useStyles(); const { data: creator } = useUser(discussion.creatorUserId); const date = discussion.created ? timestamp2Date(discussion.created) : undefined; const postedTime = date ? timeAgo(date) : null; const truncatedContent = useMemo( () => getContentSummary({ originalContent: discussion.content, maxLength: 300, }), [discussion.content] ); return ( <Card className={classNames(classes.root, className)} data-testid={DISCUSSION_CARD_TEST_ID} > <Link href={routeToDiscussion(discussion.discussionId, discussion.slug)}> <a> <CardContent className={classes.cardContent}> <Avatar user={creator} className={classes.avatar} isProfileLink={false} /> <div className={classes.discussionSummary}> <Typography variant="body2" component="p" className={classes.surtitle} > {creator ? ( t("communities:by_creator", { name: creator.name }) ) : ( <Skeleton className={classes.userLoading} /> )}{" "} {postedTime && `• ${postedTime}`} </Typography> <Typography variant="h2" component="h3"> {discussion.title} </Typography> <Typography variant="body1">{truncatedContent}</Typography> <Typography className={classes.commentsCount} variant="body1"> {t("communities:comments_count", { count: discussion.thread?.numResponses, })} </Typography> </div> </CardContent> </a> </Link> </Card> ); } |