feat: Community Announcements Page (#567)

* fix solution action * added community announcements UI * added compose field * minor css updates * use community data instead of dummy data * minor UI updates * add mentions notifications * remove unecessary code * remove hover effect * sets up for contract, adds admin check * fix: Fixed deposit error for grant_write_permissions call to social.near (#563) * add elliot and thomas to CODEOWNERS (#570) * Fix telegram string and array issue (#571) * fix solution action * fix telegram string and array issue * update telegram_handle * fix handle and URL * fix tests * prettier update * fix tests * prettier update * Bugfix/559 error flashes (#569) * fix: flash on home screen * fix: error flash on addon tabs * fix: telegram bug * test fix Tile error flash * fix: catch Tile error flash in every component it is used * remove console.log * Playwright test for input validatiojn (#577) * feature: Added input validation when creating and editing a community (#172) * feature: Added input validation when creating and editing a community * feature: Added input validation when creating and editing a community * feature: Added input validation when creating and editing a community * test: Added test for input validation * fix CI (#581) * fix the test case * Improve robustness of admin moderator tests * Clear draft changes after txn is approved (#588) * remove `onDraftStateChange` from editor * updated changes * move txn hash as props * update draft change --------- Co-authored-by: Elliot Braem <[email protected]> Co-authored-by: T guntenaar <[email protected]> Co-authored-by: Espen Simensen <[email protected]>
NEAR-DevHub · Dec 26, 2023 · 6b56e41 · 6b56e41
1 parent e546fa0
commit 6b56e41
Show file tree

Hide file tree

Showing 4 changed files with 648 additions and 47 deletions.
diff --git a/src/core/adapter/devhub-contract.jsx b/src/core/adapter/devhub-contract.jsx
@@ -112,52 +112,6 @@ function getAllCommunitiesMetadata() {
   );
 }
 
-function getAvailableAddons() {
-  return [
-    {
-      id: "wiki",
-      title: "Wiki",
-      description: "Create a wiki for your community",
-      view_widget: "${REPL_DEVHUB}/widget/devhub.entity.addon.wiki.Viewer",
-      configurator_widget:
-        "${REPL_DEVHUB}/widget/devhub.entity.addon.wiki.Configurator",
-    },
-    {
-      id: "telegram",
-      title: "Telegram",
-      description: "Connect your telegram",
-      view_widget: "${REPL_DEVHUB}/widget/devhub.entity.addon.telegram.Viewer",
-      configurator_widget:
-        "${REPL_DEVHUB}/widget/devhub.entity.addon.telegram.Configurator",
-    },
-    {
-      id: "github",
-      title: "Github",
-      description: "Connect your github",
-      view_widget: "${REPL_DEVHUB}/widget/devhub.entity.addon.github.Viewer",
-      configurator_widget:
-        "${REPL_DEVHUB}/widget/devhub.entity.addon.github.Configurator",
-    },
-    {
-      id: "kanban",
-      title: "Kanban",
-      description: "Connect your github kanban board",
-      view_widget: "${REPL_DEVHUB}/widget/devhub.entity.addon.kanban.Viewer",
-      configurator_widget:
-        "${REPL_DEVHUB}/widget/devhub.entity.addon.kanban.Configurator",
-    },
-    {
-      id: "blog",
-      title: "Blog",
-      description: "Create a blog for your community",
-      view_widget: "${REPL_DEVHUB}/widget/devhub.entity.addon.blog.Viewer",
-      configurator_widget:
-        "${REPL_DEVHUB}/widget/devhub.entity.addon.blog.Configurator",
-    },
-  ];
-  // return Near.view("${REPL_DEVHUB_CONTRACT}", "get_available_addons") ?? null;
-}
-
 function getCommunityAddons({ handle }) {
   return Near.view("${REPL_DEVHUB_CONTRACT}", "get_community_addons", {
     handle,
@@ -193,6 +147,15 @@ function getPostsByLabel({ label }) {
   );
 }
 
+function addCommunityAnnouncement({ handle, data }) {
+  return (
+    Near.call("${REPL_DEVHUB_CONTRACT}", "add_community_announcement", {
+      handle,
+      data,
+    }) ?? null
+  );
+}
+
 function useQuery(name, params) {
   const initialState = { data: null, error: null, isLoading: true };
 
@@ -246,5 +209,6 @@ return {
   getPost,
   getPostsByAuthor,
   getPostsByLabel,
+  addCommunityAnnouncement,
   useQuery,
 };
diff --git a/src/devhub/entity/community/Announcements.jsx b/src/devhub/entity/community/Announcements.jsx
@@ -0,0 +1,151 @@
+const { handle } = props;
+const { Feed } = VM.require("devs.near/widget/Module.Feed");
+const { getCommunity, addCommunityAnnouncement } = VM.require(
+  "${REPL_DEVHUB}/widget/core.adapter.devhub-contract"
+);
+
+Feed = Feed || (() => <></>);
+getCommunity = getCommunity || (() => <></>);
+addCommunityAnnouncement = addCommunityAnnouncement || (() => <></>);
+
+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 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;
+  }
+`;
+
+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: 13px;
+  color: rgba(0, 236, 151, 1);
+  font-weight: 700;
+`;
+
+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 &&
+            (communityData?.admins ?? []).includes(context.accountId) && (
+              <div className="card p-3">
+                <Widget
+                  src={"${REPL_DEVHUB}/widget/devhub.entity.community.Compose"}
+                  props={{
+                    optimisticUpdateFn: () => console.log("commit"),
+                    clearOptimisticUpdateFn: () => console.log("clear"),
+                    onSubmit: (v) =>
+                      addCommunityAnnouncement({ handle, data: v }),
+                  }}
+                />
+              </div>
+            )}
+          <div className="d-flex flex-wrap justify-content-between">
+            <h5>Announcements</h5>
+            <div className="d-flex align-items-center gap-2">
+              <select
+                name="sort"
+                id="sort"
+                class="form-select"
+                onChange={(e) => setSort(e.target.value)}
+              >
+                <option selected value="">
+                  Latest
+                </option>
+                <option value="a-z">A-Z</option>
+                <option value="z-a">Z-A</option>
+              </select>
+            </div>
+          </div>
+          <div className="card p-3">
+            <Feed
+              index={[
+                {
+                  action: "post",
+                  key: "main",
+                  options: {
+                    limit: 10,
+                    order: "desc",
+                    accountId: [`${handle}.communities.devhub.near`],
+                  },
+                  cacheOptions: {
+                    ignoreCache: true,
+                  },
+                },
+              ]}
+              Item={(p) => (
+                <Widget
+                  loading={
+                    <div className="w-100" style={{ height: "200px" }} />
+                  }
+                  src="mob.near/widget/MainPage.N.Post"
+                  props={{
+                    accountId: p.accountId,
+                    blockHeight: p.blockHeight,
+                  }}
+                />
+              )}
+            />
+          </div>
+        </div>
+      </MainContent>
+      <SidebarContainer>
+        <div className="d-flex flex-column gap-3">
+          <div className="card p-3">
+            <p>{communityData?.description}</p>
+            <p className="d-flex gap-2 flex-wrap">
+              <Tag>{communityData?.tag} </Tag>
+            </p>
+          </div>
+          <div className="card p-3 d-flex flex-column gap-2">
+            <h6>Community Admins</h6>
+            {(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>
+);