feature: implements feed

NEAR-DevHub · Oct 14, 2023 · a792b44 · a792b44
1 parent 5b0efc9
commit a792b44
Show file tree

Hide file tree

Showing 5 changed files with 152 additions and 22 deletions.
diff --git a/src/DevHub/App.jsx b/src/DevHub/App.jsx
@@ -45,7 +45,7 @@ const Theme = styled.div`
 
 if (!page) {
   // If no page is specified, we default to the home page
-  page = "home";
+  page = "feed";
 }
 
 // This is our navigation, rendering the page based on the page parameter
@@ -118,7 +118,7 @@ function Page() {
       // TODO: This needs to be updated, old widget has the header attached
       return (
         <Widget
-          src={`${nearDevGovGigsWidgetsAccountId}/widget/gigs-board.pages.Feed`}
+          src={`${nearDevGovGigsWidgetsAccountId}/widget/DevHub.pages.feed`}
           props={{
             nearDevGovGigsWidgetsAccountId,
             nearDevGovGigsContractAccountId,

diff --git a/src/DevHub/entity/community/Blog.jsx b/src/DevHub/entity/community/Blog.jsx
@@ -1,23 +1,7 @@
 
-// State.init({
-//   initial: { author, tag },
-//   author,
-//   tag,
-// });
-
 const [author, setAuthor] = useState(props.author || "");
 const [tag, setTag] = useState(props.tag || "");
 
-// // When rerendered with different props, State will be preserved, so we need to update the state when we detect that the props have changed.
-// if (tag !== state.initial.tag || author !== state.initial.author) {
-//   State.update((lastKnownState) => ({
-//     ...lastKnownState,
-//     initial: { author, tag },
-//     author,
-//     tag,
-//   }));
-// }
-
 const onTagSearch = (tag) => {
   setTag(tag);
 };

diff --git a/src/DevHub/modules/contract-sdk.jsx b/src/DevHub/modules/contract-sdk.jsx
@@ -14,6 +14,10 @@ function getCommunity(devHubAccountId, { handle }) {
   return Near.view(devHubAccountId, "get_community", { handle }) ?? null;
 }
 
+function getFeaturedCommunities(devHubAccountId) {
+  return Near.view(devHubAccountId, "get_featured_communities") ?? null;
+}
+
 function getAccountCommunityPermissions(devHubAccountId, { account_id, community_handle }) {
   return (
     Near.view(devHubAccountId, "get_account_community_permissions", {
@@ -139,6 +143,7 @@ return {
   hasModerator,
   createCommunity,
   getCommunity,
+  getFeaturedCommunities,
   getAccountCommunityPermissions,
   updateCommunity,
   deleteCommunity,

diff --git a/src/DevHub/modules/utils.jsx b/src/DevHub/modules/utils.jsx
@@ -49,10 +49,12 @@ const Struct = {
 };
 
 function href({ gateway, widgetSrc, params }) {
-  params = Object.entries(params)
-    .filter(([_key, nullable]) => (nullable ?? null) !== null)
-    .map(([key, value]) => `${key}=${value}`)
-    .join("&");
+  if (params) {
+    params = (Object.entries(params) || [])
+      .filter(([_key, nullable]) => (nullable ?? null) !== null)
+      .map(([key, value]) => `${key}=${value}`)
+      .join("&");
+  }
 
   return `${gateway ? `https://${gateway}` : ""}/${widgetSrc}/${
     params ? `?${params}` : ""

diff --git a/src/DevHub/pages/feed.jsx b/src/DevHub/pages/feed.jsx
@@ -0,0 +1,139 @@
+const {
+  nearDevGovGigsWidgetsAccountId,
+  nearDevGovGigsContractAccountId,
+  author,
+  recency,
+  tag,
+} = props;
+
+const { getFeaturedCommunities } = VM.require(
+  `${nearDevGovGigsWidgetsAccountId}/widget/DevHub.modules.contract-sdk`
+);
+
+const { href } = VM.require(
+  `${nearDevGovGigsWidgetsAccountId}/widget/DevHub.modules.utils`
+);
+
+if (!getFeaturedCommunities || !href) {
+  return <p>Loading modules...</p>;
+}
+
+const Gradient = styled.div`
+   {
+    height: 250px;
+    text-align: center;
+    background: radial-gradient(
+      circle,
+      rgba(29, 55, 57, 1) 30%,
+      rgba(24, 24, 24, 1) 80%
+    );
+
+    font-family: Arial, sans-serif;
+  }
+
+  .text-primary-gradient {
+    color: #53fdca;
+    -webkit-text-fill-color: transparent;
+    background-image: linear-gradient(#8e76ba, #1ed2f0);
+    -webkit-background-clip: text;
+    background-clip: text;
+  }
+
+  .subtitle-above {
+    font-size: 18px;
+    letter-spacing: 1px;
+    font-family: Courier, monospace;
+  }
+
+  .subtitle-below {
+    font-size: 16px;
+  }
+
+  .slogan {
+    font-weight: 600;
+    font-size: 60px;
+  }
+`;
+
+const featuredCommunities =
+  getFeaturedCommunities(nearDevGovGigsContractAccountId) || [];
+
+function Banner() {
+  return (
+    <div className="d-flex flex-column">
+      <Gradient className="d-flex flex-column justify-content-center">
+        <div className="subtitle-above text-white opacity-75 mb-2">
+          A decentralized community of
+        </div>
+
+        <h1 className="mb-3 text-white slogan">
+          <span className="text-primary-gradient">NEAR </span>Developers
+        </h1>
+
+        <div className="subtitle-below text-white opacity-75">
+          Share your ideas, match solutions, and access support and funding.
+        </div>
+      </Gradient>
+
+      <div className="d-flex flex-column gap-4 py-4">
+        <div className="d-flex justify-content-between">
+          <h5 className="h5 m-0">Featured Communities</h5>
+        </div>
+        <div className="d-flex gap-4 justify-content-between">
+          {featuredCommunities.map((community) => (
+            <Widget
+              src={`${nearDevGovGigsWidgetsAccountId}/widget/DevHub.entity.community.card`}
+              props={{ metadata: community, format: "medium" }}
+            />
+          ))}
+        </div>
+      </div>
+
+      <div className="h5 pb-4">Activity</div>
+    </div>
+  );
+}
+
+const [searchTag, setSearchTag] = useState(tag || "");
+const [searchAuthor, setSearchAthor] = useState(author || "");
+
+const onTagSearch = (tag) => {
+  setSearchTag(tag);
+};
+
+const onAuthorSearch = (author) => {
+  setSearchAthor(author);
+};
+return (
+  <div className="w-100">
+    <Banner />
+    <Widget
+      src={`${nearDevGovGigsWidgetsAccountId}/widget/gigs-board.feature.post-search.panel`}
+      props={{
+        author: searchAuthor,
+        authorQuery: { author: searchAuthor },
+        children: (
+          <Widget
+            src={`${nearDevGovGigsWidgetsAccountId}/widget/gigs-board.components.layout.Controls`}
+            props={{
+              title: "Post",
+              href: href({
+                widgetSrc: `${nearDevGovGigsWidgetsAccountId}/widget/gigs-board.pages.Create`,
+              }),
+              nearDevGovGigsContractAccountId: nearDevGovGigsContractAccountId,
+              nearDevGovGigsWidgetsAccountId: nearDevGovGigsWidgetsAccountId,
+            }}
+          />
+        ),
+        onAuthorSearch,
+        onTagSearch,
+        recency,
+        tag: searchTag,
+        tagQuery: { tag: searchTag },
+        transactionHashes: props.transactionHashes,
+        nearDevGovGigsContractAccountId: nearDevGovGigsContractAccountId,
+        nearDevGovGigsWidgetsAccountId: nearDevGovGigsWidgetsAccountId,
+      }}
+    />
+  </div>
+);