Add discussions tab to community page

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/Discussions.jsx

@@ -0,0 +1,183 @@
+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;
+  }
+`;
+
+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,
+        blockHeight,
+      },
+      gas: Big(10).pow(14),
+    },
+  ]);
+}
+
+function setSocialDbAndRepost(v) {
+  // TODO remove
+  console.log("v", v);
+  // Post to users social db
+  const result = Social.set(v, {
+    onCommit: (data) => {
+      console.log("onCommit data", data);
+      // TODO move to devhub-contract.jsx
+      Near.asyncView("${REPL_SOCIAL_CONTRACT}", "get", {
+        keys: [`${context.accountId}/**`],
+        options: {
+          with_block_height: true,
+        },
+      })
+        .then((response) => {
+          let blockHeight = response[context.accountId]["post"][":block"];
+          repostOnDiscussions(blockHeight);
+        })
+        .catch(console.log);
+    },
+  });
+  // TODO remove
+  console.log("result", result);
+}
+
+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: setSocialDbAndRepost,
+                }}
+              />
+            </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>
+          <Widget
+            src="${REPL_DEVHUB}/widget/devhub.components.organism.Feed"
+            props={{
+              showFlagAccountFeature: true,
+              action: "repost",
+              filteredAccountIds: [
+                `discussions.${handle}.community.${REPL_DEVHUB_CONTRACT}`,
+              ],
+              sort: sort,
+            }}
+          />
+        </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/page/community/index.jsx

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