From 5f1ddb51c3731ab4bfc85f3541091303a65067a1 Mon Sep 17 00:00:00 2001
From: Michael Fatemi <myfatemi04@gmail.com>
Date: Sun, 29 Nov 2020 00:50:58 -0500
Subject: [PATCH] Added "Get Involved" page

---
 src/App.css                       | 19 -------------------
 src/App.tsx                       |  2 ++
 src/components/GetInvolvedRow.tsx | 12 ++++++++++++
 src/components/Navbar.tsx         |  2 +-
 src/css/get-involved.css          | 14 ++++++++++++++
 src/index.d.ts                    | 19 ++++++++++++++++++-
 src/pages/involved.tsx            |  4 ++--
 7 files changed, 49 insertions(+), 23 deletions(-)
 create mode 100644 src/components/GetInvolvedRow.tsx
 create mode 100644 src/css/get-involved.css

diff --git a/src/App.css b/src/App.css
index 4b2e357..d20ac4d 100644
--- a/src/App.css
+++ b/src/App.css
@@ -5,25 +5,6 @@
 	font-size: 1.5rem;
 }
 
-/* Three column layout */
-.split-thirds {
-	margin: 2rem auto;
-	display: flex;
-	flex-wrap: wrap;
-}
-
-@media (min-width: 1024px) {
-	.split-thirds > div {
-		width: 33.33%;
-	}
-}
-
-@media (max-width: 1024px) {
-	.split-thirds > div {
-		width: 100%;
-	}
-}
-
 .space-2 {
 	margin: 1rem;
 	padding: 1rem;
diff --git a/src/App.tsx b/src/App.tsx
index 3607590..bc10607 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -6,6 +6,7 @@ import './App.css';
 
 import index from './pages/index';
 import initiatives from './pages/initiatives';
+import involved from './pages/involved';
 import mission from './pages/mission';
 import news from './pages/news';
 import newsArticle from './pages/newsArticle';
@@ -20,6 +21,7 @@ export default function App() {
 			<Layout>
 				<Switch>
 					<Route path='/initiatives' exact component={initiatives} />
+					<Route path='/involved' exact component={involved} />
 					<Route path='/news/:articleId' component={newsArticle} />
 					<Route path='/news' exact component={news} />
 					<Route path='/mission' exact component={mission} />
diff --git a/src/components/GetInvolvedRow.tsx b/src/components/GetInvolvedRow.tsx
new file mode 100644
index 0000000..ff7aa25
--- /dev/null
+++ b/src/components/GetInvolvedRow.tsx
@@ -0,0 +1,12 @@
+export default function GetInvolvedRow({ way }: { way: SGA.GetInvolvedWay}) {
+	return (
+		<div className='row'>
+			<div className='get-involved-title'>
+				<h3>{way.title}</h3>
+			</div>
+			<div className='get-involved-description'>
+				<p className="get-involved-body">{way.text}</p>
+			</div>
+		</div>
+	);
+}
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index f52e862..cf848ac 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -62,7 +62,7 @@ export default function Navbar() {
 			{pages.map((page) => {
 				if ('items' in page) {
 					return (
-						<div className='submenu-outer' key={page.url}>
+						<div className='submenu-outer' key={page.title}>
 							<Link className='nav-link' to={page.url}>
 								{page.title}
 							</Link>
diff --git a/src/css/get-involved.css b/src/css/get-involved.css
new file mode 100644
index 0000000..57d0884
--- /dev/null
+++ b/src/css/get-involved.css
@@ -0,0 +1,14 @@
+.get-involved-body {
+	color: #444;
+	font-size: 22px;
+	line-height: 33px;
+	font-weight: 300;
+}
+
+.get-involved-title {
+	flex: 1;
+}
+
+.get-involved-description {
+	flex: 3;
+}
\ No newline at end of file
diff --git a/src/index.d.ts b/src/index.d.ts
index 0acd3cd..93cfc80 100644
--- a/src/index.d.ts
+++ b/src/index.d.ts
@@ -23,6 +23,23 @@ declare namespace SGA {
 		committee: 'excomm' | 'officer' | 'class';
 		role: string;
 		profile_photo: {};
-		bio: string
+		bio: string;
+	}
+
+	interface GetInvolvedWay {
+		_id: string;
+		title: string;
+		text: string;
+	};
+
+	interface GetInvolvedDocument {
+		ways: GetInvolvedWay[];
+	}
+
+	interface FooterDocument {
+		columns: {
+			_id: string;
+			content: any[];
+		}[];
 	}
 }
diff --git a/src/pages/involved.tsx b/src/pages/involved.tsx
index 9e7d00d..0ce9a38 100644
--- a/src/pages/involved.tsx
+++ b/src/pages/involved.tsx
@@ -11,7 +11,7 @@ export default function GetInvolved() {
 	>();
 
 	React.useEffect(() => {
-		sanity.getDocument<SGA.GetInvolvedDocument>('ways').then(setWays);
+		sanity.getDocument<SGA.GetInvolvedDocument>('get_involved').then(setWays);
 	}, []);
 
 	return (
@@ -29,7 +29,7 @@ export default function GetInvolved() {
 				<>
 					<h3>Here are some ways to connect with SGA:</h3>
 					{ways.ways.map((way) => (
-						<GetInvolvedRow way={way} />
+						<GetInvolvedRow way={way} key={way._id} />
 					))}
 				</>
 			) : null}