Project/fix (#197)

* Added project title and refactored routing

* Cleanup

* refactored projects to use modules from buildbox and modified props

* refactored card button to use just id as param to project, fixed styling and alignment on button link

* Refactor project.jsx to include additional props and update data retrieval

* Add User component and extractNearAddress function, with way to retrieve data from id prop

* Removed unused code for project tabs

* Add project-data.jsx module for retrieving project metadata

* Refactor project page component

* Refactor Roadmap component to include project meta data and styling

* Refactor Code.jsx to add GitHub Repo button

* Fix sidebar layout in projects page

apps/builddao/widget/components/project/Card.jsx

@@ -6,6 +6,10 @@ const { Avatar, Hashtag, Button } = VM.require(
   Button: () => <></>,
 };
 
+const { href } = VM.require("buildhub.near/widget/lib.url") || {
+  href: () => {},
+};
+
 const { ProfileImages } = VM.require(
   "buildhub.near/widget/components.ProfileImages"
 ) || {
@@ -21,8 +25,8 @@ const Card = styled.div`
   flex-direction: column;
   align-items: flex-start;
   gap: 24px;
-
   color: var(--text-color, #fff);
+  justify-content: space-between;
 
   .info {
     display: flex;
@@ -42,6 +46,12 @@ const Card = styled.div`
       font-weight: 700;
     }
   }
+  .c-top {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    width: 100%;
+  }
   .bt-w {
     flex: 1;
     button {
@@ -50,38 +60,56 @@ const Card = styled.div`
   }
 `;
 
-const ProjectCard = ({ title, tags, people, accountId }) => {
+const ProjectCard = ({ project, type, app }) => {
+  const { title, accountId, tags, collaborators, metadata } = project;
   return (
     <Card>
-      <Avatar accountId={accountId} />
-      <div className="info">
-        <h4>{title.length > 30 ? `${title.slice(0, 25)}...` : title}</h4>
-        <span>{`@${
-          accountId.length > 30
-            ? `${accountId.slice(0, 20)}...${accountId.slice(
-                accountId.length - 4
-              )}`
-            : accountId
-        }`}</span>
-      </div>
-      <div className="d-flex align-items-center flex-wrap gap-2">
-        {tags.map((tag) => (
-          <Hashtag>
-            <span className="fw-bold">{tag}</span>
-          </Hashtag>
-        ))}
+      <div className="c-top">
+        <Avatar accountId={accountId} />
+        <div className="info">
+          <h4>
+            {metadata.title.length > 30
+              ? `${metadata.title.slice(0, 25)}...`
+              : metadata.title}
+          </h4>
+          <span>{`@${
+            accountId.length > 30
+              ? `${accountId.slice(0, 20)}...${accountId.slice(
+                  accountId.length - 4
+                )}`
+              : accountId
+          }`}</span>
+        </div>
+        <div className="d-flex align-items-center flex-wrap gap-2">
+          {tags.map((tag) => (
+            <Hashtag>
+              <span className="fw-bold">{tag}</span>
+            </Hashtag>
+          ))}
+        </div>
+        <div>
+          <ProfileImages accountIds={collaborators} />
+        </div>
       </div>
-      <div>
-        <ProfileImages accountIds={people} />
+      <div className="w-100">
+        <Button
+          href={
+            // `/buildhub.near/widget/app?page=project&id=${accountId}/${app}/${type}/${title}`
+            href({
+              widgetSrc: `buildhub.near/widget/app`,
+              params: {
+                page: "project",
+                id: `${accountId}/${app}/${type}/${title}`,
+              },
+            })
+          }
+          // className="align-self-stretch"
+          linkClassName="align-self-stretch bt-w"
+          variant="outline"
+        >
+          Open
+        </Button>
       </div>
-      <Button
-        href={`/buildhub.near/widget/app?page=project&accountId=${accountId}`}
-        // className="align-self-stretch"
-        linkClassName="align-self-stretch bt-w"
-        variant="outline"
-      >
-        Open
-      </Button>
     </Card>
   );
 };

apps/builddao/widget/components/project/page/Code.jsx

@@ -1 +1,35 @@
-return <div className="text-white">Code</div>;
+const { Button } = VM.require("buildhub.near/widget/components") || {
+  Button: () => <></>,
+};
+
+const { getProjectMeta } = VM.require(
+  "buildhub.near/widget/lib.project-data"
+) || {
+  getProjectMeta: () => {},
+};
+
+const { id } = props;
+
+const project = getProjectMeta(id);
+
+const { projectLink } = project;
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  align-items: center;
+  justify-content: center;
+`;
+
+return (
+  <Container className="text-white">
+    <Button
+      variant="secondary"
+      href={projectLink}
+      target="_blank"
+      noLink={true}
+    >
+      GitHub Repo
+    </Button>
+  </Container>
+);

apps/builddao/widget/components/project/page/Overview.jsx

@@ -1,9 +1,21 @@
-const { Hashtag } = VM.require("buildhub.near/widget/components") || {
+const { User, Hashtag } = VM.require("buildhub.near/widget/components") || {
+  User: () => <></>,
   Hashtag: () => <></>,
 };
 
-const accountId = props.accountId;
-const profile = props.profile;
+const { getProjectMeta } = VM.require(
+  "buildhub.near/widget/lib.project-data"
+) || {
+  getProjectMeta: () => {},
+};
+
+const { id } = props;
+
+const project = getProjectMeta(id);
+
+const { description, tags, contributors, accountId, profile } = project;
+
+console.log("contributors", contributors);
 
 const Container = styled.div`
   display: flex;
@@ -51,15 +63,15 @@ const MapIcon = () => (
   </svg>
 );
 
-const tags = Object.keys(profile.tags ?? []);
+// const tags = Object.keys(profile.tags ?? []);
 
 return (
   <Container>
     <div className="section">
       <p className="heading">About</p>
       <p className="description">
-        {profile.description ? (
-          <Markdown text={profile.description} />
+        {description ? (
+          <Markdown text={description} />
         ) : (
           "No information available"
         )}
@@ -76,24 +88,32 @@ return (
         <p className="heading">Team Size</p>
         <p className="description d-flex align-items-center gap-2">
           <i className="bi bi-person"></i>
-          {!profile.members && "0"}
-          {profile.members.length <= 10 && "1-10"}
-          {profile.members.length <= 50 && "10-50"}
-          {profile.members.length <= 100 && "50-100"}
-          {profile.members.length > 100 && "100+"}
+          {!contributors || !contributors.length
+            ? "0"
+            : contributors.length <= 10
+            ? "1-10"
+            : contributors.length <= 50
+            ? "10-50"
+            : contributors.length <= 100
+            ? "50-100"
+            : "100+"}
         </p>
       </div>
     </div>
     <div className="section">
       <p className="heading">Contributors</p>
-      {!profile.contributors && <p className="description">No Contributors</p>}
+      {!contributors && <p className="description">No Contributors</p>}
+      <div className="d-flex gap-4">
+        {contributors &&
+          contributors.map((teammate) => (
+            <User accountId={teammate} variant={"mobile"} />
+          ))}
+      </div>
     </div>
     <div className="section">
       <p className="heading">Project Tags</p>
       <div className="d-flex flex-align-center flex-wrap" style={{ gap: 12 }}>
-        {tags.map((it) => (
-          <Hashtag key={it}>{it}</Hashtag>
-        ))}
+        {tags && tags.map((it) => <Hashtag key={it}>{it}</Hashtag>)}
         {tags.length === 0 && <p className="description">No tags</p>}
       </div>
     </div>