Add feed to project page (#356)

* Add feed to project page * Change editor * resolve comments * Resolve comment * use config_index --------- Co-authored-by: Megha <[email protected]>
NEARBuilders · Jun 6, 2024 · ff85ea5 · ff85ea5
1 parent 63b6889
commit ff85ea5
Show file tree

Hide file tree

Showing 6 changed files with 131 additions and 82 deletions.
diff --git a/apps/new/widget/CSS.jsx b/apps/new/widget/CSS.jsx
@@ -166,6 +166,16 @@ const CSS = styled.div`
 
   /* Fix compose */
   --bg-2: #23242b;
+
+  /* Typeahead Fix */
+  .rbt-token-removeable {
+    background: #007bff;
+    color: #fff;
+  }
+
+  .placeholder-glow {
+    background: var(--bg-1, black);
+  }
 `;
 
 return { CSS };
diff --git a/apps/new/widget/lib/projects.jsx b/apps/new/widget/lib/projects.jsx
@@ -95,7 +95,12 @@ const getProjectMeta = (id) => {
   }
 };
 
+const getProjectIdFromPath = (id) => {
+  return id.split("/")[2] ?? null;
+};
+
 return {
   fetchProjects,
   getProjectMeta,
+  getProjectIdFromPath,
 };
diff --git a/apps/new/widget/page/project/Index.jsx b/apps/new/widget/page/project/Index.jsx
@@ -1,8 +1,24 @@
+const { id } = props;
+const { getProjectMeta, getProjectIdFromPath } = VM.require(
+  "${config_account}/widget/lib.projects",
+) || {
+  getProjectMeta: () => {},
+  getProjectIdFromPath: () => {},
+};
+
+const data = getProjectMeta(id);
+if (!id || !data) {
+  return "Loading...";
+}
+
 const { Layout } = VM.require(
   "${config_account}/widget/page.project.Layout",
 ) || {
   Layout: () => <></>,
 };
