Merge pull request #166 from ystv/int-199-set-event-title-bars-to-the…

…-event-name [INT-199] Add titles to pages to differentiate tabs
ystv · Oct 9, 2024 · d661f20 · d661f20
2 parents 424e4cb + 5b6063f
commit d661f20
Show file tree

Hide file tree

Showing 16 changed files with 140 additions and 36 deletions.
diff --git a/app/(authenticated)/admin/page.tsx b/app/(authenticated)/admin/page.tsx
@@ -1,22 +1,26 @@
+import { PageInfo } from "@/components/PageInfo";
 import { Button, Card, Stack } from "@mantine/core";
 import Link from "next/link";
 
 export const dynamic = "force-dynamic";
 
 export default function AdminPage() {
   return (
-    <Card>
-      <Stack>
-        <Link href={"/admin/users"}>
-          <Button variant="default">Users</Button>
-        </Link>
-        <Link href={"/admin/positions"}>
-          <Button variant="default">Crew Positions</Button>
-        </Link>
-        <Link href={"/admin/roles"}>
-          <Button variant="default">Roles</Button>
-        </Link>
-      </Stack>
-    </Card>
+    <>
+      <PageInfo title="Admin" />
+      <Card>
+        <Stack>
+          <Link href={"/admin/users"}>
+            <Button variant="default">Users</Button>
+          </Link>
+          <Link href={"/admin/positions"}>
+            <Button variant="default">Crew Positions</Button>
+          </Link>
+          <Link href={"/admin/roles"}>
+            <Button variant="default">Roles</Button>
+          </Link>
+        </Stack>
+      </Card>
+    </>
   );
 }
diff --git a/app/(authenticated)/admin/positions/page.tsx b/app/(authenticated)/admin/positions/page.tsx
@@ -4,6 +4,7 @@ import { searchParamsSchema } from "./schema";
 import { redirect } from "next/navigation";
 import { validateSearchParams } from "@/lib/searchParams/validate";
 import { getSearchParamsString } from "@/lib/searchParams/util";
+import { PageInfo } from "@/components/PageInfo";
 
 export const dynamic = "force-dynamic";
 
@@ -33,5 +34,10 @@ export default async function PositionPage({
     );
   }
 
-  return <PositionView initialPositions={initialPositionsData} />;
+  return (
+    <>
+      <PageInfo title="Positions" />
+      <PositionView initialPositions={initialPositionsData} />
+    </>
+  );
 }
diff --git a/app/(authenticated)/admin/roles/page.tsx b/app/(authenticated)/admin/roles/page.tsx
@@ -5,6 +5,7 @@ import { validateSearchParams } from "@/lib/searchParams/validate";
 import { getSearchParamsString } from "@/lib/searchParams/util";
 import { fetchRolesAction } from "./actions";
 import { Stack, Text } from "@mantine/core";
+import { PageInfo } from "@/components/PageInfo";
 
 export const dynamic = "force-dynamic";
 
@@ -43,5 +44,10 @@ export default async function PositionPage({
     );
   }
 
-  return <RoleView initialRoles={initialRolesData} />;
+  return (
+    <>
+      <PageInfo title="Roles" />
+      <RoleView initialRoles={initialRolesData} />
+    </>
+  );
 }
diff --git a/app/(authenticated)/admin/users/[userID]/page.tsx b/app/(authenticated)/admin/users/[userID]/page.tsx
@@ -7,6 +7,8 @@ import {
 } from "@/features/people";
 import { z } from "zod";
 import { AdminUserView } from "./AdminUserView";
