Display house points values from Google Sheets (#50)

* Display house points values from Google Sheets

- Dynamically fetch house points data from Google Sheets to display
  together with each house

* Use dash for default house points value

- Display a dash instead of zero to indicate the value is loading

Co-authored-by: Ryan Yang <[email protected]>

* Remove unnecessary commented `row-gap` style

* Use global value for initial `EMPTY_HOUSE_POINTS`

---------

Co-authored-by: Ryan Yang <[email protected]>

src/app/pages/Houses/Houses.jsx

@@ -4,6 +4,7 @@ import Helmet from "react-helmet";
 import { Icon, Section } from "app/Symbols";
 import { Text } from "app/components";
 import clsx from "clsx";
+
 import Symbol1 from "./assets/1.png";
 import Symbol2 from "./assets/2.png";
 import Symbol3 from "./assets/3.png";
@@ -21,11 +22,14 @@ import House2 from "./assets/Group2.png";
 import House3 from "./assets/Group3.png";
 import House4 from "./assets/Group4.png";
 import FAQ_QUESTIONS from "./assets/FAQ.json";
+import useHousePoints from "./useHousePoints";
 
 const PUBLIC_POINTS_SPREADSHEET =
 	"https://docs.google.com/spreadsheets/d/e/2PACX-1vQ6BbuyZ3vqmItkfe48YYgeqdiK8cN8OogbcKvQrc3W4Y5705HWqGNEEseWb-V5rZC3-Rmd21lCaVVJ/pubhtml";
 
 const Houses = () => {
+	const housePoints = useHousePoints();
+
 	const HOUSES = [
 		{
 			name: "Water Tribe",
@@ -157,11 +161,16 @@ const Houses = () => {
 						{HOUSES.map(({ name, icon, description }) => (
 							<div key={name} className={clsx(cn.house, "wait")}>
 								<img alt="decorative" src={icon} />
-								<Text size="L">{name}</Text>
-								<Text color="gray">
-									{description}
-									<br />
-								</Text>
+								<div>
+									<Text size="L">{name}</Text>
+									<Text color="gray">{description}</Text>
+								</div>
+								<div className={cn.housePoints}>
+									<Text color="blue" size="XL">
+										{housePoints[name] ?? "-"}
+									</Text>
+									<span>points</span>
+								</div>
 							</div>
 						))}
 					</div>

src/app/pages/Houses/Houses.module.scss

@@ -62,7 +62,7 @@
 		}
 	}
 
-	& > .houses {
+	.houses {
 		text-align: center;
 		margin: 0 auto;
 		max-width: 1300px;
@@ -71,17 +71,13 @@
 			font-weight: bold;
 		}
 
-		& .list {
+		.list {
 			display: grid;
-			grid-template-columns: 1fr 1fr;
+			grid-template-columns: 1fr;
 
 			gap: 20px;
 
-			@media screen and (max-width: 900px) {
-				grid-template-columns: 1fr;
-			}
-
-			& .house {
+			.house {
 				text-align: left;
 				border: 2px solid var(--silver);
 				border-radius: 20px;
@@ -101,10 +97,30 @@
 				}
 
 				& img {
-					height: 120px;
+					height: 90px;
 					grid-row: 1 / 3;
 					grid-column: 1 / 2;
 				}
+
+				.housePoints {
+					display: flex;
+					text-align: end;
+					column-gap: 0.35rem;
+					flex-direction: row;
+					align-items: center;
+				}
+			}
+
+			@media screen and (min-width: 900px) {
+				grid-template-columns: 1fr 1fr;
+
+				.house {
+					grid-template-columns: auto 1fr auto;
+					.housePoints {
+						text-align: end;
+						flex-direction: column;
+					}
+				}
 			}
 		}
 	}

src/app/pages/Houses/useHousePoints.js

@@ -0,0 +1,43 @@
+import { useEffect, useState } from "react";
+
+const FEED_URL = "https://docs.google.com/spreadsheets/d/";
+const SPREADSHEET_KEY = "1AV98P5Fs3INBtbwT69oJvfN0eAgj9daVw6o_6XIGEiI";
+const MODE = "pub";
+const SHEET_GID = "1705286477";
+
+const EMPTY_HOUSE_POINTS = {};
+
+function useHousePoints() {
+	const [housePoints, setHousePoints] = useState(EMPTY_HOUSE_POINTS);
+
+	useEffect(() => {
+		const dataURL = new URL(`${FEED_URL}${SPREADSHEET_KEY}/${MODE}`);
+		dataURL.searchParams.set("gid", SHEET_GID);
+		dataURL.searchParams.set("single", "true");
+		dataURL.searchParams.set("output", "tsv");
+
+		const getHousePoints = async () => {
+			try {
+				const response = await fetch(dataURL);
+				const text = await response.text();
+
+				const data = {};
+				// Parse each tab-separated line
+				for (const line of text.split("\n")) {
+					const [key, value] = line.split("\t");
+					data[key] = value;
+				}
+
+				setHousePoints(data);
+			} catch (err) {
+				console.error("Error occurred while fetching sheets data:", err);
+			}
+		};
+
+		getHousePoints();
+	}, []);
+
+	return housePoints;
+}
+
+export default useHousePoints;