From 659a1f189cdedaf2f8177ca7267b3908e9b0234a Mon Sep 17 00:00:00 2001
From: Taesung Hwang <taesungh@uci.edu>
Date: Tue, 9 Jan 2024 14:53:46 -0800
Subject: [PATCH] Used named link for Houses Sorting form

- Include redirect for `/houses/sorting` to Google Form
- Update button labels on Houses Landing and Houses Join
---
 src/app/App.js                           | 6 ++++++
 src/app/pages/Houses/sections/Join.js    | 9 +++++----
 src/app/pages/Houses/sections/Landing.js | 2 +-
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/app/App.js b/src/app/App.js
index 53bf83e9..349c02a2 100644
--- a/src/app/App.js
+++ b/src/app/App.js
@@ -27,6 +27,7 @@ import "./styles/animations.scss";
 import "./styles/forms.scss";
 import Designathon from "./pages/Designathons";
 import Hey from "./pages/Hey";
+import { HOUSES_SORTING_FORM } from "./pages/Houses/sections/Join";
 import { PROJECT_TEAMS_GOOGLE_FORM } from "./pages/ProjectTeams/ProjectTeams";
 
 function App() {
@@ -57,6 +58,11 @@ function App() {
 				</Route>
 				<Route path="contact" element={<Contact />} />
 				<Route path="houses" element={<Houses />} />
+				<Route
+					path="/houses/sorting"
+					element={<Redirect to={HOUSES_SORTING_FORM} />}
+				/>
+
 				<Route path="about" element={<About />} />
 				<Route path="project-teams" element={<ProjectTeams />} />
 
diff --git a/src/app/pages/Houses/sections/Join.js b/src/app/pages/Houses/sections/Join.js
index 53054df0..d42e3d57 100644
--- a/src/app/pages/Houses/sections/Join.js
+++ b/src/app/pages/Houses/sections/Join.js
@@ -1,12 +1,13 @@
 import { forwardRef } from "react";
 
 import clsx from "clsx";
+import { Link } from "react-router-dom";
 
 import { Text } from "app/components";
 
 import cn from "./Join.module.scss";
 
-const HOUSES_SORTING_FORM = "https://forms.gle/6aj3nKe3S5QttYqp8";
+export const HOUSES_SORTING_FORM = "https://forms.gle/6aj3nKe3S5QttYqp8";
 const DEADLINE = new Date("2024-01-12T17:00:00-0800");
 
 function Join(props, ref) {
@@ -21,11 +22,11 @@ function Join(props, ref) {
 				form open until <Text color="red">Friday at 5pm</Text>
 			</Text>
 			<div className={clsx("wait show drop d10 l2", cn.button)}>
-				<a href={HOUSES_SORTING_FORM} className="button L fill blue">
+				<Link to="sorting" className="button L fill blue">
 					<Text size="L" color="white" icon="right">
-						Sign up
+						Join Now
 					</Text>
-				</a>
+				</Link>
 			</div>
 		</>
 	);
diff --git a/src/app/pages/Houses/sections/Landing.js b/src/app/pages/Houses/sections/Landing.js
index 02e98d43..0c89b901 100644
--- a/src/app/pages/Houses/sections/Landing.js
+++ b/src/app/pages/Houses/sections/Landing.js
@@ -81,7 +81,7 @@ function Landing({ scrollToJoin }) {
 					onClick={scrollToJoin}
 				>
 					<Text size="L" color="white" icon="right">
-						Join now
+						Join a house
 					</Text>
 				</button>
 			</div>