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

@@ -131,6 +131,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,198 @@
+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");
+
+let grantNotify = Near.view(
+  "${REPL_SOCIAL_CONTRACT}",
+  "is_write_permission_granted",
+  {
+    predecessor_id: "${REPL_DEVHUB_LEGACY}",
+    key: context.accountId + "/index/notify",
+  }
+);
+
+let grantRepost = Near.view(
+  "${REPL_SOCIAL_CONTRACT}",
+  "is_write_permission_granted",
+  {
+    predecessor_id: "${REPL_DEVHUB_LEGACY}",
+    key: context.accountId + "/index/repost",
+  }
+);
+
+if (grantNotify === null || grantRepost === null) {
+  return;
+}
+
+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) => {
+                    let createDiscussionTx = [
+                      {
+                        contractName: "${REPL_DEVHUB_CONTRACT}",
+                        methodName: "create_discussion",
+                        args: {
+                          handle,
+                          data: v,
+                        },
+                        gas: Big(10).pow(14),
+                      },
+                    ];
+
+                    if (grantNotify === false || grantRepost === false) {
+                      createDiscussionTx.unshift({
+                        contractName: "${REPL_SOCIAL_CONTRACT}",
+                        methodName: "grant_write_permission",
+                        args: {
+                          // @ailisp this shouldn't be legacy right? because with notification it is
+                          predecessor_id: "${REPL_DEVHUB_CONTRACT}",
+                          keys: [
+                            context.accountId + "/index/notify",
+                            context.accountId + "/index/repost",
+                          ],
+                        },
+                        gas: Big(10).pow(14),
+                        deposit:
+                          getDepositAmountForWriteAccess(userStorageDeposit),
+                      });
+                    }
+                    Near.call(createDiscussionTx);
+                  },
+                }}
+              />
+            </div>
+          )}
+          <div className="d-flex flex-wrap justify-content-between">
+            <Heading>Announcements</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: [
+                `${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",