Merge pull request #79 from NEARBuilders/URL-params-feed

Add URL params to feed

apps/builddao/widget/Feed.jsx

@@ -1,13 +1,19 @@
 const { Feed } = VM.require("devs.near/widget/Module.Feed");
-const { Button } = VM.require("buildhub.near/widget/components.Button");
+const { ButtonLink } = VM.require("buildhub.near/widget/components.ButtonLink");
 
-Button || (Button = () => <></>);
+ButtonLink || (ButtonLink = () => <></>);
 Feed = Feed || (() => <></>); // ensure it's defined or set to a default component
 
 const { type, hashtag } = props;
 type = hashtag;
 hashtag = type;
 
+const tab = props.tab || "resolutions";
+
+if (!tab) {
+  return "";
+}
+
 const { Post } = VM.require("buildhub.near/widget/components");
 Post = Post || (() => <></>);
 
@@ -36,7 +42,7 @@ const feeds = {
 **📊 MEASURING SUCCESS:**
 - [Metric 1 for Success]
 - [Metric 2 for Success]
-`
+`,
   },
   updates: {
     label: "Updates",
@@ -57,7 +63,7 @@ const feeds = {
 **🛑 BLOCKERS**
 - [what's blocking you?]
 - [how can someone help?]
-`
+`,
   },
   documentation: {
     label: "Documentation",
@@ -78,7 +84,7 @@ const feeds = {
 **USAGE**
 - [where is it used?]
 - [how to use it]
-`
+`,
   },
   question: {
     label: "Question",
@@ -90,7 +96,7 @@ const feeds = {
 
 [what are you thinking about?]
 [why are you asking?]
-`
+`,
   },
   answer: {
     label: "Answer",
@@ -105,7 +111,7 @@ const feeds = {
 [your answer]
 
 [link to relevant docs, examples, or resources]
-`
+`,
   },
   opportunity: {
     label: "Opportunity",
@@ -119,14 +125,14 @@ const feeds = {
 
 [explain the motivation or reason]
 
-`
+`,
   },
   idea: {
     label: "Idea",
     icon: "bi-lightbulb",
     name: "idea",
     hashtag: "idea",
-    template: ``
+    template: ``,
   },
   task: {
     label: "Task",
@@ -140,16 +146,16 @@ 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 [activeFeed, setActiveFeed] = useState(tab || "resolutions");
 const [template, setTemplate] = useState("What did you have in mind?");
 
 return (
@@ -159,18 +165,22 @@ return (
       sideContent: Object.keys(feeds || {}).map((route) => {
         const data = feeds[route];
         return (
-          <Button
+          <ButtonLink
             id={route}
             variant={activeFeed === route ? "primary" : "outline"}
-            onClick={() => setActiveFeed(route)}
+            href={`/feed?tab=${route}`}
             className={
               "align-self-stretch flex-shrink-0 justify-content-start fw-medium"
             }
-            style={{ fontSize: "14px" }}
+            style={{
+              fontSize: "14px",
+              textDecoration: "none",
+              cursor: "pointer",
+            }}
           >
             <i className={`bi ${data.icon} `}></i>
             {data.label}
-          </Button>
+          </ButtonLink>
         );
       }),
       mainContent: (
@@ -181,7 +191,7 @@ return (
                 src="/*__@appAccount__*//widget/Compose"
                 props={{
                   feed: feeds[activeFeed],
-                  template: feeds[activeFeed].template
+                  template: feeds[activeFeed].template,
                 }}
               />
             ) : (
@@ -204,9 +214,9 @@ return (
                     order: "desc",
                   },
                   cacheOptions: {
-                    ignoreCache: true
-                  }
-                }
+                    ignoreCache: true,
+                  },
+                },
               ]}
               Item={(p) => (
                 <Post
@@ -218,7 +228,7 @@ return (
             />
           )}
         </>
-      )
+      ),
     }}
   />
 );

apps/builddao/widget/components/ButtonLink.jsx

@@ -0,0 +1,80 @@
+const StyledLink = styled.a`
+  all: unset;
+  display: inline-flex;
+  padding: 10px 20px;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+  border-radius: 8px;
+  font: 500 14px / normal;
+  transition: all 300ms;
+
+  ${(props) =>
+    props.type === "icon" &&
+    `
+    display: flex;
+    width: 40px;
+    height: 40px;
+    padding: 5px;
+    flex-shrink: 0;
+    border-radius: 50%;
+  `}
+
+  /* Colors based on variant prop */
+  background: ${(props) => {
+    switch (props.variant) {
+      case "primary":
+        return "#FFAF51";
+      case "outline":
+        return "transparent";
+      default:
+        return "#23242B";
+    }
+  }};
+
+  color: ${(props) => {
+    switch (props.variant) {
+      case "primary":
+        return "#000";
+      case "outline":
+        return "#fff";
+      default:
+        return "#CDD0D5";
+    }
+  }};
+
+  border: ${(props) =>
+    props.variant === "outline" ? "1px solid rgba(255, 255, 255, 0.20)" : ""};
+
+  /* Hover states */
+  &:hover {
+    background: ${(props) => {
+      switch (props.variant) {
+        case "primary":
+          return "#e49b48";
+        case "outline":
+          return "rgba(255, 255, 255, 0.20)";
+        default:
+          return "#17181c";
+      }
+    }};
+  }
+`;
+
+function ButtonLink({ id, children, variant, type, href, className, style }) {
+  return (
+    <StyledLink
+      id={id}
+      key={`ButtonLink-${type ?? "Normal"}-${variant ?? "Default"}-${id}`}
+      className={className}
+      variant={variant}
+      type={type}
+      style={style}
+      href={href}
+    >
+      {children}
+    </StyledLink>
+  );
+}
+
+return { ButtonLink };