discover page contributors

src/common/components/discover-contributors/_index.scss

@@ -0,0 +1,123 @@
+@import "src/style/colors";
+@import "src/style/variables";
+@import "src/style/bootstrap_vars";
+@import "src/style/mixins";
+
+.discover-contributors-list {
+  height: 100%;
+
+  .list-header {
+    height: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    @include themify(day) {
+      border-bottom: 1px solid lighten($dark-sky-blue, 28);
+    }
+
+    @include themify(night) {
+      border-bottom: 1px solid lighten($dark, 10);
+    }
+
+    .list-title {
+      color: $dark-sky-blue;
+      font-weight: 500;
+      font-size: 18px;
+      display: flex;
+      align-items: center;
+    }
+
+    .list-refresh {
+      color: $dark-sky-blue;
+      cursor: pointer;
+      padding: 2px;
+      border-radius: 4px;
+
+      &:hover {
+        background: lighten($dark-sky-blue, 38);
+      }
+
+      &.disabled {
+        pointer-events: none;
+        opacity: 0.4;
+      }
+
+      svg {
+        height: 22px;
+      }
+    }
+  }
+
+  &.loading {
+    .list-header {
+      border-bottom-color: transparent;
+    }
+  }
+
+  .list-body {
+    height: calc(100% - 50px);
+    padding: 20px 0 14px 0;
+    overflow-x: auto;
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr 1fr;
+    gap: 10px;
+
+    @media (min-width: $md-break) {
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    @media (min-width: $lg-break) {
+      grid-template-columns: 1fr;
+    }
+
+    @media (min-width: $xl-break) {
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    .list-item {
+      padding: 10px;
+      border-radius: 6px;
+      display: flex;
+
+      @include themify(day) {
+        background: $white-three;
+      }
+
+      @include themify(night) {
+        background: lighten($dark-six, 6);
+      }
+
+      .user-avatar {
+        width: 40px;
+        display: block;
+        margin-right: 10px;
+      }
+
+      .user-info {
+        flex-grow: 1;
+        display: grid;
+
+        .display-name {
+          font-size: 18px;
+
+          @include themify(day) {
+            color: lighten($charcoal-grey, 10)
+          }
+
+          @include themify(night) {
+            color: $silver;
+          }
+        }
+
+        .about {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          opacity: 0.6;
+        }
+      }
+    }
+  }
+}

src/common/components/discover-contributors/index.tsx

@@ -0,0 +1,95 @@
+import React, { useEffect, useState } from "react";
+import { History } from "history";
+import { Global } from "../../store/global/types";
+import { Account } from "../../store/accounts/types";
+import LinearProgress from "../linear-progress";
+import UserAvatar from "../user-avatar";
+import ProfileLink from "../profile-link";
+import _c from "../../util/fix-class-names";
+import { _t } from "../../i18n";
+import { syncSvg } from "../../img/svg";
+import contributors from "../../constants/contributors.json";
+import _ from "lodash";
+import "./_index.scss";
+
+interface Props {
+  global: Global;
+  history: History;
+  addAccount: (data: Account) => void;
+}
+
+export const DiscoverContributors = (props: Props)=> {
+
+    const [list, setList] = useState<{name: string; contributes: string[]; }[]>([])
+    const [loading, setLoading] = useState(true)
+
+    useEffect(()=> {
+        shuffleContributors(contributors);
+    },[])
+
+    const shuffleContributors = (contributors: { name: string; contributes: string[]; }[]) => {
+        setLoading(true);
+
+        const shuffledArray = _.shuffle(contributors);
+        setList(shuffledArray);       
+        setLoading(false);
+
+        return shuffledArray;
+      };
+
+    return (
+      <div className={_c(`discover-contributors-list ${loading ? "loading" : ""}`)}>
+        <div className="list-header">
+          <h1>
+            <div className="list-title">{_t("contributors.title")}</div>
+          </h1>
+          <div 
+          className={_c(`list-refresh ${loading ? "disabled" : ""}`)} 
+          onClick={()=>shuffleContributors(list)}
+          >
+            {syncSvg}
+          </div>
+        </div>
+        {loading && <LinearProgress />}
+
+        {list.length > 0 && (
+          <div className="list-body">
+            {list?.map((c, i) => {
+              return (
+                <div className="list-item" key={i}>
+                  {ProfileLink({
+                    ...props,
+                    username: c.name,
+                    children: (
+                      <span>
+                        <UserAvatar username={c.name} size="medium" />
+                      </span>
+                    )
+                  })}
+                  <div className="user-info">
+                    {ProfileLink({
+                      ...props,
+                      username: c.name,
+                      children: <span className="display-name">{c.name}</span>
+                    })}
+                    {ProfileLink({
+                      ...props,
+                      username: c.name,
+                      children: (
+                        <span className="name notranslate">
+                          {" "}
+                          {"@"}
+                          {c.name}
+                        </span>
+                      )
+                    })}
+                    <div className="about">{c.contributes.join(", ")}</div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+    );
+  };

src/common/pages/discover.tsx

@@ -8,7 +8,7 @@ import NavBar from "../components/navbar/index";
 import NavBarElectron from "../../desktop/app/components/navbar";
 import LeaderBoard from "../components/leaderboard";
 import Curation from "../components/curation";
-import PopularUsers from "../components/popular-users";
+import { DiscoverContributors } from "../components/discover-contributors";
 import FullHeight from "../components/full-height";
 import ScrollToTop from "../components/scroll-to-top";
 import "./discover.scss";
@@ -52,7 +52,7 @@ class DiscoverPage extends Component<PageProps> {
               <Curation {...this.props} />
             </div>
           )}
-          <div className="popular-users">{PopularUsers({ ...this.props })}</div>
+          <div className="popular-users"><DiscoverContributors {...this.props}/></div>
         </div>
       </>
     );