+import { PageInfo } from "@/components/PageInfo";
+import { getUserName } from "@/components/UserHelpers";
 
 export default async function SingleUserPage({
   params,
@@ -30,12 +32,15 @@ export default async function SingleUserPage({
   const userAbsentRoles = getUserAbsentRoles({ user_id: user.user_id });
 
   return (
-    <AdminUserView
-      user={user}
-      giveUserRole={giveUserRole}
-      removeUserRole={removeUserRole}
-      editUserAction={editUserAdmin}
-      userAbsentRoles={userAbsentRoles}
-    />
+    <>
+      <PageInfo title={`User - ${getUserName(user)}`} />
+      <AdminUserView
+        user={user}
+        giveUserRole={giveUserRole}
+        removeUserRole={removeUserRole}
+        editUserAction={editUserAdmin}
+        userAbsentRoles={userAbsentRoles}
+      />
+    </>
   );
 }
diff --git a/app/(authenticated)/admin/users/page.tsx b/app/(authenticated)/admin/users/page.tsx
@@ -4,6 +4,7 @@ import { searchParamsSchema } from "./schema";
 import { redirect } from "next/navigation";
 import { validateSearchParams } from "@/lib/searchParams/validate";
 import { getSearchParamsString } from "@/lib/searchParams/util";
+import { PageInfo } from "@/components/PageInfo";
 
 export default async function PositionPage({
   searchParams,
@@ -31,5 +32,10 @@ export default async function PositionPage({
     );
   }
 
-  return <UserView initialUsers={initialUsersData} />;
+  return (
+    <>
+      <PageInfo title="Users" />
+      <UserView initialUsers={initialUsersData} />
+    </>
+  );
 }
diff --git a/app/(authenticated)/calendar/[eventID]/page.tsx b/app/(authenticated)/calendar/[eventID]/page.tsx
@@ -31,6 +31,7 @@ import SlackLoginButton from "@/components/slack/SlackLoginButton";
 import { CheckWithTechPromptContents } from "./CheckWithTech";
 import { C } from "@fullcalendar/core/internal-common";
 import dayjs from "dayjs";
+import { PageInfo } from "@/components/PageInfo";
 
 async function AttendeesView({
   event,
@@ -190,6 +191,7 @@ export default async function EventPage({
   }
   return (
     <>
+      <PageInfo title={event.name} />
       {event.is_cancelled ? (
         <Alert
           variant="light"

diff --git a/app/(authenticated)/calendar/discover/page.tsx b/app/(authenticated)/calendar/discover/page.tsx
@@ -1,6 +1,7 @@
 import { listVacantEvents } from "@/features/calendar/events";
 import { CrewPositionType, getAllCrewPositions } from "@/features/calendar";
 import { DiscoverView } from "@/app/(authenticated)/calendar/discover/DiscoverView";
+import { PageInfo } from "@/components/PageInfo";
 
 export default async function CalendarDiscoverPage({
   searchParams,
@@ -44,11 +45,14 @@ export default async function CalendarDiscoverPage({
   });
 
   return (
-    <DiscoverView
-      vacantRoles={vacantRoles}
-      crewPositions={crewPositions}
-      position={position}
-    />
+    <>
+      <PageInfo title="Discover Roles" />
+      <DiscoverView
+        vacantRoles={vacantRoles}
+        crewPositions={crewPositions}
+        position={position}
+      />
+    </>
   );
 }
 

diff --git a/app/(authenticated)/calendar/new/page.tsx b/app/(authenticated)/calendar/new/page.tsx
@@ -13,6 +13,7 @@ import { App } from "@slack/bolt";
 import { Channel } from "@slack/web-api/dist/response/ConversationsListResponse";
 import { env } from "@/lib/env";
 import { createEvent } from "./actions";
+import { PageInfo } from "@/components/PageInfo";
 
 async function getSlackChannels(): Promise<Channel[]> {
   var fetchedSlackChannels: Channel[] = [];
@@ -60,6 +61,7 @@ export default async function NewEventPage() {
 
   return (
     <div className="mx-auto max-w-xl">
+      <PageInfo title="New Event" />
       <h1 className="mb-4 mt-0 text-4xl font-bold">New Event</h1>
       <MembersProvider members={allMembers}>
         <SlackChannelsProvider slackChannels={publicSlackChannels}>

diff --git a/app/(authenticated)/feedback/page.tsx b/app/(authenticated)/feedback/page.tsx
@@ -1,11 +1,25 @@
 import { isSlackEnabled } from "@/lib/slack/slackApiConnection";
 import { doHandleUserReport } from "./actions";
 import { UserReportForm } from "./form";
+import { PageInfo } from "@/components/PageInfo";
+import { BackButton } from "@/components/BackButton";
 
-export default async function ReportPage() {
+export default async function ReportPage({
+  searchParams,
+}: {
+  searchParams: {
+    return_to?: string;
+  };
+}) {
   if (!isSlackEnabled) {
     return (
       <div>
+        <PageInfo title="Feedback" />
+        <BackButton
+          path={
+            searchParams.return_to && decodeURIComponent(searchParams.return_to)
+          }
+        />
         <h1>Not available</h1>
         <p>
           Unfortunately the slack integration isn&apos;t enabled for this site,
@@ -17,6 +31,12 @@ export default async function ReportPage() {
 
   return (
     <div>
+      <PageInfo title="Feedback" />
+      <BackButton
+        path={
+          searchParams.return_to && decodeURIComponent(searchParams.return_to)
+        }
+      />
       <h1>Report a problem or request a feature</h1>
       <p>
         We want to know how we can make the internal site better! Please let us

diff --git a/app/(authenticated)/quotes/page.tsx b/app/(authenticated)/quotes/page.tsx
@@ -3,6 +3,7 @@ import { requirePermission } from "@/lib/auth/server";
 import { AddQuote, QuoteView } from "./AddEditQuoteForm";
 import { Stack } from "@mantine/core";
 import { QuotesPagination } from "./pagination";
+import { PageInfo } from "@/components/PageInfo";
 
 export const dynamic = "force-dynamic";
 
@@ -20,6 +21,7 @@ export default async function QuotesPage(props: {
 
   return (
     <div>
+      <PageInfo title="Quotes Board" />
       <h1>Quotes</h1>
       <Stack>
         {total > 0 ? (

diff --git a/app/(authenticated)/user/me/page.tsx b/app/(authenticated)/user/me/page.tsx
@@ -13,13 +13,15 @@ import { hasWrapped } from "../../wrapped/util";
 import Link from "next/link";
 import { env } from "@/lib/env";
 import { SignoutButton } from "@/components/SignoutButton";
+import { PageInfo } from "@/components/PageInfo";
 
 export default async function UserPage() {
   const user = People.SecureUserModel.parse(await mustGetCurrentUser());
   const prefs = People.preferenceDefaults(user.preferences);
   const slackUser = user.identities.find((i) => i.provider === "slack");
   return (
     <div>
+      <PageInfo title="My Profile" />
       <Card withBorder>
         <Group>
           {user.avatar && (

diff --git a/app/(authenticated)/webcam/page.tsx b/app/(authenticated)/webcam/page.tsx
@@ -4,19 +4,23 @@ import { Center, Group, Loader, Stack } from "@mantine/core";
 import { Suspense } from "react";
 import { WebcamGrid } from "./WebcamGrid";
 import { addWebcam, editWebcam, removeWebcam } from "./actions";
+import { PageInfo } from "@/components/PageInfo";
 
 export const dynamic = "force-dynamic";
 
 export default function WebcamPage() {
   const webcamFeeds = fetchWebcamFeeds();
 
   return (
-    <Center>
-      <Stack w={"100%"}>
-        <Suspense fallback={<Loader />}>
-          <WebcamGrid webcams={webcamFeeds} />
-        </Suspense>
-      </Stack>
-    </Center>
+    <>
+      <PageInfo title="Webcams" />
+      <Center>
+        <Stack w={"100%"}>
+          <Suspense fallback={<Loader />}>
+            <WebcamGrid webcams={webcamFeeds} />
+          </Suspense>
+        </Stack>
+      </Center>
+    </>
   );
 }
diff --git a/app/(authenticated)/wrapped/page.tsx b/app/(authenticated)/wrapped/page.tsx
@@ -2,6 +2,7 @@ import { mustGetCurrentUser } from "@/lib/auth/server";
 import { notFound } from "next/navigation";
 import { createHash } from "node:crypto";
 import { hasWrapped } from "./util";
+import { PageInfo } from "@/components/PageInfo";
 
 export default async function WrappedPage({
   searchParams,
@@ -24,6 +25,7 @@ export default async function WrappedPage({
   const fileURL = `https://cdn.ystv.co.uk/wrapped2024/${emailHash}.mp4`;
   return (
     <div>
+      <PageInfo title="YSTV Wrapped" />
       <video
         src={fileURL}
         controls

diff --git a/app/login/page.tsx b/app/login/page.tsx
@@ -7,6 +7,7 @@ import { isSlackEnabled } from "@/lib/slack/slackApiConnection";
 import { Center, Stack } from "@mantine/core";
 import { env } from "@/lib/env";
 import { ensureNoActiveSession } from "@/lib/auth/server";
+import { PageInfo } from "@/components/PageInfo";
 
 export default async function GoogleSignInPage(props: {
   searchParams: { error?: string; redirect?: string };
@@ -17,6 +18,7 @@ export default async function GoogleSignInPage(props: {
 
   return (
     <div className="relative block h-full w-full">
+      <PageInfo title="Login" />
       <Image
         src={BG}
         alt=""

diff --git a/components/BackButton.tsx b/components/BackButton.tsx
@@ -0,0 +1,30 @@
+"use client";
+
+import { Button } from "@mantine/core";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+import { FaChevronLeft } from "react-icons/fa";
+
+export function BackButton(props: { path?: string }) {
+  const router = useRouter();
+
+  useEffect(() => {
+    if (props.path) router.prefetch(props.path);
+  });
+
+  return (
+    <Button
+      onClick={() => {
+        if (props.path) {
+          router.push(props.path);
+        } else {
+          router.back();
+        }
+      }}
+      leftSection={<FaChevronLeft />}
+      variant="subtle"
+    >
+      Back
+    </Button>
+  );
+}
diff --git a/components/PageInfo.tsx b/components/PageInfo.tsx
@@ -0,0 +1,7 @@
+"use client";
+
+export function PageInfo(props: { title?: string }) {
+  return (
+    <title>{`${props.title ? props.title + " | " : ""}YSTV Calendar`}</title>
+  );
+}