+
+const projectId = getProjectIdFromPath(id);
+
 const config = {
   theme: {},
   layout: {
@@ -19,7 +35,7 @@ const config = {
         src="${config_account}/widget/components.Sidebar"
         props={{
           routes: config.router.routes,
-          currentRoute: "/${config_index}?page=projects",
+          currentRoute: `/${config_index}?page=project&id=${props.id}`,
           ...props,
         }}
       />
@@ -29,34 +45,97 @@ const config = {
   router: {
     param: "tab",
     routes: {
-      myProjects: {
+      overview: {
+        label: "Project",
+        path: "${config_account}/widget/page.project.Main",
+        blockHeight: "final",
         init: {
-          name: "My Projects",
-          icon: "bi bi-star",
+          tab: "overview",
+          name: "Overview",
+          icon: "bi bi-house",
         },
+        default: "true",
       },
-      myToolkits: {
+      tasks: {
+        path: "${config_account}/widget/page.project.Main",
+        blockHeight: "final",
+        init: {
+          tab: "tasks",
+          name: "Tasks",
+          icon: "bi bi-check-square",
+        },
+      },
+      discussion: {
+        path: "${config_account}/widget/page.project.Main",
+        blockHeight: "final",
         init: {
-          name: "My Toolkits",
-          icon: "bi bi-database",
+          tab: "discussion",
+          name: "Discussion",
+          icon: "bi bi-chat-dots",
         },
       },
-      projectsInvolved: {
+      code: {
+        path: "${config_account}/widget/page.project.Main",
+        blockHeight: "final",
         init: {
-          name: "Projects Involved",
-          icon: "bi bi-clipboard",
+          tab: "code",
+          name: "Code",
+          icon: "bi bi-code-slash",
         },
       },
-      project: {
+      roadmap: {
         path: "${config_account}/widget/page.project.Main",
         blockHeight: "final",
-        default: true,
-        hide: true,
+        init: {
+          tab: "roadmap",
+          name: "Roadmap",
+          icon: "bi bi-map",
+        },
+      },
+      activity: {
+        path: "${alias_old}/widget/Feed",
+        blockHeight: "final",
+        label: "Activity",
+        init: {
+          feedName: `${data.title}`,
+          name: "Activity",
+          icon: "bi bi-list",
+          requiredHashtags: ["build", projectId],
+        },
+      },
+      updatesFeed: {
+        path: "${alias_old}/widget/Feed",
+        blockHeight: "final",
+        init: {
+          feedName: `${data.title} Updates`,
+          name: "Updates",
+          icon: "bi bi-bell",
+          requiredHashtags: ["build", projectId, "updates"],
+        },
+      },
+      feedbackFeed: {
+        path: "${alias_old}/widget/Feed",
+        blockHeight: "final",
+        init: {
+          feedName: `${data.title} Feedback`,
+          name: "Feedback",
+          icon: "bi bi-chat-left-text",
+          requiredHashtags: ["build", projectId, "feedback"],
+        },
       },
     },
   },
 };
 
+// remove unselected tabs
+if (Array.isArray(data?.tabs)) {
+  Object.keys(config.router.routes).forEach((key) => {
+    if (!data.tabs.includes(key.toLowerCase())) {
+      delete config.router.routes[key];
+    }
+  });
+}
+
 return (
   <div className="mt-3 container-xl">
     <Widget src="${alias_old}/widget/app.view" props={{ config, ...props }} />

diff --git a/apps/new/widget/page/project/Layout.jsx b/apps/new/widget/page/project/Layout.jsx
@@ -7,41 +7,12 @@ const { Metadata } = VM.require(
 const { href } = VM.require("${alias_old}/widget/lib.url") || {
   href: () => {},
 };
-const Layout = ({
-  projectAccountId,
-  profile,
-  routes,
-  children,
-  project,
-  id,
-  tab,
-}) => {
+const Layout = ({ projectAccountId, profile, children, project, tab }) => {
   const { title } = project;
 
   if (!projectAccountId) {
     return <p className="fw-bold text-white">No Account ID</p>;
   }
-
-  const Nav = styled.div`
-    .nav-pills {
-      background: var(--bg-1, #0b0c14);
-      font-weight: 500;
-      --bs-nav-pills-border-radius: 0;
-      --bs-nav-link-color: var(--font-color, #fff);
-      --bs-nav-pills-link-active-color: var(--font-color, #fff);
-      --bs-nav-pills-link-active-bg: var(--bg-1, #0b0c14);
-      --bs-nav-link-padding-y: 0.75rem;
-      border-bottom: 1px solid var(--stroke-color, rgba(255, 255, 255, 0.2));
-      padding-top: 3px;
-    }
-    .nav-link.active {
-      border-bottom: 2px solid var(--Yellow, #ffaf51);
-    }
-
-    .nav-item:not(:has(> .disabled)):hover {
-      background: rgba(13, 110, 253, 0.15);
-    }
-  `;
   return (
     <>
       <div className="my-3 w-100">
@@ -64,40 +35,15 @@ const Layout = ({
         profile={profile}
         projectAccountId={projectAccountId}
       />
-      <Nav>
-        <ul className="nav nav-pills nav-fill" id="pills-tab" role="tablist">
-          {routes &&
-            Object.keys(routes).map((it) => (
-              <li className="nav-item" role="presentation" key={it}>
-                <Link
-                  to={href({
-                    widgetSrc: `${config_index}`,
-                    params: {
-                      page: "project",
-                      id: id,
-                      tab: it,
-                    },
-                  })}
-                  key={it}
-                  style={{ textDecoration: "none" }}
-                >
-                  <button
-                    className={`nav-link ${it === tab ? "active" : ""}`}
-                    id={`pills-${id}-tab`}
-                    data-bs-toggle="pill"
-                    data-bs-target={`#pills-${it}`}
-                    type="button"
-                    role="tab"
-                    aria-controls={`pills-${it}`}
-                    aria-selected={i === 0}
-                  >
-                    {it.slice(0, 1).toUpperCase() + it.slice(1)}
-                  </button>
-                </Link>
-              </li>
-            ))}
-        </ul>
-      </Nav>
+      <h5
+        style={{
+          textTransform: "capitalize",
+          borderBottom: "1px solid rgba(255, 255, 255, 0.2)",
+        }}
+        className="text-white py-2"
+      >
+        {tab}
+      </h5>
       <div
         className="tab-content"
         style={{ marginTop: 8 }}

diff --git a/apps/new/widget/page/project/Main.jsx b/apps/new/widget/page/project/Main.jsx
@@ -41,9 +41,7 @@ const config = {
           profile={profileData}
           projectAccountId={data.projectAccountId}
           page={page}
-          routes={config.router.routes}
           project={project}
-          id={id}
           {...props}
         ></Layout>
       </>

diff --git a/apps/new/widget/page/projects/Editor.jsx b/apps/new/widget/page/projects/Editor.jsx
@@ -51,12 +51,16 @@ const isNearAddress = (address) => {
 
 const tabs = [
   { id: "overview", label: "Overview", disabled: true, checked: true },
-  { id: "activity", label: "Activity", checked: true },
+  // { id: "activity", label: "Activity", checked: true },
   { id: "tasks", label: "Tasks", checked: true },
   // Uncomment after the support is added
   // { id: "discussion", label: "Discussion", checked: false },
   // { id: "code", label: "Code", checked: false },
   // { id: "roadmap", label: "Roadmap", checked: false },
+  // Feed tabs
+  { id: "activity", label: "Activity", checked: true },
+  { id: "updatesFeed", label: "Updates Feed", checked: true },
+  { id: "feedbackFeed", label: "Feedback Feed", checked: true },
 ];
 
 const app = props.app ?? "${config_account}";
@@ -502,7 +506,7 @@ const followingAccountSuggestion = following && Object.keys(following);
 const SecondScreen = () => {
   return (
     <>
-      <div className="d-flex flex-column gap-4">
+      <div className="d-flex flex-column gap-4" data-bs-theme="dark">
         <div className="d-flex flex-column gap-1">
           <div className="form-group">
             <label className="mb-1">Contributors</label>
@@ -733,7 +737,14 @@ const FirstScreen = () => {
             <select
               value={teamSize}
               onChange={(e) => setTeamSize(e.target.value)}
-              className="form-select"
+              className="form-select rounded-2"
+              style={{
+                padding: "12px",
+                fontSize: "16px",
+                lineHeight: "170%",
+                border: "1px solid rgba(255, 255, 255, 0.2)",
+                marginTop: "-1px",
+              }}
             >
               <option selected disabled value="">
                 Select Team Size