[questions][ui] add page titles

3 years ago · 1361c5bfab
parent d5f024f872
commit 1361c5bfab
8 changed files with 423 additions and 363 deletions
--- a/apps/portal/src/components/questions/QuestionAggregateBadge.tsx
+++ b/apps/portal/src/components/questions/QuestionAggregateBadge.tsx
@ -67,7 +67,7 @@ export default function QuestionAggregateBadge({
                <li
                  key={key}
                  className="flex justify-between gap-x-4 rtl:flex-row-reverse">
-                  <span className="flex text-start font-bold">{key}</span>
+                  <span className="flex text-start font-semibold">{key}</span>
                  <span className="float-end">{value}</span>
                </li>
              ))}
--- a/apps/portal/src/pages/questions/[questionId]/[questionSlug]/answer/[answerId]/[answerSlug]/index.tsx
+++ b/apps/portal/src/pages/questions/[questionId]/[questionSlug]/answer/[answerId]/[answerSlug]/index.tsx
@ -1,3 +1,4 @@
+import Head from 'next/head';
 import { useRouter } from 'next/router';
 import { useForm } from 'react-hook-form';
 import { ArrowSmallLeftIcon } from '@heroicons/react/24/outline';
@ -7,6 +8,7 @@ import AnswerCommentListItem from '~/components/questions/AnswerCommentListItem'
 import FullAnswerCard from '~/components/questions/card/FullAnswerCard';
 import FullScreenSpinner from '~/components/questions/FullScreenSpinner';

+import { APP_TITLE } from '~/utils/questions/constants';
 import { useFormRegister } from '~/utils/questions/useFormRegister';
 import { trpc } from '~/utils/trpc';

@ -64,6 +66,12 @@ export default function QuestionPage() {
  }

  return (
+    <>
+      <Head>
+        <title>
+          {answer.content} - {APP_TITLE}
+        </title>
+      </Head>
      <div className="flex w-full flex-1 items-stretch pb-4">
        <div className="flex items-baseline gap-2 py-4 pl-4">
          <Button
@ -150,5 +158,6 @@ export default function QuestionPage() {
          </div>
        </div>
      </div>
+    </>
  );
 }
--- a/apps/portal/src/pages/questions/[questionId]/[questionSlug]/index.tsx
+++ b/apps/portal/src/pages/questions/[questionId]/[questionSlug]/index.tsx
@ -1,3 +1,4 @@
+import Head from 'next/head';
 import { useRouter } from 'next/router';
 import { useForm } from 'react-hook-form';
 import { ArrowSmallLeftIcon } from '@heroicons/react/24/outline';
@ -8,6 +9,7 @@ import FullQuestionCard from '~/components/questions/card/question/FullQuestionC
 import QuestionAnswerCard from '~/components/questions/card/QuestionAnswerCard';
 import FullScreenSpinner from '~/components/questions/FullScreenSpinner';

+import { APP_TITLE } from '~/utils/questions/constants';
 import createSlug from '~/utils/questions/createSlug';
 import { useFormRegister } from '~/utils/questions/useFormRegister';
 import { trpc } from '~/utils/trpc';
@ -112,6 +114,12 @@ export default function QuestionPage() {
  }

  return (
+    <>
+      <Head>
+        <title>
+          {question.content} - {APP_TITLE}
+        </title>
+      </Head>
      <div className="flex w-full flex-1 items-stretch pb-4">
        <div className="flex items-baseline gap-2 py-4 pl-4">
          <Button
@ -277,5 +285,6 @@ export default function QuestionPage() {
          </div>
        </div>
      </div>
+    </>
  );
 }
--- a/apps/portal/src/pages/questions/history.tsx
+++ b/apps/portal/src/pages/questions/history.tsx
@ -1,7 +1,16 @@
+import Head from 'next/head';
+
+import { APP_TITLE } from '~/utils/questions/constants';
+
 export default function HistoryPage() {
  return (
+    <>
+      <Head>
+        <title>History - {APP_TITLE}</title>
+      </Head>
      <div className="v-full flex w-full items-center justify-center">
        <h1 className="text-center text-4xl font-bold">History</h1>
      </div>
+    </>
  );
 }
--- a/apps/portal/src/pages/questions/index.tsx
+++ b/apps/portal/src/pages/questions/index.tsx
@ -1,4 +1,5 @@
 import { subMonths, subYears } from 'date-fns';
