Discourse style forum frontend development

components/page-header/PageHeader.js

@@ -11,7 +11,7 @@ class PageHeader extends Component {
   };
 
   render() {
-    const { title, buttonData } = this.props;
+    const { title, buttonData, children } = this.props;
     if (buttonData && buttonData.link && buttonData.text) {
       return (
         <div className="global-page-header">
@@ -36,6 +36,7 @@ class PageHeader extends Component {
           <Icon.ArrowLeft size={20} />
           <label>{title}</label>
         </a>
+        {children || ""}
       </div>
     );
   }

layouts/Global.js

@@ -40,6 +40,7 @@ import {
   ShowSurveyVoterAnswerModal,
   ListVoterSurveyModal,
   ShowDeniedComplianceModal,
+  TopicFlagModal,
 } from "../modals";
 
 const mapStateToProps = (state) => {
@@ -186,6 +187,8 @@ class Global extends Component {
               <HelpModal />
             ) : activeModal == "milestone-vote" ? (
               <MilestoneVoteModal data={this.props.modalData} />
+            ) : activeModal == "topic-flag" ? (
+              <TopicFlagModal data={this.props.modalData} />
             ) : null}
           </div>
         ) : null}

layouts/sidebar/Sidebar.js

@@ -3,6 +3,7 @@ import React, { Component, Fragment } from "react";
 import { connect } from "react-redux";
 import { withRouter } from "react-router-dom";
 import * as Icon from "react-feather";
+import ForumIcon from "@material-ui/icons/Forum";
 import { Fade } from "react-reveal";
 import Helper from "../../utils/Helper";
 import { saveUser, hideSidebar, setActiveModal } from "../../redux/actions";
@@ -65,6 +66,12 @@ class Sidebar extends Component {
               icon: <Icon.FileText size={20} />,
               isShow: true,
             },
