Merge pull request #42 from DopamineDriven/dev

updates

apps/web/src/lib/use-conainer-at-bottom.ts

@@ -0,0 +1,35 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+
+export function useContainerAtBottom<const T extends HTMLDivElement | null>(
+  container: T
+) {
+  const [containerAtBottom, setContainerAtBottom] = useState(false);
+
+  /** This callback is a useEffect dependency and is invoked whenever a user scrolls to track container position in real-time */
+  const trackPosition = useCallback(() => {
+    if (!container) {
+      return;
+    }
+    setContainerAtBottom(
+      window.scrollY + document.body.clientHeight >= container.scrollHeight
+    );
+  }, [container]);
+
+  useEffect(() => {
+    if (!container) {
+      return;
+    }
+
+    window.addEventListener("scroll", trackPosition, { passive: true });
+
+    trackPosition();
+
+    return () => {
+      window.removeEventListener("scroll", trackPosition);
+    };
+  }, [container, trackPosition]);
+
+  return containerAtBottom;
+}

apps/web/src/lib/use-inner-dimensions.ts

@@ -0,0 +1,36 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+
+export function useInnerDimensions<const T extends HTMLParagraphElement | null>(
+  container: T
+) {
+  const [innerHeight, setInnerHeight] = useState(0);
+  const [innerWidth, setInnerWidth] = useState(0);
+  const trackInnerHeight = useCallback(() => {
+    if (!container) {
+      return;
+    }
+    setInnerHeight(container.clientHeight);
+    setInnerWidth(container.clientWidth);
+  }, [container]);
+
+  /** This callback is a useEffect dependency and is invoked whenever inner text is loaded */
+  useEffect(() => {
+    if (!container) {
+      return;
+    }
+
+    window.addEventListener("DOMContentLoaded", trackInnerHeight, {
+      passive: true
+    });
+
+    trackInnerHeight();
+
+    return () => {
+      window.removeEventListener("DOMContentLoaded", trackInnerHeight);
+    };
+  }, [container, trackInnerHeight]);
+
+  return { innerHeight, innerWidth };
+}

apps/web/src/ui/reviews-paginated/ui/ReviewContent.tsx

@@ -1,72 +1,92 @@
 "use client";
 
-import { useRef, useState } from "react";
+import { useState } from "react";
 import { ChevronDown, ChevronUp } from "lucide-react";
 import { Button } from "@/ui/reviews-paginated/ui/Button";
 
 export function ReviewContent({ content }: { content: string }) {
   const [isExpanded, setIsExpanded] = useState(false);
-  const ref = useRef<HTMLDivElement | null>(null);
 
-  function refCb(props: HTMLDivElement | null) {
-    props = ref.current;
+  return (
+    <div>
+      <p className={`text-zinc-100 ${isExpanded ? "" : "line-clamp-3"}`}>
+        {content}
+      </p>
+      {content.length > 175 && (
+        <Button
+          variant="ghost"
+          size="sm"
+          className="mt-2 text-[#C5A572] hover:bg-zinc-800 hover:text-[#C5A572]"
+          onClick={() => setIsExpanded(!isExpanded)}>
+          {isExpanded ? (
+            <>
+              Show less <ChevronUp className="ml-2 h-4 w-4" />
+            </>
+          ) : (
+            <>
+              Read more <ChevronDown className="ml-2 h-4 w-4" />
+            </>
+          )}
+        </Button>
+      )}
+    </div>
+  );
+}
+
+/*
+
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { ChevronDown, ChevronUp } from "lucide-react";
+import { useInnerDimensions } from "@/lib/use-inner-dimensions";
+import { Button } from "@/ui/reviews-paginated/ui/Button";
+
+export function ReviewContent({ content }: { content: string }) {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const ref = useRef<HTMLParagraphElement | null>(null);
+  const r = useInnerDimensions(ref.current);
+  const [innerH, setInnerH] = useState(0);
+
+  const refCb = useCallback((props: HTMLParagraphElement | null) => {
     if (!props) {
       return;
-    } else {
-      console.log(
-        "innerHeight: ".concat(
-          props.getBoundingClientRect().height.toString(10)
-        )
-      );
     }
-  }
+    ref.current=props;
+    console.log(props);
+  }, []);
+
+  useEffect(() => {
+    if (ref.current) {
+      setInnerH(ref.current.clientHeight);
+    }
+  }, [])
+
   return (
-    <>
-      <div className="hidden md:visible" ref={refCb}>
-        <p
-          className={`md:text-zinc-100 ${isExpanded ? "" : "md:line-clamp-3"}`}>
-          {content}
-        </p>
-        {content.length > 150 && (
-          <Button
-            variant="ghost"
-            size="sm"
-            className="md:mt-2 md:text-[#C5A572] md:hover:bg-zinc-800 md:hover:text-[#C5A572]"
-            onClick={() => setIsExpanded(!isExpanded)}>
-            {isExpanded ? (
-              <>
-                Show less <ChevronUp className="md:ml-2 md:h-4 md:w-4" />
-              </>
-            ) : (
-              <>
-                Read more <ChevronDown className="md:ml-2 md:h-4 md:w-4" />
-              </>
-            )}
-          </Button>
-        )}
-      </div>{" "}
-      <div className="visible md:hidden" ref={refCb}>
-        <p className={`text-zinc-100 ${isExpanded ? "" : "line-clamp-3"}`}>
-          {content}
-        </p>
-        {content.length > 120 && (
-          <Button
-            variant="ghost"
-            size="sm"
-            className="mt-2 text-[#C5A572] hover:bg-zinc-800 hover:text-[#C5A572]"
-            onClick={() => setIsExpanded(!isExpanded)}>
-            {isExpanded ? (
-              <>
-                Show less <ChevronUp className="ml-2 h-4 w-4" />
-              </>
-            ) : (
-              <>
-                Read more <ChevronDown className="ml-2 h-4 w-4" />
-              </>
-            )}
-          </Button>
-        )}
-      </div>
-    </>
+    <div>
+      <p ref={ref} id="my-content"
+        className={`text-zinc-100 w-[60cw] ${isExpanded ? "line-clamp-none" : "line-clamp-3"}`}>
+        {content}
+      </p>
+      {content.length > 150 && (
+        <Button
+          variant="ghost"
+          size="sm"
+          className="mt-2 text-[#C5A572] hover:bg-zinc-800 hover:text-[#C5A572]"
+          onClick={() => setIsExpanded(!isExpanded)}>
+          {isExpanded ? (
+            <>
+              Show less <ChevronUp className="ml-2 h-4 w-4" />
+            </>
+          ) : (
+            <>
+              Read more <ChevronDown className="ml-2 h-4 w-4" />
+            </>
+          )}
+        </Button>
+      )}
+      <span>{`${r.innerWidth} ${innerH} ${r.innerWidth / r.innerHeight}`}</span>
+    </div>
   );
 }
+*/