msb-public
/
tech-interview-handbook
mirror of https://github.com/yangshun/tech-interview-handbook
2
1
Code Issues Projects Releases Wiki Activity

[questions][ui] redesign question page

Browse Source
pull/517/head
Jeff Sieu 3 years ago
parent 86fb943b23
commit f12c36fc4b
4 changed files with 110 additions and 92 deletions
Show Stats Download Patch File Download Diff File

2
apps/portal/src/components/questions/AnswerCommentListItem.tsx
Unescape View File

@ -25,7 +25,7 @@ export default function AnswerCommentListItem({
useAnswerCommentVote(answerCommentId); useAnswerCommentVote(answerCommentId);
return ( return (
<div className="flex gap-4 border bg-white p-2 "> <div className="flex gap-4 rounded-md border bg-white p-2">
<VotingButtons <VotingButtons
size="sm" size="sm"
upvoteCount={upvoteCount} upvoteCount={upvoteCount}

9
apps/portal/src/components/questions/card/question/BaseQuestionCard.tsx
Unescape View File

@ -116,6 +116,7 @@ export type BaseQuestionCardProps = ActionButtonProps &
ReceivedStatisticsProps & ReceivedStatisticsProps &
UpvoteProps & { UpvoteProps & {
content: string; content: string;
hideCard?: boolean;
questionId: string; questionId: string;
showHover?: boolean; showHover?: boolean;
timestamp: string | null; timestamp: string | null;
@ -140,6 +141,7 @@ export default function BaseQuestionCard({
actionButtonLabel, actionButtonLabel,
onActionButtonClick, onActionButtonClick,
upvoteCount, upvoteCount,
hideCard,
timestamp, timestamp,
roles, roles,
countries, countries,
@ -152,7 +154,6 @@ export default function BaseQuestionCard({
}: BaseQuestionCardProps) { }: BaseQuestionCardProps) {
const [showReceivedForm, setShowReceivedForm] = useState(false); const [showReceivedForm, setShowReceivedForm] = useState(false);
const { handleDownvote, handleUpvote, vote } = useQuestionVote(questionId); const { handleDownvote, handleUpvote, vote } = useQuestionVote(questionId);
const hoverClass = showHover ? 'hover:bg-slate-50' : '';
const locations = useMemo(() => { const locations = useMemo(() => {
if (countries === undefined) { if (countries === undefined) {
@ -274,7 +275,11 @@ export default function BaseQuestionCard({
return ( return (
<article <article
className={`group flex gap-4 rounded-md border border-slate-300 bg-white p-4 ${hoverClass}`}> className={clsx(
'group flex gap-4 border-slate-300',
showHover && 'hover:bg-slate-50',
!hideCard && 'rounded-md border bg-white p-4',
)}>
{cardContent} {cardContent}
{showDeleteButton && ( {showDeleteButton && (
<div className="fill-danger-700 invisible self-center group-hover:visible"> <div className="fill-danger-700 invisible self-center group-hover:visible">

1
apps/portal/src/components/questions/card/question/FullQuestionCard.tsx
Unescape View File

@ -28,6 +28,7 @@ export default function FullQuestionCard(props: QuestionOverviewCardProps) {
return ( return (
<BaseQuestionCard <BaseQuestionCard
{...props} {...props}
hideCard={true}
showActionButton={false} showActionButton={false}
showAddToList={true} showAddToList={true}
showAggregateStatistics={true} showAggregateStatistics={true}

190
apps/portal/src/pages/questions/[questionId]/[questionSlug]/index.tsx
Unescape View File

@ -195,100 +195,110 @@ export default function QuestionPage() {
</div> </div>
<div className="flex w-full justify-center overflow-y-auto py-4 px-5"> <div className="flex w-full justify-center overflow-y-auto py-4 px-5">
<div className="flex max-w-7xl flex-1 flex-col gap-2"> <div className="flex max-w-7xl flex-1 flex-col gap-2">
<FullQuestionCard <div className="flex flex-col gap-2 rounded-md border bg-white p-4">
{...question} <FullQuestionCard
companies={relabeledAggregatedEncounters?.companyCounts ?? {}} {...question}
countries={relabeledAggregatedEncounters?.countryCounts ?? {}} companies={relabeledAggregatedEncounters?.companyCounts ?? {}}
createEncounterButtonText="I received this too" countries={relabeledAggregatedEncounters?.countryCounts ?? {}}
questionId={question.id} createEncounterButtonText="I received this too"
receivedCount={undefined} questionId={question.id}
roles={relabeledAggregatedEncounters?.roleCounts ?? {}} receivedCount={undefined}
timestamp={question.seenAt.toLocaleDateString(undefined, { roles={relabeledAggregatedEncounters?.roleCounts ?? {}}
month: 'short', timestamp={question.seenAt.toLocaleDateString(undefined, {
year: 'numeric', month: 'short',
})} year: 'numeric',
upvoteCount={question.numVotes} })}
onReceivedSubmit={async (data) => { upvoteCount={question.numVotes}
await addEncounterAsync({ onReceivedSubmit={async (data) => {
cityId: data.cityId, await addEncounterAsync({
companyId: data.company, cityId: data.cityId,
countryId: data.countryId, companyId: data.company,
questionId: questionId as string, countryId: data.countryId,
role: data.role, questionId: questionId as string,
seenAt: data.seenAt, role: data.role,
stateId: data.stateId, seenAt: data.seenAt,
}); stateId: data.stateId,
}} });
/> }}
<div className="mx-2"> />
<Collapsible label={`View ${question.numComments} comment(s)`}> <div className="ml-16 mr-2">
<div className="mt-4 px-4"> <Collapsible
<form defaultOpen={true}
className="mb-2" label={
onSubmit={handleCommentSubmitClick(handleSubmitComment)}> <div className="text-primary-700">{`${question.numComments} comment(s)`}</div>
<TextArea }>
{...commentRegister('commentContent', { <div className="">
minLength: 1, <div className="flex flex-col gap-2 text-black">
required: true, <div className="flex justify-end gap-2">
})} <div className="flex items-end gap-2">
label="Post a comment" <SortOptionsSelect
required={true} sortOrderValue={commentSortOrder}
resize="vertical" sortTypeValue={commentSortType}
rows={2} onSortOrderChange={setCommentSortOrder}
/> onSortTypeChange={setCommentSortType}
<div className="my-3 flex justify-between"> />
<Button </div>
disabled={!isCommentDirty || !isCommentValid}
label="Post"
type="submit"
variant="primary"
/>
</div>
</form>
{/* TODO: Add button to load more */}
<div className="flex flex-col gap-2 text-black">
<div className="flex items-center justify-between gap-2">
<p className="text-lg">Comments</p>
<div className="flex items-end gap-2">
<SortOptionsSelect
sortOrderValue={commentSortOrder}
sortTypeValue={commentSortType}
onSortOrderChange={setCommentSortOrder}
onSortTypeChange={setCommentSortType}
/>
</div> </div>
</div> {(commentData?.pages ?? []).flatMap(
{(commentData?.pages ?? []).flatMap( ({ processedQuestionCommentsData: comments }) =>
({ processedQuestionCommentsData: comments }) => comments.map((comment) => (
comments.map((comment) => ( <AnswerCommentListItem
<AnswerCommentListItem key={comment.id}
key={comment.id} answerCommentId={comment.id}
answerCommentId={comment.id} authorImageUrl={comment.userImage}
authorImageUrl={comment.userImage} authorName={comment.user}
authorName={comment.user} content={comment.content}
content={comment.content} createdAt={comment.createdAt}
createdAt={comment.createdAt} upvoteCount={comment.numVotes}
upvoteCount={comment.numVotes} />
)),
)}
<PaginationLoadMoreButton query={commentInfiniteQuery} />
<form
className="mt-4"
onSubmit={handleCommentSubmitClick(
handleSubmitComment,
)}>
<TextArea
{...commentRegister('commentContent', {
minLength: 1,
required: true,
})}
label="Post a comment"
required={true}
resize="vertical"
rows={2}
/>
<div className="my-3 flex justify-between">
<Button
disabled={!isCommentDirty || !isCommentValid}
label="Post"
type="submit"
variant="primary"
/> />
)), </div>
)} </form>
<PaginationLoadMoreButton query={commentInfiniteQuery} /> </div>
</div> </div>
</div> </Collapsible>
</Collapsible> </div>
</div> </div>
<HorizontalDivider /> <HorizontalDivider />
<form onSubmit={handleSubmit(handleSubmitAnswer)}> <form onSubmit={handleSubmit(handleSubmitAnswer)}>
<TextArea <div className="flex flex-col gap-2">
{...answerRegister('answerContent', { <p className="text-md font-semibold">Contribute your answer</p>
minLength: 1, <TextArea
required: true, {...answerRegister('answerContent', {
})} minLength: 1,
label="Contribute your answer" required: true,
required={true} })}
resize="vertical" isLabelHidden={true}
rows={5} label="Contribute your answer"
/> required={true}
resize="vertical"
rows={5}
/>
</div>
<div className="mt-3 mb-1 flex justify-between"> <div className="mt-3 mb-1 flex justify-between">
<Button <Button
disabled={!isDirty || !isValid} disabled={!isDirty || !isValid}
@ -299,7 +309,9 @@ export default function QuestionPage() {
</div> </div>
</form> </form>
<div className="flex items-center justify-between gap-2"> <div className="flex items-center justify-between gap-2">
<p className="text-xl">{question.numAnswers} answers</p> <p className="text-xl font-semibold">
{question.numAnswers} answers
</p>
<div className="flex items-end gap-2"> <div className="flex items-end gap-2">
<SortOptionsSelect <SortOptionsSelect
sortOrderValue={answerSortOrder} sortOrderValue={answerSortOrder}

Write Preview
Loading…
Cancel
Save