From 15d0af4d7ce2eb1602d52e736f77beeb50db9ce8 Mon Sep 17 00:00:00 2001
From: Devlin <devlincodes@gmail.com>
Date: Sun, 9 Jan 2022 13:28:10 -0800
Subject: [PATCH] Prevents profile card from rendering off-screen

---
 src/components/MemberProfileCard.tsx | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/components/MemberProfileCard.tsx b/src/components/MemberProfileCard.tsx
index 1aa5d0d..c3ae8a4 100644
--- a/src/components/MemberProfileCard.tsx
+++ b/src/components/MemberProfileCard.tsx
@@ -7,19 +7,21 @@ import {
   useServersState,
 } from "../features/servers";
 import { useAppDispatch } from "../redux/hooks";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useLayoutEffect, useRef } from "react";
 import { doc, onSnapshot } from "firebase/firestore";
 import { UserData } from "../features/user";
 import { db } from "../../firebase";
 
 export default function MemberProfileCard() {
   const { member, memberID, memberProfileCardPosition } = useServersState();
-  const [setContainerStyle] = useState<any>({});
-  const containerRef = useRef<HTMLElement>();
   const dispatch = useAppDispatch();
-
+  const containerRef = useRef<HTMLElement | null>(null);
   const skippedRender = useRef(false);
 
+  const onRef = (node: HTMLElement) => {
+    if (node) containerRef.current = node;
+  };
+
   useEffect(() => {
     if (skippedRender.current) {
       return;
@@ -27,7 +29,7 @@ export default function MemberProfileCard() {
     skippedRender.current = true;
   }, []);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     if (
       !memberProfileCardPosition ||
       !memberProfileCardPosition.top ||
@@ -45,9 +47,7 @@ export default function MemberProfileCard() {
         })
       );
     }
-
-    setContainerStyle(memberProfileCardPosition);
-  }, [memberProfileCardPosition]);
+  }, [memberProfileCardPosition, onRef]);
 
   useEffect(() => {
     const unsubscribe = onSnapshot(doc(db, "users", memberID), (doc) => {
@@ -90,10 +90,10 @@ export default function MemberProfileCard() {
 
   return (
     <Backdrop onClick={closeWindow}>
-      {skippedRender.current ? (
+      {skippedRender.current && (
         <Container
           onClick={stopPropagation}
-          ref={containerRef}
+          ref={onRef}
           style={memberProfileCardPosition}
         >
           <Banner style={bannerStyle} />
@@ -122,7 +122,7 @@ export default function MemberProfileCard() {
             <AboutMeContainer>{member.about}</AboutMeContainer>
           </ProfileContainer>
         </Container>
-      ) : null}
+      )}
     </Backdrop>
   );
 }