feat: add UserCard to feeds page (#1326)

open-sauced · Jul 6, 2023 · b225eb3 · b225eb3
1 parent 4afef7b
commit b225eb3
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 38 deletions.
diff --git a/components/atoms/UserCard/user-card.tsx b/components/atoms/UserCard/user-card.tsx
@@ -1,56 +1,52 @@
 import Image from "next/image";
 import React from "react";
 import { getAvatarByUsername } from "lib/utils/github";
+import { Spinner } from "../SpinLoader/spin-loader";
 
-type MetaObj = {
+export type MetaObj = {
   name: "Followers" | "Following" | "Highlights";
   count: number;
 };
 interface UserCardProps {
   username: string;
   meta: MetaObj[];
   name: string;
+  loading?: boolean;
 }
-const UserCard = ({ username, name, meta }: UserCardProps) => {
+const UserCard = ({ username, name, meta, loading }: UserCardProps) => {
   const avatarUrl = getAvatarByUsername(username);
 
   return (
-    <div className="mt-10 bg-white border w-max rounded-2xl border-zinc-200">
-      <div className="flex flex-col items-center gap-6 px-6 -translate-y-12 ">
-        <div className="flex flex-col items-center gap-2">
-          <Image
-            className="border border-white rounded-full"
-            width={110}
-            height={110}
-            src={avatarUrl}
-            alt={`${username}'s avatar image`}
-          />
-          <div>
-            <h3 className="text-lg text-center">{name}</h3>
-            <p className="text-center text-light-slate-9">{`@${username}`}</p>
-          </div>
+    <div className="pb-6 bg-white border w-max rounded-2xl border-zinc-200">
+      {loading ? (
+        <div className="flex items-center justify-center h-32 w-72">
+          <Spinner className="mt-6 " />
         </div>
-        <div className="flex items-center gap-5 text-lg text-center">
-          {meta.map(({ name, count }, i) => (
-            <div key={i.toLocaleString()}>
-              <p className="text-center text-light-slate-9">{name}</p>
-              {count > 0 ? count : "-"}
+      ) : (
+        <div className="flex flex-col items-center gap-6 px-6 ">
+          <div className="flex flex-col items-center gap-2 -mt-10">
+            <Image
+              className="border border-white rounded-full "
+              width={100}
+              height={100}
+              src={avatarUrl}
+              alt={`${username}'s avatar image`}
+            />
+            <div>
+              <h3 className="text-base text-center">{name}</h3>
+              <p className="text-center text-light-slate-9">{`@${username}`}</p>
             </div>
-          ))}
-          {/* <div>
-            <p className="text-center text-light-slate-9">Followers</p>
-            {followersCount > 0 ? followersCount : "-"}
           </div>
-          <div>
-            <p className="text-center text-light-slate-9">Following</p>
-            {followingCount > 0 ? followingCount : "-"}
+          <div className="flex items-center gap-5 text-base text-center ">
+            {meta.map(({ name, count }, i) => (
+              <div key={i.toLocaleString()}>
+                <p className="text-center text-light-slate-9">{name}</p>
+                {count > 0 ? count : "-"}
+              </div>
+            ))}
           </div>
-          <div>
-            <p className="text-center text-light-slate-9">Highlights</p>
-            {highlightsCount > 0 ? highlightsCount : "-"}
-          </div> */}
         </div>
-      </div>
+      )}
     </div>
   );
 };

diff --git a/components/molecules/TopUsersPanel/top-user-panel.tsx b/components/molecules/TopUsersPanel/top-user-panel.tsx
@@ -6,7 +6,7 @@ interface TopUsersPanelProps {
 }
 const TopUsersPanel = ({ users }: TopUsersPanelProps) => {
   return (
-    <div className="flex flex-col max-w-xs gap-6 p-6 border rounded-xl">
+    <div className="flex flex-col max-w-xs gap-6 p-6 bg-white border rounded-xl">
       <h2 className="pb-2 text-2xl border-b">Top Users</h2>
       {users.map((user, i) => (
         <TopUserCard key={i} {...user} />

diff --git a/next-types.d.ts b/next-types.d.ts
@@ -169,6 +169,9 @@ interface DbUser {
   readonly notification_count: number;
   readonly languages: { [lang]: number };
   readonly first_opened_pr_at: string;
+  readonly followers_count: number;
+  readonly following_count: number;
+  readonly highlights_count: number;
 }
 
 interface DbHighlight {

diff --git a/pages/feed/index.tsx b/pages/feed/index.tsx
@@ -9,6 +9,7 @@ import { useFetchAllHighlights } from "lib/hooks/useFetchAllHighlights";
 import { useFetchHighlightRepos } from "lib/hooks/useFetchHiglightRepos";
 import useFetchAllEmojis from "lib/hooks/useFetchAllEmojis";
 import { useFetchFollowersHighlightRepos } from "lib/hooks/useFetchFollowingHighlightRepos";
+import { useFetchUser } from "lib/hooks/useFetchUser";
 
 import { WithPageLayout } from "interfaces/with-page-layout";
 import ProfileLayout from "layouts/profile";
@@ -24,6 +25,7 @@ import Pagination from "components/molecules/Pagination/pagination";
 import PaginationResults from "components/molecules/PaginationResults/pagination-result";
 import FollowingHighlightWrapper from "components/organisms/FollowersHighlightWrapper/following-highlight-wrapper";
 import HomeHighlightsWrapper from "components/organisms/HomeHighlightsWrapper/home-highlights-wrapper";
+import UserCard, { MetaObj } from "components/atoms/UserCard/user-card";
 
 type activeTabType = "home" | "following";
 type highlightReposType = { repoName: string; repoIcon: string; full_name: string };
@@ -50,8 +52,17 @@ const Feeds: WithPageLayout<HighlightSSRProps> = (props: HighlightSSRProps) => {
 
   const { data: followersRepo } = useFetchFollowersHighlightRepos();
 
-  const { data, mutate, setPage, isError, isLoading, meta } = useFetchAllHighlights(selectedRepo);
+  const { data, mutate, setPage, isLoading, meta } = useFetchAllHighlights(selectedRepo);
   const { data: emojis } = useFetchAllEmojis();
+  const { data: loggedInUser, isLoading: loggedInUserLoading } = useFetchUser(user?.user_metadata.user_name as string);
+
+  const { followers_count, following_count, highlights_count } = loggedInUser || {};
+
+  const userMetaArray = [
+    { name: "Followers", count: followers_count ?? 0 },
+    { name: "Following", count: following_count ?? 0 },
+    { name: "Highlights", count: highlights_count ?? 0 },
+  ];
 
   const repoTofilterList = (repos: { full_name: string }[]): highlightReposType[] => {
     const filtersArray = repos.map(({ full_name }) => {
@@ -111,7 +122,19 @@ const Feeds: WithPageLayout<HighlightSSRProps> = (props: HighlightSSRProps) => {
         image={props?.ogImage}
         twitterCard="summary_large_image"
       />
-      <div className="container flex flex-col gap-12 px-2 pt-12 mx-auto md:px-16 lg:justify-end md:flex-row">
+      <div className="container flex flex-col gap-16 px-2 pt-12 mx-auto md:px-16 lg:justify-end md:flex-row">
+        <div className="flex-col flex-1 hidden gap-8 mt-12 md:flex">
+          {user && (
+            <div>
+              <UserCard
+                loading={loggedInUserLoading}
+                username={loggedInUser?.login as string}
+                meta={userMetaArray as MetaObj[]}
+                name={loggedInUser?.name as string}
+              />
+            </div>
+          )}
+        </div>
         {singleHighlight && (
           <Dialog
             open={openSingleHighlight}
@@ -165,7 +188,7 @@ const Feeds: WithPageLayout<HighlightSSRProps> = (props: HighlightSSRProps) => {
             setActiveTab(value as activeTabType);
           }}
           defaultValue="home"
-          className="flex-1 lg:pl-[21.875rem]"
+          className="md:flex-[2] "
         >
           <TabsList className={clsx("justify-start  w-full border-b", !user && "hidden")}>
             <TabsTrigger
@@ -222,7 +245,7 @@ const Feeds: WithPageLayout<HighlightSSRProps> = (props: HighlightSSRProps) => {
             <FollowingHighlightWrapper selectedFilter={selectedRepo} emojis={emojis} />
           </TabsContent>
         </Tabs>
-        <div className="hidden mt-10 md:block">
+        <div className="flex-1 hidden mt-10 md:block">
           {repoList && repoList.length > 0 && (
             <HighlightsFilterCard selectedFilter={selectedRepo} setSelected={setSelectedRepo} repos={repoList} />
           )}