Merge pull request #79 from AudiusProject/jowlee-timeline-fix

Disable click row on timeline modal
AudiusProject · Apr 5, 2021 · 618816d · 618816d
2 parents 90036ed + ed5c1a2
commit 618816d
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 13 deletions.
diff --git a/src/components/Proposal/Proposal.module.css b/src/components/Proposal/Proposal.module.css
@@ -8,10 +8,14 @@
   user-select: none;
 }
 
-.proposal:hover {
+.proposal:hover:not(.disabled) {
   background: #393A54;
 }
 
+.proposal.disabled {
+  cursor: default;
+}
+
 .left {
   display: flex;
   flex-direction: column;

diff --git a/src/components/Proposal/Proposal.tsx b/src/components/Proposal/Proposal.tsx
@@ -28,6 +28,7 @@ type OwnProps = {
   // Whether or not to include voter information
   vote?: Vote
   onClick?: () => void
+  isDisabled?: boolean
 }
 
 type ProposalProps = OwnProps
@@ -37,6 +38,7 @@ const Proposal: React.FC<ProposalProps> = ({
   proposal,
   vote,
   className,
+  isDisabled,
   onClick
 }) => {
   const pushRoute = usePushRoute()
@@ -52,8 +54,11 @@ const Proposal: React.FC<ProposalProps> = ({
 
   return (
     <div
-      className={clsx(styles.proposal, { [className!]: !!className })}
-      onClick={onClickProposal}
+      className={clsx(styles.proposal, {
+        [className!]: !!className,
+        [styles.disabled]: isDisabled
+      })}
+      onClick={isDisabled ? () => {} : onClickProposal}
     >
       <div className={styles.left}>
         {header && <div className={styles.header}>{header}</div>}

diff --git a/src/components/Timeline/TimelineEvent.tsx b/src/components/Timeline/TimelineEvent.tsx
@@ -70,10 +70,12 @@ const DisplayUser = ({ wallet }: { wallet: Address }) => {
 const VoteTimelineEvent = ({
   className,
   onClick,
+  isDisabled,
   event
 }: {
   className?: string
   onClick?: () => void
+  isDisabled?: boolean
   event: GovernanceVoteEvent | GovernanceVoteUpdateEvent
 }) => {
   const { proposal } = useProposal(event.proposalId)
@@ -84,6 +86,7 @@ const VoteTimelineEvent = ({
       onClick={onClick}
       className={className}
       proposal={proposal}
+      isDisabled={isDisabled}
       vote={event.vote}
     />
   ) : null
@@ -92,10 +95,12 @@ const VoteTimelineEvent = ({
 const ProposalTimelineEvent = ({
   event,
   className,
+  isDisabled,
   onClick
 }: {
   event: GovernanceProposalEvent
   className?: string
+  isDisabled?: boolean
   onClick?: () => void
 }) => {
   const { proposal } = useProposal(event.proposalId)
@@ -110,6 +115,7 @@ const ProposalTimelineEvent = ({
         header={header}
         onClick={onClick}
         className={className}
+        isDisabled={isDisabled}
         proposal={modified}
       />
     )
@@ -122,20 +128,22 @@ const GenericTimelineEvent = ({
   header,
   title,
   blockNumber,
+  isDisabled,
   onClick = () => {}
 }: {
   onClick?: () => void
   header?: string
   className?: string
+  isDisabled?: boolean
   title: ReactNode
   blockNumber: number
 }) => {
   const block = useBlock(blockNumber)
   return (
     <div
-      onClick={onClick}
+      onClick={isDisabled ? onClick : () => {}}
       className={clsx(styles.container, {
-        [styles.onClick]: !!onClick,
+        [styles.onClick]: !!onClick && !isDisabled,
         [className!]: !!className
       })}
     >
@@ -154,7 +162,8 @@ const DelegationIncreaseEvent: React.FC<{
   event: DelegateIncreaseStakeEvent
   parentOnClick?: () => void
   className?: string
-}> = ({ event, className, parentOnClick }) => {
+  isDisabled?: boolean
+}> = ({ event, className, isDisabled, parentOnClick }) => {
   const received = event.direction === 'Received'
   const userWallet = received ? event.delegator : event.serviceProvider
 
@@ -180,6 +189,7 @@ const DelegationIncreaseEvent: React.FC<{
     <GenericTimelineEvent
       header={header}
       onClick={onClick}
+      isDisabled={isDisabled}
       className={className}
       title={title}
       blockNumber={event.blockNumber}
@@ -191,7 +201,8 @@ const DelegationDecreaseEvent: React.FC<{
   event: DelegateDecreaseStakeEvent
   parentOnClick?: () => void
   className?: string
-}> = ({ event, className, parentOnClick }) => {
+  isDisabled?: boolean
+}> = ({ event, className, parentOnClick, isDisabled }) => {
   const onClick = () => {
     if (parentOnClick) parentOnClick()
   }
@@ -345,6 +356,7 @@ const DelegationDecreaseEvent: React.FC<{
   return (
     <GenericTimelineEvent
       onClick={onClick}
+      isDisabled={isDisabled}
       className={className}
       header={header}
       title={title}
@@ -357,7 +369,8 @@ const RegistrationDeregistrationEvent: React.FC<{
   parentOnClick?: () => void
   event: ServiceProviderRegisteredEvent | ServiceProviderDeregisteredEvent
   className?: string
-}> = ({ event, parentOnClick, className }) => {
+  isDisabled?: boolean
+}> = ({ event, parentOnClick, className, isDisabled }) => {
   const didRegister = event._type === 'ServiceProviderRegistered'
 
   // is it discovery-node or creator-node
@@ -375,6 +388,7 @@ const RegistrationDeregistrationEvent: React.FC<{
   return (
     <GenericTimelineEvent
       onClick={onClick}
+      isDisabled={isDisabled}
       className={className}
       header={header}
       title={title}
@@ -386,7 +400,8 @@ const ClaimEvent: React.FC<{
   parentOnClick?: () => void
   event: DelegateClaimEvent | ClaimProcessedEvent
   className?: string
-}> = ({ event, parentOnClick, className }) => {
+  isDisabled?: boolean
+}> = ({ event, parentOnClick, className, isDisabled }) => {
   const onClick = () => {
     if (parentOnClick) parentOnClick()
   }
@@ -407,6 +422,7 @@ const ClaimEvent: React.FC<{
   return (
     <GenericTimelineEvent
       onClick={onClick}
+      isDisabled={isDisabled}
       className={className}
       header={header}
       title={title}
@@ -419,7 +435,8 @@ const ServiceProviderStakeEvent: React.FC<{
   parentOnClick?: () => void
   event: ServiceProviderIncreaseStakeEvent | ServiceProviderDecreaseStakeEvent
   className?: string
-}> = ({ event, parentOnClick, className }) => {
+  isDisabled?: boolean
+}> = ({ event, parentOnClick, className, isDisabled }) => {
   const onClick = () => {
     if (parentOnClick) parentOnClick()
     // do nothing for stake actions
@@ -488,6 +505,7 @@ const ServiceProviderStakeEvent: React.FC<{
     <GenericTimelineEvent
       onClick={onClick}
       className={className}
+      isDisabled={isDisabled}
       header={header}
       title={renderTitle()}
       blockNumber={event.blockNumber}
@@ -497,6 +515,7 @@ const ServiceProviderStakeEvent: React.FC<{
 
 type OwnProps = {
   className?: string
+  isDisabled?: boolean
   onClick?: () => void
   event: TimelineEventType
 }
@@ -506,6 +525,7 @@ type TimelineEventProps = OwnProps
 const TimelineEvent: React.FC<TimelineEventProps> = ({
   onClick: parentOnClick,
   className,
+  isDisabled,
   event
 }: TimelineEventProps) => {
   if (!event) return null
@@ -517,6 +537,7 @@ const TimelineEvent: React.FC<TimelineEventProps> = ({
       return (
         <VoteTimelineEvent
           onClick={parentOnClick}
+          isDisabled={isDisabled}
           className={clsx(styles.proposalEvent, { [className!]: !!className })}
           event={event}
         />
@@ -525,6 +546,7 @@ const TimelineEvent: React.FC<TimelineEventProps> = ({
       return (
         <ProposalTimelineEvent
           onClick={parentOnClick}
+          isDisabled={isDisabled}
           className={clsx(styles.proposalEvent, { [className!]: !!className })}
           event={event}
         />
@@ -533,11 +555,19 @@ const TimelineEvent: React.FC<TimelineEventProps> = ({
     // Delegation
     case 'DelegateIncreaseStake':
       return (
-        <DelegationIncreaseEvent event={event} parentOnClick={parentOnClick} />
+        <DelegationIncreaseEvent
+          event={event}
+          parentOnClick={parentOnClick}
+          isDisabled={isDisabled}
+        />
       )
     case 'DelegateDecreaseStake':
       return (
-        <DelegationDecreaseEvent event={event} parentOnClick={parentOnClick} />
+        <DelegationDecreaseEvent
+          event={event}
+          parentOnClick={parentOnClick}
+          isDisabled={isDisabled}
+        />
       )
 
     // SP
@@ -547,6 +577,7 @@ const TimelineEvent: React.FC<TimelineEventProps> = ({
         <RegistrationDeregistrationEvent
           event={event}
           parentOnClick={parentOnClick}
+          isDisabled={isDisabled}
         />
       )
     case 'ServiceProviderIncreaseStake':
@@ -556,6 +587,7 @@ const TimelineEvent: React.FC<TimelineEventProps> = ({
           event={event}
           className={className}
           parentOnClick={parentOnClick}
+          isDisabled={isDisabled}
         />
       )
 
@@ -567,6 +599,7 @@ const TimelineEvent: React.FC<TimelineEventProps> = ({
           event={event}
           className={className}
           parentOnClick={parentOnClick}
+          isDisabled={isDisabled}
         />
       )
   }
@@ -575,6 +608,7 @@ const TimelineEvent: React.FC<TimelineEventProps> = ({
     <GenericTimelineEvent
       className={className}
       onClick={parentOnClick}
+      isDisabled={isDisabled}
       title={JSON.stringify(event)}
       blockNumber={event.blockNumber}
     />

diff --git a/src/components/Timeline/TimelineModal.tsx b/src/components/Timeline/TimelineModal.tsx
@@ -40,9 +40,9 @@ const TimelineModal: React.FC<TimelineModalProps> = ({
       <SimpleBar className={styles.scrollable}>
         {events.map((event, i) => (
           <TimelineEvent
-            onClick={onClose}
             className={styles.modalEvent}
             key={i}
+            isDisabled
             event={event}
           />
         ))}