diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx
index 234e69b3..bd092c6c 100644
--- a/src/app/admin/page.tsx
+++ b/src/app/admin/page.tsx
@@ -2,9 +2,15 @@ import FancyRectangle from '@/components/FancyRectangle';
import Title from '@/components/Title';
import { db } from '@/db';
import { currentUser } from '@clerk/nextjs';
+import type { Metadata } from 'next';
import { notFound } from 'next/navigation';
import MemberForm from './MemberForm';
+export const metadata: Metadata = {
+ title: 'Admin Panel',
+ robots: { index: false, follow: false },
+};
+
const queryMembers = async () => {
const dbMembers = await db.query.memberTable.findMany({
columns: {
diff --git a/src/app/api/payment/route.ts b/src/app/api/payment/route.ts
index aac9da3c..2f000969 100644
--- a/src/app/api/payment/route.ts
+++ b/src/app/api/payment/route.ts
@@ -11,7 +11,6 @@ import { env } from '@/env.mjs';
import { redisClient } from '@/lib/redis';
import { squareClient } from '@/lib/square';
import { updateMemberExpiryDate } from '@/server/update-member-expiry-date';
-import { verifyMembershipPayment } from '@/server/verify-membership-payment';
import { currentUser } from '@clerk/nextjs';
import { eq } from 'drizzle-orm';
import type { CreatePaymentLinkRequest } from 'square';
@@ -115,14 +114,3 @@ export async function PUT(request: Request) {
}
return Response.json({ success: true });
}
-
-// Get membership payment status
-export async function GET() {
- const user = await currentUser();
- if (!user) {
- return new Response(null, { status: 401 });
- }
-
- const { paid } = await verifyMembershipPayment(user.id);
- return Response.json({ paid });
-}
diff --git a/src/app/api/user-existence/route.ts b/src/app/api/user-existence/route.ts
deleted file mode 100644
index 26a0a228..00000000
--- a/src/app/api/user-existence/route.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { checkUserExists } from '@/server/check-user-exists';
-import { currentUser } from '@clerk/nextjs';
-
-export async function GET() {
- const user = await currentUser();
- if (!user) {
- return new Response(null, { status: 401 });
- }
-
- const exists = await checkUserExists(user.id);
- return Response.json({ exists });
-}
diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index 01c4bdbc..ad4be49b 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -1,8 +1,13 @@
import Title from '@/components/Title';
+import type { Metadata } from 'next';
import Contact from './Contact';
import Form from './Form';
import Sponsorship from './Sponsorship';
+export const metadata: Metadata = {
+ title: 'Contact',
+};
+
export default function ContactPage() {
return (
diff --git a/src/app/events/page.tsx b/src/app/events/page.tsx
index 6e5d255a..2795476d 100644
--- a/src/app/events/page.tsx
+++ b/src/app/events/page.tsx
@@ -1,8 +1,13 @@
+import type { Metadata } from 'next';
import Image from 'next/image';
import Events from './Events';
import FridayNight from './FridayNight';
import Info from './Info';
+export const metadata: Metadata = {
+ title: 'Events',
+};
+
export default function EventsPage() {
return (
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 967ea949..c99d36dc 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -7,7 +7,10 @@ import { Archivo } from 'next/font/google';
export const metadata: Metadata = {
icons: '/favicon.ico',
- title: 'Computer Science Club',
+ title: {
+ template: '%s | Computer Science Club',
+ default: 'Computer Science Club',
+ },
description:
'The University of Adelaide Computer Science Club is a student-run club for those with an interest in computer science or computing in general.',
};
diff --git a/src/app/sponsors/page.tsx b/src/app/sponsors/page.tsx
index f13e25da..233ec244 100644
--- a/src/app/sponsors/page.tsx
+++ b/src/app/sponsors/page.tsx
@@ -3,6 +3,11 @@ import Duck from '@/components/Duck';
import Paragraph from '@/components/Paragraph';
import Title from '@/components/Title';
import { YEAR } from '@/data/sponsors';
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+ title: 'Sponsors',
+};
export default function SponsorsPage() {
return (
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
deleted file mode 100644
index ea3e8824..00000000
--- a/src/components/Header.tsx
+++ /dev/null
@@ -1,194 +0,0 @@
-'use client';
-
-import FancyRectangle from '@/components/FancyRectangle';
-import { BREAKPOINTS } from '@/constants/breakpoints';
-import { useMount } from '@/hooks/use-mount';
-import { fetcher } from '@/lib/fetcher';
-import { useUser } from '@clerk/nextjs';
-import Image from 'next/image';
-import Link from 'next/link';
-import { useState } from 'react';
-import { IoMdClose, IoMdMenu } from 'react-icons/io';
-import useSWR from 'swr';
-import Button from './Button';
-import UserButton from './UserButton';
-
-export default function Header() {
- const [isMenuOpen, setIsMenuOpen] = useState(false);
- const toggleMenu = () => {
- setIsMenuOpen(!isMenuOpen);
- };
- const closeMenu = () => {
- setIsMenuOpen(false);
- };
-
- const clerkUser = useUser();
- const checkUserExists = useSWR<{ exists: boolean }>(['user-existence'], fetcher.get.query, {
- isPaused: () => clerkUser.isLoaded && !clerkUser.isSignedIn,
- });
-
- const checkUserPaid = useSWR<{ paid: boolean }>(['payment'], fetcher.get.query, {
- isPaused: () => clerkUser.isLoaded && !clerkUser.isSignedIn,
- });
-
- const [isScrolled, setIsScrolled] = useState(false);
- useMount(() => {
- window.addEventListener('scroll', handleScroll);
- window.addEventListener('resize', handleResize);
-
- return () => {
- window.removeEventListener('scroll', handleScroll);
- window.removeEventListener('resize', handleResize);
- };
- });
- const handleResize = () => {
- if (window.innerWidth >= BREAKPOINTS.md) {
- setIsMenuOpen(false);
- }
- };
- const handleScroll = () => {
- const scrollPosition = window.scrollY;
- setIsScrolled(scrollPosition > 0);
- };
-
- const isLoading = !clerkUser.isLoaded || checkUserExists.isLoading;
- return (
-
-
-
-
-
-
-
-
-
-
- CS CLUB
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+ {userExists && }
+
+
+
+
+
+
+
+
+
+
+
+
+ {isMenuOpen && (
+ <>
+
+
+
+
+ {data.nextStep === 'signup' && (
+
+ Continue Signing Up
+
+ )}
+ {data.nextStep === 'payment' && (
+
+ Continue to payment
+
+ )}
+
+
+
+ )}
+
+
+ CS CLUB
+
+
+ );
+}
diff --git a/src/components/Header/components/ScrollShader.tsx b/src/components/Header/components/ScrollShader.tsx
new file mode 100644
index 00000000..463984fe
--- /dev/null
+++ b/src/components/Header/components/ScrollShader.tsx
@@ -0,0 +1,20 @@
+'use client';
+
+import { useState } from 'react';
+import { useEventListener } from 'usehooks-ts';
+
+export default function ScrollShader({ className }: { className?: string }) {
+ const [isScrolled, setIsScrolled] = useState(false);
+ useEventListener('scroll', () => {
+ const scrollPosition = window.scrollY;
+ setIsScrolled(scrollPosition > 0);
+ });
+
+ return (
+
+ );
+}
diff --git a/src/components/Header/components/SignInJoin.tsx b/src/components/Header/components/SignInJoin.tsx
new file mode 100644
index 00000000..51daa3f2
--- /dev/null
+++ b/src/components/Header/components/SignInJoin.tsx
@@ -0,0 +1,14 @@
+import Button from '../../Button';
+
+export default function SignInJoin() {
+ return (
+ <>
+
+
+
+ );
+}
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
new file mode 100644
index 00000000..5b96a22e
--- /dev/null
+++ b/src/components/Header/index.tsx
@@ -0,0 +1,43 @@
+import { checkUserExists } from '@/server/check-user-exists';
+import { verifyMembershipPayment } from '@/server/verify-membership-payment';
+import { currentUser } from '@clerk/nextjs';
+import HeaderClient from './HeaderClient';
+import HeaderMobileClient from './HeaderMobileClient';
+
+const getHeaderData = async () => {
+ const user = await currentUser();
+ if (!user) {
+ return { isSignedIn: false as const };
+ }
+
+ let nextStep: 'signup' | 'payment' | null = null;
+ const exists = await checkUserExists(user.id);
+ if (exists) {
+ const membershipPayment = await verifyMembershipPayment(user.id);
+ if (!membershipPayment.paid) {
+ nextStep = 'payment';
+ }
+ } else {
+ nextStep = 'signup';
+ }
+
+ return {
+ isSignedIn: true as const,
+ avatar: user.imageUrl,
+ isAdmin: (user.publicMetadata.isAdmin as boolean | undefined) ?? false,
+ nextStep,
+ isMember: nextStep === null,
+ };
+};
+export type HeaderData = Awaited>;
+
+export default async function Header() {
+ const headerData = await getHeaderData();
+
+ return (
+ <>
+
+
+
+ );
+}
diff --git a/src/components/UserButton.tsx b/src/components/UserButton.tsx
deleted file mode 100644
index e5c80281..00000000
--- a/src/components/UserButton.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import Button from '@/components/Button';
-import { env } from '@/env.mjs';
-import { useClerk, useUser } from '@clerk/clerk-react';
-import Image from 'next/image';
-import Link from 'next/link';
-import { useState } from 'react';
-import FancyRectangle from './FancyRectangle';
-
-export default function UserButton({
- userExists,
- userPaid,
-}: {
- userExists: boolean;
- userPaid: boolean;
-}) {
- const { user } = useUser();
- const [isPopupOpen, setPopupOpen] = useState(false);
- const { signOut } = useClerk();
-
- const handleButtonClick = () => {
- setPopupOpen(!isPopupOpen);
- };
-
- const handleSignOut = async () => {
- await signOut();
- };
-
- if (!user) return <>;
-
- return (
-
-
-
-
- {/* Popup menu */}
- {isPopupOpen && (
-
- {/* Only show settings if finished sign up and show drive link if membership paid */}
- {userExists && (
- <>
- {userPaid && (
-
- CS Club Drive
-
- )}
-
- Settings
-
- {user.publicMetadata.isAdmin && (
-
- Admin Panel
-
- )}
-
- )}
- {/* Sign Out */}
-
-
- )}
-