Merge branch 'develop' into handle-hydrated-rfp

frontend/client/components/Proposal/index.tsx

@@ -49,7 +49,6 @@ interface State {
   isBodyOverflowing: boolean;
   isUpdateOpen: boolean;
   isCancelOpen: boolean;
-  bodyId: string;
 }
 
 export class ProposalDetail extends React.Component<Props, State> {
@@ -58,9 +57,10 @@ export class ProposalDetail extends React.Component<Props, State> {
     isBodyOverflowing: false,
     isUpdateOpen: false,
     isCancelOpen: false,
-    bodyId: `body-${Math.floor(Math.random() * 1000000)}`,
   };
 
+  bodyEl: HTMLElement | null = null;
+
   componentDidMount() {
     // always refresh from server
     this.props.fetchProposal(this.props.proposalId);
@@ -87,13 +87,7 @@ export class ProposalDetail extends React.Component<Props, State> {
 
   render() {
     const { user, detail: proposal, isPreview, detailError } = this.props;
-    const {
-      isBodyExpanded,
-      isBodyOverflowing,
-      isCancelOpen,
-      isUpdateOpen,
-      bodyId,
-    } = this.state;
+    const { isBodyExpanded, isBodyOverflowing, isCancelOpen, isUpdateOpen } = this.state;
     const showExpand = !isBodyExpanded && isBodyOverflowing;
     const wrongProposal = proposal && proposal.proposalId !== this.props.proposalId;
 
@@ -209,7 +203,7 @@ export class ProposalDetail extends React.Component<Props, State> {
             </h1>
             <div className="Proposal-top-main-block" style={{ flexGrow: 1 }}>
               <div
-                id={bodyId}
+                ref={el => (this.bodyEl = el)}
                 className={classnames({
                   ['Proposal-top-main-block-bodyText']: true,
                   ['is-expanded']: isBodyExpanded,
@@ -291,20 +285,17 @@ export class ProposalDetail extends React.Component<Props, State> {
   };
 
   private checkBodyOverflow = () => {
-    const { isBodyExpanded, bodyId, isBodyOverflowing } = this.state;
-    if (isBodyExpanded) {
+    const { isBodyExpanded, isBodyOverflowing } = this.state;
+    if (isBodyExpanded || !this.bodyEl) {
       return;
     }
 
-    // Use id instead of ref because styled component ref doesn't return html element
-    const bodyEl = document.getElementById(bodyId);
-    if (!bodyEl) {
-      return;
-    }
-
-    if (isBodyOverflowing && bodyEl.scrollHeight <= bodyEl.clientHeight) {
+    if (isBodyOverflowing && this.bodyEl.scrollHeight <= this.bodyEl.clientHeight) {
       this.setState({ isBodyOverflowing: false });
-    } else if (!isBodyOverflowing && bodyEl.scrollHeight > bodyEl.clientHeight) {
+    } else if (
+      !isBodyOverflowing &&
+      this.bodyEl.scrollHeight > this.bodyEl.clientHeight
+    ) {
       this.setState({ isBodyOverflowing: true });
     }
   };

frontend/client/components/RFP/index.less

@@ -23,11 +23,22 @@
     }
   }
 
+  &-brief {
+    font-size: 1rem;
+    margin-bottom: 1.75rem;
+    text-align: center;
+  }
+
+  &-tags {
+    text-align: center;
+    margin-bottom: 1.75rem;
+  }
+
   &-title {
     font-size: 2.4rem;
     text-align: center;
     font-weight: bold;
-    margin-bottom: 1.75rem;
+    margin-bottom: 1rem;
   }
 
   &-content {

frontend/client/components/RFP/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import moment from 'moment';
 import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
-import { Icon, Button, Affix } from 'antd';
+import { Icon, Button, Affix, Tag } from 'antd';
 import ExceptionPage from 'components/ExceptionPage';
 import { fetchRfp } from 'modules/rfps/actions';
 import { getRfp } from 'modules/rfps/selectors';
@@ -47,17 +47,40 @@ class RFPDetail extends React.Component<Props> {
       }
     }
 
+    const tags = [];
+
+    if (rfp.matching) {
+      tags.push(
+        <Tag key="matching" color="#1890ff">
+          x2 matching
+        </Tag>,
+      );
+    }
+
+    if (rfp.bounty) {
+      tags.push(
+        <Tag key="bounty" color="#CF8A00">
+          <UnitDisplay value={rfp.bounty} symbol="ZEC" /> bounty
+        </Tag>,
+      );
+    }
+
     return (
       <div className="RFPDetail">
         <div className="RFPDetail-top">
           <Link className="RFPDetail-top-back" to="/requests">
             <Icon type="arrow-left" /> Back to Requests
           </Link>
+
           <div className="RFPDetail-top-date">
             Opened {moment(rfp.dateOpened * 1000).format('LL')}
           </div>
         </div>
+
         <h1 className="RFPDetail-title">{rfp.title}</h1>
+        <div className="RFPDetail-tags">{tags}</div>
+        <p className="RFPDetail-brief">{rfp.brief}</p>
+
         <Markdown className="RFPDetail-content" source={rfp.content} />
         <div className="RFPDetail-rules">
           <ul>