Merge pull request #373 from scopalaffairs/feat/RecommenderEngagement…

…Tracking Feat/recommender engagement tracking
near · Oct 13, 2023 · bb74477 · bb74477
2 parents 3f06958 + 8e36bc7
commit bb74477
Show file tree

Hide file tree

Showing 21 changed files with 2,116 additions and 64 deletions.
diff --git a/src/AccountProfile.jsx b/src/AccountProfile.jsx
@@ -154,4 +154,4 @@ return (
       showFlagAccountFeature,
     }}
   />
-);
+);
diff --git a/src/AccountProfileOverlay.jsx b/src/AccountProfileOverlay.jsx
@@ -30,6 +30,13 @@ const onReport = () => {
   });
 };
 
+const AvatarCount = styled.div`
+  color: rgb(104, 112, 118);
+  font-size: 14px;
+  font-weight: 300;
+  padding-left: 12px;
+`;
+
 const CardWrapper = styled.div`
   z-index: 100;
   padding: 6px;
@@ -66,6 +73,17 @@ const VerificationText = styled.div`
   color: ${(props) => (props.secondary ? "#717069" : "black")};
 `;
 
+const RecommendedAvatars = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 12px 0 0;
+`;
+
+const OverlayTagsWrapper = styled.div`
+  margin-left: 50px;
+`;
+
 const contentModerationItem = {
   type: "social",
   path: profileUrl,
@@ -76,10 +94,22 @@ const overlay = (
   <CardWrapper style={overlayStyles}>
     <Card onMouseEnter={handleOnMouseEnter} onMouseLeave={handleOnMouseLeave}>
       <div className="d-flex align-items-center">
-        <Widget
-          src="${REPL_ACCOUNT}/widget/AccountProfile"
-          props={{ accountId: props.accountId, profile, noOverlay: true }}
-        />
+        {props.sidebar && (
+          <Widget
+            src="${REPL_ACCOUNT}/widget/Recommender.Account.AccountProfileSidebar"
+            props={{
+              accountId: props.accountId,
+              profile,
+              noOverlay: true,
+            }}
+          />
+        )}
+        {!props.sidebar && (
+          <Widget
+            src="${REPL_ACCOUNT}/widget/AccountProfile"
+            props={{ accountId: props.accountId, profile, noOverlay: true }}
+          />
+        )}
         {!props.showFlagAccountFeature &&
           !!context.accountId &&
           context.accountId !== props.accountId && (
@@ -211,16 +241,51 @@ const overlay = (
         </div>
       )}
 
-      <Widget
-        src="${REPL_ACCOUNT}/widget/Tags"
-        props={{ tags, scroll: true }}
-      />
-      {!!context.accountId && context.accountId !== props.accountId && (
-        <FollowButtonWrapper>
+      {props.scope === "friends" ? (
+        <OverlayTagsWrapper>
           <Widget
-            src="${REPL_ACCOUNT}/widget/FollowButton"
-            props={{ accountId: props.accountId }}
+            className="layout"
+            src="${REPL_ACCOUNT}/widget/Tags"
+            props={{ tags, scroll: true }}
           />
+          <RecommendedAvatars>
+            <Widget
+              src="${REPL_ACCOUNT}/widget/Recommender.Views.RecommendedAvatars"
+              props={{
+                avatarSize: "25px",
+                becauseYouFollow: props.becauseYouFollow,
+              }}
+            />
+            <AvatarCount>
+              {props.becauseYouFollow.length} friends following
+            </AvatarCount>
+          </RecommendedAvatars>
+        </OverlayTagsWrapper>
+      ) : (
+        <Widget
+          src="${REPL_ACCOUNT}/widget/Tags"
+          props={{ tags, scroll: true }}
+        />
+      )}
+
+      {!!context.accountId && context.accountId !== props.accountId && (
+        <FollowButtonWrapper>
+          {props.sidebar && (
+            <Widget
+              src="${REPL_ACCOUNT}/widget/Recommender.Engagement.FollowButtonTracked"
+              props={{
+                accountIdRank: props.accountIdRank || null,
+                accountId: accountId || props.accountId,
+                fromContext: props.fromContext,
+              }}
+            />
+          )}
+          {!props.sidebar && (
+            <Widget
+              src="${REPL_ACCOUNT}/widget/FollowButton"
+              props={{ accountId: props.accountId }}
+            />
+          )}
         </FollowButtonWrapper>
       )}
     </Card>
@@ -275,4 +340,4 @@ return (
       }}
     />
   </>
-);
+);
diff --git a/src/FollowButton.jsx b/src/FollowButton.jsx
@@ -61,20 +61,20 @@ const Wrapper = styled.div`
     line-height: 15px;
     text-align: center;
     cursor: pointer;
-    background: #FBFCFD;
-    border: 1px solid #D7DBDF;
-    color: #006ADC !important;
+    background: #fbfcfd;
+    border: 1px solid #d7dbdf;
+    color: #006adc !important;
     white-space: nowrap;
 
     &:hover,
     &:focus {
-      background: #ECEDEE;
+      background: #ecedee;
       text-decoration: none;
       outline: none;
     }
 
     i {
-      color: #7E868C;
+      color: #7e868c;
     }
 
     .bi-16 {
@@ -85,7 +85,17 @@ const Wrapper = styled.div`
 
 return (
   <Wrapper className={props.className}>
-    <CommitButton disabled={loading} className="follow-button" data={data}>
+    <CommitButton
+      onCommit={() => {
+        props.onCommit();
+      }}
+      onClick={() => {
+        props.onClick();
+      }}
+      disabled={loading}
+      className="follow-button"
+      data={data}
+    >
       {isFollowing && <i className="bi-16 bi bi-check"></i>}
       {isFollowing ? "Following" : isInverse ? "Follow Back" : "Follow"}
     </CommitButton>

diff --git a/src/LatestPeople.jsx b/src/LatestPeople.jsx
@@ -23,6 +23,28 @@ let accounts = Object.entries(accountsWithProfileData || {})
 
 accounts.reverse();
 
+State.init({
+  selectedView: { text: "Top", value: "trending" },
+});
+
+const handleViewChange = (option) => {
+  State.update({ selectedView: { value: option.value } });
+};
+
+const options = [
+  { text: "Latest", value: "latest" },
+  { text: "Top", value: "trending" },
+  { text: "Recommended", value: "recommended" },
+];
+
+const fromContext = props;
+
+const FlexContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+`;
+
 const Wrapper = styled.div`
   display: grid;
   gap: 24px;
@@ -35,7 +57,7 @@ const H2 = styled.h2`
   margin: 0;
 `;
 
-const Items = styled.div`
+const LatestPeople = styled.div`
   display: grid;
   gap: 18px;
 `;
@@ -70,26 +92,72 @@ const ButtonLink = styled.a`
   }
 `;
 
+const Select = styled.div`
+  max-width: 100%;
+`;
+
 return (
   <Wrapper>
-    <H2>People</H2>
-
-    <Items>
-      {accounts.map((account) => (
-        <Item key={account.accountId}>
-          <Widget
-            src="${REPL_ACCOUNT}/widget/AccountProfile"
-            props={{
-              accountId: account.accountId,
-              blockHeight: account.blockHeight,
-            }}
-          />
-        </Item>
-      ))}
-    </Items>
-
-    <ButtonLink href="#/${REPL_ACCOUNT}/widget/PeoplePage">
-      View All People <span>({totalAccounts})</span>
-    </ButtonLink>
+    <FlexContainer>
+      <H2>People</H2>
+      <Select>
+        <Widget
+          src="${REPL_ACCOUNT}/widget/Select"
+          props={{
+            border: "0px",
+            noLabel: true,
+            value: state.selectedView,
+            options: options,
+            onChange: handleViewChange,
+          }}
+        />
+      </Select>
+    </FlexContainer>
+    {state.selectedView.value === "latest" && (
+      <>
+        <LatestPeople>
+          {accounts.map((account) => (
+            <Item key={account.accountId}>
+              <Widget
+                src="${REPL_ACCOUNT}/widget/AccountProfile"
+                props={{
+                  accountId: account.accountId,
+                  blockHeight: account.blockHeight,
+                }}
+              />
+            </Item>
+          ))}
+        </LatestPeople>
+        <ButtonLink href="#/${REPL_ACCOUNT}/widget/PeoplePage">
+          View All People <span>({totalAccounts})</span>
+        </ButtonLink>
+      </>
+    )}
+    {state.selectedView.value === "trending" && (
+      <>
+        <Widget
+          src="${REPL_ACCOUNT}/widget/Recommender.Views.TrendingUsersSidebar"
+          props={{
+            sidebar: true,
+            fromContext: fromContext,
+            gridCols: "repeat(1, minmax(0, 1fr))",
+            returnElements: 5,
+          }}
+        />
+      </>
+    )}
+    {state.selectedView.value === "recommended" && (
+      <>
+        <Widget
+          src="${REPL_ACCOUNT}/widget/Recommender.Views.RecommendedUsersSidebar"
+          props={{
+            sidebar: true,
+            fromContext: fromContext,
+            gridCols: "repeat(1, minmax(0, 1fr))",
+            returnElements: 10,
+          }}
+        />
+      </>
+    )}
   </Wrapper>
 );