+import Head from 'next/head';
 import Router, { useRouter } from 'next/router';
 import { useEffect, useMemo, useState } from 'react';
 import { NoSymbolIcon } from '@heroicons/react/24/outline';
@ -13,6 +14,7 @@ import LandingComponent from '~/components/questions/LandingComponent';
 import QuestionSearchBar from '~/components/questions/QuestionSearchBar';

 import type { QuestionAge } from '~/utils/questions/constants';
+import { APP_TITLE } from '~/utils/questions/constants';
 import { ROLES } from '~/utils/questions/constants';
 import {
  COMPANIES,
@ -330,7 +332,12 @@ export default function QuestionsHomePage() {
    </div>
  );

-  return !hasLanded ? (
+  return (
+    <>
+      <Head>
+        <title>Home - {APP_TITLE}</title>
+      </Head>
+      {!hasLanded ? (
        <LandingComponent onLanded={handleLandingQuery}></LandingComponent>
      ) : (
        <main className="flex flex-1 flex-col items-stretch">
@ -384,10 +391,13 @@ export default function QuestionsHomePage() {
                        questionId={question.id}
                        receivedCount={question.receivedCount}
                        roles={{ [question.role]: 1 }}
-                    timestamp={question.seenAt.toLocaleDateString(undefined, {
+                        timestamp={question.seenAt.toLocaleDateString(
+                          undefined,
+                          {
                            month: 'short',
                            year: 'numeric',
-                    })}
+                          },
+                        )}
                        type={question.type}
                        upvoteCount={question.numVotes}
                      />
@ -419,5 +429,7 @@ export default function QuestionsHomePage() {
            </SlideOut>
          </div>
        </main>
+      )}
+    </>
  );
 }
--- a/apps/portal/src/pages/questions/lists.tsx
+++ b/apps/portal/src/pages/questions/lists.tsx
@ -1,3 +1,4 @@
+import Head from 'next/head';
 import { useState } from 'react';
 import { Menu } from '@headlessui/react';
 import {
@ -9,6 +10,7 @@ import {
 import QuestionListCard from '~/components/questions/card/question/QuestionListCard';

 import { Button } from '~/../../../packages/ui/dist';
+import { APP_TITLE } from '~/utils/questions/constants';
 import { SAMPLE_QUESTION } from '~/utils/questions/constants';
 import createSlug from '~/utils/questions/createSlug';

@ -103,6 +105,10 @@ export default function ListPage() {
    </>
  );
  return (
+    <>
+      <Head>
+        <title>My Lists - {APP_TITLE}</title>
+      </Head>
      <main className="flex flex-1 flex-col items-stretch">
        <div className="flex h-full flex-1">
          <aside className="w-[300px] overflow-y-auto border-l bg-white py-4 lg:block">
@ -141,10 +147,13 @@ export default function ListPage() {
                        questionId={question.id}
                        receivedCount={0}
                        roles={question.roles}
-                      timestamp={question.seenAt.toLocaleDateString(undefined, {
+                        timestamp={question.seenAt.toLocaleDateString(
+                          undefined,
+                          {
                            month: 'short',
                            year: 'numeric',
-                      })}
+                          },
+                        )}
                        type={question.type}
                        onDelete={() => {
                          // eslint-disable-next-line no-console
@ -165,5 +174,6 @@ export default function ListPage() {
          </section>
        </div>
      </main>
+    </>
  );
 }
--- a/apps/portal/src/pages/questions/my-questions.tsx
+++ b/apps/portal/src/pages/questions/my-questions.tsx
@ -1,7 +1,16 @@
+import Head from 'next/head';
+
+import { APP_TITLE } from '~/utils/questions/constants';
+
 export default function MyQuestionsPage() {
  return (
+    <>
+      <Head>
+        <title>My Questions - {APP_TITLE}</title>
+      </Head>
      <div className="v-full flex w-full items-center justify-center">
        <h1 className="text-center text-4xl font-bold">My Questions</h1>
      </div>
+    </>
  );
 }
--- a/apps/portal/src/utils/questions/constants.ts
+++ b/apps/portal/src/utils/questions/constants.ts
@ -2,6 +2,8 @@ import { QuestionsQuestionType } from '@prisma/client';

 import type { FilterChoices } from '~/components/questions/filter/FilterSection';

+export const APP_TITLE = 'Questions Bank';
+
 export const COMPANIES: FilterChoices = [
  {
    id: 'Google',