+            {
+              link: "/app/topics",
+              label: "Topics",
+              icon: <ForumIcon size={20} />,
+              isShow: true,
+            },
             {
               link: "/app/votes",
               label: "Votes",
@@ -248,6 +255,12 @@ class Sidebar extends Component {
               icon: <Icon.FileText size={20} />,
               isShow: true,
             },
+            {
+              link: "/app/topics",
+              label: "Topics",
+              icon: <ForumIcon size={20} />,
+              isShow: true,
+            },
             {
               link: "/app/votes",
               label: "Votes",
@@ -407,49 +420,47 @@ class Sidebar extends Component {
 
     const items = [];
     tabs.forEach((tab, index) => {
-        const subItems = [];
-
-        if (tab.tabs && tab.tabs.length) {
-          tab.tabs.forEach((subTab, subIndex) => {
-            subItems.push(
-              <li
-                key={`subTabItem_${subIndex}`}
-                className={this.getClassName(path, subTab)}
-                hidden={!subTab.isShow}
+      const subItems = [];
+
+      if (tab.tabs && tab.tabs.length) {
+        tab.tabs.forEach((subTab, subIndex) => {
+          subItems.push(
+            <li
+              key={`subTabItem_${subIndex}`}
+              className={this.getClassName(path, subTab)}
+              hidden={!subTab.isShow}
+            >
+              <a
+                className="position-relative"
+                onClick={(e) => this.clickTab(e, subTab.link)}
+                style={{ color: "inherit" }}
               >
-                <a
-                  className="position-relative"
-                  onClick={(e) => this.clickTab(e, subTab.link)}
-                  style={{ color: "inherit" }}
-                >
-                  {
-                   ((subTab.label === "My Grants" && !!authUser.check_active_grant) ||
-                    (subTab.label === "Survey" && !!authUser.has_survey))
-                    && (
-                      <div className="position-absolute" style={{ left: "29px" }}>
-                        <IconInfo />
-                      </div>
-                    )
-                  }
-                  <div>{subTab.icon}</div>
-                  <span>{subTab.label}</span>
-                </a>
-              </li>
-            );
-          });
-        }
-
-        items.push(
-          <li key={`tabItem_${index}`} className={this.getClassName(path, tab)}>
-            {tab.link ? (
-              <a onClick={(e) => this.clickTab(e, tab.link)}>{tab.label}</a>
-            ) : (
-              <a>{tab.label}</a>
-            )}
-
-            <ul>{subItems}</ul>
-          </li>
-        );
+                {((subTab.label === "My Grants" &&
+                  !!authUser.check_active_grant) ||
+                  (subTab.label === "Survey" && !!authUser.has_survey)) && (
+                  <div className="position-absolute" style={{ left: "29px" }}>
+                    <IconInfo />
+                  </div>
+                )}
+                <div>{subTab.icon}</div>
+                <span>{subTab.label}</span>
+              </a>
+            </li>
+          );
+        });
+      }
+
+      items.push(
+        <li key={`tabItem_${index}`} className={this.getClassName(path, tab)}>
+          {tab.link ? (
+            <a onClick={(e) => this.clickTab(e, tab.link)}>{tab.label}</a>
+          ) : (
+            <a>{tab.label}</a>
+          )}
+
+          <ul>{subItems}</ul>
+        </li>
+      );
     });
 
     items.push(
@@ -491,7 +502,6 @@ class Sidebar extends Component {
     return "";
   }
 
-
   renderKycStatus() {
     const { authUser } = this.props;
     if (!authUser.shuftipro) {
@@ -552,12 +562,21 @@ class Sidebar extends Component {
               <>
                 <label className="txt">
                   User Type: <span>{this.renderRole()}</span>
-                </label><br/>
+                </label>
+                <br />
                 {!authUser?.is_super_admin && !authUser?.is_admin && (
                   <>
-                    <label className="txt">KYC status: {this.renderKycStatus()}</label><br/>
-                    <label className="txt">Forum name: <span>{authUser?.profile?.forum_name}</span></label><br/>
-                    <label className="txt">User ID: <span>{authUser?.id}</span></label>
+                    <label className="txt">
+                      KYC status: {this.renderKycStatus()}
+                    </label>
+                    <br />
+                    <label className="txt">
+                      Forum name: <span>{authUser?.profile?.forum_name}</span>
+                    </label>
+                    <br />
+                    <label className="txt">
+                      User ID: <span>{authUser?.id}</span>
+                    </label>
                   </>
                 )}
               </>

modals/index.js

@@ -34,6 +34,7 @@ import KycGrantModal from "./kyc-grant/KycGrant";
 import ShowDeniedComplianceModal from "./show-denied-compliance/ShowDeniedCompliance";
 import ShuftiRefChangeModal from "./shufti-ref-change/ShuftiRefChange";
 import MultipleMilestoneSubmitModal from "./multiple-milestone-submit/MultipleMilestoneSubmit";
+import TopicFlagModal from "./topic-flag/TopicFlag";
 
 export {
   UserReviewModal,
@@ -72,4 +73,5 @@ export {
   KycGrantModal,
   ResendKycModal,
   ShowDeniedComplianceModal,
+  TopicFlagModal,
 };

modals/topic-flag/TopicFlag.js

@@ -0,0 +1,90 @@
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import * as Icon from "react-feather";
+import { withRouter } from "react-router-dom";
+import {
+  hideCanvas,
+  removeActiveModal,
+  showAlert,
+} from "../../redux/actions";
+
+import "./topic-flag.scss";
+import API from "../../utils/API";
+
+const mapStateToProps = () => {
+  return {};
+};
+
+class TopicFlag extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      text: "",
+    };
+  }
+
+  hideModal() {
+    this.props.dispatch(removeActiveModal());
+  }
+
+  inputText = (e) => {
+    this.setState({ text: e.target.value });
+  };
+
+  clickSubmit = (e) => {
+    e.preventDefault();
+    const { text } = this.state;
+    if (!text || !text.trim()) {
+      this.props.dispatch(showAlert("Please input reason"));
+      return;
+    }
+
+    API.flagTopic(this.props.data.topic.id, {
+      reason: text,
+    }).then((res) => {
+      if (res?.failed) {
+        this.props.dispatch(showAlert(res.message));
+        return;
+      }
+
+      this.props.dispatch(hideCanvas());
+      this.hideModal();
+      this.props.dispatch(
+        showAlert("Your request has been successfully sent", "success")
+      );
+    });
+  };
+
+  render() {
+    const { text } = this.state;
+    const topic = this.props.data.topic;
+
+    return (
+      <div id="topic-flag-modal">
+        <div className="custom-modal-close" onClick={() => this.hideModal()}>
+          <Icon.X />
+          <label>Close Window</label>
+        </div>
+
+        <h3>Flag {topic.title}</h3>
+
+        <textarea
+          placeholder="Write Reason"
+          value={text}
+          onChange={this.inputText}
+        ></textarea>
+
+        <div id="topic-flag-modal__buttons">
+          <a className="btn btn-success" onClick={this.clickSubmit}>
+            Submit
+          </a>
+          <a className="btn btn-primary" onClick={() => this.hideModal()}>
+            Cancel
+          </a>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default connect(mapStateToProps)(withRouter(TopicFlag));

modals/topic-flag/topic-flag.scss

@@ -0,0 +1,51 @@
+#topic-flag-modal {
+  width: 762px;
+  max-width: 100%;
+  background-color: #ffffff;
+  border-radius: 12px;
+  position: relative;
+  padding: 90px 100px;
+  margin: 160px auto;
+
+  textarea {
+    display: block;
+    width: 100%;
+    height: 150px;
+    resize: none;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    margin-top: 1rem;
+    margin-bottom: 3rem;
+    padding: 5px 10px;
+    border-radius: 4px;
+  }
+
+  #topic-flag-modal__buttons {
+    margin-left: -5px;
+    margin-right: -5px;
+    display: flex;
+
+    a {
+      flex: 0 0 calc(50% - 10px) !important;
+      width: calc(50% - 10px) !important;
+      margin: 0 5px !important;
+    }
+  }
+
+  @media all and (max-width: 767px) {
+    margin: 100px auto;
+    padding: 30px 15px;
+
+    #edit-deny-modal__buttons {
+      display: block;
+      margin-left: 0;
+      margin-right: 0;
+
+      a {
+        flex: auto;
+        width: 100% !important;
+        display: block !important;
+        margin: 0 0 20px 0 !important;
+      }
+    }
+  }
+}