Add discussions tab to community page

replacements.dev.json

@@ -6,5 +6,6 @@
   "REPL_MOB": "eugenethedream",
   "REPL_EFIZ": "efiz.testnet",
   "REPL_DEVS": "nearbuilders.testnet",
-  "REPL_SOCIAL_CONTRACT": "v1.social08.testnet"
+  "REPL_SOCIAL_CONTRACT": "v1.social08.testnet",
+  "REPL_RPC_URL": "https://rpc.testnet.near.org"
 }

replacements.mainnet.json

@@ -6,5 +6,6 @@
   "REPL_MOB": "mob.near",
   "REPL_EFIZ": "efiz.near",
   "REPL_DEVS": "devs.near",
-  "REPL_SOCIAL_CONTRACT": "social.near"
+  "REPL_SOCIAL_CONTRACT": "social.near",
+  "REPL_RPC_URL": "https://rpc.mainnet.near.org"
 }

replacements.testnet.json

@@ -6,5 +6,6 @@
   "REPL_MOB": "eugenethedream",
   "REPL_EFIZ": "efiz.testnet",
   "REPL_DEVS": "nearbuilders.testnet",
-  "REPL_SOCIAL_CONTRACT": "v1.social08.testnet"
+  "REPL_SOCIAL_CONTRACT": "v1.social08.testnet",
+  "REPL_RPC_URL": "https://rpc.testnet.near.org"
 }

src/app.jsx

