From 7b56dddefc4539119a6746fc099b19b81a309770 Mon Sep 17 00:00:00 2001
From: 1emu <github@lemu.sh>
Date: Wed, 20 Sep 2023 14:35:54 -0300
Subject: [PATCH] fix: always render floating bar

---
 package-lock.json                          |  4 +-
 src/components/FloatingBar/FloatingBar.css |  9 +++--
 src/components/FloatingBar/FloatingBar.tsx | 15 +++++---
 src/pages/proposal.tsx                     | 43 +++++++++++-----------
 4 files changed, 38 insertions(+), 33 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 9d3315b7b..63cf754ca 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -128,8 +128,8 @@
         "typescript": "4.7.2"
       },
       "engines": {
-        "node": ">=16.0.0",
-        "npm": ">=7.0.0"
+        "node": ">=18.0.0",
+        "npm": ">=8.0.0"
       }
     },
     "node_modules/@0xsequence/abi": {
diff --git a/src/components/FloatingBar/FloatingBar.css b/src/components/FloatingBar/FloatingBar.css
index 8cc832190..90250f510 100644
--- a/src/components/FloatingBar/FloatingBar.css
+++ b/src/components/FloatingBar/FloatingBar.css
@@ -7,17 +7,18 @@
   border: 1px solid var(--black-300);
   background: var(--white-900);
   box-shadow: 0 0 25px 0 var(--alpha-black-400);
-  z-index: 200;
   padding: 12px 18px 12px 16px;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  opacity: 0;
   transition: all 0.5s ease 0s;
+  opacity: 1;
+  z-index: 200;
 }
 
-.FloatingBar--visible {
-  opacity: 1;
+.FloatingBar--hidden {
+  opacity: 0;
+  z-index: -1;
 }
 
 .FloatingBar__ProposalSectionActions {
diff --git a/src/components/FloatingBar/FloatingBar.tsx b/src/components/FloatingBar/FloatingBar.tsx
index 63d102298..3845f994a 100644
--- a/src/components/FloatingBar/FloatingBar.tsx
+++ b/src/components/FloatingBar/FloatingBar.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 
 import classNames from 'classnames'
 import { Button } from 'decentraland-ui/dist/components/Button/Button'
@@ -20,9 +20,9 @@ interface FloatingBarProps {
   showViewReactions: boolean
   scrollToComments: () => void
   scrollToReactions: () => void
-  proposalId: string
-  discourseTopicId: number
-  discourseTopicSlug: string
+  proposalId?: string
+  discourseTopicId?: number
+  discourseTopicSlug?: string
 }
 
 const FloatingBar: React.FC<FloatingBarProps> = ({
@@ -35,10 +35,15 @@ const FloatingBar: React.FC<FloatingBarProps> = ({
   scrollToReactions,
 }) => {
   const t = useFormatMessage()
+  const [isLoaded, setIsLoaded] = useState<boolean>(false)
   const { comments, isLoadingComments } = useProposalComments(proposalId)
 
+  useEffect(() => {
+    setIsLoaded(true)
+  }, [])
+
   return (
-    <div className={classNames('FloatingBar', isVisible && 'FloatingBar--visible')}>
+    <div className={classNames('FloatingBar', !isVisible && isLoaded && 'FloatingBar--hidden')}>
       <div className="FloatingBar__ProposalSectionActions">
         {showViewReactions && (
           <Link onClick={scrollToReactions} className={'FloatingBar__Action'}>
diff --git a/src/pages/proposal.tsx b/src/pages/proposal.tsx
index e94c32bd4..9ebe0699f 100644
--- a/src/pages/proposal.tsx
+++ b/src/pages/proposal.tsx
@@ -16,8 +16,8 @@ import { ErrorClient } from '../clients/ErrorClient'
 import { Governance } from '../clients/Governance'
 import { SnapshotApi } from '../clients/SnapshotApi'
 import CategoryPill from '../components/Category/CategoryPill'
-import FloatingBar from '../components/FloatingBar/FloatingBar'
 import ProposalVPChart from '../components/Charts/ProposalVPChart'
+import FloatingBar from '../components/FloatingBar/FloatingBar'
 import ContentLayout, { ContentSection } from '../components/Layout/ContentLayout'
 import MaintenanceLayout from '../components/Layout/MaintenanceLayout'
 import BidSubmittedModal from '../components/Modal/BidSubmittedModal'
@@ -208,11 +208,16 @@ export default function ProposalPage() {
       commentsSectionRef.current.scrollIntoView({ behavior: 'smooth' })
     }
   }
+
   useEffect(() => {
+    setIsBarVisible(true)
+
     const handleScroll = () => {
       const hideBarSectionRef = reactionsSectionRef.current || commentsSectionRef.current
-      if (hideBarSectionRef) {
+      if (!!hideBarSectionRef && !!window) {
         const hideBarSectionTop = hideBarSectionRef.getBoundingClientRect().top
+        console.log('hideBarSectionTop', hideBarSectionTop)
+        console.log('windowInnerHeight', window.innerHeight)
         setIsBarVisible(hideBarSectionTop > window.innerHeight)
       }
     }
@@ -297,15 +302,11 @@ export default function ProposalPage() {
   }, [proposal, account, isDAOCommittee])
 
   useEffect(() => {
-    updatePageStateRef.current({ showProposalSuccessModal: params.get('new') === 'true' })
-  }, [params])
-
-  useEffect(() => {
-    updatePageStateRef.current({ showTenderPublishedModal: params.get('pending') === 'true' })
-  }, [params])
-
-  useEffect(() => {
-    updatePageStateRef.current({ showBidSubmittedModal: params.get('bid') === 'true' })
+    updatePageStateRef.current({
+      showProposalSuccessModal: params.get('new') === 'true',
+      showTenderPublishedModal: params.get('pending') === 'true',
+      showBidSubmittedModal: params.get('bid') === 'true',
+    })
   }, [params])
 
   useEffect(() => {
@@ -425,17 +426,15 @@ export default function ProposalPage() {
                 />
               )}
               <ProposalComments proposal={proposal} ref={commentsSectionRef} />
-              {proposal && !isLoadingSurveyTopics && (
-                <FloatingBar
-                  isVisible={isBarVisible}
-                  showViewReactions={!!showSurveyResults}
-                  scrollToReactions={scrollToReactions}
-                  scrollToComments={scrollToComments}
-                  proposalId={proposal?.id}
-                  discourseTopicId={proposal?.discourse_topic_id}
-                  discourseTopicSlug={proposal?.discourse_topic_slug}
-                />
-              )}
+              <FloatingBar
+                isVisible={isBarVisible}
+                showViewReactions={!!showSurveyResults}
+                scrollToReactions={scrollToReactions}
+                scrollToComments={scrollToComments}
+                proposalId={proposal?.id}
+                discourseTopicId={proposal?.discourse_topic_id}
+                discourseTopicSlug={proposal?.discourse_topic_slug}
+              />
             </Grid.Column>
 
             <Grid.Column tablet="4" className="ProposalDetailActions">