Merge pull request #17 from VoiceDeck/feat/homepage-show-reports

feat/use hypercert api to show reports on homepage

app/server/impactReportHelpers.ts → app/impact-reports.server.ts

@@ -7,12 +7,8 @@ import {
 } from "@hypercerts-org/sdk";
 import { Claim, Report } from "~/types";
 
-// ==============================
-// Report Fetching Functionality
-// ==============================
-
-// cached reports to avoid fetching them again
 let reports: Report[] | null = null;
+let hypercertClient: HypercertClient | null = null;
 
 /**
  * Fetches reports either from the cache or by generating them if not already cached.
@@ -21,12 +17,10 @@ let reports: Report[] | null = null;
  */
 export const fetchReports = async (ownerAddress: string): Promise<Report[]> => {
 	try {
-		// Fetch reports from cache if already fetched
 		if (reports) {
 			console.log("Reports already exist, no need to fetch from remote");
 			console.log(`Existing reports: ${reports.length}`);
 		} else {
-			// Fetch reports from remote if not already cached
 			console.log("Fetching reports from remote");
 			const claims = await getHypercertClaims(
 				ownerAddress,
@@ -63,13 +57,6 @@ export const fetchReports = async (ownerAddress: string): Promise<Report[]> => {
 	}
 };
 
-// ==============================
-// Hypercert Client and Metadata Fetching Functionality
-// ==============================
-
-// singleton instance of HypercertClient
-let hypercertClient: HypercertClient | null = null;
-
 /**
  * Retrieves the singleton instance of the HypercertClient.
  * @returns The HypercertClient instance.

app/server/impactReportHelpers.test.ts → app/impact-reports.test.ts

@@ -1,7 +1,7 @@
 import { it } from "node:test";
 import { afterAll, expect, expectTypeOf, test, vi } from "vitest";
-import { fetchReports } from "~/server/impactReportHelpers";
 import { Report } from "~/types";
+import { fetchReports } from "./impact-reports.server";
 
 test("fetch reports", async () => {
 	// address used to mint test hypercerts in Sepolia testnet

app/routes/_index.tsx

@@ -1,41 +1,46 @@
-import type { MetaFunction } from "@remix-run/node";
+import type { LoaderFunction, MetaFunction } from "@remix-run/node";
+import { json, useLoaderData } from "@remix-run/react";
+import { Report } from "~/types";
+import { fetchReports } from "../impact-reports.server";
 
 export const meta: MetaFunction = () => {
 	return [
-		{ title: "New Remix App" },
-		{ name: "description", content: "Welcome to Remix!" },
+		{ title: "VoiceDeck" },
+		{ name: "description", content: "Welcome to VoiceDeck!" },
 	];
 };
 
+export const loader: LoaderFunction = async () => {
+	const ownerAddress = process.env.HC_OWNER_ADDRESS;
+	if (!ownerAddress)
+		throw new Error("Owner address environment variable is not set");
+	try {
+		const response = await fetchReports(ownerAddress);
+		return json(response);
+	} catch (error) {
+		console.error(`Failed to load impact reports: ${error}`);
+		throw new Response("Failed to load impact reports", { status: 500 });
+	}
+};
+
 export default function Index() {
+	const reports = useLoaderData<typeof loader>();
 	return (
-		<div>
-			<h1 className="text-7xl">Welcome to Remix</h1>
-			<ul>
-				<li>
-					<a
-						target="_blank"
-						href="https://remix.run/tutorials/blog"
-						rel="noreferrer"
-					>
-						15m Quickstart Blog Tutorial
-					</a>
-				</li>
-				<li>
-					<a
-						target="_blank"
-						href="https://remix.run/tutorials/jokes"
-						rel="noreferrer"
-					>
-						Deep Dive Jokes App Tutorial
-					</a>
-				</li>
-				<li>
-					<a target="_blank" href="https://remix.run/docs" rel="noreferrer">
-						Remix Docs
-					</a>
-				</li>
-			</ul>
+		<div className="flex flex-col gap-10">
+			<h1 className="text-7xl">VoiceDeck</h1>
+			<h2 className="text-5xl">Reports</h2>
+			{reports.map((report: Report) => (
+				<div key={report.id}>
+					<div>ID: {report.id}</div>
+					<div>TTILE: {report.title}</div>
+					<div>SUMMARY: {report.summary}</div>
+					<div>IMAGE: {report.image.slice(0, 50)}</div>
+					<div>STATE: {report.state}</div>
+					<div>CATEGORY: {report.category}</div>
+					<div>TOTAL COST: {report.totalCost}</div>
+					<div>FUNDED SO FAR: {report.fundedSoFar}</div>
+				</div>
+			))}
 		</div>
 	);
 }

package.json

@@ -14,8 +14,8 @@
   },
   "dependencies": {
     "@fontsource-variable/plus-jakarta-sans": "^5.0.19",
-    "@radix-ui/react-slot": "^1.0.2",
     "@hypercerts-org/sdk": "^1.4.2-alpha.0",
+    "@radix-ui/react-slot": "^1.0.2",
     "@remix-run/node": "^2.5.0",
     "@remix-run/react": "^2.5.0",
     "@remix-run/serve": "^2.5.0",