Feed UI fixes, on top of Zeeshans w/ fixed test (#389)

* fix: links on post tags * Streamline Communities UI * fix: add post history back * fix: hide post button when not logged in --------- Co-authored-by: Zeeshan Ahmad <[email protected]>
NEAR-DevHub · Nov 1, 2023 · 3e584e8 · 3e584e8
1 parent ecf1264
commit 3e584e8
Show file tree

Hide file tree

Showing 8 changed files with 93 additions and 59 deletions.
diff --git a/src/devhub/components/atom/Tag.jsx b/src/devhub/components/atom/Tag.jsx
@@ -1,5 +1,7 @@
+const black = props.black;
+
 const Span = styled.span`
-  color: #00ec97;
+  color: ${black ? "#818181" : "#00ec97"};
   font-size: 16px;
   font-style: normal;
   font-weight: 700;

diff --git a/src/devhub/components/molecule/ProfileCard.jsx b/src/devhub/components/molecule/ProfileCard.jsx
@@ -50,6 +50,9 @@ const ProfileCard = (props) => {
         />
       )}
       <div className="d-flex gap-1">
+        {props.communityName && (
+          <span className="fw-bold">/{props.communityName} • </span>
+        )}
         <MutedText key="name">Posted by</MutedText>
         <AccountName key="accountId">
           {name} @{accountId}

diff --git a/src/devhub/components/organism/Navbar.jsx b/src/devhub/components/organism/Navbar.jsx
@@ -156,7 +156,7 @@ const links = [
   {
     title: "/about",
     links: [
-      { title: "mission", href: "about" },
+      { title: "mission", href: "mission" },
       { title: "blog", href: "blog" },
       { title: "newsletter", href: "newsletter" },
       { title: "calendar", href: "calendar" },

diff --git a/src/devhub/entity/community/Activity.jsx b/src/devhub/entity/community/Activity.jsx
@@ -17,8 +17,6 @@ if (communityData === null) {
   return <div>Loading...</div>;
 }
 
-console.log(communityData.tag);
-
 return (
   <div style={{ maxWidth: "100%" }}>
     <div class="col">
@@ -29,6 +27,7 @@ return (
             props={{
               hideHeader: true,
               tag: communityData.tag,
+              communityName: communityData.name,
               children: (
                 <Widget
                   src={

diff --git a/src/devhub/entity/post/List.jsx b/src/devhub/entity/post/List.jsx
@@ -175,6 +175,7 @@ function defaultRenderItem(postId, additionalProps) {
           onDraftStateChange,
           ...additionalProps,
           referral: postId,
+          communityName: props.communityName,
         }}
       />
     </div>

diff --git a/src/devhub/entity/post/Post.jsx b/src/devhub/entity/post/Post.jsx
@@ -158,18 +158,16 @@ const header = (
   <div key="header">
     <small class="text-muted">
       <div class="row justify-content-between">
-        <div class="col-4">
+        <div class="d-flex align-items-center">
           <Widget
-            // TODO: LEGACY.
-            src={
-              "${REPL_DEVHUB}/widget/gigs-board.components.molecule.profile-card"
-            }
+            src={"${REPL_DEVHUB}/widget/devhub.components.molecule.ProfileCard"}
             props={{
               accountId: post.author_id,
               nearDevGovGigsWidgetsAccountId: "${REPL_DEVHUB}",
+              communityName: props.communityName,
             }}
           />
-          <span>•</span>
+          <span className="fw-bold"> • </span>
           <div class="d-flex">
             {editControl}
             {timestamp}
@@ -180,7 +178,7 @@ const header = (
                 timestamp: currentTimestamp,
               }}
             />
-            {shareButton}
+            {/* {shareButton} */}
           </div>
         </div>
       </div>
@@ -560,21 +558,32 @@ const renamedPostType =
 
 const tags = post.snapshot.labels ? (
   <div
-    class="card-title d-flex flex-wrap"
+    class="card-title d-flex flex-wrap align-items-center"
     style={{ margin: "20px 0" }}
     key="post-labels"
   >
     {post.snapshot.labels.map((tag, idx) => (
-      <div className="d-flex gap-3 align-items-center my-3 me-3">
-        <Widget
-          src={"${REPL_DEVHUB}/widget/devhub.components.atom.Tag"}
-          props={{
-            tag,
-          }}
-        />
+      <Link
+        to={href({
+          widgetSrc: "${REPL_DEVHUB}/widget/app",
+          params: { page: "feed", tag: tag },
+        })}
+      >
+        <div
+          className="d-flex gap-3 align-items-center my-3 me-3"
+          style={{ cursor: "pointer", textDecoration: "none" }}
+        >
+          <Widget
+            src={"${REPL_DEVHUB}/widget/devhub.components.atom.Tag"}
+            props={{
+              tag,
+              black: true,
+            }}
+          />
 
-        {idx !== post.snapshot.labels.length - 1 && "•"}
-      </div>
+          {idx !== post.snapshot.labels.length - 1 && "•"}
+        </div>
+      </Link>
     ))}
   </div>
 ) : (
@@ -712,7 +721,7 @@ const descriptionArea = isUnderPost ? (
     {state.clamp ? (
       <div class="d-flex justify-content-start">
         <a
-          style={{ cursor: "pointer" }}
+          style={{ cursor: "pointer", color: "#00ec97" }}
           class="btn-link text-dark fw-bold text-decoration-none"
           onClick={() => State.update({ clamp: false })}
         >

diff --git a/src/devhub/feature/post-search/panel.jsx b/src/devhub/feature/post-search/panel.jsx
@@ -198,6 +198,7 @@ return (
             loading: state.loading,
             searchResult: state.searchResult,
             recency: props.recency,
+            communityName: props.communityName,
           }}
         />
       ) : (
@@ -207,6 +208,7 @@ return (
             loading: state.loading,
             recency: props.recency,
             transactionHashes: props.transactionHashes,
+            communityName: props.communityName,
           }}
         />
       )}

diff --git a/src/devhub/page/community/index.jsx b/src/devhub/page/community/index.jsx
@@ -200,15 +200,26 @@ return (
         </div>
       </div>
 
-      <div className="d-flex align-items-end gap-3 ms-auto">
+      <div className="d-flex align-items-end gap-3 ms-auto mb-5">
         {permissions.can_configure && (
           <Link
             to={`/${REPL_DEVHUB}/widget/app?page=community.configuration&handle=${community.handle}`}
           >
             <Widget
               src={"${REPL_DEVHUB}/widget/devhub.components.molecule.Button"}
               props={{
-                classNames: { root: "btn-outline-light text-dark" },
+                classNames: { root: "btn-outline-light text-dark shadow-none" },
+                notRounded: true,
+                style: {
+                  display: "flex",
+                  padding: "0.75rem 1rem",
+                  alignItems: "center",
+                  gap: "16px",
+
+                  borderRadius: "4px",
+                  border: "1px solid #00EC97",
+                  background: "rgba(129, 129, 129, 0.00)",
+                },
                 icon: {
                   type: "bootstrap_icon",
                   variant: "bi-gear-wide-connected",
@@ -218,6 +229,27 @@ return (
             />
           </Link>
         )}
+        <Widget
+          src={"${REPL_DEVHUB}/widget/devhub.components.molecule.Button"}
+          props={{
+            classNames: { root: "btn-outline-light text-dark shadow-none" },
+            notRounded: true,
+            style: {
+              display: "flex",
+              padding: "0.75rem 1rem",
+              alignItems: "center",
+              gap: "16px",
+
+              borderRadius: "4px",
+              border: "1px solid #00EC97",
+              background: "rgba(129, 129, 129, 0.00)",
+            },
+            label: "Share ↗",
+            onClick: onShareClick,
+            onMouseLeave: () => setLinkCopied(false),
+            title: "Copy link to clipboard",
+          }}
+        />
       </div>
     </div>
     <div className="bg-white" style={{ padding: "0 3rem" }}>
@@ -247,41 +279,10 @@ return (
             )
         )}
       </NavUnderline>
-      <div className="my-4 d-flex align-items-center" style={{ gap: "2.5rem" }}>
-        <Widget
-          src={"${REPL_DEVHUB}/widget/devhub.components.molecule.Button"}
-          props={{
-            classNames: { root: "btn-outline-light text-dark shadow-none" },
-            notRounded: true,
-            style: {
-              display: "flex",
-              padding: "0.75rem 1rem",
-              alignItems: "center",
-              gap: "16px",
-
-              borderRadius: "4px",
-              border: "1px solid #00EC97",
-              background: "rgba(129, 129, 129, 0.00)",
-            },
-            label: "Share ↗",
-            onClick: onShareClick,
-            onMouseLeave: () => setLinkCopied(false),
-            title: "Copy link to clipboard",
-          }}
-        />
-        <Widget
-          src={"${REPL_DEVHUB}/widget/devhub.components.molecule.PostControls"}
-          props={{
-            title: "Post",
-            href: href({
-              widgetSrc: "${REPL_DEVHUB}/widget/app",
-              params: {
-                page: "create",
-                labels: [community.tag],
-              },
-            }),
-          }}
-        />
+      <div
+        className="my-4 d-flex align-items-center justify-content-between"
+        style={{ gap: "2.5rem" }}
+      >
         <div class="d-flex align-items-center justify-content-between">
           <small class="text-muted">
             <span>Required tags:</span>
@@ -300,6 +301,23 @@ return (
             </Link>
           </small>
         </div>
+        {context.accountId && (
+          <Widget
+            src={
+              "${REPL_DEVHUB}/widget/devhub.components.molecule.PostControls"
+            }
+            props={{
+              title: "Post",
+              href: href({
+                widgetSrc: "${REPL_DEVHUB}/widget/app",
+                params: {
+                  page: "create",
+                  labels: [community.tag],
+                },
+              }),
+            }}
+          />
+        )}
       </div>
     </div>
     {currentTab && (