Merge pull request #38 from Megha-Dev-19/consolidate-components

Consolidate Feeds, Resources component and added hashtags feed support

apps/builddao/widget/Feed.jsx

@@ -1,5 +1,7 @@
 const { Feed } = VM.require("devs.near/widget/Module.Feed");
+const { Button } = VM.require("buildhub.near/widget/components.Button");
 
+Button || (Button = () => <></>);
 Feed = Feed || (() => <></>); // ensure it's defined or set to a default component
 
 const { type, hashtag } = props;
@@ -14,25 +16,6 @@ function formatDate(date) {
   return date.toLocaleDateString("en-US", options);
 }
 
-const Container = styled.div`
-  display: grid;
-  grid-template-columns: repeat(5, minmax(0, 1fr));
-  gap: 1rem;
-
-  @media screen and (max-width: 768px) {
-    display: flex;
-    flex-direction: column;
-  }
-`;
-
-const StyledAside = styled.div`
-  grid-column: span 1 / span 1;
-`;
-
-const MainContent = styled.div`
-  grid-column: span 4 / span 4;
-`;
-
 const feeds = {
   resolutions: {
     label: "Resolutions",
@@ -53,12 +36,13 @@ const feeds = {
 **📊 MEASURING SUCCESS:**
 - [Metric 1 for Success]
 - [Metric 2 for Success]
-`,
+`
   },
   updates: {
     label: "Updates",
     icon: "bi-bell",
     name: "update",
+    hashtag: "update",
     template: `### BUILDER UPDATE:  ${formatDate(new Date())}
 (posted via [Build DAO Gateway](https://nearbuilders.org/feed?hashtag=update))
 
@@ -73,12 +57,13 @@ const feeds = {
 **🛑 BLOCKERS**
 - [what's blocking you?]
 - [how can someone help?]
-`,
+`
   },
   documentation: {
     label: "Documentation",
     icon: "bi-book",
     name: "documentation",
+    hashtag: "documentation",
     template: `## TITLE
 (posted via [Build DAO Gateway](https://nearbuilders.org/feed?hashtag=documentation))
 
@@ -93,37 +78,40 @@ const feeds = {
 **USAGE**
 - [where is it used?]
 - [how to use it]
-`,
+`
   },
   question: {
     label: "Question",
     icon: "bi-question-lg",
     name: "question",
+    hashtag: "question",
     template: `## what is your question?
 (posted via [Build DAO Gateway](https://nearbuilders.org/feed?hashtag=question))
 
 [what are you thinking about?]
 [why are you asking?]
-`,
+`
   },
   opportunity: {
     label: "Opportunity",
     icon: "bi-briefcase",
     name: "opportunity",
+    hashtag: "opportunity",
     template: `## TITLE
 (posted via [Build DAO Gateway](https://nearbuilders.org/feed?hashtag=opportunity))
 
 [what is the opportunity?]
 
 [explain the motivation or reason]
 
-`,
+`
   },
   idea: {
     label: "Idea",
     icon: "bi-lightbulb",
     name: "idea",
-    template: ``,
+    hashtag: "idea",
+    template: ``
   },
   task: {
     label: "Task",
@@ -137,74 +125,86 @@ const feeds = {
 
 **Context or additional information:**
 - [Provide any context or details]
-`,
+`
   },
   bookmarks: {
     label: "Bookmarks",
     icon: "bi-bookmark",
-    name: "bookmark",
-  },
+    name: "bookmark"
+  }
 };
 
 const [activeFeed, setActiveFeed] = useState(type || "resolutions");
 const [template, setTemplate] = useState("What did you have in mind?");
 
 return (
-  <Container>
-    <StyledAside key={JSON.stringify(feeds)}>
-      <Widget
-        src="buildhub.near/widget/Aside"
-        props={{
-          active: activeFeed,
-          setActiveRoute: setActiveFeed,
-          routes: feeds,
-        }}
-      />
-    </StyledAside>
-    <MainContent>
-      {context.accountId ? (
-        activeFeed !== "bookmarks" ? (
-          <Widget
-            src="/*__@appAccount__*//widget/Compose"
-            props={{
-              feed: feeds[activeFeed],
-              template: feeds[activeFeed].template,
-            }}
-          />
-        ) : (
-          <Widget src="/*__@appAccount__*//widget/Bookmarks" />
-        )
-      ) : (
-        <Widget
-          src="/*__@appAccount__*//widget/components.login-now"
-          props={props}
-        />
-      )}
-      {activeFeed !== "bookmarks" && (
-        <Feed
-          index={[
-            {
-              action: "hashtag",
-              key: activeFeed,
-              options: {
-                limit: 10,
-                order: "desc",
-                accountId: props.accounts,
-              },
-              cacheOptions: {
-                ignoreCache: true,
-              },
-            },
-          ]}
-          Item={(p) => (
-            <Post
-              accountId={p.accountId}
-              blockHeight={p.blockHeight}
-              noBorder={true}
+  <Widget
+    src="/*__@appAccount__*//widget/components.AsideWithMainContent"
+    props={{
+      sideContent: Object.keys(feeds || {}).map((route) => {
+        const data = feeds[route];
+        return (
+          <Button
+            id={route}
+            variant={activeFeed === route ? "primary" : "outline"}
+            onClick={() => setActiveFeed(route)}
+            className={
+              "align-self-stretch flex-shrink-0 justify-content-start fw-medium"
+            }
+            style={{ fontSize: "14px" }}
+          >
+            <i className={`bi ${data.icon} `}></i>
+            {data.label}
+          </Button>
+        );
+      }),
+      mainContent: (
+        <>
+          {context.accountId ? (
+            activeFeed !== "bookmarks" ? (
+              <Widget
+                src="/*__@appAccount__*//widget/Compose"
+                props={{
+                  feed: feeds[activeFeed],
+                  template: feeds[activeFeed].template
+                }}
+              />
+            ) : (
+              <Widget src="/*__@appAccount__*//widget/Bookmarks" />
+            )
+          ) : (
+            <Widget
+              src="/*__@appAccount__*//widget/components.login-now"
+              props={props}
+            />
+          )}
+          {activeFeed !== "bookmarks" && (
+            <Feed
+              index={[
+                {
+                  action: "hashtag",
+                  key: feeds[activeFeed].hashtag,
+                  options: {
+                    limit: 10,
+                    order: "desc",
+                    accountId: context.accountId
+                  },
+                  cacheOptions: {
+                    ignoreCache: true
+                  }
+                }
+              ]}
+              Item={(p) => (
+                <Post
+                  accountId={p.accountId}
+                  blockHeight={p.blockHeight}
+                  noBorder={true}
+                />
+              )}
             />
           )}
-        />
-      )}
-    </MainContent>
-  </Container>
+        </>
+      )
+    }}
+  />
 );

apps/builddao/widget/Resources.jsx

@@ -1,24 +1,8 @@
-const { MarkdownView } =
-  VM.require("buildhub.near/widget/md-view") || (() => <></>);
+const { MarkdownView } = VM.require("buildhub.near/widget/md-view");
+const { Button } = VM.require("buildhub.near/widget/components.Button");
 
-const Container = styled.div`
-  display: grid;
-  grid-template-columns: repeat(5, minmax(0, 1fr));
-  gap: 1rem;
-
-  @media screen and (max-width: 768px) {
-    display: flex;
-    flex-direction: column;
-  }
-`;
-
-const Aside = styled.div`
-  grid-column: span 1 / span 1;
-`;
-
-const MainContent = styled.div`
-  grid-column: span 4 / span 4;
-`;
+Button || (Button = () => <></>);
+MarkdownView || (MarkdownView = () => <></>);
 
 const fetchResources = () => {
   const res = fetch(
@@ -33,34 +17,30 @@ if (!resources) {
   return <div>Loading...</div>;
 }
 
-console.log(resources);
-
-const [currentResource, setCurrentResource] = useState(resources[0].name);
-
-function getMdLinkByName(nameToFind) {
-  for (const item of resources) {
-    if (item.name === nameToFind) {
-      return item.mdLink;
-    }
-  }
-
-  return null;
-}
+const [currentResource, setCurrentResource] = useState(resources[0]);
 
 return (
-  <Container>
-    <Aside>
-      <Widget
-        src="/*__@appAccount__*//widget/resources-aside"
-        props={{
-          currentResource: currentResource,
-          setCurrentResource: setCurrentResource,
-          resources: resources,
-        }}
-      />
-    </Aside>
-    <MainContent>
-      <MarkdownView path={getMdLinkByName(currentResource)} />
-    </MainContent>
-  </Container>
+  <Widget
+    src="/*__@appAccount__*//widget/components.AsideWithMainContent"
+    props={{
+      sideContent: Object.keys(resources || {}).map((resource) => {
+        const data = resources[resource];
+        return (
+          <Button
+            id={resource}
+            variant={currentResource.name === data.name ? "primary" : "outline"}
+            onClick={() => setCurrentResource(data)}
+            className={
+              "align-self-stretch flex-shrink-0 justify-content-start fw-medium"
+            }
+            style={{ fontSize: "14px" }}
+          >
+            <i className={`bi ${data.biIcon} `}></i>
+            {data.name}
+          </Button>
+        );
+      }),
+      mainContent: <MarkdownView path={currentResource.mdLink} />
+    }}
+  />
 );