@@ -64,7 +64,7 @@ function Page() {
     // ?page=community
     case "community": {
       return (
-        // Considering to consolsidate this into a single widget,
+        // Considering to consolidate this into a single widget,
         // where each level handles its own routing.
         // Modularizing a page just like we do with addons
         <Widget

src/core/adapter/devhub-contract.jsx

@@ -99,6 +99,10 @@ function getAllCommunitiesMetadata() {
   );
 }
 
+function getSocialWithBlockHeight(data) {
+  return Near.view("${REPL_SOCIAL_CONTRACT}", "get", data) ?? null;
+}
+
 function getAllLabels() {
   return Near.view("${REPL_DEVHUB_LEGACY}", "get_all_labels") ?? null;
 }
@@ -131,6 +135,15 @@ function setCommunitySocialDB({ handle, data }) {
   );
 }
 
+function createDiscussion({ handle, data }) {
+  return (
+    Near.call("${REPL_DEVHUB_CONTRACT}", "create_discussion", {
+      handle,
+      data,
+    }) ?? null
+  );
+}
+
 function useQuery(name, params) {
   const initialState = { data: null, error: null, isLoading: true };
 

src/devhub/components/organism/Feed.jsx

@@ -84,7 +84,7 @@ return (
       <Feed
         index={[
           {
-            action: "post",
+            action: props.action ? props.action : "post",
             key: "main",
             options: {
               limit: 10,

src/devhub/entity/community/Announcements.jsx

@@ -84,7 +84,7 @@ return (
                   src={"${REPL_DEVHUB}/widget/devhub.entity.community.Compose"}
                   props={{
                     onSubmit: (v) => setCommunitySocialDB({ handle, data: v }),
-                    communityAccountId: `${handle}.community.${REPL_DEVHUB_CONTRACT}`,
+                    profileAccountId: `${handle}.community.${REPL_DEVHUB_CONTRACT}`,
                   }}
                 />
               </div>

src/devhub/entity/community/Compose.jsx

@@ -1,5 +1,6 @@
-const communityAccountId = props.communityAccountId;
-if (!communityAccountId) {
+const profileAccountId = props.profileAccountId;
+
+if (!profileAccountId) {
   return <></>;
 }
 
@@ -11,7 +12,7 @@ State.init({
   mentionsArray: [], // all the mentions in the description
 });
 
-const profile = Social.getr(`${communityAccountId}/profile`);
+const profile = Social.getr(`${profileAccountId}/profile`);
 const autocompleteEnabled = true;
 
 const content = {
@@ -40,7 +41,7 @@ function extractMentions(text) {
 
 function extractTagNotifications(text, item) {
   return extractMentions(text || "")
-    .filter((accountId) => accountId !== communityAccountId)
+    .filter((accountId) => accountId !== profileAccountId)
     .map((accountId) => ({
       key: accountId,
       value: {
@@ -67,7 +68,7 @@ function composeData() {
 
   const notifications = extractTagNotifications(state.text, {
     type: "social",
-    path: `${communityAccountId}/post/main`,
+    path: `${profileAccountId}/post/main`,
   });
 
   if (notifications.length) {
@@ -363,7 +364,7 @@ return (
           src="${REPL_NEAR}/widget/v1.Posts.Post"
           loading={<div className="w-100" style={{ height: "200px" }} />}
           props={{
-            accountId: communityAccountId,
+            accountId: profileAccountId,
             blockHeight: "now",
             content,
           }}

src/devhub/entity/community/Discussions.jsx

@@ -0,0 +1,226 @@
+const { handle } = props;
+const { getCommunity, setCommunitySocialDB } = VM.require(
+  "${REPL_DEVHUB}/widget/core.adapter.devhub-contract"
+);
+
+getCommunity = getCommunity || (() => <></>);
+setCommunitySocialDB = setCommunitySocialDB || (() => <></>);
+
+const communityData = getCommunity({ handle });
+
+const MainContent = styled.div`
+  padding-left: 2rem;
+  flex: 3;
+  @media screen and (max-width: 960px) {
+    padding-left: 0rem;
+  }
+  .post:hover {
+    background-color: inherit !important;
+  }
+`;
+
+const SidebarContainer = styled.div`
+  flex: 1;
+`;
+
+const Heading = styled.div`
+  font-size: 19px;
+  font-weight: 600;
+`;
+
+const SubHeading = styled.div`
+  font-size: 15px;
+  font-weight: 600;
+`;
+
+const Container = styled.div`
+  flex-wrap: no-wrap;
+  max-width: 100%;
+
+  .max-width-100 {
+    max-width: 100%;
+  }
+  @media screen and (max-width: 960px) {
+    flex-wrap: wrap;
+  }
+
+  .card {
+    border-radius: 1rem !important;
+  }
+
+  .display-none {
+    display: none;
+  }
+`;
+
+const Tag = styled.div`
+  border-top-right-radius: 50px;
+  border-bottom-right-radius: 50px;
+  border-top-left-radius: 50px;
+  border-bottom-left-radius: 50px;
+  padding-inline: 0.8rem;
+  padding-block: 0.3rem;
+  display: flex;
+  gap: 0.5rem;
+  border-width: 1px;
+  border-style: solid;
+  font-size: 14px;
+  color: rgba(0, 236, 151, 1);
+  font-weight: 800;
+`;
+
+const [sort, setSort] = useState("timedesc");
+
+function repostOnDiscussions(blockHeight) {
+  Near.call([
+    {
+      contractName: "${REPL_DEVHUB_CONTRACT}",
+      methodName: "create_discussion",
+      args: {
+        handle,
+        block_height: blockHeight,
+      },
+      gas: Big(10).pow(14),
+    },
+  ]);
+}
+
+async function checkHashes() {
+  if (props.transactionHashes) {
+    asyncFetch("${REPL_RPC_URL}", {
+      method: "POST",
+      headers: {
+        "content-type": "application/json",
+      },
+      body: JSON.stringify({
+        jsonrpc: "2.0",
+        id: "dontcare",
+        method: "tx",
+        params: [props.transactionHashes, context.accountId],
+      }),
+    }).then((transaction) => {
+      if (transaction !== null) {
+        const transaction_method_name =
+          transaction?.body?.result?.transaction?.actions[0].FunctionCall
+            .method_name;
+
+        if (transaction_method_name === "set") {
+          getBlockHeightAndRepost();
+        }
+
+        // show the latest created post to user
+        if (transaction_method_name === "create_discussion") {
+          console.log("Discussions created in the last call, show it to user.");
+        }
+      }
+    });
+  }
+}
+
+function getBlockHeightAndRepost() {
+  Near.asyncView("${REPL_SOCIAL_CONTRACT}", "get", {
+    keys: [`${context.accountId}/post/**`],
+    options: {
+      with_block_height: true,
+    },
+  })
+    .then((response) => {
+      let blockHeight = response[context.accountId][":block"];
+      repostOnDiscussions(blockHeight);
+    })
+    .catch((error) => {
+      console.log(
+        "DevHub Error [Discussions]: getBlockHeightAndRepost failed",
+        error
+      );
+    });
+}
+
+checkHashes();
+
+return (
+  <div className="w-100" style={{ maxWidth: "100%" }}>
+    <Container className="d-flex gap-3 m-3 pl-2">
+      <MainContent className="max-width-100">
+        <div className="d-flex flex-column gap-4">
+          {context.accountId && (
+            <div className="card p-4">
+              <Widget
+                src={"${REPL_DEVHUB}/widget/devhub.entity.community.Compose"}
+                props={{
+                  onSubmit: (v) => {
+                    Social.set(v, {
+                      force: true,
+                      onCommit: () => {
+                        getBlockHeightAndRepost();
+                      },
+                    });
+                  },
+                  profileAccountId: context.accountId,
+                }}
+              />
+            </div>
+          )}
+          <div className="d-flex flex-wrap justify-content-between">
+            <Heading>Discussions</Heading>
+            <div className={"d-flex align-items-center gap-2"}>
+              <select
+                name="sort"
+                id="sort"
+                class="form-select"
+                value={sort}
+                onChange={(e) => {
+                  setSort(e.target.value);
+                }}
+              >
+                <option selected value="timedesc">
+                  Latest
+                </option>
+                <option value="recentcommentdesc">Last Commented</option>
+              </select>
+            </div>
+          </div>
+
+          <div className={"card p-4"}>
+            {/* TODO: the current feed is from https://near.org/near/widget/ComponentDetailsPage?src=mob.near/widget/ProfileTabs 
+                We will replace this with our custom feed as soon as it can support reposts */}
+            <Widget
+              key="feed"
+              src="mob.near/widget/MainPage.N.Feed"
+              props={{
+                accounts: [
+                  `discussions.${handle}.community.${REPL_DEVHUB_CONTRACT}`,
+                ],
+              }}
+            />
+          </div>
+        </div>
+      </MainContent>
+      <SidebarContainer>
+        <div className="d-flex flex-column gap-3">
+          <div className="card p-4">
+            <div className="mb-2">{communityData?.description}</div>
+            <div className="d-flex gap-2 flex-wrap">
+              <Tag>{communityData?.tag} </Tag>
+            </div>
+          </div>
+          <div className="card p-4 d-flex flex-column gap-2">
+            <SubHeading>Community Admins</SubHeading>
+            {(communityData?.admins ?? []).map((accountId) => (
+              <div
+                key={accountId}
+                className="d-flex"
+                style={{ fontWeight: 500 }}
+              >
+                <Widget
+                  src="${REPL_DEVHUB}/widget/devhub.components.molecule.ProfileCard"
+                  props={{ accountId }}
+                />
+              </div>
+            ))}
+          </div>
+        </div>
+      </SidebarContainer>
+    </Container>
+  </div>
+);

src/devhub/entity/post/PostEditor.jsx

@@ -175,7 +175,7 @@ const AutoComplete = styled.div`
 if (props.transactionHashes) {
   const transaction = useCache(
     () =>
-      asyncFetch("https://rpc.mainnet.near.org", {
+      asyncFetch("${REPL_RPC_URL}", {
         method: "POST",
         headers: {
           "content-type": "application/json",

src/devhub/page/community/index.jsx

@@ -62,6 +62,14 @@ const tabs = [
       handle: community.handle,
     },
   },
+  {
+    title: "Discussions",
+    view: "${REPL_DEVHUB}/widget/devhub.entity.community.Discussions",
+    params: {
+      handle: community.handle,
+      transactionHashes: props.transactionHashes,
+    },
+  },
   {
     title: "Activity",
     view: "${REPL_DEVHUB}/widget/devhub.entity.community.Activity",