From f12c36fc4b00af8f48f963acfaecf4e3f98486f8 Mon Sep 17 00:00:00 2001
From: Jeff Sieu <jeffsy00@gmail.com>
Date: Sun, 6 Nov 2022 15:04:41 +0800
Subject: [PATCH] [questions][ui] redesign question page

---
 .../questions/AnswerCommentListItem.tsx       |   2 +-
 .../card/question/BaseQuestionCard.tsx        |   9 +-
 .../card/question/FullQuestionCard.tsx        |   1 +
 .../[questionId]/[questionSlug]/index.tsx     | 190 ++++++++++--------
 4 files changed, 110 insertions(+), 92 deletions(-)

diff --git a/apps/portal/src/components/questions/AnswerCommentListItem.tsx b/apps/portal/src/components/questions/AnswerCommentListItem.tsx
index c65a379f..a51cd291 100644
--- a/apps/portal/src/components/questions/AnswerCommentListItem.tsx
+++ b/apps/portal/src/components/questions/AnswerCommentListItem.tsx
@@ -25,7 +25,7 @@ export default function AnswerCommentListItem({
     useAnswerCommentVote(answerCommentId);
 
   return (
-    <div className="flex gap-4 border bg-white p-2 ">
+    <div className="flex gap-4 rounded-md border bg-white p-2">
       <VotingButtons
         size="sm"
         upvoteCount={upvoteCount}
diff --git a/apps/portal/src/components/questions/card/question/BaseQuestionCard.tsx b/apps/portal/src/components/questions/card/question/BaseQuestionCard.tsx
index ee3b0630..f9a7c615 100644
--- a/apps/portal/src/components/questions/card/question/BaseQuestionCard.tsx
+++ b/apps/portal/src/components/questions/card/question/BaseQuestionCard.tsx
@@ -116,6 +116,7 @@ export type BaseQuestionCardProps = ActionButtonProps &
   ReceivedStatisticsProps &
   UpvoteProps & {
     content: string;
+    hideCard?: boolean;
     questionId: string;
     showHover?: boolean;
     timestamp: string | null;
@@ -140,6 +141,7 @@ export default function BaseQuestionCard({
   actionButtonLabel,
   onActionButtonClick,
   upvoteCount,
+  hideCard,
   timestamp,
   roles,
   countries,
@@ -152,7 +154,6 @@ export default function BaseQuestionCard({
 }: BaseQuestionCardProps) {
   const [showReceivedForm, setShowReceivedForm] = useState(false);
   const { handleDownvote, handleUpvote, vote } = useQuestionVote(questionId);
-  const hoverClass = showHover ? 'hover:bg-slate-50' : '';
 
   const locations = useMemo(() => {
     if (countries === undefined) {
@@ -274,7 +275,11 @@ export default function BaseQuestionCard({
 
   return (
     <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}
       {showDeleteButton && (
         <div className="fill-danger-700 invisible	self-center group-hover:visible">
diff --git a/apps/portal/src/components/questions/card/question/FullQuestionCard.tsx b/apps/portal/src/components/questions/card/question/FullQuestionCard.tsx
index 0ea147fe..2c02f1ba 100644
--- a/apps/portal/src/components/questions/card/question/FullQuestionCard.tsx
+++ b/apps/portal/src/components/questions/card/question/FullQuestionCard.tsx
@@ -28,6 +28,7 @@ export default function FullQuestionCard(props: QuestionOverviewCardProps) {
   return (
     <BaseQuestionCard
       {...props}
+      hideCard={true}
       showActionButton={false}
       showAddToList={true}
       showAggregateStatistics={true}
diff --git a/apps/portal/src/pages/questions/[questionId]/[questionSlug]/index.tsx b/apps/portal/src/pages/questions/[questionId]/[questionSlug]/index.tsx
index 499459dd..7e7e161a 100644
--- a/apps/portal/src/pages/questions/[questionId]/[questionSlug]/index.tsx
+++ b/apps/portal/src/pages/questions/[questionId]/[questionSlug]/index.tsx
@@ -195,100 +195,110 @@ export default function QuestionPage() {
         </div>
         <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">
-            <FullQuestionCard
-              {...question}
-              companies={relabeledAggregatedEncounters?.companyCounts ?? {}}
-              countries={relabeledAggregatedEncounters?.countryCounts ?? {}}
-              createEncounterButtonText="I received this too"
-              questionId={question.id}
-              receivedCount={undefined}
-              roles={relabeledAggregatedEncounters?.roleCounts ?? {}}
-              timestamp={question.seenAt.toLocaleDateString(undefined, {
-                month: 'short',
-                year: 'numeric',
-              })}
-              upvoteCount={question.numVotes}
-              onReceivedSubmit={async (data) => {
-                await addEncounterAsync({
-                  cityId: data.cityId,
-                  companyId: data.company,
-                  countryId: data.countryId,
-                  questionId: questionId as string,
-                  role: data.role,
-                  seenAt: data.seenAt,
-                  stateId: data.stateId,
-                });
-              }}
-            />
-            <div className="mx-2">
-              <Collapsible label={`View ${question.numComments} comment(s)`}>
-                <div className="mt-4 px-4">
-                  <form
-                    className="mb-2"
-                    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>
-                  {/* 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 className="flex flex-col gap-2 rounded-md border bg-white p-4">
+              <FullQuestionCard
+                {...question}
+                companies={relabeledAggregatedEncounters?.companyCounts ?? {}}
+                countries={relabeledAggregatedEncounters?.countryCounts ?? {}}
+                createEncounterButtonText="I received this too"
+                questionId={question.id}
+                receivedCount={undefined}
+                roles={relabeledAggregatedEncounters?.roleCounts ?? {}}
+                timestamp={question.seenAt.toLocaleDateString(undefined, {
+                  month: 'short',
+                  year: 'numeric',
+                })}
+                upvoteCount={question.numVotes}
+                onReceivedSubmit={async (data) => {
+                  await addEncounterAsync({
+                    cityId: data.cityId,
+                    companyId: data.company,
+                    countryId: data.countryId,
+                    questionId: questionId as string,
+                    role: data.role,
+                    seenAt: data.seenAt,
+                    stateId: data.stateId,
+                  });
+                }}
+              />
+              <div className="ml-16 mr-2">
+                <Collapsible
+                  defaultOpen={true}
+                  label={
+                    <div className="text-primary-700">{`${question.numComments} comment(s)`}</div>
+                  }>
+                  <div className="">
+                    <div className="flex flex-col gap-2 text-black">
+                      <div className="flex justify-end gap-2">
+                        <div className="flex items-end gap-2">
+                          <SortOptionsSelect
+                            sortOrderValue={commentSortOrder}
+                            sortTypeValue={commentSortType}
+                            onSortOrderChange={setCommentSortOrder}
+                            onSortTypeChange={setCommentSortType}
+                          />
+                        </div>
                       </div>
-                    </div>
-                    {(commentData?.pages ?? []).flatMap(
-                      ({ processedQuestionCommentsData: comments }) =>
-                        comments.map((comment) => (
-                          <AnswerCommentListItem
-                            key={comment.id}
-                            answerCommentId={comment.id}
-                            authorImageUrl={comment.userImage}
-                            authorName={comment.user}
-                            content={comment.content}
-                            createdAt={comment.createdAt}
-                            upvoteCount={comment.numVotes}
+                      {(commentData?.pages ?? []).flatMap(
+                        ({ processedQuestionCommentsData: comments }) =>
+                          comments.map((comment) => (
+                            <AnswerCommentListItem
+                              key={comment.id}
+                              answerCommentId={comment.id}
+                              authorImageUrl={comment.userImage}
+                              authorName={comment.user}
+                              content={comment.content}
+                              createdAt={comment.createdAt}
+                              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"
                           />
-                        )),
-                    )}
-                    <PaginationLoadMoreButton query={commentInfiniteQuery} />
+                        </div>
+                      </form>
+                    </div>
                   </div>
-                </div>
-              </Collapsible>
+                </Collapsible>
+              </div>
             </div>
             <HorizontalDivider />
             <form onSubmit={handleSubmit(handleSubmitAnswer)}>
-              <TextArea
-                {...answerRegister('answerContent', {
-                  minLength: 1,
-                  required: true,
-                })}
-                label="Contribute your answer"
-                required={true}
-                resize="vertical"
-                rows={5}
-              />
+              <div className="flex flex-col gap-2">
+                <p className="text-md font-semibold">Contribute your answer</p>
+                <TextArea
+                  {...answerRegister('answerContent', {
+                    minLength: 1,
+                    required: true,
+                  })}
+                  isLabelHidden={true}
+                  label="Contribute your answer"
+                  required={true}
+                  resize="vertical"
+                  rows={5}
+                />
+              </div>
               <div className="mt-3 mb-1 flex justify-between">
                 <Button
                   disabled={!isDirty || !isValid}
@@ -299,7 +309,9 @@ export default function QuestionPage() {
               </div>
             </form>
             <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">
                 <SortOptionsSelect
                   sortOrderValue={answerSortOrder}