fix: always render floating bar

decentraland · Sep 20, 2023 · 7b56ddd · 7b56ddd
1 parent 729750f
commit 7b56ddd
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 33 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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
@@ -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">