From 749c9624e73e8bd0830fa7ace83147f4eca5a47d Mon Sep 17 00:00:00 2001 From: phoenixpereira Date: Mon, 19 Feb 2024 17:19:28 +1030 Subject: [PATCH 01/23] chore: remove extra margin on join us page --- src/app/(account)/join/page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/(account)/join/page.tsx b/src/app/(account)/join/page.tsx index e3a81d6a..c1f13650 100644 --- a/src/app/(account)/join/page.tsx +++ b/src/app/(account)/join/page.tsx @@ -24,7 +24,7 @@ export default function JoinUsPage() { }, [isSignedIn]); return ( -
+
Join Us
From fb920bec9aa4e434d88a43d3f2aa9602424db62e Mon Sep 17 00:00:00 2001 From: phoenixpereira Date: Thu, 22 Feb 2024 20:58:16 +1030 Subject: [PATCH 02/23] feat: make account boxes fit better on mobile --- src/app/(account)/forgot-password/page.tsx | 6 +- src/app/(account)/join/page.tsx | 8 +- src/app/(account)/join/steps/StepFour.tsx | 12 ++- src/app/(account)/join/steps/StepOne.tsx | 9 +- src/app/(account)/join/steps/StepThree.tsx | 6 +- src/app/(account)/join/steps/StepTwo.tsx | 8 +- src/app/(account)/settings/Settings.tsx | 2 +- src/app/(account)/settings/Sidebar.tsx | 21 ++-- src/app/(account)/settings/page.tsx | 10 +- .../settings/tabs/MembershipSettings.tsx | 8 +- src/app/(account)/signin/page.tsx | 98 ++++++++++--------- src/components/Button.tsx | 16 ++- 12 files changed, 118 insertions(+), 86 deletions(-) diff --git a/src/app/(account)/forgot-password/page.tsx b/src/app/(account)/forgot-password/page.tsx index 8add8171..776eb782 100644 --- a/src/app/(account)/forgot-password/page.tsx +++ b/src/app/(account)/forgot-password/page.tsx @@ -108,9 +108,9 @@ export default function ForgotPasswordPage() { }); return ( -
- -
+
+ +

Forgot Your Password?

{STEP_INSTRUCTIONS[step]}

{step === 1 && ( diff --git a/src/app/(account)/join/page.tsx b/src/app/(account)/join/page.tsx index c1f13650..8f994166 100644 --- a/src/app/(account)/join/page.tsx +++ b/src/app/(account)/join/page.tsx @@ -49,11 +49,11 @@ export default function JoinUsPage() {

-
- -
+
+ +

{heading.title}

-

{heading.description}

+

{heading.description}

diff --git a/src/app/(account)/join/steps/StepFour.tsx b/src/app/(account)/join/steps/StepFour.tsx index 8f74defa..03ec3c65 100644 --- a/src/app/(account)/join/steps/StepFour.tsx +++ b/src/app/(account)/join/steps/StepFour.tsx @@ -52,11 +52,17 @@ export default function StepFour() { type="checkbox" />
-
- -
diff --git a/src/app/(account)/join/steps/StepOne.tsx b/src/app/(account)/join/steps/StepOne.tsx index 3b01b4f6..e538b4eb 100644 --- a/src/app/(account)/join/steps/StepOne.tsx +++ b/src/app/(account)/join/steps/StepOne.tsx @@ -131,8 +131,9 @@ export default function StepOne() { return (
-
@@ -151,8 +152,8 @@ export default function StepOne() { control={form.control} name="password" /> -
-
diff --git a/src/app/(account)/join/steps/StepThree.tsx b/src/app/(account)/join/steps/StepThree.tsx index ad96a91b..720db817 100644 --- a/src/app/(account)/join/steps/StepThree.tsx +++ b/src/app/(account)/join/steps/StepThree.tsx @@ -102,11 +102,11 @@ export default function StepThree() { /> )} -
- -
diff --git a/src/app/(account)/join/steps/StepTwo.tsx b/src/app/(account)/join/steps/StepTwo.tsx index c99a1aae..99184af8 100644 --- a/src/app/(account)/join/steps/StepTwo.tsx +++ b/src/app/(account)/join/steps/StepTwo.tsx @@ -70,11 +70,9 @@ export default function StepTwo() { {form.watch('studentStatus') === 'At The University of Adelaide' && ( )} -
- -
+ ); } diff --git a/src/app/(account)/settings/Settings.tsx b/src/app/(account)/settings/Settings.tsx index ee14e335..b234e8c8 100644 --- a/src/app/(account)/settings/Settings.tsx +++ b/src/app/(account)/settings/Settings.tsx @@ -34,7 +34,7 @@ export default function Settings({ settingData }: { settingData: SettingData }) refresh(); }} /> -
+
diff --git a/src/app/(account)/settings/Sidebar.tsx b/src/app/(account)/settings/Sidebar.tsx index ed1ba8f6..8c1c3a64 100644 --- a/src/app/(account)/settings/Sidebar.tsx +++ b/src/app/(account)/settings/Sidebar.tsx @@ -29,15 +29,18 @@ interface SidebarProps { export default function Sidebar({ currentTab, onTabChange }: SidebarProps) { return ( -
- {TAB_NAMES.map((tab, i) => ( - - ))} +
+
+ {TAB_NAMES.map((tab, i) => ( + + ))} +
+
); } diff --git a/src/app/(account)/settings/page.tsx b/src/app/(account)/settings/page.tsx index f6e92e0c..5c35ff1c 100644 --- a/src/app/(account)/settings/page.tsx +++ b/src/app/(account)/settings/page.tsx @@ -15,13 +15,13 @@ export default async function SettingsPage() { const membershipPayment = await verifyMembershipPayment(user.id); return ( -
+
Settings
-
- -
+
+ +
{exists ? ( ) : ( @@ -36,6 +36,6 @@ export default async function SettingsPage() {
-
+
); } diff --git a/src/app/(account)/settings/tabs/MembershipSettings.tsx b/src/app/(account)/settings/tabs/MembershipSettings.tsx index dadb894f..5339ddfe 100644 --- a/src/app/(account)/settings/tabs/MembershipSettings.tsx +++ b/src/app/(account)/settings/tabs/MembershipSettings.tsx @@ -52,7 +52,13 @@ export default function MembershipSettings({

Pay Membership Fee

- diff --git a/src/app/(account)/signin/page.tsx b/src/app/(account)/signin/page.tsx index fb111125..f402b5e9 100644 --- a/src/app/(account)/signin/page.tsx +++ b/src/app/(account)/signin/page.tsx @@ -76,56 +76,64 @@ export default function SignInPage() { }; return ( -
- -
- {/* Heading */} -

Sign In

-

Sign into your account

+
+
+ +
+ {/* Heading */} +

Sign In

+

Sign into your account

- - -
-
-

or

-
-
-
- - - - Forgot password? - - - - {/* Sign-up option */} -
-

- Don't have an account yet?{' '} - - Join Us +

+
+

or

+
+
+
+ + + + Forgot password? -

+ + + + {/* Sign-up option */} +
+

+ Don't have an account yet?{' '} + + Join Us + +

+
-
- -
+ +
+
); } diff --git a/src/components/Button.tsx b/src/components/Button.tsx index 73c1f249..c6888544 100644 --- a/src/components/Button.tsx +++ b/src/components/Button.tsx @@ -11,19 +11,29 @@ interface ButtonProps { type?: 'button' | 'submit' | 'reset'; width?: string; loading?: boolean; + isFormButton?: boolean; } -const Button = ({ children, colour, href, onClick, width, type, loading }: ButtonProps) => { +const Button = ({ + children, + colour, + href, + onClick, + width, + type, + loading, + isFormButton, +}: ButtonProps) => { const isAnchor = !!href; const Component = isAnchor ? 'a' : 'button'; return ( - + {children} From ba98af1238ed4f5be77842cddd87c7cd13698419 Mon Sep 17 00:00:00 2001 From: phoenixpereira Date: Sat, 24 Feb 2024 11:26:42 +1030 Subject: [PATCH 03/23] refactor: simplify bool component props and rename isFormButton to size --- src/app/(account)/forgot-password/page.tsx | 2 +- src/app/(account)/join/page.tsx | 2 +- src/app/(account)/join/steps/StepFour.tsx | 4 ++-- src/app/(account)/join/steps/StepOne.tsx | 4 ++-- src/app/(account)/join/steps/StepThree.tsx | 4 ++-- src/app/(account)/join/steps/StepTwo.tsx | 2 +- src/app/(account)/settings/page.tsx | 2 +- .../(account)/settings/tabs/MembershipSettings.tsx | 2 +- src/app/(account)/signin/page.tsx | 11 +++-------- src/app/(home)/page.tsx | 2 +- src/app/about/FAQ.tsx | 2 +- src/app/about/page.tsx | 14 +++++++------- src/app/events/FridayNight.tsx | 2 +- src/app/events/Info.tsx | 2 +- src/components/Button.tsx | 8 ++++---- src/components/Header.tsx | 2 +- src/components/Link.tsx | 2 +- src/components/UserButton.tsx | 2 +- 18 files changed, 32 insertions(+), 37 deletions(-) diff --git a/src/app/(account)/forgot-password/page.tsx b/src/app/(account)/forgot-password/page.tsx index 776eb782..8ae61a10 100644 --- a/src/app/(account)/forgot-password/page.tsx +++ b/src/app/(account)/forgot-password/page.tsx @@ -109,7 +109,7 @@ export default function ForgotPasswordPage() { return (
- +

Forgot Your Password?

{STEP_INSTRUCTIONS[step]}

diff --git a/src/app/(account)/join/page.tsx b/src/app/(account)/join/page.tsx index 8f994166..bef58398 100644 --- a/src/app/(account)/join/page.tsx +++ b/src/app/(account)/join/page.tsx @@ -50,7 +50,7 @@ export default function JoinUsPage() {
- +

{heading.title}

{heading.description}

diff --git a/src/app/(account)/join/steps/StepFour.tsx b/src/app/(account)/join/steps/StepFour.tsx index 03ec3c65..f0b10523 100644 --- a/src/app/(account)/join/steps/StepFour.tsx +++ b/src/app/(account)/join/steps/StepFour.tsx @@ -53,14 +53,14 @@ export default function StepFour() { />
- @@ -153,7 +153,7 @@ export default function StepOne() { name="password" />
-
diff --git a/src/app/(account)/join/steps/StepThree.tsx b/src/app/(account)/join/steps/StepThree.tsx index 720db817..c8d5af24 100644 --- a/src/app/(account)/join/steps/StepThree.tsx +++ b/src/app/(account)/join/steps/StepThree.tsx @@ -103,10 +103,10 @@ export default function StepThree() { )}
- -
diff --git a/src/app/(account)/join/steps/StepTwo.tsx b/src/app/(account)/join/steps/StepTwo.tsx index 99184af8..47b24073 100644 --- a/src/app/(account)/join/steps/StepTwo.tsx +++ b/src/app/(account)/join/steps/StepTwo.tsx @@ -70,7 +70,7 @@ export default function StepTwo() { {form.watch('studentStatus') === 'At The University of Adelaide' && ( )} - diff --git a/src/app/(account)/settings/page.tsx b/src/app/(account)/settings/page.tsx index 5c35ff1c..07c73c32 100644 --- a/src/app/(account)/settings/page.tsx +++ b/src/app/(account)/settings/page.tsx @@ -20,7 +20,7 @@ export default async function SettingsPage() { Settings
- +
{exists ? ( diff --git a/src/app/(account)/settings/tabs/MembershipSettings.tsx b/src/app/(account)/settings/tabs/MembershipSettings.tsx index 5339ddfe..a6c2cc93 100644 --- a/src/app/(account)/settings/tabs/MembershipSettings.tsx +++ b/src/app/(account)/settings/tabs/MembershipSettings.tsx @@ -57,7 +57,7 @@ export default function MembershipSettings({ colour="orange" onClick={handlePayment} width="w-full" - isFormButton={true} + size="small" > Pay Online diff --git a/src/app/(account)/signin/page.tsx b/src/app/(account)/signin/page.tsx index f402b5e9..c8b5745b 100644 --- a/src/app/(account)/signin/page.tsx +++ b/src/app/(account)/signin/page.tsx @@ -78,7 +78,7 @@ export default function SignInPage() { return (
- +
{/* Heading */}

Sign In

@@ -88,7 +88,7 @@ export default function SignInPage() { onClick={handleGoogleSignIn} colour="white" width="w-full" - isFormButton={true} + size="small" > Continue with Google @@ -112,12 +112,7 @@ export default function SignInPage() { > Forgot password? - diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx index a11d102a..6dbd27c9 100644 --- a/src/app/(home)/page.tsx +++ b/src/app/(home)/page.tsx @@ -45,7 +45,7 @@ export default function HomePage() { {/* Right side */}
- +
{ }; return ( - +
- + {'Meetto
- +
  • @@ -156,7 +156,7 @@ export default function AboutUs() {

- + {'Quiz
+
  • Need to blow off some steam from a long week of studying?
    • diff --git a/src/app/events/Info.tsx b/src/app/events/Info.tsx index 89b75b15..aaecb161 100644 --- a/src/app/events/Info.tsx +++ b/src/app/events/Info.tsx @@ -15,7 +15,7 @@ export default function Info({ className }: { className?: string }) {

    For further information, take a look at some of the events below!

- +
diff --git a/src/components/Button.tsx b/src/components/Button.tsx index c6888544..74b353ef 100644 --- a/src/components/Button.tsx +++ b/src/components/Button.tsx @@ -11,7 +11,7 @@ interface ButtonProps { type?: 'button' | 'submit' | 'reset'; width?: string; loading?: boolean; - isFormButton?: boolean; + size?: 'base' | 'small'; } const Button = ({ @@ -22,18 +22,18 @@ const Button = ({ width, type, loading, - isFormButton, + size = 'base', }: ButtonProps) => { const isAnchor = !!href; const Component = isAnchor ? 'a' : 'button'; return ( - + {children} diff --git a/src/components/Header.tsx b/src/components/Header.tsx index ea3e8824..02c12014 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -92,7 +92,7 @@ export default function Header() { isMenuOpen ? 'right-8' : 'right-0' }`} > - +
{/* CTA part 2 */} -
+
-
+
{/* */} Rectangle Grid
-
-
- - - - - +
+
+
+ + + + + +
+
+
+
+ + Thinking about Joining? + +

+ New members are always welcome! +

+
+
{' '}
-
-
-
- - Thinking about Joining? - -

- New members are always welcome! -

+ +
+
+
-
{' '} +
- -
); diff --git a/src/components/Button.tsx b/src/components/Button.tsx index 74b353ef..1339ac22 100644 --- a/src/components/Button.tsx +++ b/src/components/Button.tsx @@ -12,6 +12,7 @@ interface ButtonProps { width?: string; loading?: boolean; size?: 'base' | 'small'; + font?: string; } const Button = ({ @@ -22,6 +23,7 @@ const Button = ({ width, type, loading, + font, size = 'base', }: ButtonProps) => { const isAnchor = !!href; @@ -33,7 +35,7 @@ const Button = ({ href={isAnchor ? href : undefined} onClick={onClick} type={isAnchor ? undefined : type} - className={`${width} ${BG_COLOURS[colour]} ${isAnchor ? 'hover:bg-yellow' : 'hover:enabled:bg-yellow'} whitespace-nowrap border-2 border-black ${size == 'base' ? 'px-16 text-lg' : 'px-4 text-sm'} py-4 font-bold transition-colors duration-300 disabled:cursor-wait disabled:grayscale md:px-2 md:py-1 md:text-base lg:px-6 lg:py-2`} + className={`${width} ${font ?? 'text-lg md:text-base'} ${BG_COLOURS[colour]} ${isAnchor ? 'hover:bg-yellow' : 'hover:enabled:bg-yellow'} whitespace-nowrap border-2 border-black ${size == 'base' ? 'px-16 text-lg' : 'px-4 text-sm'} py-4 font-bold transition-colors duration-300 disabled:cursor-wait disabled:grayscale md:px-2 md:py-1 md:text-base lg:px-6 lg:py-2`} disabled={loading} > {children} From f9391c88d2607a9a7f427f0d3aa6f298724d4d32 Mon Sep 17 00:00:00 2001 From: Ray <22254748+rayokamoto@users.noreply.github.com> Date: Mon, 19 Feb 2024 21:12:53 +1030 Subject: [PATCH 05/23] fix(home): Center sponsors on screen resize --- src/app/(home)/page.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx index d1b80b7c..61494b7f 100644 --- a/src/app/(home)/page.tsx +++ b/src/app/(home)/page.tsx @@ -190,7 +190,7 @@ export default function HomePage() {

Supported By

-
+

Industry's

@@ -206,10 +206,10 @@ export default function HomePage() { if (sponsors.length === 0) return; return ( -

+

{type} Sponsors

-
+
{sponsors.map(({ image, website, name }, i) => ( From 0ab633296df429cec30f1ab79ef747420c173fda Mon Sep 17 00:00:00 2001 From: Ray <22254748+rayokamoto@users.noreply.github.com> Date: Mon, 19 Feb 2024 21:38:11 +1030 Subject: [PATCH 06/23] feat(home): Use join us link instead of button --- src/app/(home)/page.tsx | 28 +++++++++++----------------- 1 file changed, 11 insertions(+), 17 deletions(-) diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx index 61494b7f..0e3873d1 100644 --- a/src/app/(home)/page.tsx +++ b/src/app/(home)/page.tsx @@ -6,6 +6,7 @@ import Title from '@/components/Title'; import { CAROUSEL_IMAGES } from '@/data/home'; import { SPONSOR_TYPES, getSponsors } from '@/data/sponsors'; import Image from 'next/image'; +import Link from 'next/link'; import { Fragment } from 'react'; export default function HomePage() { @@ -244,8 +245,8 @@ export default function HomePage() { />
-
-
+
+
@@ -259,23 +260,16 @@ export default function HomePage() { Thinking about Joining? -

- New members are always welcome! +

+ New members are always welcome.{' '} + + Join us today! +

-
{' '} -
- -
-
-
From 67fbe908d835220056994913a89cc3243609b830 Mon Sep 17 00:00:00 2001 From: Ray Okamoto <22254748+rayokamoto@users.noreply.github.com> Date: Mon, 19 Feb 2024 21:58:04 +1030 Subject: [PATCH 07/23] chore: spelling and grammar fixes (#86) --- src/app/(home)/page.tsx | 1 - src/app/about/page.tsx | 24 +++++++++++++----------- src/app/events/FridayNight.tsx | 4 ++-- src/app/sponsors/page.tsx | 4 ++-- 4 files changed, 17 insertions(+), 16 deletions(-) diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx index 0e3873d1..1882db93 100644 --- a/src/app/(home)/page.tsx +++ b/src/app/(home)/page.tsx @@ -1,4 +1,3 @@ -import Button from '@/components/Button'; import Duck from '@/components/Duck'; import FancyRectangle from '@/components/FancyRectangle'; import ImageCarousel from '@/components/ImageCarousel'; diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx index bba36939..8fb09046 100644 --- a/src/app/about/page.tsx +++ b/src/app/about/page.tsx @@ -64,7 +64,7 @@ export default function AboutUs() { The University of Adelaide Computer Science Club is a student-run club for those with an interest in computer science or computing in general. Although we're a university club, we welcome anyone - interested in computer science and/or socializing to join! + interested in computer science and/or socialising to join!

@@ -87,7 +87,7 @@ export default function AboutUs() {
  • The{' '} Duck Lounge{' '} - (located at EM110) + (located at Engineering and Maths EM110)
  • Frequent computer science talks on a diverse range of topics @@ -118,9 +118,9 @@ export default function AboutUs() { throughout the year
  • - Lest not forget, a{' '} + And let's not forget, a{' '} pub crawl{' '} - each semester to celebrate our studies + each year to celebrate our studies
    • @@ -147,7 +147,7 @@ export default function AboutUs() { width={30} height={30} /> -

    +

    The club runs various competitions throughout the year, offering members a chance to have fun and win prizes. These have included programming and video game competitions. The club also coordinates projects among club @@ -295,9 +295,9 @@ export default function AboutUs() {

    Members will have access to the Duck Lounge, a diverse - range of educational talks and workshops, social nights, - and a wide network of other computer science students - and graduates. + range of educational talks, workshops and resources, + social nights, and a wide network of other computer + science students and graduates.

    } @@ -309,7 +309,8 @@ export default function AboutUs() {

    Club membership costs $10 for the full year. You can pay for membership either online on our website, or in person at a - club event or the duck lounge. + club event or the Duck Lounge by speaking to one of the + committee members.

    } colour={'purple'} @@ -319,8 +320,9 @@ export default function AboutUs() { answer={

    The Duck Lounge is located at EM110 in the Engineering and - Mathematics Building. It has a study space with power - outlets and couches, along with a Nintendo Switch for games. + Maths building. It has a study space with power outlets and + couches, along with a Nintendo Switch for games. We also + sell snacks and drinks at affordable prices.

    } colour={'orange'} diff --git a/src/app/events/FridayNight.tsx b/src/app/events/FridayNight.tsx index 0eeb43b3..d900ab0c 100644 --- a/src/app/events/FridayNight.tsx +++ b/src/app/events/FridayNight.tsx @@ -58,14 +58,14 @@ function Details() {
  • Need to blow off some steam from a long week of studying?
  • Wanna hang out with like-minded students?
  • - Want to be the final boss on Super Smash Bro's? or would just like some + Want to beat the final boss on Super Smash Bros? Or do you just want some free food every now and then?

    • Come down to the{' '} Duck Lounge (EM110) in the - Engineering and Mathematics Building for some games! + Engineering and Maths building for some games!

    NOTE: Free food will be provided on the last Friday of every month. One free diff --git a/src/app/sponsors/page.tsx b/src/app/sponsors/page.tsx index b9fad1ed..3835f624 100644 --- a/src/app/sponsors/page.tsx +++ b/src/app/sponsors/page.tsx @@ -15,8 +15,8 @@ export default function SponsorsPage() {

    The University of Adelaide Computer Science Club are proudly supported by our{' '} generous sponsors. Their unwavering support make events and workshops - possible, fostering an environment for aspiring tech enthusiastic to excel within - our community. + possible, fostering an environment for aspiring tech enthusiasts to excel within our + community.
    From b5396ecc9343435fe359df8cb5b56db94cfe2224 Mon Sep 17 00:00:00 2001 From: Timothy Choi <101849050+tinnamchoi@users.noreply.github.com> Date: Tue, 20 Feb 2024 01:10:28 +1030 Subject: [PATCH 08/23] chore: more spelling and grammar fixes (#88) --- src/app/(account)/join/steps/StepTwo.tsx | 2 +- src/app/sponsors/page.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/(account)/join/steps/StepTwo.tsx b/src/app/(account)/join/steps/StepTwo.tsx index 47b24073..8331bca8 100644 --- a/src/app/(account)/join/steps/StepTwo.tsx +++ b/src/app/(account)/join/steps/StepTwo.tsx @@ -61,7 +61,7 @@ export default function StepTwo() {
    - The University of Adelaide Computer Science Club are proudly supported by our{' '} + The University of Adelaide Computer Science Club is proudly supported by our{' '} generous sponsors. Their unwavering support make events and workshops possible, fostering an environment for aspiring tech enthusiasts to excel within our community. From 7d51320364142e6395b398d0c2ae517b9f11a4fb Mon Sep 17 00:00:00 2001 From: Ray Okamoto <22254748+rayokamoto@users.noreply.github.com> Date: Tue, 20 Feb 2024 01:15:34 +1030 Subject: [PATCH 09/23] feat: add button loading to indicate request in progress (#89) --- src/app/(account)/forgot-password/page.tsx | 27 ++++++++++++++++++-- src/app/(account)/join/steps/StepOne.tsx | 29 ++++++++++++++++++++-- src/app/(account)/signin/page.tsx | 16 +++++++++++- 3 files changed, 67 insertions(+), 5 deletions(-) diff --git a/src/app/(account)/forgot-password/page.tsx b/src/app/(account)/forgot-password/page.tsx index 8ae61a10..827f43fb 100644 --- a/src/app/(account)/forgot-password/page.tsx +++ b/src/app/(account)/forgot-password/page.tsx @@ -45,8 +45,14 @@ export default function ForgotPasswordPage() { resolver: zodResolver(resetPasswordSchema), }); + const [sendCodeLoading, setSendCodeLoading] = useState(false); + const [resetPasswordLoading, setResetPasswordLoading] = useState(false); + const handleSendCode = sendCodeForm.handleSubmit(async ({ email }) => { if (!isLoaded) return; + + setSendCodeLoading(true); + try { const result = await signIn.create({ strategy: 'reset_password_email_code', @@ -70,10 +76,15 @@ export default function ForgotPasswordPage() { }, ]); } + + setSendCodeLoading(false); }); const handleResetPassword = resetPasswordForm.handleSubmit(async ({ code, password }) => { if (!isLoaded) return; + + setResetPasswordLoading(true); + try { const resetResult = await signIn.attemptFirstFactor({ strategy: 'reset_password_email_code', @@ -105,6 +116,8 @@ export default function ForgotPasswordPage() { }, ]); } + + setResetPasswordLoading(false); }); return ( @@ -120,7 +133,12 @@ export default function ForgotPasswordPage() { control={sendCodeForm.control} name="email" /> - @@ -145,7 +163,12 @@ export default function ForgotPasswordPage() { control={resetPasswordForm.control} name="code" /> - diff --git a/src/app/(account)/join/steps/StepOne.tsx b/src/app/(account)/join/steps/StepOne.tsx index 020c16f7..dac2928f 100644 --- a/src/app/(account)/join/steps/StepOne.tsx +++ b/src/app/(account)/join/steps/StepOne.tsx @@ -31,8 +31,13 @@ function VerifyEmail() { const { isLoaded, signUp, setActive } = useSignUp(); + const [verifyEmailLoading, setVerifyEmailLoading] = useState(false); + const handleVerify = form.handleSubmit(async ({ code }) => { if (!isLoaded) return; + + setVerifyEmailLoading(true); + try { const completeSignUp = await signUp.attemptEmailAddressVerification({ code, @@ -53,13 +58,20 @@ function VerifyEmail() { }, ]); } + + setVerifyEmailLoading(false); }); return (
    - @@ -88,8 +100,13 @@ export default function StepOne() { const { signUp, isLoaded } = useSignUp(); const [pendingVerification, setPendingVerification] = useState(false); + const [emailJoinLoading, setEmailJoinLoading] = useState(false); + const handleSignUp = form.handleSubmit(async (formData) => { if (!isLoaded) return; + + setEmailJoinLoading(true); + try { await signUp.create(formData); await signUp.prepareEmailAddressVerification({ strategy: 'email_code' }); @@ -111,6 +128,8 @@ export default function StepOne() { }, ]); } + + setEmailJoinLoading(false); }); const handleGoogleSignUp = async () => { @@ -153,7 +172,13 @@ export default function StepOne() { name="password" />
    -
    diff --git a/src/app/(account)/signin/page.tsx b/src/app/(account)/signin/page.tsx index c8b5745b..2866e001 100644 --- a/src/app/(account)/signin/page.tsx +++ b/src/app/(account)/signin/page.tsx @@ -6,6 +6,7 @@ import FancyRectangle from '@/components/FancyRectangle'; import { useSignIn } from '@clerk/clerk-react'; import { zodResolver } from '@hookform/resolvers/zod'; import Link from 'next/link'; +import { useState } from 'react'; import { useForm } from 'react-hook-form'; import { FcGoogle } from 'react-icons/fc'; import { z } from 'zod'; @@ -25,8 +26,13 @@ export default function SignInPage() { resolver: zodResolver(signInSchema), }); + const [signInLoading, setSignInLoading] = useState(false); + const handleSignIn = form.handleSubmit(async ({ email, password }) => { if (!isLoaded) return; + + setSignInLoading(true); + try { const result = await signIn.create({ identifier: email, @@ -59,6 +65,8 @@ export default function SignInPage() { }, ]); } + + setSignInLoading(false); }); const handleGoogleSignIn = async () => { @@ -112,7 +120,13 @@ export default function SignInPage() { > Forgot password? - From ab63f121c9b5a382badb9e556021ea8a862fc0b3 Mon Sep 17 00:00:00 2001 From: Ray Okamoto <22254748+rayokamoto@users.noreply.github.com> Date: Tue, 20 Feb 2024 02:17:34 +1030 Subject: [PATCH 10/23] chore: add loading for pay online button (#92) --- src/app/(account)/settings/tabs/MembershipSettings.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/app/(account)/settings/tabs/MembershipSettings.tsx b/src/app/(account)/settings/tabs/MembershipSettings.tsx index a6c2cc93..7e9e3b07 100644 --- a/src/app/(account)/settings/tabs/MembershipSettings.tsx +++ b/src/app/(account)/settings/tabs/MembershipSettings.tsx @@ -58,6 +58,7 @@ export default function MembershipSettings({ onClick={handlePayment} width="w-full" size="small" + loading={pay.isMutating} > Pay Online From 28f034a28c97fe017abb892a2b8f3818db7c7655 Mon Sep 17 00:00:00 2001 From: jsun969 Date: Tue, 20 Feb 2024 02:13:51 +1030 Subject: [PATCH 11/23] feat: enable ssr for header --- package.json | 1 + pnpm-lock.yaml | 17 ++ src/components/Header.tsx | 194 ------------------ src/components/Header/HeaderClient.tsx | 94 +++++++++ src/components/Header/HeaderMobileClient.tsx | 93 +++++++++ src/components/Header/components/Links.tsx | 48 +++++ .../Header/components/LogoTitle.tsx | 27 +++ .../Header/components/ScrollShader.tsx | 20 ++ .../Header/components/SignInJoin.tsx | 14 ++ src/components/Header/index.tsx | 43 ++++ src/components/UserButton.tsx | 72 ------- 11 files changed, 357 insertions(+), 266 deletions(-) delete mode 100644 src/components/Header.tsx create mode 100644 src/components/Header/HeaderClient.tsx create mode 100644 src/components/Header/HeaderMobileClient.tsx create mode 100644 src/components/Header/components/Links.tsx create mode 100644 src/components/Header/components/LogoTitle.tsx create mode 100644 src/components/Header/components/ScrollShader.tsx create mode 100644 src/components/Header/components/SignInJoin.tsx create mode 100644 src/components/Header/index.tsx delete mode 100644 src/components/UserButton.tsx diff --git a/package.json b/package.json index 548b55ed..5e3d64ea 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ "redis": "^4.6.13", "square": "^34.0.1", "swr": "^2.2.5", + "usehooks-ts": "^2.14.0", "zod": "^3.22.4", "zustand": "^4.4.7" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index aa25db9c..560a906d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -62,6 +62,9 @@ dependencies: swr: specifier: ^2.2.5 version: 2.2.5(react@18.2.0) + usehooks-ts: + specifier: ^2.14.0 + version: 2.14.0(react@18.2.0) zod: specifier: ^3.22.4 version: 3.22.4 @@ -4255,6 +4258,10 @@ packages: p-locate: 5.0.0 dev: true + /lodash.debounce@4.0.8: + resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==} + dev: false + /lodash.flatmap@4.5.0: resolution: {integrity: sha512-/OcpcAGWlrZyoHGeHh3cAoa6nGdX6QYtmzNP84Jqol6UEQQ2gIaU3H+0eICcjcKGl0/XF8LWOujNn9lffsnaOg==} dev: false @@ -6134,6 +6141,16 @@ packages: react: 18.2.0 dev: false + /usehooks-ts@2.14.0(react@18.2.0): + resolution: {integrity: sha512-jnhrjTRJoJS7cFxz63tRYc5mzTKf/h+Ii8P0PDHymT9qDe4ZA2/gzDRmDR4WGausg5X8wMIdghwi3BBCN9JKow==} + engines: {node: '>=16.15.0'} + peerDependencies: + react: ^16.8.0 || ^17 || ^18 + dependencies: + lodash.debounce: 4.0.8 + react: 18.2.0 + dev: false + /util-deprecate@1.0.2: resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==} dev: true diff --git a/src/components/Header.tsx b/src/components/Header.tsx deleted file mode 100644 index 02c12014..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 ( -
    -
    - -
    -
    -
    -
    - - Computer Science Club Logo -

    - CS CLUB -

    - - -
    - - - -
    -
    -
    -
    - - -
    - -
    -
    -
    - ); -} diff --git a/src/components/Header/HeaderClient.tsx b/src/components/Header/HeaderClient.tsx new file mode 100644 index 00000000..552cdb6d --- /dev/null +++ b/src/components/Header/HeaderClient.tsx @@ -0,0 +1,94 @@ +'use client'; + +import { useClerk } from '@clerk/clerk-react'; +import { Transition } from '@headlessui/react'; +import Image from 'next/image'; +import { useRouter } from 'next/navigation'; +import { useRef, useState } from 'react'; +import { useOnClickOutside } from 'usehooks-ts'; +import type { HeaderData } from '.'; +import Button from '../Button'; +import FancyRectangle from '../FancyRectangle'; +import { Links, MenuLinks } from './components/Links'; +import LogoTitle from './components/LogoTitle'; +import ScrollShader from './components/ScrollShader'; +import SignInJoin from './components/SignInJoin'; + +function UserButton({ data }: { data: HeaderData }) { + const [isMenuOpen, setMenuOpen] = useState(false); + const ref = useRef(null); + const closeMenu = () => { + setMenuOpen(false); + }; + useOnClickOutside(ref, closeMenu); + const handleButtonClick = () => { + setMenuOpen(!isMenuOpen); + }; + + const { signOut } = useClerk(); + const router = useRouter(); + const handleSignOut = async () => { + await signOut(); + router.push('/'); + router.refresh(); + }; + + const userExists = data.nextStep !== 'signup'; + return ( + +
    + + +
    + {userExists && } + +
    +     +
    +     + ); +} + +export default function HeaderClient({ + data, + className, +}: { + data: HeaderData; + className?: string; +}) { + return ( +
    + +
    +
    + + + {data.nextStep === 'signup' && ( + + )} + {data.nextStep === 'payment' && ( + + )} + {data.isSignedIn ? : } +
    +
    +
    +
    + ); +} diff --git a/src/components/Header/HeaderMobileClient.tsx b/src/components/Header/HeaderMobileClient.tsx new file mode 100644 index 00000000..64d1dd33 --- /dev/null +++ b/src/components/Header/HeaderMobileClient.tsx @@ -0,0 +1,93 @@ +'use client'; + +import Link from 'next/link'; +import { useState } from 'react'; +import { IoMdClose, IoMdMenu } from 'react-icons/io'; +import type { HeaderData } from '.'; +import FancyRectangle from '../FancyRectangle'; +import { Links, MenuLinks } from './components/Links'; +import LogoTitle from './components/LogoTitle'; +import ScrollShader from './components/ScrollShader'; + +export default function HeaderMobileClient({ + data, + className, +}: { + data: HeaderData; + className?: string; +}) { + const [isMenuOpen, setIsMenuOpen] = useState(false); + const toggleMenu = () => { + setIsMenuOpen(!isMenuOpen); + }; + const closeMenu = () => { + setIsMenuOpen(false); + }; + + return ( +
    + +
    +
    + + + + +
    + {isMenuOpen && ( + <> +
    +
    + +
    + {data.nextStep === 'signup' && ( + + Continue Signing Up + + )} + {data.nextStep === 'payment' && ( + + Continue to payment + + )} + +
    + + )} +
    +
    + ); +} diff --git a/src/components/Header/components/Links.tsx b/src/components/Header/components/Links.tsx new file mode 100644 index 00000000..232cde8f --- /dev/null +++ b/src/components/Header/components/Links.tsx @@ -0,0 +1,48 @@ +import { env } from '@/env.mjs'; +import Link from 'next/link'; +import type { HeaderData } from '..'; + +export function MenuLinks({ data, onClick }: { data: HeaderData; onClick?: () => void }) { + const isMember = data.nextStep === null; + return ( + <> + {isMember && ( + + CS Club Drive + + )} + + Settings + + {data.isAdmin && ( + + Admin Panel + + )} + + ); +} + +const LINKS = ['about', 'events', 'sponsors', 'contact']; +export function Links({ onClick }: { onClick?: () => void }) { + return ( + <> + {LINKS.map((link, i) => ( + + {link} + + ))} + + ); +} diff --git a/src/components/Header/components/LogoTitle.tsx b/src/components/Header/components/LogoTitle.tsx new file mode 100644 index 00000000..c669daca --- /dev/null +++ b/src/components/Header/components/LogoTitle.tsx @@ -0,0 +1,27 @@ +import Image from 'next/image'; +import Link from 'next/link'; + +export default function LogoTitle({ + titleColor, + className, + onClick, +}: { + titleColor: 'text-grey' | 'text-white'; + className?: string; + onClick?: () => void; +}) { + return ( + + Computer Science Club Logo +

    + 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 8e96355f..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 */} - -
    - )} -
    -     - ); -} From 565f05b50032c93c09004343b001a38e99b0eea8 Mon Sep 17 00:00:00 2001 From: jsun969 Date: Tue, 20 Feb 2024 02:14:10 +1030 Subject: [PATCH 12/23] feat(api): remove unnecessary apis --- src/app/api/payment/route.ts | 12 ------------ src/app/api/user-existence/route.ts | 12 ------------ 2 files changed, 24 deletions(-) delete mode 100644 src/app/api/user-existence/route.ts 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 }); -} From ba1cd105bae7063d880962cd011069106c0ea171 Mon Sep 17 00:00:00 2001 From: "Yeyang (Justin) Sun" Date: Tue, 20 Feb 2024 02:43:18 +1030 Subject: [PATCH 13/23] feat: refresh rsc after mutation (#94) --- src/app/(account)/join/steps/StepFour.tsx | 1 + src/app/(account)/join/steps/StepOne.tsx | 3 +++ src/app/(account)/signin/page.tsx | 5 ++++- 3 files changed, 8 insertions(+), 1 deletion(-) diff --git a/src/app/(account)/join/steps/StepFour.tsx b/src/app/(account)/join/steps/StepFour.tsx index f0b10523..4441da7e 100644 --- a/src/app/(account)/join/steps/StepFour.tsx +++ b/src/app/(account)/join/steps/StepFour.tsx @@ -26,6 +26,7 @@ export default function StepFour() { }, onSuccess: () => { router.push('/settings'); + router.refresh(); }, }); diff --git a/src/app/(account)/join/steps/StepOne.tsx b/src/app/(account)/join/steps/StepOne.tsx index dac2928f..a4b2f996 100644 --- a/src/app/(account)/join/steps/StepOne.tsx +++ b/src/app/(account)/join/steps/StepOne.tsx @@ -3,6 +3,7 @@ import ControlledField from '@/components/ControlledField'; import { useSignUp } from '@clerk/nextjs'; import { zodResolver } from '@hookform/resolvers/zod'; import Link from 'next/link'; +import { useRouter } from 'next/navigation'; import { useState } from 'react'; import { useForm } from 'react-hook-form'; import { FcGoogle } from 'react-icons/fc'; @@ -33,6 +34,7 @@ function VerifyEmail() { const [verifyEmailLoading, setVerifyEmailLoading] = useState(false); + const router = useRouter(); const handleVerify = form.handleSubmit(async ({ code }) => { if (!isLoaded) return; @@ -48,6 +50,7 @@ function VerifyEmail() { return; } await setActive({ session: completeSignUp.createdSessionId }); + router.refresh(); } catch (error) { handleClerkErrors(error, form, [ { code: 'form_param_nil', field: 'code', message: 'Please enter the the code.' }, diff --git a/src/app/(account)/signin/page.tsx b/src/app/(account)/signin/page.tsx index 2866e001..b0cae980 100644 --- a/src/app/(account)/signin/page.tsx +++ b/src/app/(account)/signin/page.tsx @@ -6,6 +6,7 @@ import FancyRectangle from '@/components/FancyRectangle'; import { useSignIn } from '@clerk/clerk-react'; import { zodResolver } from '@hookform/resolvers/zod'; import Link from 'next/link'; +import { useRouter } from 'next/navigation'; import { useState } from 'react'; import { useForm } from 'react-hook-form'; import { FcGoogle } from 'react-icons/fc'; @@ -28,6 +29,7 @@ export default function SignInPage() { const [signInLoading, setSignInLoading] = useState(false); + const router = useRouter(); const handleSignIn = form.handleSubmit(async ({ email, password }) => { if (!isLoaded) return; @@ -41,7 +43,8 @@ export default function SignInPage() { if (result.status === 'complete') { await setActive({ session: result.createdSessionId }); - location.href = '/'; + router.push('/'); + router.refresh(); } else { console.log(result); } From d28bdde0cbb36b61d28ba13d4e133d4e34683690 Mon Sep 17 00:00:00 2001 From: jsun969 Date: Tue, 20 Feb 2024 02:57:42 +1030 Subject: [PATCH 14/23] feat: add titles for all pages --- src/app/(account)/forgot-password/page.tsx | 5 +++++ src/app/(account)/join/page.tsx | 7 ++++++- src/app/(account)/settings/page.tsx | 5 +++++ src/app/(account)/signin/page.tsx | 5 +++++ src/app/about/page.tsx | 7 ++++++- src/app/admin/page.tsx | 5 +++++ src/app/contact/page.tsx | 5 +++++ src/app/events/page.tsx | 5 +++++ src/app/layout.tsx | 5 ++++- src/app/sponsors/page.tsx | 5 +++++ 10 files changed, 51 insertions(+), 3 deletions(-) diff --git a/src/app/(account)/forgot-password/page.tsx b/src/app/(account)/forgot-password/page.tsx index 827f43fb..8ea3a25a 100644 --- a/src/app/(account)/forgot-password/page.tsx +++ b/src/app/(account)/forgot-password/page.tsx @@ -5,12 +5,17 @@ import ControlledField from '@/components/ControlledField'; import FancyRectangle from '@/components/FancyRectangle'; import { useSignIn } from '@clerk/nextjs'; import { zodResolver } from '@hookform/resolvers/zod'; +import type { Metadata } from 'next'; import { useState } from 'react'; import { useForm } from 'react-hook-form'; import { z } from 'zod'; import { handleClerkErrors } from '../helpers'; import { codeSchema, emailSchema, passwordSchema } from '../schemas'; +export const metadata: Metadata = { + title: 'Forgot Password', +}; + const sendCodeSchema = z.object({ email: emailSchema, }); diff --git a/src/app/(account)/join/page.tsx b/src/app/(account)/join/page.tsx index bef58398..881d0d83 100644 --- a/src/app/(account)/join/page.tsx +++ b/src/app/(account)/join/page.tsx @@ -3,6 +3,7 @@ import FancyRectangle from '@/components/FancyRectangle'; import Title from '@/components/Title'; import { SignedIn, SignedOut, useUser } from '@clerk/nextjs'; +import type { Metadata } from 'next'; import Link from 'next/link'; import { useEffect } from 'react'; import ProgressBar from './ProgressBar'; @@ -12,7 +13,11 @@ import StepThree from './steps/StepThree'; import StepTwo from './steps/StepTwo'; import { useJoinUsHeading, useJoinUsStep } from './store'; -export default function JoinUsPage() { +export const metadata: Metadata = { + title: 'Join', +}; + +export default function JoinPage() { const { step, setStep } = useJoinUsStep(); const { heading } = useJoinUsHeading(); diff --git a/src/app/(account)/settings/page.tsx b/src/app/(account)/settings/page.tsx index 07c73c32..c28a700e 100644 --- a/src/app/(account)/settings/page.tsx +++ b/src/app/(account)/settings/page.tsx @@ -3,10 +3,15 @@ import Title from '@/components/Title'; import { checkUserExists } from '@/server/check-user-exists'; import { verifyMembershipPayment } from '@/server/verify-membership-payment'; import { currentUser } from '@clerk/nextjs'; +import type { Metadata } from 'next'; import Link from 'next/link'; import { notFound } from 'next/navigation'; import Settings from './Settings'; +export const metadata: Metadata = { + title: 'Settings', +}; + export default async function SettingsPage() { const user = await currentUser(); if (!user) return notFound(); diff --git a/src/app/(account)/signin/page.tsx b/src/app/(account)/signin/page.tsx index b0cae980..165c685e 100644 --- a/src/app/(account)/signin/page.tsx +++ b/src/app/(account)/signin/page.tsx @@ -5,6 +5,7 @@ import ControlledField from '@/components/ControlledField'; import FancyRectangle from '@/components/FancyRectangle'; import { useSignIn } from '@clerk/clerk-react'; import { zodResolver } from '@hookform/resolvers/zod'; +import type { Metadata } from 'next'; import Link from 'next/link'; import { useRouter } from 'next/navigation'; import { useState } from 'react'; @@ -14,6 +15,10 @@ import { z } from 'zod'; import { handleClerkErrors } from '../helpers'; import { emailSchema } from '../schemas'; +export const metadata: Metadata = { + title: 'Sign In', +}; + const signInSchema = z.object({ email: emailSchema, password: z.string().min(1, { message: 'Please enter your password' }), diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx index 8fb09046..55dcedab 100644 --- a/src/app/about/page.tsx +++ b/src/app/about/page.tsx @@ -4,10 +4,15 @@ import Paragraph from '@/components/Paragraph'; import Title from '@/components/Title'; import { COMMITTEE_MEMBERS } from '@/data/committee-members'; import { LINKS } from '@/data/links'; +import type { Metadata } from 'next'; import Image from 'next/image'; import FAQ from './FAQ'; -export default function AboutUs() { +export const metadata: Metadata = { + title: 'About', +}; + +export default function AboutPage() { return (
    diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx index 234e69b3..618a2c53 100644 --- a/src/app/admin/page.tsx +++ b/src/app/admin/page.tsx @@ -2,9 +2,14 @@ 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', +}; + const queryMembers = async () => { const dbMembers = await db.query.memberTable.findMany({ columns: { 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 ( From 2795259e3219d5071f44d6a94af4eaa9db053e4a Mon Sep 17 00:00:00 2001 From: jsun969 Date: Tue, 20 Feb 2024 03:00:31 +1030 Subject: [PATCH 15/23] feat(seo): disable robot for few pages --- src/app/(account)/forgot-password/page.tsx | 1 + src/app/(account)/settings/page.tsx | 1 + src/app/admin/page.tsx | 1 + 3 files changed, 3 insertions(+) diff --git a/src/app/(account)/forgot-password/page.tsx b/src/app/(account)/forgot-password/page.tsx index 8ea3a25a..f948a1ad 100644 --- a/src/app/(account)/forgot-password/page.tsx +++ b/src/app/(account)/forgot-password/page.tsx @@ -14,6 +14,7 @@ import { codeSchema, emailSchema, passwordSchema } from '../schemas'; export const metadata: Metadata = { title: 'Forgot Password', + robots: { index: false, follow: false }, }; const sendCodeSchema = z.object({ diff --git a/src/app/(account)/settings/page.tsx b/src/app/(account)/settings/page.tsx index c28a700e..142a4c57 100644 --- a/src/app/(account)/settings/page.tsx +++ b/src/app/(account)/settings/page.tsx @@ -10,6 +10,7 @@ import Settings from './Settings'; export const metadata: Metadata = { title: 'Settings', + robots: { index: false, follow: false }, }; export default async function SettingsPage() { diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx index 618a2c53..bd092c6c 100644 --- a/src/app/admin/page.tsx +++ b/src/app/admin/page.tsx @@ -8,6 +8,7 @@ import MemberForm from './MemberForm'; export const metadata: Metadata = { title: 'Admin Panel', + robots: { index: false, follow: false }, }; const queryMembers = async () => { From 8361990e1591e673a669aae7ab26350a86ceba65 Mon Sep 17 00:00:00 2001 From: jsun969 Date: Tue, 20 Feb 2024 03:05:57 +1030 Subject: [PATCH 16/23] fix(seo): remove metadata on client components --- src/app/(account)/forgot-password/page.tsx | 9 ++++----- src/app/(account)/join/page.tsx | 7 +++---- src/app/(account)/signin/page.tsx | 7 +++---- 3 files changed, 10 insertions(+), 13 deletions(-) diff --git a/src/app/(account)/forgot-password/page.tsx b/src/app/(account)/forgot-password/page.tsx index f948a1ad..17e3f347 100644 --- a/src/app/(account)/forgot-password/page.tsx +++ b/src/app/(account)/forgot-password/page.tsx @@ -5,17 +5,16 @@ import ControlledField from '@/components/ControlledField'; import FancyRectangle from '@/components/FancyRectangle'; import { useSignIn } from '@clerk/nextjs'; import { zodResolver } from '@hookform/resolvers/zod'; -import type { Metadata } from 'next'; import { useState } from 'react'; import { useForm } from 'react-hook-form'; import { z } from 'zod'; import { handleClerkErrors } from '../helpers'; import { codeSchema, emailSchema, passwordSchema } from '../schemas'; -export const metadata: Metadata = { - title: 'Forgot Password', - robots: { index: false, follow: false }, -}; +// export const metadata: Metadata = { +// title: 'Forgot Password', +// robots: { index: false, follow: false }, +// }; const sendCodeSchema = z.object({ email: emailSchema, diff --git a/src/app/(account)/join/page.tsx b/src/app/(account)/join/page.tsx index 881d0d83..dce7418b 100644 --- a/src/app/(account)/join/page.tsx +++ b/src/app/(account)/join/page.tsx @@ -3,7 +3,6 @@ import FancyRectangle from '@/components/FancyRectangle'; import Title from '@/components/Title'; import { SignedIn, SignedOut, useUser } from '@clerk/nextjs'; -import type { Metadata } from 'next'; import Link from 'next/link'; import { useEffect } from 'react'; import ProgressBar from './ProgressBar'; @@ -13,9 +12,9 @@ import StepThree from './steps/StepThree'; import StepTwo from './steps/StepTwo'; import { useJoinUsHeading, useJoinUsStep } from './store'; -export const metadata: Metadata = { - title: 'Join', -}; +// export const metadata: Metadata = { +// title: 'Join', +// }; export default function JoinPage() { const { step, setStep } = useJoinUsStep(); diff --git a/src/app/(account)/signin/page.tsx b/src/app/(account)/signin/page.tsx index 165c685e..64d469f3 100644 --- a/src/app/(account)/signin/page.tsx +++ b/src/app/(account)/signin/page.tsx @@ -5,7 +5,6 @@ import ControlledField from '@/components/ControlledField'; import FancyRectangle from '@/components/FancyRectangle'; import { useSignIn } from '@clerk/clerk-react'; import { zodResolver } from '@hookform/resolvers/zod'; -import type { Metadata } from 'next'; import Link from 'next/link'; import { useRouter } from 'next/navigation'; import { useState } from 'react'; @@ -15,9 +14,9 @@ import { z } from 'zod'; import { handleClerkErrors } from '../helpers'; import { emailSchema } from '../schemas'; -export const metadata: Metadata = { - title: 'Sign In', -}; +// export const metadata: Metadata = { +// title: 'Sign In', +// }; const signInSchema = z.object({ email: emailSchema, From e48fc50b725f6fcfdbf6b2a190e11bf785da0e90 Mon Sep 17 00:00:00 2001 From: Ray Okamoto <22254748+rayokamoto@users.noreply.github.com> Date: Tue, 20 Feb 2024 03:56:00 +1030 Subject: [PATCH 17/23] fix(header): mobile menu has correct links and behaviour (#96) --- src/components/Header/HeaderClient.tsx | 2 +- src/components/Header/HeaderMobileClient.tsx | 23 ++++++++++++++++--- src/components/Header/components/Links.tsx | 8 ++++--- .../Header/components/SignInJoin.tsx | 16 ++++++++++++- 4 files changed, 41 insertions(+), 8 deletions(-) diff --git a/src/components/Header/HeaderClient.tsx b/src/components/Header/HeaderClient.tsx index 552cdb6d..05e71d9d 100644 --- a/src/components/Header/HeaderClient.tsx +++ b/src/components/Header/HeaderClient.tsx @@ -12,7 +12,7 @@ import FancyRectangle from '../FancyRectangle'; import { Links, MenuLinks } from './components/Links'; import LogoTitle from './components/LogoTitle'; import ScrollShader from './components/ScrollShader'; -import SignInJoin from './components/SignInJoin'; +import { SignInJoin } from './components/SignInJoin'; function UserButton({ data }: { data: HeaderData }) { const [isMenuOpen, setMenuOpen] = useState(false); diff --git a/src/components/Header/HeaderMobileClient.tsx b/src/components/Header/HeaderMobileClient.tsx index 64d1dd33..49b47d28 100644 --- a/src/components/Header/HeaderMobileClient.tsx +++ b/src/components/Header/HeaderMobileClient.tsx @@ -1,5 +1,6 @@ 'use client'; +import { useClerk } from '@clerk/clerk-react'; import Link from 'next/link'; import { useState } from 'react'; import { IoMdClose, IoMdMenu } from 'react-icons/io'; @@ -8,6 +9,7 @@ import FancyRectangle from '../FancyRectangle'; import { Links, MenuLinks } from './components/Links'; import LogoTitle from './components/LogoTitle'; import ScrollShader from './components/ScrollShader'; +import { SignInJoinMobile } from './components/SignInJoin'; export default function HeaderMobileClient({ data, @@ -24,6 +26,12 @@ export default function HeaderMobileClient({ setIsMenuOpen(false); }; + const { signOut } = useClerk(); + const handleSignOut = async () => { + await signOut(); + setIsMenuOpen(false); + }; + return (
    )} - {data.nextStep !== null && !isMenuOpen && ( + {data.isSignedIn && data.nextStep !== null && !isMenuOpen && (
    @@ -65,7 +73,7 @@ export default function HeaderMobileClient({
    - {data.nextStep === 'signup' && ( + {data.isSignedIn && data.nextStep === 'signup' && ( )} - {data.nextStep === 'payment' && ( + {data.isSignedIn && data.nextStep === 'payment' && ( )} + + + {/* Links for sign up, sign in, sign out */} + {!data.isSignedIn && } + {data.isSignedIn && ( + + Sign Out + + )}
    )} diff --git a/src/components/Header/components/Links.tsx b/src/components/Header/components/Links.tsx index 232cde8f..c1cf14c0 100644 --- a/src/components/Header/components/Links.tsx +++ b/src/components/Header/components/Links.tsx @@ -17,9 +17,11 @@ export function MenuLinks({ data, onClick }: { data: HeaderData; onClick?: () => CS Club Drive )} - - Settings - + {data.isSignedIn && ( + + Settings + + )} {data.isAdmin && ( Admin Panel diff --git a/src/components/Header/components/SignInJoin.tsx b/src/components/Header/components/SignInJoin.tsx index 51daa3f2..a35a257a 100644 --- a/src/components/Header/components/SignInJoin.tsx +++ b/src/components/Header/components/SignInJoin.tsx @@ -1,6 +1,7 @@ +import Link from 'next/link'; import Button from '../../Button'; -export default function SignInJoin() { +export function SignInJoin() { return ( <>
    diff --git a/src/components/Button.tsx b/src/components/Button.tsx index 1df6e939..1339ac22 100644 --- a/src/components/Button.tsx +++ b/src/components/Button.tsx @@ -26,10 +26,6 @@ const Button = ({ font, size = 'base', }: ButtonProps) => { - font?: string; -} - -const Button = ({ children, colour, href, onClick, width, type, loading, font }: ButtonProps) => { const isAnchor = !!href; const Component = isAnchor ? 'a' : 'button'; From 06cf029d09ec9f1ccdc8c5d515cb644db90f0220 Mon Sep 17 00:00:00 2001 From: phoenixpereira Date: Sat, 24 Feb 2024 12:30:09 +1030 Subject: [PATCH 21/23] chore: use self-closing tag for divs --- src/app/(account)/join/steps/StepOne.tsx | 4 ++-- src/app/(account)/settings/Sidebar.tsx | 2 +- src/app/(account)/settings/tabs/AccountSettings.tsx | 8 ++++---- src/app/(account)/settings/tabs/MembershipSettings.tsx | 4 ++-- .../(account)/settings/tabs/NotificationsSettings.tsx | 2 +- .../(account)/settings/tabs/PersonalInfoSettings.tsx | 2 +- src/app/(account)/signin/page.tsx | 4 ++-- src/app/(home)/page.tsx | 10 +++++----- src/app/about/page.tsx | 2 +- src/components/FancyRectangle.tsx | 2 +- 10 files changed, 20 insertions(+), 20 deletions(-) diff --git a/src/app/(account)/join/steps/StepOne.tsx b/src/app/(account)/join/steps/StepOne.tsx index a4b2f996..a2d8edba 100644 --- a/src/app/(account)/join/steps/StepOne.tsx +++ b/src/app/(account)/join/steps/StepOne.tsx @@ -159,9 +159,9 @@ export default function StepOne() {
    -
    +

    or

    -
    +
    diff --git a/src/app/(account)/settings/Sidebar.tsx b/src/app/(account)/settings/Sidebar.tsx index 8c1c3a64..97942bd1 100644 --- a/src/app/(account)/settings/Sidebar.tsx +++ b/src/app/(account)/settings/Sidebar.tsx @@ -40,7 +40,7 @@ export default function Sidebar({ currentTab, onTabChange }: SidebarProps) { /> ))}
    -
    +
    ); } diff --git a/src/app/(account)/settings/tabs/AccountSettings.tsx b/src/app/(account)/settings/tabs/AccountSettings.tsx index 0c1a2c59..1fc598d4 100644 --- a/src/app/(account)/settings/tabs/AccountSettings.tsx +++ b/src/app/(account)/settings/tabs/AccountSettings.tsx @@ -63,7 +63,7 @@ export default function AccountSettings({ Membership Status: Payment Required -
    +

    Finalise your membership by{' '}

    Change Email

    -
    +

    Email address

    Change Password

    -
    +