UI Scroll layout for the graphs (#242)

* scoll layout * update cards content * fix typo * refined approach using useRef and single Card * added some children for testing * graciously handle lint errors * Track the page reference --------- Co-authored-by: Gabriele Granello <[email protected]>
theopensystemslab · Jan 9, 2025 · 5313afb · 5313afb
1 parent d85d585
commit 5313afb
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 16 deletions.
diff --git a/app/components/ui/Dashboard.tsx b/app/components/ui/Dashboard.tsx
@@ -1,27 +1,67 @@
-import React from "react";
-import TenureComparisonWrapper from "../graphs/TenureComparisonWrapper";
-import TotalPaymentWrapper from "../graphs/TotalPaymentWrapper";
-import LifetimeMarketPurchaseWrapper from "../graphs/LifetimeMarketPurchaseWrapper";
-import LifetimeMarketRentWrapper from "../graphs/LifetimeMarketRentWrapper";
-import LifetimeFairholdLandPurchaseWrapper from "../graphs/LifetimeFairholdLandPurchaseWrapper";
-import LifetimeFairholdLandRentWrapper from "../graphs/LifetimeFairholdLandRentWrapper";
+import React, { useRef, useState } from "react";
+import GraphCard from "./GraphCard";
 import { Household } from "@/app/models/Household";
 
 interface DashboardProps {
   data: Household;
 }
 
 const Dashboard: React.FC<DashboardProps> = ({ data }) => {
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+  const [currentPage, setCurrentPage] = useState(0);
+  const totalPages = 6;
+
+  const handleNext = () => {
+    if (scrollContainerRef.current) {
+      scrollContainerRef.current.scrollBy({
+        top: window.innerHeight,
+        behavior: "smooth",
+      });
+    }
+    setCurrentPage((prev) => Math.min(prev + 1, totalPages - 1));
+  };
+
+  const handleScroll = () => {
+    if (scrollContainerRef.current) {
+      const scrollTop = scrollContainerRef.current.scrollTop;
+      const pageHeight = window.innerHeight;
+      const newPage = Math.round(scrollTop / pageHeight);
+      setCurrentPage(newPage);
+    }
+  };
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const someUnusedVariable = data;
+
   return (
-    <div>
-      <h1>Dashboard</h1>
-      {/* Render multiple graph components here */}
-      <TenureComparisonWrapper household={data} />
-      <TotalPaymentWrapper household={data} />
-      <LifetimeMarketPurchaseWrapper household={data} />
-      <LifetimeMarketRentWrapper household={data} />
-      <LifetimeFairholdLandPurchaseWrapper household={data} />
-      <LifetimeFairholdLandRentWrapper household={data} />{" "}
+    <div className="snap-container">
+      <div
+        className="snap-scroll"
+        ref={scrollContainerRef}
+        onScroll={handleScroll}
+      >
+        <GraphCard title="How much would a Fairhold home cost?">
+          <span className="text-red-500">Not much</span>
+        </GraphCard>
+
+        <GraphCard title="How much would it cost every month?">
+          <span className="text-red-500">in theory less than Freehold</span>
+        </GraphCard>
+        <GraphCard title="How would the cost change over my life?"></GraphCard>
+        <GraphCard title="How much could I sell it for?"></GraphCard>
+        <GraphCard title="What difference would Fairhold make to me, my community, and the world?"></GraphCard>
+        <GraphCard title="What would you choose?"></GraphCard>
+      </div>
+      {currentPage < totalPages - 1 && (
+        <div className="fixed bottom-4 right-4">
+          <button
+            onClick={handleNext}
+            className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+          >
+            Next
+          </button>
+        </div>
+      )}
     </div>
   );
 };

diff --git a/app/components/ui/GraphCard.tsx b/app/components/ui/GraphCard.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+
+type Props = React.PropsWithChildren<{
+  title: string;
+}>;
+
+const GraphCard: React.FC<Props> = ({ title, children }) => {
+  return (
+    <div className="h-screen snap-start">
+      <span className="text-2xl text-black">{title}</span>
+      {children && <div className="mt-4">{children}</div>}
+    </div>
+  );
+};
+
+export default GraphCard;
diff --git a/app/globals.css b/app/globals.css
@@ -91,3 +91,20 @@ body {
     @apply bg-background text-foreground;
   }
 }
+
+.snap-container {
+  height: 100vh;
+  overflow: hidden;
+}
+
+.snap-scroll {
+  height: 100%;
+  overflow-y: scroll;
+  scroll-snap-type: y mandatory;
+  scroll-behavior: smooth;
+}
+
+.snap-scroll > * {
+  scroll-snap-align: start;
+  height: 100vh;
+}