Merge pull request #120 from NEARBuilders/profile-page

Profile page in progress + fixes
NEARBuilders · Feb 2, 2024 · df45b5b · df45b5b
2 parents 06c7fa1 + 12e11ff
commit df45b5b
Show file tree

Hide file tree

Showing 7 changed files with 467 additions and 14 deletions.
diff --git a/apps/builddao/widget/Compose.jsx b/apps/builddao/widget/Compose.jsx
@@ -1,5 +1,5 @@
-const { Avatar, Button } = VM.require("buildhub.near/widget/components") || {
-  Avatar: () => <></>,
+const { User, Button } = VM.require("buildhub.near/widget/components") || {
+  User: () => <></>,
   Button: () => <></>,
 };
 
@@ -171,6 +171,7 @@ const PostCreator = styled.div`
 
   padding: 1rem;
   background: var(--compose-bg, #23242b);
+  border: 1px solid var(--stroke-color, rgba(255, 255, 255, 0.2));
   border-radius: 12px;
 
   margin-bottom: 1rem;
@@ -373,14 +374,7 @@ const MarkdownPreview = styled.div`
 `;
 
 const avatarComponent = useMemo(() => {
-  return (
-    <div className="d-flex align-items-start gap-2">
-      <Avatar accountId={context.accountId} />
-      <div>
-        <p className="mb-0 text-white">{context.accountId}</p>
-      </div>
-    </div>
-  );
+  return <User accountId={context.accountId} />;
 }, [context.accountId]);
 
 return (

diff --git a/apps/builddao/widget/Profile.jsx b/apps/builddao/widget/Profile.jsx
@@ -0,0 +1,48 @@
+if (!context.accountId || !props.accountId) {
+  return "No Account ID";
+}
+
+const accountId = props.accountId || context.accountId;
+
+const profile = Social.getr(`${accountId}/profile`);
+if (!profile) {
+  return "";
+}
+
+const ProfileContainer = styled.div`
+  display: grid;
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+  gap: 1rem;
+`;
+
+const SideContainer = styled.div`
+  grid-column: span 2 / span 1;
+`;
+
+const MainContainer = styled.div`
+  grid-column: span 4 / span 4;
+`;
+
+return (
+  <ProfileContainer>
+    <SideContainer>
+      <Widget
+        src="buildhub.near/widget/components.profile.ProfileInfo"
+        props={{ accountId }}
+      />
+    </SideContainer>
+    <MainContainer>
+      <button
+        onClick={() => {
+          Social.set({
+            profile: {
+              location: "Multan, Pakistan",
+            },
+          });
+        }}
+      >
+        test
+      </button>
+    </MainContainer>
+  </ProfileContainer>
+);
diff --git a/apps/builddao/widget/app.jsx b/apps/builddao/widget/app.jsx
@@ -25,8 +25,8 @@ const Root = styled.div`
 
   --compose-bg: #23242b;
 
-  --post-bg: #0b0c14;
-  --post-bg-hover: #17181c;
+  --post-bg: #23242b;
+  --post-bg-hover: #1d1f25;
   --post-bg-transparent: rgba(23, 24, 28, 0);
 
   --button-primary-bg: #ffaf51;

diff --git a/apps/builddao/widget/components/Button.jsx b/apps/builddao/widget/components/Button.jsx
@@ -6,7 +6,10 @@ const StyledButton = styled.button`
   align-items: center;
   gap: 4px;
   border-radius: 8px;
-  font: 500 14px / normal;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: normal;
+
   transition: all 300ms;
 
   ${(props) =>

diff --git a/apps/builddao/widget/components/profile/FollowStats.jsx b/apps/builddao/widget/components/profile/FollowStats.jsx
@@ -0,0 +1,59 @@
+const accountId = props.accountId;
+
+if (!accountId) {
+  return "";
+}
+
+const following = Social.keys(`${accountId}/graph/follow/*`, "final", {
+  return_type: "BlockHeight",
+  values_only: true,
+});
+
+const followers = Social.keys(`*/graph/follow/${accountId}`, "final", {
+  return_type: "BlockHeight",
+  values_only: true,
+});
+
+const numFollowing = following
+  ? Object.keys(following[accountId].graph.follow || {}).length
+  : null;
+const numFollowers = followers ? Object.keys(followers || {}).length : null;
+
+return (
+  <div>
+    <div className="d-flex flex-row align-items-center">
+      <div className="me-3" style={{ fontSize: 14 }}>
+        <span>
+          {numFollowing !== null ? (
+            <span
+              className="fw-bolder"
+              style={{ color: "var(--font-color, #fff)" }}
+            >
+              {numFollowing}
+            </span>
+          ) : (
+            "?"
+          )}{" "}
+          <span style={{ color: "var(--White-50, #B0B0B0)" }}>Following</span>
+        </span>
+      </div>
+      <div style={{ fontSize: 14 }}>
+        <span>
+          {numFollowers !== null ? (
+            <span
+              style={{ color: "var(--font-color, #fff)" }}
+              className="fw-bolder"
+            >
+              {numFollowers}
+            </span>
+          ) : (
+            "?"
+          )}{" "}
+          <span style={{ color: "var(--White-50, #B0B0B0)" }}>
+            Follower{numFollowers !== 1 && "s"}
+          </span>
+        </span>
+      </div>
+    </div>
+  </div>
+);